EXCEL網(wǎng)頁數(shù)據(jù)萬能導(dǎo)入方法，學(xué)會了保證不虧

創(chuàng)作者：盧子轉(zhuǎn)自： Excel不加班

Excel除了自己錄入的數(shù)據(jù)外，還有一些是從系統(tǒng)或者網(wǎng)頁導(dǎo)入。

今天，盧子以東方財(cái)富網(wǎng)，招商銀行高管增持股票這個(gè)網(wǎng)址為例進(jìn)行說明。

網(wǎng)址：

http://data.eastmoney.com/executive/600036.html

通常，需要這些數(shù)據(jù)，都是選擇區(qū)域，然后復(fù)制，粘貼到Excel。

這里分享一個(gè)新方法。

Step 01 點(diǎn)數(shù)據(jù)，自網(wǎng)站，將網(wǎng)址粘貼進(jìn)去，確定。

Step 02 選擇Table 0，點(diǎn)轉(zhuǎn)換數(shù)據(jù)，進(jìn)入PQ編輯器。

說明，有的網(wǎng)頁有很多個(gè)Table，這個(gè)可以根據(jù)自己的需求選擇。

Step 03 可以進(jìn)行處理，不處理也行，直接關(guān)閉并上載。

以上純屬技術(shù)交流，不構(gòu)成投資建議，股市有風(fēng)險(xiǎn)。

ue+.NetCore前后端分離，支持對前端、后臺基礎(chǔ)業(yè)務(wù)代碼擴(kuò)展的快速發(fā)開框架

框架可直上手開發(fā)這些功能

Vol.WebApi類庫可獨(dú)立用于restful api服務(wù)單獨(dú)部署,用于其他系統(tǒng)單獨(dú)提供接口,直接上手編寫業(yè)務(wù)代碼即可。
Vue+Vol.WebApi 可用于現(xiàn)有框架前后端分離進(jìn)行開發(fā)
Vol.Web類庫可用于傳統(tǒng)MVC+Razor方式進(jìn)行項(xiàng)目開發(fā)
Vol.Builder類庫可作為一個(gè)獨(dú)立的代碼生成器,可生成cshtml頁面、Vue頁面、Model文件、Service與Repository.cs業(yè)務(wù)處理代碼類
可作為一個(gè)獨(dú)立站點(diǎn)來發(fā)布Editor編輯器生成的靜態(tài)html網(wǎng)頁.

框架特點(diǎn)

支持前端、后臺基礎(chǔ)業(yè)務(wù)代碼動態(tài)擴(kuò)展，可在現(xiàn)有框架增、刪、改、查、導(dǎo)入、導(dǎo)出、審核基礎(chǔ)業(yè)務(wù)上擴(kuò)展復(fù)雜的業(yè)務(wù)代碼
基本業(yè)務(wù)全部由框架完成，上手即可對基礎(chǔ)業(yè)務(wù)以外的代碼進(jìn)行擴(kuò)展
上手簡單，需要.net core2.1、VsCode mysql/sqlservcer 2012、redis(可選) 及以上版本的開發(fā)環(huán)境
學(xué)習(xí)成本低，封裝了常用可擴(kuò)展組件及Demo(前端基于Iview/Element-UI組件進(jìn)行了二次封裝、后臺提供了大量的擴(kuò)展方法)
開發(fā)效率高,內(nèi)定制開發(fā)的代碼生成器,生成前端(Vue、后臺代碼),代碼生成器已完成90%以上的重復(fù)工作，只需要在提供的擴(kuò)展類型中實(shí)現(xiàn)其他業(yè)務(wù)
前端vue頁面表單下拉/多選框完成自動綁定數(shù)據(jù)源，不需要寫任何代碼,并支持?jǐn)U展自定開發(fā)綁定。
后臺已完成權(quán)限、菜單、JWT等內(nèi)部功能

