從url到頁(yè)面發(fā)生了什么?
對(duì)這個(gè)經(jīng)典問(wèn)題淫茵，在搜索引擎中能找到無(wú)數(shù)個(gè)答案
這篇文章也是我對(duì)這個(gè)問(wèn)題的一個(gè)階段性總結(jié)
寫博客的方式也從復(fù)制粘貼轉(zhuǎn)變到自己分析歸納總結(jié)
用戶打開(kāi)瀏覽器，輸入 baidu.com，頁(yè)面展示百度首頁(yè)场仲。整個(gè)過(guò)程發(fā)生了什么橄唬？
作為前端强挫，我們的注意力應(yīng)該放在呈現(xiàn)引擎上岔霸。
呈現(xiàn)引擎解析html
當(dāng)我們輸入url按下回車之后，發(fā)送請(qǐng)求獲取文檔的內(nèi)容俯渤，一般是html文檔呆细。
呈現(xiàn)引擎將html里的各標(biāo)簽解析成DOM樹(shù)。
遇到外鏈資源(比如圖片八匠、樣式表絮爷、腳本等)就會(huì)發(fā)送請(qǐng)求獲取資源。
呈現(xiàn)引擎會(huì)同步解析外部CSS文件以及樣式元素中的屬性梨树，構(gòu)建CSSOM樹(shù)坑夯。
DOM和CSSOM構(gòu)建完畢后生成渲染樹(shù)，進(jìn)入繪制和顯示階段抡四。
雖然解析CSSOM不會(huì)阻塞DOM的構(gòu)建渊涝，但是會(huì)影響渲染樹(shù)的構(gòu)建。這就是我們?yōu)槭裁匆褬邮奖矸旁陬^部的原因床嫌。
網(wǎng)絡(luò)的模型是同步的跨释。解析器遇到<script>時(shí)會(huì)立即解析并執(zhí)行腳本，文檔的解析會(huì)停止直至腳本執(zhí)行完成厌处。
Firefox 在樣式表加載和解析的過(guò)程中鳖谈，會(huì)禁止所有腳本。而對(duì)于 WebKit 而言阔涉，僅當(dāng)腳本嘗試訪問(wèn)的樣式屬性可能受尚未加載的樣式表影響時(shí)缆娃，它才會(huì)禁止該腳本。
HTML5中增加了2個(gè)選項(xiàng) defer(延遲執(zhí)行), async(異步執(zhí)行)
JavaScript 在 DOM瑰排、CSSOM 和 JavaScript 執(zhí)行之間引入了大量新的依賴關(guān)系贯要，從而可能導(dǎo)致瀏覽器在處理以及在屏幕上渲染網(wǎng)頁(yè)時(shí)出現(xiàn)大幅延遲。所以我們應(yīng)該把涉及DOM或樣式操作的腳本放在body末尾
這里還涉及另外2個(gè)概念：重排(reflow)和重繪(repaint)'
只改變外觀不改變位置會(huì)觸發(fā)repaint椭住。改變位置觸發(fā)重排及重繪
JavaScript運(yùn)行機(jī)制
js是單線程崇渗。
瀏覽器是多線程的。setTimeout京郑、ajax宅广、DOM事件等都在Web Apis中
JavaScript 的一個(gè)非常有趣的特性是事件循環(huán)模型，與許多其他語(yǔ)言不同些举，它永不阻塞跟狱。 處理 I/O 通常通過(guò)事件和回調(diào)來(lái)執(zhí)行
參考資料
