成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

web解析過(guò)程

MiracleWong / 1665人閱讀

摘要：所以選擇器嵌套層次越深，匹配的時(shí)間會(huì)越長(zhǎng)。加載會(huì)阻塞初次渲染對(duì)于首頁(yè)無(wú)關(guān)的樣式，需要使用適當(dāng)?shù)姆绞奖苊馄渥枞醮武秩緯?huì)阻塞頁(yè)面初次渲染使用媒體查詢，雖然加載樣式表，但只針對(duì)打印時(shí)才應(yīng)用該樣式，不會(huì)阻塞初次渲染。通過(guò)引入，可以避免阻塞。

瀏覽器渲染原理

DOM解析

DOM樹構(gòu)建
過(guò)程：
1.根據(jù)HTML文檔的內(nèi)容，根據(jù)標(biāo)簽進(jìn)行分詞Token
2.根據(jù)Token生產(chǎn)對(duì)應(yīng)的節(jié)點(diǎn)Node
3.將節(jié)點(diǎn)根據(jù)嵌套關(guān)系組合成為一棵對(duì)象節(jié)點(diǎn)樹DOM

瀏覽器解析文檔對(duì)象模型DOM是增量進(jìn)行的，無(wú)需等待整個(gè)HTML文檔加載完畢，便可以開始解析DOM

CSSOM解析會(huì)阻塞HTML Parser；JavaScript腳本文件執(zhí)行會(huì)阻塞HTML解析；CSS、JavaScript、Images和Font等靜態(tài)資源的異步加載的，渲染頁(yè)面與CSS解析與JavaScript執(zhí)行會(huì)有相互的依賴


css解析

CSSOM樹的構(gòu)建
CSSOM的解析依賴于選擇器，選擇器的匹配是從內(nèi)到外的。所以選擇器嵌套層次越深，匹配的時(shí)間會(huì)越長(zhǎng)。

CSSOM只解析可視部分body標(biāo)簽中的內(nèi)容，將所有匹配的元素共同構(gòu)建一個(gè)CSSOM樹，從根節(jié)點(diǎn)一次向下，所有節(jié)點(diǎn)的屬性向下繼承

RenderTree樹的構(gòu)建

利用DOM和CSSOM組合構(gòu)建生成RenderTree，對(duì)應(yīng)Recaculate Style

RenderTree中包含所有渲染網(wǎng)頁(yè)必須的節(jié)點(diǎn)

無(wú)需渲染的節(jié)點(diǎn)不會(huì)被添加到RenderTree中，如head和display:none;的節(jié)點(diǎn)

visibility: hidden;的節(jié)點(diǎn)會(huì)添加到RenderTree中

瀏覽器通過(guò)GET請(qǐng)求獲取網(wǎng)頁(yè)HTML，同時(shí)將增量解析HTML文檔，生成DOM樹
解析DOM節(jié)點(diǎn)樹時(shí)，對(duì)于需要加載的資源全部執(zhí)行異步加載，但是CSS的解析、JavaScript的執(zhí)行與font文件的下載會(huì)阻塞HTML Parser
局部DOM樹與CSSOM樹構(gòu)建完成后，立即組裝RenderTree進(jìn)行渲染

瀏覽器渲染頁(yè)面的時(shí)機(jī)

增量解析解析DOM樹，并且完成相應(yīng)CSSOM解析后（RenderTree依賴于DOM樹，CSSOM樹），開始直接渲染頁(yè)面。

4.2 CSS加載會(huì)阻塞初次渲染

對(duì)于首頁(yè)無(wú)關(guān)的樣式，需要使用適當(dāng)?shù)姆绞奖苊馄渥枞醮武秩荆?/p>

document.write()會(huì)阻塞頁(yè)面初次渲染
使用media=print媒體查詢，雖然加載樣式表，但只針對(duì)打印時(shí)才應(yīng)用該樣式，不會(huì)阻塞初次渲染。
通過(guò)DOMAPI引入CSS，可以避免阻塞。
CSS中。










哎呀文章有點(diǎn)亂了
搬運(yùn)地址

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/50751.html