如果你沒有做過webpack+vue工程化開發(fā)項(xiàng)目，可能會剛開始相當(dāng)不適應(yīng)，或者安裝環(huán)境總是出問題，但只要你熟悉開發(fā)流程后，你會發(fā)現(xiàn)采用Vue開發(fā)比Jquery爽太多了。上手項(xiàng)目需重點(diǎn)了解基礎(chǔ)Vue語法，特別是了解組件、路由及import的使用

開發(fā)及依賴環(huán)境

VS2017 、.NetCore2.1 、EFCore2.1、JWT、Dapper、Autofac、SqlServer/MySql、Redis(可選，沒有redis的在appsetting.json中不用配置，默認(rèn)使用內(nèi)置IMemory)、

VsCode、Vue2.0（webpack、node.js,如果沒有此環(huán)境自行搜索:vue webpack npm)、Vuex、axios、promise、IView、Element-ui

項(xiàng)目地址：https://github.com/cq-panda/Vue.NetCore

們經(jīng)常寫 HTML 、 CSS 和 JavaScript ，寫好這些之后，我們就會在瀏覽器中看到頁面，那瀏覽器究竟在這背后做了一些什么事情呢？本篇文章將揭曉答案！

了解瀏覽器的渲染原理是我們在通往更深層次的前端開發(fā)中不可缺少的，它可以讓我們從更深層次、角度去考慮性能優(yōu)化等～

下面進(jìn)入正文～

進(jìn)程、線程

瀏覽器會分配一個(gè)線程“自上而下，從左到右”依次解析和渲染代碼，那么進(jìn)程和線程是什么，它們之間有著怎樣的關(guān)系呢？

進(jìn)程

一個(gè)進(jìn)程就是一個(gè)程序運(yùn)行的實(shí)例。當(dāng)啟動一個(gè)程序的時(shí)候，操作系統(tǒng)會為該程序創(chuàng)建一塊內(nèi)存，用來存放代碼，運(yùn)行中的數(shù)據(jù)和一個(gè)執(zhí)行任務(wù)的主線程，這樣的一個(gè)運(yùn)行環(huán)境就叫進(jìn)程

線程

線程不能單獨(dú)存在，它是由進(jìn)程來啟動和管理的。線程依附于進(jìn)程，進(jìn)程中使用多線程并行處理能提升運(yùn)算效率

兩者之間的關(guān)系

1、進(jìn)程中的任意一線程執(zhí)行出錯(cuò)，都會導(dǎo)致整個(gè)進(jìn)程的崩潰

2、線程之間可以共享數(shù)據(jù)

3、當(dāng)一個(gè)進(jìn)程關(guān)閉后，操作系統(tǒng)會回收進(jìn)程所占用的內(nèi)存

4、進(jìn)程之間的內(nèi)容相互隔離

渲染機(jī)制

從HTML、CSS和JavaScript開始

了解瀏覽器的渲染原理，我們就要從理解 HTML 、 CSS 和 JavaScrip 開始，我們先來看一張圖

HTML (超文本標(biāo)記語言)，顧名思義，由標(biāo)記（標(biāo)簽）和文本組成，每個(gè)標(biāo)簽都有自己的語意，瀏覽器會根據(jù)標(biāo)簽和文本展示對應(yīng)的內(nèi)容。

CSS (層疊樣式表)，由選擇器和屬性組成，它可以改變 HTML 的樣式，比如上圖中，我們改變了 span 的顏色由藍(lán)色為綠色。

JavaScript ，我們可以通過 JS 完成很多事情，例如上圖中修改樣式。

下面開始分析渲染的原理

渲染流水線

渲染模塊由于渲染的機(jī)制的復(fù)雜，被劃分為了很多子階段，輸入的 HTML 經(jīng)過這些子階段，最后會輸出為像素。這樣的處理流程就叫做 渲染流水線

