浏览器渲染原理以及优化

2019-12-20 本文已影响0人 zackxizi

一、浏览器访问网页时候，做了这几件事：

DNS解析
TCP三次握手链接
HTTP客户端请求和服务端响应
客户端渲染

前三步散扯请猛戳---这里---
本文主要散扯第四步

二、客户端渲染有以下几步：

HTML 代码解析为 DOM，CSS 代码解析为 CSSOM（CSS Object Model）。
将 DOM 和 CSSOM 合成一棵渲染树（render tree）；
根据渲染树布局，计算出渲染树的布局（layout）；
将渲染树绘制到屏幕。

注意：

以上几步，不一定按照顺序依次执行的，有时候解析每结束，页面就出现了内容。

render tree 构建前提必须有CSSOM 以及 DOM，所以先生成CSSOM 和 DOM

webkit渲染引擎流程

1) 那么问题来了，什么是DOM树（选看）？

DOM树全称Document Object Model(文档对象模型)，它是用来呈现以及与任意XML和HTML交互的API，DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如:页面元素、字符串或注释等等）。

2) 那么问题又来了，什么是CSSOM树？

CSSOM是一组允许用JavaScript操纵CSS的API。它是继DOM和HTML API之后，又一个操纵CSS的接口，从而能够动态地读取和修改CSS样式。

1、解析HTML，CSS，生成DOM树、CSSOM树

将 HTML 解析成 DOM 树，经历一下过程：

编码：将 HTML 原始字节数据转成文件指定编码的字符。
令牌化：浏览器会根据 HTML 规范将字符串转换成各种令牌
- 什么是令牌：将<html> <body> <div> 这些分割转化成具有特殊意义的一组规则。令牌记录了开始和结束，如果<body>令牌开始与结束中间有<div>令牌，<div> 的父节点是<body>，这就为DOM树形提供了基础
生成对象：将每个令牌转化成定义其属性和规则的对象——节点对象，所有节点对象组成的就是DOM树

CSS 解析成 CSSOM 和 HTML 差不多，CSS 也是具有层级关系，比如：div p {color:red;} div 和 p 就具有父子关系，在给p标签渲染样式的时候，首先去寻找父标签有div的，然后才采取此样式渲染，这也是优化重点，尽量用类名选择器写样式，因为使用标签选择器，浏览器要在大量的标签中进行筛选，速度慢，相同类名量少有利于筛选

构建DOM树的流程，字节 -- 字符 -- 令牌 -- 节点对象 -- 文档对象模型。

解析HTML成DOM树栗子：

<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="awesome-photo.jpg"></div>
  </body>
</html>

DOM树构建过程

当遇到link标签的时候，停止解析HTML，获取对应路径下的css文件

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

将 CSS 解析成 CSSOM

CSSOM树

注意：

HTML在解析生成DOM树的时候，可能会因为CSS和JS加载导致HTML停止解析生成DOM树，这就是渲染阻塞(优化重点)，什么是渲染阻塞以及如何优化，请继续往下瞅瞅...

为什么是DOM树，因为HTML标签具有父子关系，树形结构能清晰描述节点之间的关系

当 HTML 解析器被脚本阻塞时，解析器虽然会停止构建 DOM，但仍会识别该脚本后面的资源，并进行预加载。

2、DOM 和 CSSOM 合成一棵渲染树（render tree）

DOM和CSSOM是独立的对象，并不能直接渲染到页面，需要将DOM和CSSOM结合在一起，这就是渲染树

渲染树

*   浏览器从DOM的根节点开始遍历每个可见节点并从CSSOM找到对应的css样式规则并应用

3. 根据渲染树布局，计算出渲染树的布局（layout）

css布局采用的是盒模型的思维模型来表示节点与节点之间的位置关系，盒模型包括：外边距(margin)、内边距(padding)、边框(border)、内容(content)。每个节点都是一个小盒子
从渲染树的根节点开始遍历根据屏幕的大小确切到每个节点的位置

4. 将渲染树绘制到屏幕

渲染树布局计算完成之后，浏览器立即发出Paint Setup与Paint事件，将渲染树绘制到屏幕上

参考：