整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
能夠寫出基本的頁面（里面包含圖片、各種標簽和鏈接）
我們主要用的開發工具有chrome、hbuilder、Photoshop
瀏覽器是網頁顯示、運行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱為五大瀏覽器。
瀏覽器內核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 ：它負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。
JS 引擎 則是解析 Javascript 語言，執行 javascript語言來實現網頁的動態效果。
最開始渲染引擎和 JS 引擎并沒有區分得很明確，后來 JS 引擎越來越獨立，內核就傾向于只指渲染引擎。有一個網頁標準計劃小組制作了一個 ACID 來測試引擎的兼容性和性能。內核的種類很多，如果加上沒什么人使用的非商業的免費內核，可能會有10多種，但是常見的瀏覽器內核可以分這四種：Trident、Gecko、Blink、Webkit。
了解一點：移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核。
Android手機而言，使用率最高的就是Webkit內核，大部分國產瀏覽器宣稱的自己的內核，基本上也是屬于webkit二次開發。
iOS以及WP7平臺上，由于系統原因，系統大部分自帶瀏覽器內核，一般是Safari或者IE內核Trident的
結構標準：結構用于對網頁元素進行整理和分類，咱們主要學的是HTML。 最重要
表現標準：表現用于設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行為標準：行為是指網頁模型的定義及交互的編寫，咱們主要學的是 Javascript
HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標簽語言”。是用來描述網頁的一種語言。
所謂超文本，因為它可以加入圖片、聲音、動畫、多媒體等內容，不僅如此，它還可以從一個文件跳轉到另一個文件，與世界各地主機的文件連接。
<h1> 我是一個大標題 </h1>
注意： 體會 文本 標簽 語言 幾個詞語
總結： HTML 作用就是用標記標簽來描述網頁，把網頁內容在瀏覽器中展示出來。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>1.HTML標簽：
作用所有HTML中標簽的一個根節點。 最大的標簽 根標簽
2 head標簽： 文檔的頭部
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、在 Web 中的位置以及和其他文檔的關系等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。
注意在head標簽中我們必須要設置的標簽是title
3.title標簽： 文檔的標題
作用：讓頁面擁有一個屬于自己的標題。
4.body標簽：文檔的主體 以后我們的頁面內容 基本都是放到body里面的
body 元素包含文檔的所有內容（比如文本、超鏈接、圖像、表格和列表等等。）
在HTML頁面中，帶有“< >”符號的元素被稱為HTML標簽，如上面提到的 HTML、head、body都是HTML骨架結構標簽。所謂標簽就是放在“< >” 標簽符中表示某個功能的編碼命令，也稱為HTML標簽或 HTML元素
1.雙標簽
<標簽名> 內容 </標簽名>
該語法中“<標簽名>”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”，“</標簽名>” 表示該標簽的作用結束，一般稱為“結束標簽（end tag）”。和開始標簽相比，結束標簽只是在前面加了一個關閉符“/”。
比如 <body>我是文字 </body>
2.單標簽
<標簽名 />
單標簽也稱空標簽，是指用一個標簽符號即可完整地描述某個功能的標簽。
比如 <br />
標簽的相互關系就分為兩種：
1.嵌套關系
<head> <title> </title> </head>
2.并列關系
<head></head> <body></body>
首先 HTML和CSS是兩種完全不同的語言，我們學的是結構，就只寫HTML標簽，認識標簽就可以了。 不會再給結構標簽指定樣式了。
HTML標簽有很多，這里我們學習最為常用的，后面有些較少用的，我們可以查下手冊就可以了。
排版標簽
單詞縮寫： head 頭部. 標題 title 文檔標題
為了使網頁更具有語義化，我們經常會在頁面中用到標題標簽，HTML提供了6個等級的標題，即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
其基本語法格式如下：
<hn> 標題文本 </hn>
<p> 文本內容 </p>
<hr />是單標簽
<br />
div span 是沒有語義的 是我們網頁布局主要的2個盒子 css+div
div 就是 division 的縮寫 分割， 分區的意思 其實有很多div 來組合網頁。
span, 跨度，跨距；范圍
語法格式：
<div> 這是頭部 </div> <span>今日價格</span>
在網頁中，有時需要為文字設置粗體、斜體或下劃線效果，這時就需要用到HTML中的文本格式化標簽，使文字以特殊的方式顯示。
b i s u 只有使用 沒有 強調的意思 strong em del ins 語義更強烈
使用HTML制作網頁時，如果想讓HTML標簽提供更多的信息，可以使用HTML標簽的屬性加以設置。其基本語法格式如下：
<標簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標簽名>
在上面的語法中，
1.標簽可以擁有多個屬性，必須寫在開始標簽中，位于標簽名后面。
2.屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開。
3.任何標簽的屬性都有默認值，省略該屬性則取默認值。
采取 鍵值對 的格式 key="value" 的格式
比如:
<hr width="400" />
屬性 是 寬度
值 是 400
單詞縮寫： image 圖像
HTML網頁中任何元素的實現都要依靠HTML標簽，要想在網頁中顯示圖像就需要使用圖像標簽，接下來將詳細介紹圖像標簽<img />以及和他相關的屬性。其基本語法格式如下：
該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標簽的必需屬性。
<img src="圖像URL" />
單詞縮寫： anchor 的縮寫 [???k?(r)] 。基本解釋 錨, 鐵錨 的
在HTML中創建超鏈接非常簡單，只需用標簽環繞需要被鏈接的對象即可，其基本語法格式如下：
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>
href：用于指定鏈接目標的url地址，當為標簽應用href屬性時，它就具有了超鏈接的功能。 Hypertext Reference的縮寫。意思是超文本引用
target：用于指定鏈接頁面的打開方式，其取值有self和blank兩種，其中self為默認值，blank為在新窗口中打開方式。
注意：
1.外部鏈接 需要添加 http:// www.baidu.com
2.內部鏈接 直接鏈接內部頁面名稱即可 比如 < a href="index.html"> 首頁
3.如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。
4.不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。
通過創建錨點鏈接，用戶能夠快速定位到目標內容。
創建錨點鏈接分為兩步：
1.使用“a href=”#id名>“鏈接文本"</a>創建鏈接文本（被點擊的） <a href="#two"> 2.使用相應的id名標注跳轉目標的位置。 <h3 id="two">第2集</h3>
base 可以設置整體鏈接的打開狀態
base 寫到 <head> </head> 之間
把所有的連接 都默認添加 target="_blank"
在HTML中還有一種特殊的標簽——注釋標簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽。其基本語法格式如下：
<!-- 注釋語句 --> ctrl + / 或者 ctrl +shift + /
注釋內容不會顯示在瀏覽器窗口中，但是作為HTML文檔內容的一部分，也會被下載到用戶的計算機上，查看源代碼時就可以看到。
實際工作中，通常新建一個文件夾專門用于存放圖像文件，這時再插入圖像，就需要采用“路徑”的方式來指定圖像文件的位置。
根目錄 當前目錄
路徑可以分為： 相對路徑和絕對路徑
以引用文件之網頁所在位置為參考基礎，而建立出的目錄路徑。因此，當保存于不同目錄的網頁引用同一個文件時，所使用的路徑將不相同，故稱之為相對路徑。
絕對路徑以Web站點根目錄為參考基礎的目錄路徑。之所以稱為絕對，意指當所有網頁引用同一個文件時，所使用的路徑都是一樣的
“D:webimglogo.gif”，或完整的網絡地址，例如“http://www.itcast.cn/images/l...”。
無序列表的各個列表項之間沒有順序級別之分，是并列的。其基本語法格式如下：
<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> ...... </ul>
注意：
有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：
<ol> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> ...... </ol>
所有特性基本與ul 一致。
但是實際工作中， 較少用 ol img src="media/1.jpg" />
定義列表常用于對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法如下：
<dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> <dd>名詞1解釋2</dd> ... <dt>名詞2</dt> <dd>名詞2解釋1</dd> <dd>名詞2解釋2</dd> ... </dl>
在HTML網頁中，要想創建表格，就需要使用表格相關的標簽。創建表格的基本語法格式如下：
<table> <tr> <td>單元格內的文字</td> ... </tr> ... </table>
在上面的語法中包含三對HTML標簽，分別為 table</table、tr</tr、td</td，他們是創建表格的基本標簽，缺一不可，下面對他們進行具體的解釋
1.table用于定義一個表格。
2.tr 用于定義表格中的一行，必須嵌套在 table標簽中，在 table中包含幾對 tr，就有幾行表格。
3.td /td：用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中，一對 <tr> </tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個單元格）。
注意：
1. <tr></tr>中只能嵌套<td></td> 2. <td></td>標簽，他就像一個容器，可以容納所有的元素
表頭一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設置了表頭的表格。設置表頭非常簡單，只需用表頭標簽th</th替代相應的單元格標簽td</td即可。
在使用表格進行布局時，可以將表格劃分為頭部、主體和頁腳（頁腳因為有兼容性問題，我們不在贅述），具體 如下所示：
<thead></thead>：用于定義表格的頭部。
必須位于<table></table> 標簽中，一般包含網頁的logo和導航等頭部信息。
<tbody></tbody>：用于定義表格的主體。
位于<table></table>標簽中，一般包含網頁中除頭部和底部之外的其他內容。
表格的標題： caption
定義和用法
caption 元素定義表格標題。
<table> <caption>我是表格標題</caption> </table>caption 標簽必須緊隨 table 標簽之后。您只能對每個表格定義一個標題。通常這個標題會被居中于表格之上。
跨行合并：rowspan 跨列合并：colspan
合并單元格的思想：
將多個內容合并的時候，就會有多余的東西，把它刪除。 例如 把 3個 td 合并成一個， 那就多余了2個，需要刪除。 公式： 刪除的個數 = 合并的個數 - 1
合并的順序 先上 先左
表格的學習要求： 能手寫表格結構，并且能合并單元格。
表單控件：
包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。
提示信息：
一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。
表單域：
他相當于一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到后臺服務器。
在上面的語法中，input /標簽為單標簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，input /標簽還可以定義很多其他的屬性，其常用屬性如下表所示。
label 標簽為 input 元素定義標注（標簽）。
作用： 用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點
如何綁定元素呢？
for 屬性規定 label 與哪個表單元素綁定。
<label for="male">Male</label> <input type="radio" name="sex" id="male" value="male">如果需要輸入大量的信息，就需要用到textarea/textarea標簽。通過textarea控件可以輕松地創建多行文本輸入框，其基本語法格式如下：
<textarea cols="每行中的字符數" rows="顯示的行數"> 文本內容 </textarea>使用select控件定義下拉菜單的基本語法格式如下
<select> <option>選項1</option> <option>選項2</option> <option>選項3</option> ... </select>注意：
在HTML中，form標簽被用于定義表單域，即創建一個表單，以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。創建表單的基本語法格式如下：
<form action="url地址" method="提交方式" name="表單名稱"> 各種表單控件 </form>常用屬性：
注意： 每個表單都應該有自己表單域。
如需轉載，請注明出處，否則將追究法律責任。
TML 表單用于收集不同類型的用戶輸入，它是一個包含表單元素的區域。
表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。今天我們主要來說說文本域和密碼域這兩個部分，希望對大家學習有所幫助喲！
本文福利后臺回復【學習】即可獲得Python、HTML等編程學習資料
HTML 表單
表單使用表單標簽 <form> 來設置:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
HTML 表單 - 輸入元素
多數情況下被用到的表單標簽是輸入標簽（<input>）。輸入類型是由類型屬性（type）定義的。
如何在 HTML 頁面創建文本域？
用戶可以在文本域中寫入文本，參考代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<p><b>注意：</b> 表單本身是不可見的。并且注意一個文本字段的默認寬度是20個字符。</p>
</body>
</html>
運行結果為
如何創建 HTML 的密碼域？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>
<p><b>注意：</b> 密碼字段中的字符是隱藏的(顯示為星號或圓圈)。</p>
</body>
</html>
運行結果如下
戳了解更多免費領取HTML試聽課~
言
這個問題已經是老生常談了，更是經常被作為面試的壓軸題出現，網上也有很多文章，但最近閑的無聊，然后就自己做了一篇筆記，感覺比之前理解更透徹了。
這篇筆記是我這兩天看了數十篇文章總結出來的，所以相對全面一點，但由于我是做前端的，所以會比較重點分析瀏覽器渲染頁面那一部分，至于其他部分我會羅列出關鍵詞，感興趣的可以自行查閱.
注意：本文的步驟是建立在，請求的是一個簡單的 HTTP 請求，沒有 HTTPS、HTTP2、最簡單的 DNS、沒有代理、并且服務器沒有任何問題的基礎上，盡管這是不切實際的。
大致流程
一、URL 解析
地址解析：
首先判斷你輸入的是一個合法的 URL 還是一個待搜索的關鍵詞，并且根據你輸入的內容進行自動完成、字符編碼等操作。
HSTS
由于安全隱患，會使用 HSTS 強制客戶端使用 HTTPS 訪問頁面。詳見：你所不知道的 HSTS[1]。
其他操作
瀏覽器還會進行一些額外的操作，比如安全檢查、訪問限制（之前國產瀏覽器限制 996.icu）。
檢查緩存
二、DNS 查詢
基本步驟
1. 瀏覽器緩存
瀏覽器會先檢查是否在緩存中，沒有則調用系統庫函數進行查詢。
2. 操作系統緩存
操作系統也有自己的 DNS緩存，但在這之前，會向檢查域名是否存在本地的 Hosts 文件里，沒有則向 DNS 服務器發送查詢請求。
3. 路由器緩存
路由器也有自己的緩存。
4. ISP DNS 緩存
ISP DNS 就是在客戶端電腦上設置的首選 DNS 服務器，它們在大多數情況下都會有緩存。
根域名服務器查詢
在前面所有步驟沒有緩存的情況下，本地 DNS 服務器會將請求轉發到互聯網上的根域，下面這個圖很好的詮釋了整個流程：
根域名服務器（維基百科）
需要注意的點
三、TCP 連接
TCP/IP 分為四層，在發送數據時，每層都要對數據進行封裝：
1. 應用層：發送 HTTP 請求
在前面的步驟我們已經得到服務器的 IP 地址，瀏覽器會開始構造一個 HTTP 報文，其中包括：
其中需要注意的點：
2. 傳輸層：TCP 傳輸報文
傳輸層會發起一條到達服務器的 TCP 連接，為了方便傳輸，會對數據進行分割（以報文段為單位），并標記編號，方便服務器接受時能夠準確地還原報文信息。
在建立連接前，會先進行 TCP 三次握手。
“關于 TCP/IP 三次握手，網上已經有很多段子和圖片生動地描述了。相關知識點：
”
3. 網絡層：IP協議查詢Mac地址
將數據段打包，并加入源及目標的IP地址，并且負責尋找傳輸路線。
判斷目標地址是否與當前地址處于同一網絡中，是的話直接根據 Mac 地址發送，否則使用路由表查找下一跳地址，以及使用 ARP 協議查詢它的 Mac 地址。
“注意：在 OSI 參考模型中 ARP 協議位于鏈路層，但在 TCP/IP 中，它位于網絡層。”
4. 鏈路層：以太網協議
以太網協議
根據以太網協議將數據分為以“幀”為單位的數據包，每一幀分為兩個部分：
Mac 地址
以太網規定了連入網絡的所有設備都必須具備“網卡”接口，數據包都是從一塊網卡傳遞到另一塊網卡，網卡的地址就是 Mac 地址。每一個 Mac 地址都是獨一無二的，具備了一對一的能力。
廣播
發送數據的方法很原始，直接把數據通過 ARP 協議，向本網絡的所有機器發送，接收方根據標頭信息與自身 Mac 地址比較，一致就接受，否則丟棄。
注意：接收方回應是單播。
“相關知識點：
”
服務器接受請求
接受過程就是把以上步驟逆轉過來，參見上圖。
四、服務器處理請求
大致流程
HTTPD
最常見的 HTTPD 有 Linux 上常用的 Apache 和 Nginx，以及 Windows 上的 IIS。
它會監聽得到的請求，然后開啟一個子進程去處理這個請求。
處理請求
接受 TCP 報文后，會對連接進行處理，對HTTP協議進行解析（請求方法、域名、路徑等），并且進行一些驗證：
重定向
假如服務器配置了 HTTP 重定向，就會返回一個 301永久重定向響應，瀏覽器就會根據響應，重新發送 HTTP 請求（重新執行上面的過程）。
“關于更多：詳見這篇文章[2]”
URL 重寫
然后會查看 URL 重寫規則，如果請求的文件是真實存在的，比如圖片、html、css、js文件等，則會直接把這個文件返回。
否則服務器會按照規則把請求重寫到 一個 REST 風格的 URL 上。
然后根據動態語言的腳本，來決定調用什么類型的動態文件解釋器來處理這個請求。
以 PHP 語言的 MVC 框架舉例，它首先會初始化一些環境的參數，根據 URL 由上到下地去匹配路由，然后讓路由所定義的方法去處理請求。
五、瀏覽器接受響應
瀏覽器接收到來自服務器的響應資源后，會對資源進行分析。
首先查看 Response header，根據不同狀態碼做不同的事（比如上面提到的重定向）。
如果響應資源進行了壓縮（比如 gzip），還需要進行解壓。
然后，對響應資源做緩存。
接下來，根據響應資源里的 MIME[3] 類型去解析響應內容（比如 HTML、Image各有不同的解析方式）。
六、渲染頁面
瀏覽器內核
不同的瀏覽器內核，渲染過程也不完全相同，但大致流程都差不多。
基本流程
6.1. HTML 解析
首先要知道瀏覽器解析是從上往下一行一行地解析的。
解析的過程可以分為四個步驟：
① 解碼（encoding）
傳輸回來的其實都是一些二進制字節數據，瀏覽器需要根據文件指定編碼（例如UTF-8）轉換成字符串，也就是HTML 代碼。
② 預解析（pre-parsing）
預解析做的事情是提前加載資源，減少處理時間，它會識別一些會請求資源的屬性，比如img標簽的src屬性，并將這個請求加到請求隊列中。
③ 符號化（Tokenization）
符號化是詞法分析的過程，將輸入解析成符號，HTML 符號包括，開始標簽、結束標簽、屬性名和屬性值。
它通過一個狀態機去識別符號的狀態，比如遇到<，>狀態都會產生變化。
④ 構建樹（tree construction）
“注意：符號化和構建樹是并行操作的，也就是說只要解析到一個開始標簽，就會創建一個 DOM 節點。”
在上一步符號化中，解析器獲得這些標記，然后以合適的方法創建DOM對象并把這些符號插入到DOM對象中。
<html><head> <title>Web page parsing</title></head><body> <div> <h1>Web page parsing</h1> <p>This is an example Web page.</p> </div></body></html>
瀏覽器容錯進制
你從來沒有在瀏覽器看過類似”語法無效”的錯誤，這是因為瀏覽器去糾正錯誤的語法，然后繼續工作。
事件
當整個解析的過程完成以后，瀏覽器會通過DOMContentLoaded事件來通知DOM解析完成。
6.2. CSS 解析
一旦瀏覽器下載了 CSS，CSS 解析器就會處理它遇到的任何 CSS，根據語法規范[4]解析出所有的 CSS 并進行標記化，然后我們得到一個規則表。
CSS 匹配規則
在匹配一個節點對應的 CSS 規則時，是按照從右到左的順序的，例如：div p { font-size :14px }會先尋找所有的p標簽然后判斷它的父元素是否為div。
所以我們寫 CSS 時，盡量用 id 和 class，千萬不要過度層疊。
6.3. 渲染樹
其實這就是一個 DOM 樹和 CSS 規則樹合并的過程。
“注意：渲染樹會忽略那些不需要渲染的節點，比如設置了display:none的節點。”
計算
通過計算讓任何尺寸值都減少到三個可能之一：auto、百分比、px，比如把rem轉化為px。
級聯
瀏覽器需要一種方法來確定哪些樣式才真正需要應用到對應元素，所以它使用一個叫做specificity的公式，這個公式會通過：
然后得出一個權重值，取最高的那個。
渲染阻塞
當遇到一個script標簽時，DOM 構建會被暫停，直至腳本完成執行，然后繼續構建 DOM 樹。
但如果 JS 依賴 CSS 樣式，而它還沒有被下載和構建時，瀏覽器就會延遲腳本執行，直至 CSS Rules 被構建。
所有我們知道：
為了避免這種情況，應該以下原則：
另外，如果要改變阻塞模式，可以使用 defer 與 async，詳見：這篇文章[5]
6.4. 布局與繪制
確定渲染樹種所有節點的幾何屬性，比如：位置、大小等等，最后輸入一個盒子模型，它能精準地捕獲到每個元素在屏幕內的準確位置與大小。
然后遍歷渲染樹，調用渲染器的 paint() 方法在屏幕上顯示其內容。
6.5. 合并渲染層
把以上繪制的所有圖片合并，最終輸出一張圖片。
6.6. 回流與重繪
回流(reflow)
當瀏覽器發現某個部分發現變化影響了布局時，需要倒回去重新渲染，會從html標簽開始遞歸往下，重新計算位置和大小。
reflow基本是無法避免的，因為當你滑動一下鼠標、resize 窗口，頁面就會產生變化。
重繪(repaint)
改變了某個元素的背景色、文字顏色等等不會影響周圍元素的位置變化時，就會發生重繪。
每次重繪后，瀏覽器還需要合并渲染層并輸出到屏幕上。
回流的成本要比重繪高很多，所以我們應該盡量避免產生回流。
比如：
6.7. JavaScript 編譯執行
大致流程
可以分為三個階段：
1. 詞法分析
JS 腳本加載完畢后，會首先進入語法分析階段，它首先會分析代碼塊的語法是否正確，不正確則拋出“語法錯誤”，停止執行。
幾個步驟：
2. 預編譯
JS 有三種運行環境：
每進入一個不同的運行環境都會創建一個對應的執行上下文，根據不同的上下文環境，形成一個函數調用棧，棧底永遠是全局執行上下文，棧頂則永遠是當前執行上下文。
創建執行上下文
創建執行上下文的過程中，主要做了以下三件事：
3. 執行
JS 線程
雖然 JS 是單線程的，但實際上參與工作的線程一共有四個：
“其中三個只是協助，只有 JS 引擎線程是真正執行的
”
注：瀏覽器對同一域名的并發連接數是有限的，通常為 6 個。
宏任務
分為：
微任務
微任務是ES6和Node環境下的，主要 API 有：Promise，process.nextTick。
微任務的執行在宏任務的同步任務之后，在異步任務之前。
代碼例子
console.log('1'); // 宏任務 同步
setTimeout(function() { console.log('2'); // 宏任務 異步})
new Promise(function(resolve) { console.log('3'); // 宏任務 同步 resolve();}).then(function() { console.log('4') // 微任務})
console.log('5') // 宏任務 同步
以上代碼輸出順序為：1,3,5,4,2
來源：4ark.me/post/b6c7c0a2.html，侵刪
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