按照渲染的時(shí)間順序，流水線可分為幾個(gè)子階段：構(gòu)建 DOM 樹、樣式計(jì)算、布局階段、分層、繪制、分塊、光柵化和合成

構(gòu)建DOM樹

由于瀏覽器無法直接理解和使用 HTML ,所以需要將 HTML 轉(zhuǎn)換為瀏覽器能夠理解的結(jié)構(gòu)（ DOM 樹）

樹結(jié)構(gòu)示意圖

DOM樹的構(gòu)建過程

我們來分析一下下面這段代碼會構(gòu)建出一棵什么樣的 DOM 樹

我們先將上面的代碼運(yùn)行，然后在瀏覽器控制臺輸入 document ，看看會有什么效果

我們一層級一層級的打開就會看到如上圖的效果，我們可以根據(jù)這每一層級展開的效果，繪制出一棵 DOM 樹結(jié)構(gòu)，如下：

接下來，我們試一下利用 JS 修改一下內(nèi)容，看有什么改變：

我們可以看到“瀏覽器”的文字變成了“chrome”

再來看一下 DOM 樹是否有改變

我們看到在“瀏覽器”的位置換成了“chrome”，那么如何讓 DOM 節(jié)點(diǎn)擁有樣式？

樣式計(jì)算

樣式計(jì)算，顧名思義，就是 計(jì)算出 DOM 節(jié)點(diǎn)中每個(gè)元素的具體樣式 ，這個(gè)階段會分為三部分：

把 CSS 轉(zhuǎn)換為瀏覽器能夠理解的結(jié)構(gòu)
轉(zhuǎn)換樣式表中的屬性值，使其標(biāo)準(zhǔn)化
計(jì)算出 DOM 樹中每個(gè)節(jié)點(diǎn)的樣式

CSS樣式來源

link 導(dǎo)入外部樣式資源

瀏覽器會新開辟一個(gè)線程，去服務(wù)器獲取對應(yīng)的資源文件（不阻礙主線程的渲染）

style 內(nèi)嵌樣式

從上到下解析，解析完繼續(xù)解析 DOM 結(jié)構(gòu)。在真實(shí)項(xiàng)目中，如果 css 代碼不是很多，或是移動端項(xiàng)目，我們應(yīng)該使用內(nèi)嵌式，以此來減少 http 資源的請求，提高頁面渲染速度

行內(nèi)樣式
@import 導(dǎo)入

它是同步的，不會開辟新線程去加載資源文件，而是讓主線程去獲取，這阻礙 DOM 結(jié)構(gòu)的繼續(xù)渲染；只有把外部樣式導(dǎo)入進(jìn)來，并且解析后，才會繼續(xù)渲染 DOM 結(jié)構(gòu)

把CSS轉(zhuǎn)換為瀏覽器能夠理解的結(jié)構(gòu)

瀏覽器就像不能理解 HTML 一樣，不理解 CSS ，所以當(dāng)渲染引擎接收到 CSS 文件時(shí)，會執(zhí)行轉(zhuǎn)換操作，將 CSS 文本轉(zhuǎn)換為瀏覽器可以理解的 styleSheets 結(jié)構(gòu)。

在 HTML 中，在瀏覽器中輸入 document 可以查看 html 的結(jié)構(gòu)。在 css 中，可以輸入 document.styleSheets 看到 css 的結(jié)構(gòu)

現(xiàn)在的結(jié)構(gòu)是空的，我們來加一些樣式，看看效果

轉(zhuǎn)換樣式表中的屬性值，使其標(biāo)準(zhǔn)化

屬性值標(biāo)準(zhǔn)化就是將所有值轉(zhuǎn)換為渲染引擎容易理解的、標(biāo)準(zhǔn)化的計(jì)算值。我們大致看一下效果：

標(biāo)準(zhǔn)化前

body {
    font-size: 2em;
    color: black;
    font-weight: bold;
    ...
}
復(fù)制代碼

