HTML CSS JS 的加载

本文是HTML CSS JS的加载流程相关知识的笔记。

浏览器组件

Chrome每个标签页都分别对应一个呈现引擎实例，每个标签页都是一个独立的进程。最重要的Rendering engine有两种：Gecko 和 Webkit。

基本渲染流程：

WebKit渲染流程：

Gecko渲染流程：

DOM ：Document Object Model 文档对象模型，是 HTML 文本的对象表示，是 JS 语言的操作对象以及操作入口。

HTML的解析状态机：

CSS解析器：

浏览器边下载HTML网页，边解析。

解析到<head>：

若是发现css外部脚脚本，则加载
发现<script>标签，控制权转交给JS引擎，JS引擎一定是要等到前面的CSS加载完全后，才运行的
- 若是远程脚本，下载 + 执行 (同步阻塞)
- 若是js代码，直接执行 (同步阻塞)

PS：如果脚本加载时间很长，就会造成网页长时间失去响应，浏览器就会呈现“假死”或“阻塞效应”
PS: JS 采用阻塞加载的原因是：js有可能会修改dom，如果不阻塞后续的资源下载，dom的操作顺序不可控

html在head中所有的js和css加载完成后就开始绘制!

解析到body：

优化：

<script defer="true" src='...'> 将会并行下载js脚本，但是要到DOM加载完成后才会按顺序执行。
<script async="true" src='...' 表示异步并行下载JS脚本，下载完成后立刻执行，不保证按照书写的顺序执行。所以需要保证js不会修改dom和样式，不依赖其它的js和css

async 的实现是内部再启另一个线程去下载脚本，不会阻塞渲染