一個(gè)網(wǎng)站在瀏覽器端是如何渲染的？

一、html 頁(yè)面加載渲染的過程。

請(qǐng)求回來(lái)最先應(yīng)該是HTML，從一個(gè)字節(jié)流轉(zhuǎn)換成字符流，瀏覽器拿到字符流，然后瀏覽器端進(jìn)行相應(yīng)的詞法分析成相應(yīng)的token，然后不斷的通過next-token添加到DOM樹中。然后有一些Link標(biāo)簽，瀏覽器并發(fā)的去請(qǐng)求一些CSS資源，被解析成CSSOM樹，與DOM相結(jié)合生成渲染樹。

梳理：瀏覽器中輸入網(wǎng)址，到對(duì)應(yīng)的IP服務(wù)器去請(qǐng)求資源，返回一個(gè)HTML文檔，這個(gè)文檔被瀏覽器中的HTML解析器進(jìn)行解析，通過詞法分析，將這些tag，分析成不同的相應(yīng)的token，從HTML文檔依次從上到下解析我們的token，當(dāng)遇到Link這種標(biāo)簽，瀏覽器會(huì)進(jìn)一步的發(fā)送請(qǐng)求去服務(wù)器獲取CSS、js等外部資源。對(duì)于JavaScript外部資源，會(huì)交給瀏覽器內(nèi)核中的v8的JavaScript執(zhí)行引擎去執(zhí)行。CSS資源請(qǐng)求回來(lái)就會(huì)去生成相應(yīng)的CSS樹。在請(qǐng)求回來(lái)css生成css樹之前尼，其實(shí)即使DOM樹已經(jīng)解析完畢了，也不會(huì)去進(jìn)行渲染，渲染的條件是CSS樹和DOM樹都生成后進(jìn)行合并生成renderTree，進(jìn)一步的進(jìn)行布局和繪制。

二、HTML渲染過程的一些特點(diǎn)

• 順序執(zhí)行、并發(fā)加載。(HTML會(huì)引入css,js外部資源，這些是并發(fā)加載的，但是并發(fā)加載是由限制數(shù)目的上線，因此設(shè)置3到4個(gè)CDN域名，防止一個(gè)CDN域名達(dá)到上線，無(wú)法并發(fā)請(qǐng)求多個(gè)資源)
• 是否阻塞。（某個(gè)資源的加載是否會(huì)阻塞其他資源的加載，CSS加載是否會(huì)阻塞js的加載等，）
• 依賴關(guān)系。（css代碼在哪里引入，有的時(shí)候會(huì)出現(xiàn)沒有樣式，突然閃動(dòng)出現(xiàn)樣式，如果將css在header中引入，就不會(huì)出現(xiàn)，還有js引入，用了async之后異步加載，其實(shí)是放棄了依賴關(guān)系，誰(shuí)先執(zhí)行完加載誰(shuí)）
• 引入方式。（script中的src引入會(huì)有會(huì)有阻塞的問題，考慮使用defer,async標(biāo)簽。動(dòng)態(tài)資源加載）

2.1 順序執(zhí)行、并發(fā)加載

• 詞法分析：瀏覽器對(duì)HTML文檔進(jìn)行分析的一個(gè)方式
• 并發(fā)加載：HTML中引入的資源是并發(fā)加載的
• 并發(fā)上限：某個(gè)域名的請(qǐng)求資源是由并發(fā)上線的

2.2?css阻塞

• css head中Link標(biāo)簽引入，可以解決頁(yè)面的渲染閃動(dòng)
• css阻塞js的執(zhí)行（js可以動(dòng)態(tài)的去修改DOM樹因此在js修改DOM樹的時(shí)候得保證，css樹已經(jīng)加載完成了，這樣js才可以去修改）
• css不阻塞外部腳本的加載（webkit有一個(gè)預(yù)先掃描器，對(duì)后面需要的資源都會(huì)發(fā)送請(qǐng)求去加載）

2.3 JS阻塞

• 直接引入的js阻塞頁(yè)面的渲染（直接通過script中的src引入，沒有defer和asyn屬性，理解：js代碼可能調(diào)用document.write動(dòng)態(tài)的修改文檔的結(jié)構(gòu)，會(huì)影響后面文檔的渲染和分析，HTMLparser文檔結(jié)構(gòu)的分析和渲染要等到j(luò)s的執(zhí)行）
• js不阻塞資源的加載(因?yàn)閣ebkit增加了預(yù)先掃描器去掃描后面的詞語(yǔ)，當(dāng)掃描到后面link標(biāo)簽引用外部資源的時(shí)候，就會(huì)發(fā)送請(qǐng)求去加載后續(xù)資源)
• js順序執(zhí)行，阻塞后續(xù)js邏輯的執(zhí)行（比如引入10個(gè)js腳本，會(huì)順序執(zhí)行，并阻塞后面js的執(zhí)行）

轉(zhuǎn)載于:https://www.cnblogs.com/QianDingwei/p/11027628.html

總結(jié)

以上是生活随笔為你收集整理的三、css 和 js 的装载与执行的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。