浏览器的关键路径渲染

一、网页的渲染机制

1. CSSOM 和 DOM

先抛开 JS 不说,浏览器收到一张html页面时,会从上往下开始生成 DOM(Document Object Model) 树,如果中途发现有样式如<link>引入或者<style>写法,浏览器就会同步生成 CSSOM(CSS Object Model)。当 DOM 和 CSSOM 树构建好之后,浏览器就会开始组合,生成渲染树(Render-Tree),最后就是渲染(绘制),也就是展示给我们看的内容。这里需要注意两个词:构建渲染。这是两个阶段。

浏览器的渲染机制

参考:渲染树构建、布局及绘制 | Web | Google-Developers

2. 阻塞渲染的 CSS

在上文我们提及到,渲染树是在 CSSOM 和 DOM 构建好之后开始的,也就是说,CSS 和 HTML 是阻塞浏览器渲染的,因为如果不完整读取 CSS 和 HTML ,就无法构建 CSSOM 和 DOM ,也就无法渲染。通常第一个请求就已经下载好完整的 HTML 了,也就是说,构建 DOM 是比 CSSOM 快的,因为在解析 HTML 时,才会知道并请求 CSS(CSS 通过 <link><style>引入),所以 CSS 会阻塞渲染树的构建。这也是为什么通常把 CSS 文件的引入放在<head>,早引入,早生成 CSSOM。可以通过媒体查询来跳过某些 CSS,不纳入 CSSOM 的生成过程,加快 CSSOM 构建。

参考:阻塞渲染的 CSS | Web | Google-developers

3. JS 引入

我们知道 JS 是可以修改 DOM 节点和 DOM 样式的,所以 JS 既阻塞 DOM、CSSOM 的构建,也阻塞渲染树的生成。在解析 HTML 中发现引入了 JS 后,会下载完 JS 并执行之后,才会继续解析、构建 HTML。因此我们常常把<script>放到</body>前面,加快网页生成速度。

参考:使用 JavaScript 添加交互 | Web | Google-developers

4. 完整的浏览器渲染过程

实际中,浏览器有自己的策略去优化页面的渲染速度,虽然默认情况下。 CSSOM 和 DOM 应该先构建再渲染,但假如网速太慢,浏览器有可能先渲染部分内容。至于更复杂的优化,这里就不讨论了。以下是完整的渲染过程:

完整的浏览器渲染过程

二、CSS 和 JS 在网页中的放置顺序是怎样的?

从上文我们知道,为了加快浏览器渲染,我们应该尽早获取 CSS 和构建 DOM,因此 CSS 通常放在 HTML 的<head>里面,而 JS 放到</body>之前。

三、解释白屏和 FOUC

1. 白屏

浏览器的渲染需要先生成 DOM 和 CSSOM 树,假如 CSS 获取时间过长(比如 CSS 在最后引入),就会导致 CSSOM 生成过久,浏览器只能等待,这时候就会出现长时间白屏,直到 DOM 和 CSSOM 构建完成。通常打开页面都会短暂白屏,因为 DOM 和 CSSOM 构建需要时间。

2. FOUC (flash of unstyled content)

有些浏览器(如:FireFox)会先渲染 DOM ,等到 CSSOM 生成了,再重绘渲染,这样就会看到一部分没样式的内容,然后再看到有样式的。这种分块分步的渲染。

四、async 和 defer 的作用是什么?有什么区别

JS 在 HTML 中引入有三种<script> <script async> <script defer>

1. 直接引入<script>

会阻塞浏览器渲染,必须等到 JS 下载并执行才继续解析 HTML

2. async 方式引入

JS 的下载和 HTML 的解析并行进行,但只要 JS 下载完成,就马上开始执行,同时阻塞 HTML 解析。

3. defer 方式引入

JS 的下载和 HTML 的解析并行进行,但直到 HTML 解析结束,才执行 JS。

如图:

js 引入的三种方式

参考:async 和 defer 的区别 | SegmentFault

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 大家都知道万维网的应用层使用了HTTP协议,并且用浏览器作为入口访问网络上的资源。用户在使用浏览器访问一个网站时需...
    SylvanasSun阅读 2,172评论 1 12
  • 写在前面 关于前端性能优化的文章非常多,写浏览器关键渲染路径的也不少,但总是感觉哪里错了或者哪里疏忽了,于是自己写...
    卿可津阅读 1,234评论 0 1
  • 浏览器指的是Chrome系浏览器【Firefox大同小异,IE未知】以下提到的“节点”、“标签”和“元素”不做区分...
    Yieiy阅读 4,126评论 4 26
  • 本文中浏览器特指Chrome浏览器 开始之前说说几个概念,以及在准备写这篇文章之前对浏览器的渲染机制的了解: DO...
    若邪Y阅读 3,549评论 1 10
  • 很多单位和前下属之间的关系总是怪怪的,单位觉得好不容易培养一个人却走了,辜负了多年来的栽培。于是在下属离开的时候,...
    东木与木东阅读 1,371评论 2 12