資訊專欄INFORMATION COLUMN
摘要：異步請(qǐng)求線程在在連接后是通過瀏覽器新開一個(gè)線程請(qǐng)求，將檢測(cè)到狀態(tài)變更時(shí)，如果設(shè)置有回調(diào)函數(shù)，異步線程就產(chǎn)生狀態(tài)變更事件放到引擎的處理隊(duì)列中等待處理。
瀏覽器的主要功能是將用戶選擇的 web 資源呈現(xiàn)出來，它需要從服務(wù)器請(qǐng)求資源，并將其顯示在瀏覽器窗口中，資源的格式通常是 HTML，也包括 PDF、image 及其他格式。
瀏覽器的線程瀏覽器是多線程的，它們?cè)趦?nèi)核制控下相互配合以保持同步。一個(gè)瀏覽器至少實(shí)現(xiàn)三個(gè)常駐線程：JavaScript 引擎線程，GUI 渲染線程，瀏覽器事件觸發(fā)線程。
GUI 渲染線程：負(fù)責(zé)渲染瀏覽器界面 HTML 元素，當(dāng)界面需要重繪（Repaint）或由于某種操作引發(fā)回流（reflow）時(shí)，該線程就會(huì)執(zhí)行。在 Javascript 引擎運(yùn)行腳本期間，GUI 渲染線程都是處于掛起狀態(tài)的，也就是說被”凍結(jié)”了。
JavaScript 引擎線程：主要負(fù)責(zé)處理 Javascript 腳本程序
定時(shí)器觸發(fā)線程：瀏覽器定時(shí)計(jì)數(shù)器并不是由 JavaScript 引擎計(jì)數(shù)的， JavaScript 引擎是單線程的， 如果處于阻塞線程狀態(tài)就會(huì)影響記計(jì)時(shí)的準(zhǔn)確， 因此瀏覽器通過多帶帶線程來計(jì)時(shí)并觸發(fā)定時(shí)。
事件觸發(fā)線程：當(dāng)一個(gè)事件被觸發(fā)時(shí)該線程會(huì)把事件添加到待處理隊(duì)列的隊(duì)尾，等待 JS 引擎的處理。這些事件包括當(dāng)前執(zhí)行的代碼塊如定時(shí)任務(wù)、瀏覽器內(nèi)核的其他線程如鼠標(biāo)點(diǎn)擊、AJAX 異步請(qǐng)求等。由于 JS 的單線程關(guān)系所有這些事件都得排隊(duì)等待 JS 引擎處理。定時(shí)塊任何和 ajax 請(qǐng)求等這些異步任務(wù)，事件觸發(fā)線程只是在到達(dá)定時(shí)時(shí)間或者是 ajax 請(qǐng)求成功后，把回調(diào)函數(shù)放到事件隊(duì)列當(dāng)中。
異步 HTTP 請(qǐng)求線程：在 XMLHttpRequest 在連接后是通過瀏覽器新開一個(gè)線程請(qǐng)求， 將檢測(cè)到狀態(tài)變更時(shí)，如果設(shè)置有回調(diào)函數(shù)，異步線程就產(chǎn)生狀態(tài)變更事件放到 JavaScript 引擎的處理隊(duì)列中等待處理。在發(fā)起了一個(gè)異步請(qǐng)求時(shí)，http 請(qǐng)求線程則負(fù)責(zé)去請(qǐng)求服務(wù)器，有了響應(yīng)以后，事件觸發(fā)線程再把回到函數(shù)放到事件隊(duì)列當(dāng)中。
瀏覽器渲染流程 1.解析 html，構(gòu)建 dom 樹；解析 CSS 會(huì)產(chǎn)生 CSS 規(guī)則樹瀏覽器解析 HTML 文檔的源碼，然后構(gòu)造出一個(gè) DOM 樹，DOM 樹的構(gòu)建過程是一個(gè)深度遍歷的過程，當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建好以后才會(huì)去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)。
瀏覽器對(duì) CSS 文件內(nèi)容進(jìn)行解析，一般來說，瀏覽器會(huì)先查找內(nèi)聯(lián)樣式，然后是 CSS 文件中定義的樣式，最后再是瀏覽器默認(rèn)的樣式，構(gòu)建 CSS Rule Tree。
2.構(gòu)建（construct） render 樹根據(jù) DOM 樹和 CSSOM 樹來構(gòu)造 Rendering Tree。注意：Rendering Tree 渲染樹并不等同于 DOM 樹，因?yàn)橐恍┫?Header 或 display:none 的東西就沒必要放在渲染樹中了。
3.布局（layout） render 樹有了 Render Tree，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點(diǎn)、各個(gè)節(jié)點(diǎn)的 CSS 定義以及他們的從屬關(guān)系，從而去計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置。
4.繪制（painting） render 樹按照算出來的規(guī)則，通過顯卡，把內(nèi)容畫到屏幕上。
5.回流（reflow）當(dāng)瀏覽器發(fā)現(xiàn)某個(gè)部分發(fā)生了點(diǎn)變化影響了布局，需要倒回去重新渲染，內(nèi)行稱這個(gè)回退的過程叫 reflow。reflow 會(huì)從 這個(gè) root frame 開始遞歸往下，依次計(jì)算所有的結(jié)點(diǎn)幾何尺寸和位置。
6.重繪（repaint）改變某個(gè)元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時(shí)，屏幕的一部分要重畫，但是元素的幾何尺寸沒有變。
瀏覽器對(duì) CSS 和 JS 的解析規(guī)則CSS：
CSS 放在 head 中會(huì)阻塞頁面的渲染（頁面的渲染會(huì)等到 css 加載完成）
CSS 阻塞 JS 的執(zhí)行 （因?yàn)?GUI 線程和 JS 線程是互斥的，因?yàn)橛锌赡?JS 會(huì)操作 CSS）
CSS 不阻塞外部腳本的加載（不阻塞 JS 的加載，但阻塞 JS 的執(zhí)行，因?yàn)闉g覽器都會(huì)有預(yù)先掃描器）
JS：
直接引入的 JS 會(huì)阻塞頁面的渲染（GUI 線程和 JS 線程互斥）
異步加載的 JS（script 標(biāo)簽中添加 defer 屬性） 不阻塞頁面的渲染
異步加載的 JS（script 標(biāo)簽中添加 async屬性），下載過程不阻塞頁面渲染，當(dāng)下載完成后立即執(zhí)行，阻塞頁面渲染
JS 不阻塞資源的加載
JS 順序執(zhí)行，阻塞后續(xù) JS 邏輯的執(zhí)行
HTML 頁面加載和解析流程用戶輸入網(wǎng)址（假設(shè)是個(gè) html 頁面，并且是第一次訪問），瀏覽器向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器返回 html 文件；
瀏覽器開始載入 html 代碼，發(fā)現(xiàn)＜ head ＞標(biāo)簽內(nèi)有一個(gè)＜ link ＞標(biāo)簽引用外部 CSS 文件；
瀏覽器發(fā)出 CSS 文件的請(qǐng)求，服務(wù)器返回這個(gè) CSS 文件；（同時(shí) GUI 渲染線程繼續(xù)執(zhí)行，互不影響）
瀏覽器繼續(xù)載入 html 中＜ body ＞部分的代碼，并且 CSS 文件已經(jīng)拿到手了，開始渲染頁面；
瀏覽器在代碼中發(fā)現(xiàn)一個(gè)＜ img ＞標(biāo)簽引用了一張圖片，向服務(wù)器發(fā)出請(qǐng)求。此時(shí)瀏覽器不會(huì)等到圖片下載完，而是繼續(xù)渲染后面的代碼；
服務(wù)器返回圖片文件，由于圖片占用了一定面積，影響了后面段落的排布，因此瀏覽器需要回過頭來重新渲染這部分代碼；
瀏覽器發(fā)現(xiàn)了一個(gè)包含一行 Javascript 代碼的＜ script ＞標(biāo)簽，直接運(yùn)行；
Javascript 腳本操作某個(gè)元素，它命令瀏覽器隱藏掉代碼中的某個(gè)標(biāo)簽 （style.display=”none”）。瀏覽器會(huì)重新渲染這部分代碼；
遇到 ＜/html ＞，流程結(jié)束；
當(dāng)用戶操作，頁面產(chǎn)生交互，瀏覽器發(fā)現(xiàn)某個(gè)部分發(fā)生了點(diǎn)變化影響了布局，瀏覽器回流（reflow）；改變某個(gè)元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時(shí)，瀏覽器重繪（repaint）。
HTML 頁面加載優(yōu)化頁面減肥。頁面的肥瘦是影響加載速度最重要的因素刪除不必要的空格、注釋。將 inline 的 script 和 css 移到外部文件，可以使用 HTML Tidy 來給 HTML 減肥，還可以使用一些壓縮工具來給 JavaScript 減肥；
減少文件數(shù)量。減少頁面上引用的文件數(shù)量可以減少 HTTP 連接數(shù)。許多 JavaScript、CSS 文件可以合并最好合并；
減少域名查詢。DNS 查詢和解析域名也是消耗時(shí)間的，所以要減少對(duì)外部 JavaScript、CSS、圖片等資源的引用，不同域名的使用越少越好；
緩存重用數(shù)據(jù)；
優(yōu)化頁面元素加載順序。首先加載頁面最初顯示的內(nèi)容和與之相關(guān)的 JavaScript 和 CSS，然后加載 DHTML 相關(guān)的東西，像什么不是最初顯示相關(guān)的圖片、flash、視頻等很肥的資源就最后加載；
減少 inline JavaScript 的數(shù)量。瀏覽器 parser 會(huì)假設(shè) inline JavaScript 會(huì)改變頁面結(jié)構(gòu)，所以使用 inline JavaScript 開銷較大，不要使用 document.write()這種輸出內(nèi)容的方法，使用現(xiàn)代 W3C DOM 方法來為現(xiàn)代瀏覽器處理頁面內(nèi)容；
使用現(xiàn)代 CSS 和合法的標(biāo)簽。使用現(xiàn)代 CSS 來減少標(biāo)簽和圖像，例如使用現(xiàn)代 CSS+文字完全可以替代一些只有文字的圖片，使用合法的標(biāo)簽避免瀏覽器解析 HTML 時(shí)做“error correction”等操作，還可以被 HTML Tidy 來給 HTML 減肥；
不要使用嵌套 tables；
指定圖像和 tables 的大小。如果瀏覽器可以立即決定圖像或 tables 的大小，那么它就可以馬上顯示頁面而不要重新做一些布局安排的工作，這不僅加快了頁面的顯示，也預(yù)防了頁面完成加載后布局的一些不當(dāng)?shù)母淖儭?/p> 參考文章
網(wǎng)頁在瀏覽器上的渲染過程
性能優(yōu)化——CSS和JS的加載和執(zhí)行
瀏覽器渲染原理及流程
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103337.html
摘要：最優(yōu)化渲染路徑，實(shí)際上只要聚焦三件事情最小化關(guān)鍵資源的數(shù)量最小化關(guān)鍵字節(jié)數(shù)最小化關(guān)鍵路徑的長(zhǎng)度理解頁面加載速度的測(cè)量辦法當(dāng)百度談?wù)擁撁婕虞d速度時(shí)，他們并不是指加載一個(gè)網(wǎng)頁的總時(shí)間。 張超 — MAY 21, 2015 經(jīng)常有站長(zhǎng)、開發(fā)者、運(yùn)維疑惑：為什么我們的后臺(tái)服務(wù)器很快，但是用戶要看網(wǎng)頁里面的內(nèi)容卻需要很長(zhǎng)時(shí)間？我們?cè)谏弦黄恼隆豆肢F大作戰(zhàn): 解析網(wǎng)站打開慢的原因》中簡(jiǎn)單介紹了影...
摘要：模塊和將下面的渲染機(jī)制，安全機(jī)制，插件機(jī)制等等隱藏起來，提供一個(gè)接口層。進(jìn)行網(wǎng)頁的渲染進(jìn)程，可能有多個(gè)。最后進(jìn)程將結(jié)果由線程傳遞給進(jìn)程最后，進(jìn)程接收到結(jié)果并將結(jié)果繪制出來。 這是之前在簡(jiǎn)書上面的處女作，也搬過來了，以后就一直在 segmentfault 上面寫文章了，webkit技術(shù)內(nèi)幕-朱永盛是我大四買的書，很舊的一本書了，當(dāng)時(shí)只看了一點(diǎn)點(diǎn)，一直沒繼續(xù)看完它，現(xiàn)在才看完，，，說來慚愧...
摘要：響應(yīng)由三個(gè)部分組成，分別是狀態(tài)行消息報(bào)頭響應(yīng)正文。詳情參考小汪之前寫的文章瀏覽器內(nèi)核之解釋器和模型解釋解釋過程是指從字符串經(jīng)過解釋器處理后變成渲染引擎內(nèi)部規(guī)則的表示過程。 showImg(https://segmentfault.com/img/remote/1460000016404846); 前言 小汪最近在看【W(wǎng)ebKit 技術(shù)內(nèi)幕】一書，說實(shí)話，這本書寫的太官方了，不通俗易懂。...
摘要：網(wǎng)頁的渲染方式主要有兩種軟件渲染和硬件加速渲染。而使用合成化的渲染技術(shù)，以使用軟件繪圖的合成化渲染為例，對(duì)于使用繪制的層，其結(jié)果保存在內(nèi)存中，之后傳輸?shù)街羞M(jìn)行合成。 Webkit 渲染基礎(chǔ)與硬件加速 當(dāng)瀏覽器加載一個(gè) html 文件并對(duì)它進(jìn)行解析完畢后，內(nèi)核就會(huì)生成一個(gè)極為重要的數(shù)據(jù)結(jié)構(gòu)即 DOM 樹，樹上每一個(gè)節(jié)點(diǎn)都對(duì)應(yīng)著網(wǎng)頁里面的某一個(gè)元素，并且開發(fā)人員也可以通過 JavaScri...
摘要：異步請(qǐng)求線程在在連接后是通過瀏覽器新開一個(gè)線程請(qǐng)求，將檢測(cè)到狀態(tài)變更時(shí)，如果設(shè)置有回調(diào)函數(shù)，異步線程就產(chǎn)生狀態(tài)變更事件放到引擎的處理隊(duì)列中等待處理。 瀏覽器的主要功能是將用戶選擇的 web 資源呈現(xiàn)出來，它需要從服務(wù)器請(qǐng)求資源，并將其顯示在瀏覽器窗口中，資源的格式通常是 HTML，也包括 PDF、image 及其他格式。 瀏覽器的線程 瀏覽器是多線程的，它們?cè)趦?nèi)核制控下相互配合以保持同...
閱讀 3056·2023-04-25 20:09
閱讀 3328·2021-11-23 09:51
閱讀 1981·2021-11-22 15:25
閱讀 3362·2021-11-18 10:02
閱讀 2761·2021-09-27 13:56
閱讀 1317·2019-08-30 15:44
閱讀 1158·2019-08-30 13:21
閱讀 3332·2019-08-30 11:05
