10分钟看懂浏览器的渲染过程及优化

时间 2019-11-06

原文原文链接

1、浏览器概述

目前的主流浏览器有5个：Internet Explorer、Firefox、Safari、Chrome和Opera浏览器。根据 StatCounter 浏览器统计数据，目前（截止2019 年 5 月）Firefox、Safari 和 Chrome 浏览器的总市场占有率将近 83.66%。因而可知，现在开放源代码浏览器在浏览器市场中占据了很是坚实的部分。
以上5种浏览器因为有着不一样的浏览器内核，形成一样的html页面有着不一样呈现。Internet Explorer的内核是Trident；Firefox的内核是Gecko；Chrome、Safari内核是Webkit；Opera的内核则是Presto。css

2、浏览器渲染过程

咱们先大体看下浏览器渲染关键路径图： html

一、HTML解析，构建DOM树

浏览器从网络或硬盘中得到HTML字节数据后会通过如下流程将字节解析为DOM树：web

字符编码：先将HTML的原始字节数据转换为文件指定编码的字符。
令牌化：而后浏览器会根据HTML规范来将字符串转换成各类令牌（如<html>、<body>、<p>这样的标签以及标签中的字符串和属性等都会被转化为令牌，每一个令牌具备特殊含义和规则）。
生成节点对象：接着每一个令牌都会被转换成定义其属性和规则的对象，即节点对象。
构建DOM树：最后将节点对象构建成树形结构，即DOM树。HTML标签之间有复杂的父子关系，树形结构恰好能够诠释这样的关系。

下面经过一段HTML代码与配图更好的理解“字节 -> 字符 -> 令牌-> 节点对象 -> 对象模型”这个过程：浏览器

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="test.png"></div>
  </body>
</html>
复制代码

DOM树构建过程

二、CSS解析，构建CSSOM树

浏览器解析遇到<link>标签时，浏览器就开始解析CSS，像构建DOM树同样构建CSSOM树。style.css的代码以下：缓存

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }
复制代码

CSSOM树

三、Render Tree

在构建了DOM树和CSSOM树以后，浏览器只是拥有2个相互独立的对象集合，DOM树描述的文档结构和内容，CSSOM树描述了对应文档的样式规则，想要渲染出页面，就须要将DOM树、CSSOM树结合在一块儿，构建渲染树。性能优化

渲染树

四、Layout

渲染树构建好后，浏览器获得了每一个节点的内容与样式，下一步就是须要计算每一个节点在浏览器窗口的确切位置与大小，即layout布局。
布局阶段，从渲染树的根节点开始遍历，采用盒子模型的模式来表示每一个节点与其余元素之间的距离，从而肯定每一个元素在屏幕内的位置与大小。bash

盒子模型：包括外边距（margin），内边距（padding），边框（border），内容（content）。标准盒子模型width/height = content；IE盒子模型width/height = content + padding + border。服务器

盒子模型

五、Paint绘制页面

当Layout布局完成后，浏览器会当即发出Paint事件，开始讲渲染树绘制成像素，绘制所须要的时间跟CSS样式的复杂度成正比，绘制完成后，用户才能看到页面在屏幕中的最终呈现效果。网络

若是想更详细地体验浏览器渲染流程，可使用Chrome开发者工具中的Performance面板，录制浏览器从请求直到渲染完成的过程，以下图所示：异步

Performance

3、渲染优化方案

一、优化渲染关键路径方案

经过优化渲染关键路径，能够优化页面渲染性能，减小页面白屏时间。

优化JS：JavaScript文件加载会阻塞DOM树的构建，能够给<script>标签添加异步属性async，这样浏览器的HTML解析就不会被js文件阻塞。
优化CSS：浏览器每次遇到<link>标签时，浏览器就须要向服务器发出请求得到CSS文件，而后才继续构建DOM树和CSSOM树，能够合并全部CSS成一个文件，减小HTTP请求，减小关键资源往返加载的时间，优化渲染速度。

二、其余优化方案

加载部分HTML
浏览器先加载主要HTML初始化静态部分，动态变化的HTML内容经过Ajax请求加载。这样能够减小浏览器构建DOM树的工做量，让用户感受页面加载速度很快。
压缩
对HTML、CSS、JavaScript这些文件去除冗余字符（例如没必要要的注释、空格符和换行符等），再进行压缩，减少文件数据大小，加快浏览器解析文件编码。
图片加载优化
1）小图标合并成雪碧图，进而减小img的HTTP请求次数；
2）图片加载较多时，采用懒加载的方案，用户滚动页面可视区时再加载渲染图片。
HTTP缓存
浏览器自带了HTTP缓存的功能，只须要确保每一个服务器响应的头部都包含了如下的属性：
1）ETag： ETag是一个传递验证令牌，它对资源的更新进行检查，若是资源未发生变化时不会传送任何数据。当浏览器发送一个请求时，会把ETag一块儿发送到服务器，服务器会根据当前资源核对令牌（ETag一般是对内容进行Hash后得出的一个指纹），若是资源未发生变化，服务器将返回304 Not Modified响应，这时浏览器没必要再次下载资源，而是继续复用缓存。
2）Cache-Control： Cache-Control定义了缓存的策略，它规定在什么条件下能够缓存响应以及能够缓存多久。
a、no-cache： no-cache表示必须先与服务器确认返回的响应是否发生了变化，而后才能使用该响应来知足后续对同一网址的请求（每次都会根据ETag对服务器发送请求来确认变化，若是未发生变化，浏览器不会下载资源）。no-store直接禁止浏览器以及全部中间缓存存储任何版本的返回响应。简单的说，该策略会禁止任何缓存，每次发送请求时，都会完整地下载服务器的响应。
b、public&private：若是响应被标记为public，则即便它有关联的HTTP身份验证，甚至响应状态代码一般没法缓存，浏览器也能够缓存响应。若是响应被标记为private，那么这个响应一般只为单个用户缓存，所以不容许任何中间缓存（CDN）对其进行缓存，private通常用在缓存用户私人信息页面。
c、max-age： max-age定义了从请求时间开始，缓存的最长时间，单位为秒。

小结

今天浏览器渲染过程和优化方案就介绍到这里，你们若是有更多更好的页面性能优化方案能够多多交流，评论区欢迎留言~~