3、css 和 js 的裝載與執行

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

1、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，進一步的進行佈局和繪製。

2、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的執行）