浏览器工作原理相关笔记

宏观来看，浏览器的工作流程是：

发送请求——（服务器响应，返回各种资源）——对返回的资源进行解析渲染，生成页面——将生成的页面展现给用户

 

其中，解析渲染是核心，解析渲染的过程是：

首先，渲染引擎开始解析HTML，将标签转化为dom树中的dom节点。

接着，它解析CSS文件及style标签中的各种样式信息，将这些样式信息对应先前解析好的dom树构建另一颗树——render树。

然后，对render树上的各个节点进行布局，确定每个节点在屏幕上的确切坐标。

最后，遍历render树上个各个节点，对其进行绘制。

 

需要注意的是：为了更好的用户体验，渲染引擎会尽可能早的将内容呈现到屏幕上。也就是解析完一部分内容就显示一部分内容，同时还可能在下载其余的内容。（使用浏览器的时候会发现，有时页面会一部分一部分慢慢显示出来；有时候页面布局结构出来了，图片还在加载，没能显示）

 

关于脚本解析：

web的模式是同步的，开发者希望解析到一个script标签时立即解析执行脚本，并阻塞文档的解析直到脚本执行完。如果脚本是外引的，则网络必须先请求到这个资源——这个过程也是同步的，会阻塞文档的解析直到资源被请求到。这个模式保持了很多年，并且在html4及html5中都特别指定了。开发者可以将脚本标识为defer，以使其不阻塞文档解析，并在文档解析结束后执行。Html5增加了标记脚本为异步的选项，以使脚本的解析执行使用另一个线程。