浏览器渲染过程

发表于 | 更新于: | | 阅读次数:
字数统计: 721字 | 阅读时长 ≈ 2分钟

浏览器渲染过程以及原理

浏览器渲染的过程

对于浏览器而言， 浏览器请求， 加载， 渲染一个页面的时候，所要花费的时间主要在下面几个过程中:
  1. DNS 查询（DNS 根据服务器地址查找到IP地址）
  2. TCP 连接（用于连接客户端与服务器， 包含三次握手，四次挥手的过程）
  3. HTTP 请求以及响应（请求响应数据）
  4. 服务器响应（后端响应数据）
  5. 客户端渲染
对于第五个部分客户端渲染的过程中， 这一部分过程主要是渲染树的构建，布局，以及绘制， 具体而言， 主要是下面几个过程：
  1. 处理 HTML 标记并且构建 DOM 树。
  2. 处理 CSS 标记并且构建 CSSOM 树。
  3. 将 DOM 以及 CSSOM 合并为一个渲染树。
  4. 根据渲染树进行布局,以计算每个节点的几何信息。
  5. 将各个节点绘制到屏幕上去。
在上面的过程中，如果DOM或者CSSOM被修改,那个这个过程需要重复执行，重新在屏幕上进行渲染。

阻塞渲染

在一个网页中， CSS被视为阻塞性的资源， 当 CSSOM 被构建的时候， 其他的内容将不会被处理， 因此， 只有当 CSSOM 构建完毕之后其他内容才可能被加载。对于 javascript 也是类似的效果， 当浏览器遇到一个 script 标记的时候，DOM 构建将会暂停，知道脚本完成执行。使用 javascript 可以改变 DOM 以及 CSSOM， 而当 DOM 或者 CSSOM 被改变的时候， 这两个树均会重新进行绘制， 对于 CSSOM 因为是阻塞性资源, 在构建的时候， JavaScript 将会延迟执行， 直到CSSOM 构建完毕。在实际使用的时候应该遵循下面两个原则：
  1. CSS资源要优于JavaScript 资源进行加载。
  2. 尽量避免使用 JavaScript 进行DOM 的操作。

解决渲染阻塞的几种方法

CSS

对于 CSS 而言， 浏览器解析 CSS 用于创建 CSSOM 树， 因此在 CSS 编写的过程中要注意对于 CSS 解析速度的影响：
  1. 提高CSS页面的加载速度提高页面的加载速度主要是通过将样式尽量写在单独的文件里面， 将 CSS样式作为单独的文件进行引入， 这样做的目的不仅仅是减少页面体积， 并且可以利用 CSS 文件的缓存以及重用， 提高文件的加载速度。少用 @import 用于引入 CSS 文件, 使用 @import 会影响 CSS 文件的加载速度。
  2. 加快解析速度， 提高解析性能。减少css 样式的嵌套层数， 对于 CSS 的嵌套层数尽量不要超过三层, 过多的嵌套层数会影响到CSS的解析速度。