標(biāo)準(zhǔn)化后

body {
    font-size: 16px;
    color: rgb(0, 0, 0);
    font-weight: 700;
    ...
}
復(fù)制代碼

計(jì)算出DOM樹中每個(gè)節(jié)點(diǎn)的具體樣式

樣式計(jì)算有兩個(gè)CSS的規(guī)則：繼承規(guī)則和層疊規(guī)則

CSS繼承規(guī)則

CSS 繼承就是每個(gè) DOM 節(jié)點(diǎn)都包含有父節(jié)點(diǎn)的樣式。我們來看一下下面這段代碼中如何應(yīng)用到 DOM 節(jié)點(diǎn)上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 {
            color: red;
        }

        div {
            color: blue;
        }

        span {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>掘金</h1>
    <div>
        <span>瀏覽器</span>
        <span>渲染原理</span>
        構(gòu)建DOM樹
    </div>
</body>
</html>
復(fù)制代碼

子節(jié)點(diǎn)會擁有父節(jié)點(diǎn)的樣式，由此我們可以畫出這樣一張圖

我們還可以打開控制臺，看一下選中 span 標(biāo)簽，都會看到哪些內(nèi)容

通過上圖，我們可看到一個(gè)元素的樣式、繼承過程等， userAgent 樣式是瀏覽器默認(rèn)的內(nèi)置樣式，如果我們不提供任何樣式，就會使用此樣式。

樣式層疊規(guī)則

層疊在 CSS 處于核心地位，它是 CSS 的一個(gè)基本特征，它定義了如何合并來自多個(gè)源的屬性值的算法。

樣式計(jì)算階段最終輸出的內(nèi)容是每個(gè) DOM 節(jié)點(diǎn)的樣式，并且保存在了 ComputedStyle 中。我們可以通過控制臺看到某個(gè) DOM 元素最終的計(jì)算樣式

布局階段

現(xiàn)在我們不知道 DOM 元素的幾何位置信息，所以現(xiàn)在我們需要計(jì)算出 DOM 樹中可見元素的幾何位置，這個(gè)計(jì)算過程就叫做布局。布局階段有兩個(gè)過程：

創(chuàng)建布局樹
布局計(jì)算

創(chuàng)建布局樹

創(chuàng)建布局樹的意思就是創(chuàng)建一棵只包含可見元素的樹。我們來看下面一段代碼創(chuàng)建布局樹的過程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 {
            color: red;
        }

        div {
            color: blue;
        }

        div span {
            font-size: 16px;
        }

        div span:last-child {
            display: none;
        }
    </style>
</head>
<body>
    <h1>掘金</h1>
    <div>
        <span>瀏覽器</span>
        <span>渲染原理</span>
        構(gòu)建DOM樹
    </div>
</body>
</html>
復(fù)制代碼

構(gòu)建布局樹的過程中， DOM 樹中所有不可見的節(jié)點(diǎn)都不會包含在這棵樹中。瀏覽器會遍歷 DOM 樹中所有能看見的節(jié)點(diǎn)，然后把這些節(jié)點(diǎn)加入到布局中；不可見的節(jié)點(diǎn)就會被忽略， head 標(biāo)簽下面的內(nèi)容、 div 下最后一個(gè) span 節(jié)點(diǎn)都不會在布局樹中，我們看一下這個(gè)過程圖感受一下～

布局計(jì)算

布局計(jì)算就是計(jì)算布局樹節(jié)點(diǎn)的坐標(biāo)位置。這個(gè)計(jì)算過程極為復(fù)雜。

分層

渲染引擎會為特定的節(jié)點(diǎn)生成專用的圖層，并生成一棵對應(yīng)的圖層樹。這樣做是因?yàn)轫撁嬷锌赡芎泻芏鄰?fù)雜的效果，我們可以打開控制臺看一下頁面的分層情況