相關(guān)文章

  • 徹底理解從輸入U(xiǎn)RL與頁(yè)面展現(xiàn)

    摘要：五瀏覽器繪制網(wǎng)頁(yè)繪制過(guò)程主要是結(jié)構(gòu)與樣式的結(jié)合，以及行為動(dòng)態(tài)效果的展現(xiàn)。之后會(huì)寫系列文章，歡迎圍觀主要參考文章基礎(chǔ)進(jìn)階詳解與編碼前端面試題從到頁(yè)面展現(xiàn)，這之中發(fā)生了什么圖解 流程概述： 地址欄輸入U(xiǎn)RL ——> 域名解析 ——> 服務(wù)器處理請(qǐng)求 ——> 瀏覽器處理響應(yīng) ——> 瀏覽器繪制網(wǎng)頁(yè) 一.地址欄輸入U(xiǎn)RL 認(rèn)識(shí)URL showImg(https://segmentfault....

    abson 評(píng)論0 收藏0

  • spring MVC -- controller參數(shù)的解析

    摘要：是提供的類，為了在容器中建立容器而服務(wù)的。主要處理的請(qǐng)求分發(fā)，對(duì)進(jìn)行管理。接收到請(qǐng)求由進(jìn)行匹配，匹配成功后交由進(jìn)行業(yè)務(wù)邏輯的處理，業(yè)務(wù)邏輯處理完成后交由進(jìn)行數(shù)據(jù)的解析同時(shí)找到對(duì)應(yīng)的，最終由將的結(jié)果到瀏覽器進(jìn)行解析。 spring給我們帶來(lái)了什么? spring IoC、AOP、Transaction這些都是很重要的特性，但是這篇這些都不是主角，主要來(lái)談?wù)剆pringMVC是如何對(duì)請(qǐng)求參...

    suemi 評(píng)論0 收藏0

  • 通過(guò)對(duì)nginx中FastCgi進(jìn)程管理器的學(xué)習(xí),了解php動(dòng)態(tài)網(wǎng)站的網(wǎng)頁(yè)的生成過(guò)程、nginx解析

    摘要：其主要行為是將解釋器進(jìn)程保持在內(nèi)存中并因此獲得較高的性能。當(dāng)子進(jìn)程關(guān)閉連接時(shí)，請(qǐng)求便處理完成。 關(guān)于factcgi和cgi的學(xué)習(xí) 1、FastCGI是什么？ 首先我們看下CGI,CGI全稱為通用網(wǎng)關(guān)接口 Common Cateway Interface.用于HTTP服務(wù)上的程序服務(wù)通信交流的一種工具，可以讓一個(gè)客戶端，從網(wǎng)頁(yè)瀏覽器向執(zhí)行在網(wǎng)絡(luò)服務(wù)器上的程序請(qǐng)求數(shù)據(jù)。CGI描述了服務(wù)器...

    zhaochunqi 評(píng)論0 收藏0

  • 通過(guò)對(duì)nginx中FastCgi進(jìn)程管理器的學(xué)習(xí),了解php動(dòng)態(tài)網(wǎng)站的網(wǎng)頁(yè)的生成過(guò)程、nginx解析

    摘要：其主要行為是將解釋器進(jìn)程保持在內(nèi)存中并因此獲得較高的性能。當(dāng)子進(jìn)程關(guān)閉連接時(shí)，請(qǐng)求便處理完成。 關(guān)于factcgi和cgi的學(xué)習(xí) 1、FastCGI是什么？ 首先我們看下CGI,CGI全稱為通用網(wǎng)關(guān)接口 Common Cateway Interface.用于HTTP服務(wù)上的程序服務(wù)通信交流的一種工具，可以讓一個(gè)客戶端，從網(wǎng)頁(yè)瀏覽器向執(zhí)行在網(wǎng)絡(luò)服務(wù)器上的程序請(qǐng)求數(shù)據(jù)。CGI描述了服務(wù)器...

    yanwei 評(píng)論0 收藏0

  • Web性能優(yōu)化

    摘要：性能優(yōu)化網(wǎng)站的性能細(xì)線在幾個(gè)方面網(wǎng)站首頁(yè)加載速度動(dòng)畫的流暢度通過(guò)分析瀏覽器的渲染原理資源對(duì)渲染的影響，得出優(yōu)化網(wǎng)站性能的辦法。查看性能的工具的面板錄制網(wǎng)頁(yè)加載的過(guò)程，分析記錄瀏覽器渲染過(guò)程中每個(gè)過(guò)程的耗時(shí)。通過(guò)引入，可以避免阻塞。 1 Web性能優(yōu)化 Web網(wǎng)站的性能細(xì)線在幾個(gè)方面： 網(wǎng)站首頁(yè)加載速度 動(dòng)畫的流暢度 通過(guò)分析瀏覽器的渲染原理、資源對(duì)渲染的影響，得出優(yōu)化網(wǎng)站性能的辦法...

    ZHAO_ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<