浏览器渲染流程

1.渲染模式

标准模式和怪异模式（Quirks Mode）是两种不同的文档渲染模式，用于指示浏览器如何解析HTML、CSS等页面内容。标准模式是指浏览器按照W3C规范的流程进行解析和渲染网页，这样可以确保不同浏览器对同一份代码的渲染结果基本上一致。而怪异模式则是指浏览器采用了一些非标准的解析方式来处理网页内容，可能会导致不同浏览器对同一份代码的显示效果不同。这种模式常常出现在早期的Web开发中，因为当时的浏览器并不完全遵循W3C规范，为了兼容旧有网站而采用了这种解析方式。

2.标准渲染

标准渲染管线流程：load，parse，layout，paint，compositor，rasterization。

渲染流程

根据html，生成dom tree；
根据css，生成css tree；
将dom tree和css tree结合生成render tree；
布局render树，计算各元素尺寸、位置信息；
绘制render树，绘制页面像素信息；
浏览器会将各层的信息发送给compositor线程，compositing处理后光栅化，显示网页。

3.线程模型

网页的渲染在渲染进程里面完成，渲染进程内包括有4类线程：主线程（main）、工作线程（worker）、合成线程（compositor）、光栅化线程（raster）。主线程负责解析dom、css、生成render tree、layout、paint，以及执行JavaScript代码；如果使用了web worker或者service worker，相关的代码将会由工作线程处理；合成线程和光栅化线程分别负责compositor和rasterization。

4.阻塞渲染

我们已经知道，主线程负责解析dom、css、生成render tree、layout、paint，以及执行JavaScript代码。主线程在解析和渲染html文件的时候，如果该文件通过@import，link、src标签，引用了外部资源，在加载和执行外部资源的时候，可能会引发渲染管线的阻塞。

这里按照资源类型分情况讨论：加载媒体资源，不影响html和css的解析和渲染；加载css不阻塞html解析，但阻塞生成render tree；加载JavaScript，默认情况下阻塞html和css解析。下面详细说明。

4.1.JavaScript阻塞

HTML5为我们提供了3种加载和执行网页JavaScript代码的方式。

属性	作用
sync	主线程解析HTML过程中，如果遇到script脚本，就会停止页面的解析，并开启网络进程去加载脚本，脚本加载并执行完毕后，继续解析HTML。
async	主线程解析HTML过程中，碰到脚本，则开启网络进程去加载脚本，主线程继续解析HTML，脚本加载完成，就立即转去执行脚本。
defer	主线程解析HTML过程中，遇到设置了defer的脚本，则开启网络进程去加载脚本，主线程继续解析HTML，HTML解析和渲染完毕后，再执行脚本。

4.2.媒体资源阻塞

HTML5为我们提供了2种加载媒体资源的方式。

加载方式	描述	适用场景
preload	立即加载所需资源，并在需要使用时直接从缓存取资源。	重要的页面资源，如 logo、核心 JS/CSS 文件等。
prefetch	告诉浏览器未来可能会使用到的某个资源，在空闲时加载对应的资源。	用户预期访问的链接、下一页的内容等。