我們可以看到，渲染引擎給頁面分了很多圖層，這些圖層會按照一定順序疊加在一起，形成最終的頁面

那么圖層的來源有哪些？

1、擁有層疊上下文屬性的元素會被提升為單獨(dú)的一層

層疊上下文可以使能夠使 HTML 元素具有三維的概念，這些 HTML 元素按照自身屬性的優(yōu)先級分布在垂直于這個(gè)二維平面的 z 軸上。哪些元素具有層疊上下文屬性？

2、需要剪裁的地方會被創(chuàng)建為圖層

當(dāng)我們創(chuàng)建一個(gè)有寬度和高度的 div 時(shí)，里面的文字內(nèi)容可能會超出這個(gè)區(qū)域，這時(shí)候渲染引擎會把裁剪文字內(nèi)容的一部分用于顯示在 div 區(qū)域，例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: yellow;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        我們經(jīng)常寫`HTML`、`CSS`和`JavaScript`，寫好這些之后，我們就會在瀏覽器中看到頁面，那瀏覽器究竟在這背后做了一些什么事情呢？本篇文章將揭曉答案！

        了解瀏覽器的渲染原理是我們在通往更深層次的前端開發(fā)中不可缺少的，它可以讓我們從更深層次、角度去考慮性能優(yōu)化等～
    </div>
</body>
</html>
復(fù)制代碼

運(yùn)行結(jié)果

我們再打開控制臺的 layers 看一下效果

可以看到渲染引擎為文字部分單獨(dú)創(chuàng)建了一個(gè)圖層。

在布局樹中的節(jié)點(diǎn)如果擁有對應(yīng)的圖層，這個(gè)節(jié)點(diǎn)就是一個(gè)圖層，如果沒有，這個(gè)節(jié)點(diǎn)就屬于父節(jié)點(diǎn)的圖層，如下圖：

圖層繪制

創(chuàng)建好圖層樹后，渲染引擎會繪制圖層樹中的每個(gè)圖層。渲染引擎會將圖層繪制分解為很多小的繪制指令，然后將這些指令按照順序組成待繪制列表，我們可以打開控制臺的 layers ，選擇 document 層，看一下效果

柵格化操作

柵格化就是將圖塊轉(zhuǎn)換位位圖，圖塊是柵格化執(zhí)行的最小單位。渲染進(jìn)程維護(hù)了一個(gè)柵格化的線程池，所有圖塊的柵格化都是在線程池內(nèi)執(zhí)行的。

圖層繪制列表準(zhǔn)備好之后，主線程會把這個(gè)繪制列表提交給合成線程，繪制操作由渲染引擎中的合成線程來完成。

合成線程將圖層劃分為圖塊，然后合成線程會按照視口（可見區(qū)域）附近的圖塊優(yōu)先生成位圖。

合成與顯示

所有的圖塊都被光柵化后，合成線程會生成一個(gè)繪制圖塊的命令（ DrawQuad ），然后將該命令提交給瀏覽器進(jìn)程。瀏覽器進(jìn)程里面 viz 組件用來接收 DrawQuad 命令，將其頁面內(nèi)容繪制到內(nèi)存中，最后將內(nèi)存顯示到屏幕。這個(gè)時(shí)候，我們就看到了頁面

完善渲染流水線示意圖

根據(jù)上文中描述，我們可以畫出這樣一張圖

我還在網(wǎng)上找到了另外一張圖

這兩張圖都是描述瀏覽器的渲染流程的。

在線咨詢

上一篇：HTML 顏色
下一篇：如何實(shí)現(xiàn)使用鼠標(biāo)繪制直線？

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

EXCEL網(wǎng)頁數(shù)據(jù)萬能導(dǎo)入方法，學(xué)會了保證不虧

ue+.NetCore前后端分離，支持對前端、后臺基礎(chǔ)業(yè)務(wù)代碼擴(kuò)展的快速發(fā)開框架