一個網站在瀏覽器端是如何渲染的？

一、html 頁面加載渲染的過程。

請求回來最先應該是HTML，從一個字節流轉換成字符流，瀏覽器拿到字符流，然后瀏覽器端進行相應的詞法分析成相應的token，然后不斷的通過next-token添加到DOM樹中。然后有一些Link標簽，瀏覽器并發的去請求一些CSS資源，被解析成CSSOM樹，與DOM相結合生成渲染樹。

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

二、HTML渲染過程的一些特點

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

2.1 順序執行、并發加載

• 詞法分析：瀏覽器對HTML文檔進行分析的一個方式
• 并發加載：HTML中引入的資源是并發加載的
• 并發上限：某個域名的請求資源是由并發上線的

2.2?css阻塞

• css head中Link標簽引入，可以解決頁面的渲染閃動
• css阻塞js的執行（js可以動態的去修改DOM樹因此在js修改DOM樹的時候得保證，css樹已經加載完成了，這樣js才可以去修改）
• css不阻塞外部腳本的加載（webkit有一個預先掃描器，對后面需要的資源都會發送請求去加載）

2.3 JS阻塞

• 直接引入的js阻塞頁面的渲染（直接通過script中的src引入，沒有defer和asyn屬性，理解：js代碼可能調用document.write動態的修改文檔的結構，會影響后面文檔的渲染和分析，HTMLparser文檔結構的分析和渲染要等到js的執行）
• js不阻塞資源的加載(因為webkit增加了預先掃描器去掃描后面的詞語，當掃描到后面link標簽引用外部資源的時候，就會發送請求去加載后續資源)
• js順序執行，阻塞后續js邏輯的執行（比如引入10個js腳本，會順序執行，并阻塞后面js的執行）

轉載于:https://www.cnblogs.com/QianDingwei/p/11027628.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。