瀏覽器渲染頁面的一般過程：
1.瀏覽器解析html源碼，然后創(chuàng)建一個 DOM樹。
在DOM樹中钞支，每一個HTML標(biāo)簽都有一個對應(yīng)的節(jié)點(diǎn)郊楣，并且每一個文本也都會有一個對應(yīng)的文本節(jié)點(diǎn)。DOM樹的根節(jié)點(diǎn)就是 documentElement摔刁，對應(yīng)的是html標(biāo)簽挥转。
2.瀏覽器解析CSS代碼，計(jì)算出最終的樣式數(shù)據(jù)共屈。構(gòu)建CSSOM樹绑谣。
對CSS代碼中非法的語法它會直接忽略掉。解析CSS的時候會按照如下順序來定義優(yōu)先級：瀏覽器默認(rèn)設(shè)置 < 用戶設(shè)置 < 外鏈樣式 < 內(nèi)聯(lián)樣式 < html中的style拗引。
3.DOM Tree + CSSOM --> 渲染樹（rendering tree）借宵。
渲染樹和DOM樹有點(diǎn)像，但是是有區(qū)別的矾削。DOM樹完全和html標(biāo)簽一一對應(yīng)壤玫，但是渲染樹會忽略掉不需要渲染的元素，比如head哼凯、display:none的元素等欲间。而且一大段文本中的每一個行在渲染樹中都是獨(dú)立的一個節(jié)點(diǎn)。渲染樹中的每一個節(jié)點(diǎn)都存儲有對應(yīng)的css屬性断部。
4.一旦渲染樹創(chuàng)建好了猎贴，瀏覽器就可以根據(jù)渲染樹直接把頁面繪制到屏幕上。
以上四個步驟并不是一次性順序完成的蝴光。如果DOM或者CSSOM被修改她渴，以上過程會被重復(fù)執(zhí)行。實(shí)際上虱疏，CSS和JavaScript往往會多次修改DOM或者CSSOM惹骂。
阻塞渲染：CSS與JavaScript
瀏覽器其實(shí)主要由兩個部分組成：JS引擎和渲染引擎。渲染引擎會先加載頁面做瞪，逐步完成上述過程对粪。
但在遇到link和script標(biāo)簽時，HTML Paser會被阻塞装蓬。
現(xiàn)代瀏覽器在HTML解析器被阻塞時著拭，仍然會識別后面的資源，但這屬于預(yù)加載牍帚，并不是真正意義上的解析儡遮。
有以下兩點(diǎn)：
1.默認(rèn)情況下，CSS 被視為阻塞渲染的資源暗赶，這意味著瀏覽器將不會渲染任何已處理的內(nèi)容鄙币，直至 CSSOM 構(gòu)建完畢
2.JavaScript 不僅可以讀取和修改 DOM 屬性肃叶，還可以讀取和修改 CSSOM 屬性
存在阻塞的 CSS 資源時，瀏覽器會延遲 JavaScript 的執(zhí)行和 DOM 構(gòu)建十嘿。另外：
- 當(dāng)瀏覽器遇到一個 script 標(biāo)記時因惭，DOM 構(gòu)建將暫停，直至腳本完成執(zhí)行绩衷。
- JavaScript 可以查詢和修改 DOM 與 CSSOM蹦魔。
- CSSOM 構(gòu)建時，JavaScript 執(zhí)行將暫停咳燕，直至 CSSOM 就緒勿决。
所以，script 標(biāo)簽的位置很重要招盲。實(shí)際使用時低缩，可以遵循下面兩個原則：
- CSS 優(yōu)先：引入順序上，CSS 資源先于 JavaScript 資源宪肖。
- JavaScript 應(yīng)盡量少影響 DOM 的構(gòu)建表制。
解析器一旦讀取到script標(biāo)簽(內(nèi)聯(lián)或外聯(lián))時健爬，會阻塞DOM構(gòu)建控乾，它會去請求腳本并執(zhí)行完成后才繼續(xù)執(zhí)行下去。
這里async和defer標(biāo)簽除外娜遵，async和defer屬性會讓腳本延后執(zhí)行蜕衡，不會阻塞瀏覽器解析。
重繪和重排（repaints and reflows）
每個頁面至少在初始化的時候會有一次重排操作设拟。任何對渲染樹的修改都有可能會導(dǎo)致下面兩種操作：
1.重排就是渲染樹的一部分必須要更新 并且節(jié)點(diǎn)的尺寸發(fā)生了變化慨仿。這就會觸發(fā)重排操作。
2.重繪部分節(jié)點(diǎn)需要更新纳胧，但是沒有改變他的集合形狀镰吆，比如改變了背景顏色，這就會觸發(fā)重繪跑慕。什么情況下會觸發(fā)重繪或重排
記住万皿，重排必然會引起重繪
下面任何操作都會觸發(fā)重繪或者重排：
- 增加或刪除DOM節(jié)點(diǎn)設(shè)置 display: none;（重排并重繪） 或visibility: hidden（只有重排）
- 移動頁面中的元素
- 增加或者修改樣式用戶
- 改變窗口大小
- 滾動頁面等
減少重繪和重排
1.不要一個一個地單獨(dú)修改屬性，最好通過一個classname來定義這些修改
// bad
var left = 10, top = 10;
el.style.left = left + "px";
el.style.top = top + "px";
// good
el.className += " theclassname";
2.把對節(jié)點(diǎn)的大量修改操作放在頁面之外用 documentFragment來做修改clone 節(jié)點(diǎn)核行，在clone之后的節(jié)點(diǎn)中做修改牢硅，然后直接替換掉以前的節(jié)點(diǎn)通過 display: none 來隱藏節(jié)點(diǎn)（直接導(dǎo)致一次重排和重繪），做大量的修改芝雪，然后顯示節(jié)點(diǎn)（又一次重排和重繪）减余，總共只會有兩次重排。
3.不要頻繁獲取計(jì)算后的樣式惩系。如果你需要使用計(jì)算后的樣式位岔，最好暫存起來而不是直接從DOM上讀取如筛。
4.總的來說，總是考慮到渲染樹的存在抒抬，考慮到你的一次修改會導(dǎo)致多大的繪制操作妙黍。比如絕對定位元素的動畫就不會影響其他大部分元素。
document.createElement
使用 document.createElement 創(chuàng)建的 script 默認(rèn)是異步的瞧剖，示例如下拭嫁。
console.log(document.createElement("script").async); // true
所以，通過動態(tài)添加 script 標(biāo)簽引入 JavaScript 文件默認(rèn)是不會阻塞頁面的抓于。如果想同步執(zhí)行做粤，需要將 async 屬性人為設(shè)置為 false。
如果使用 document.createElement 創(chuàng)建 link 標(biāo)簽會怎樣呢捉撮？
const style = document.createElement("link");
style.rel = "stylesheet";
style.href = "index.css";
document.head.appendChild(style); // 阻塞怕品？
以上代碼不同瀏覽器會有所不同，已知Chrome中不會阻塞渲染
