參考:Web 前端面試指南與高頻考題解析 瀏覽器相關
加載過程:
- 瀏覽器根據(jù)DNS服務器得到域名的IP地址
- 向這個IP的機器發(fā)送HTTP請求
- 服務器收到妆偏、處理并返回HTTP請求
- 瀏覽器得到返回內(nèi)容
返回內(nèi)容其實就是一堆HTML格式的字符串走净。
渲染過程:
- 根據(jù)HTML結構生成DOM樹
- 根據(jù)CSS生成CSSOM
- 將DOM和CSSOM整合形成RenderTree
- 根據(jù)RenderTree開始渲染和展示
- 遇到<script>時狂鞋,會執(zhí)行并阻塞渲染
為何要把CSS放在HTML頭部?可以讓瀏覽器盡早拿到CSS盡早生成CSSOM验靡,然后在解析HTML之后可一次性生成最終的RenderTree,渲染一次即可。如果CSS放在HTML底部妄讯,會出現(xiàn)渲染卡頓的情況孩锡,影響性能和體驗。
渲染過程中亥贸,如果遇到script就停止渲染躬窜,執(zhí)行JS代碼。因為瀏覽器渲染和JS執(zhí)行共用一個線程炕置,而且這里必須是單線程操作荣挨,多線程會產(chǎn)生渲染DOM沖突。
為何要把script放在HTML底部朴摊?JS放在底部可以保證讓瀏覽器優(yōu)先渲染完現(xiàn)有的HTML內(nèi)容默垄,讓用戶先看到內(nèi)容,體驗好甚纲。另外厕倍,JS執(zhí)行如果涉及DOM操作,得等待DOM解析完成才行贩疙,JS放在底部執(zhí)行時讹弯,才不會因為操作DOM而報錯。
關于瀏覽器的整個流程这溅,可以參考百度的多益大神的從輸入 URL 到頁面加載完成的過程中都發(fā)生了什么事情组民?