浏览器渲染HTML概述

要

当我们访问一个网站的时候，我们通常是在浏览器中输入我们所需要访问的网址，然后点击就可以浏览我们所需要浏览的网站，但浏览器在我们输入域名到返回给我们最后的结果也是经历了一番繁琐的操作。

浏览器通常的步骤如下
1.浏览器的地址栏输入URL并按下回车。
2.浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
3.DNS解析URL对应的IP。
4.根据IP建立TCP连接（三次握手）。
5.HTTP发起请求。
6.服务器处理请求，浏览器接收HTTP响应。
7.渲染页面，构建DOM树。
8.关闭TCP连接（四次挥手）
接下来我们主要分析第七点，也就是浏览器如何根据获取到的文件渲染出相应的页面，主要从HTML、CSS、JS这三点来分析

HTML

HTML称为超文本标签语言，是一种标识性的语言。普通的txt文档在加了HTML标签之后，就变得具有语义了，浏览器能根据不同的语义进行不同的解析。目前常见的HTML分为两种，一种是HTML另一种是XHTML。相较于XHTML的”严格“，HTML以其相对较为”宽松“的特效获得了较为广泛的喜爱

浏览器获取到HTML文挡的时候，会逐行解析文档，并根据文档内容将文档内容转化为DOM树在在浏览器中渲染出来

<html>
 <body>
 <h1>
 Hello World
 </h1>
 </body>
</html>
这是一个最基础的HTML文档，当浏览器获取到这个文件的时候，通过解析文字中的语义化标签，通过解析标签的<(Tag open state：开始标签)到>(Tag name state：结束标签)，属性名称和相应值，直到文档结束，并将其转换为DOM树并最终在浏览器中绘制出来。

DOM树

CSS

浏览器遇到语义解释性的CSS标签嵌入文件，那么此时IE的下载过程会启用单独连接进行下载，并在下载后继续进行解析。并且只有在文件解析完成后才会在往下解析（浏览器阻塞），浏览器对CSS样式的解析是从左到右的，比如.box .left p,会在页面中找到所有的p标签，然后在p标签中找其父元素有.left类的p元素，再找祖父元素有.box的p标签

如下图示，浏览器会按照从右向左的顺序去读取选择器。先找到span然后顺着往上找到class为“haha”的div再找到id为“molly”的元素。成功匹配到则加入结果集，如果直到根元素html都没有匹配，则不再遍历这条路径，从下一个span开始重复这个过程

提升渲染效率的几个点
- 尽量少的去对标签进行选择，而是用class
- 不要去用标签限定ID或者类选择符
- 减少层级关系，使查询效率更高
- 尽量少的去使用后代选择器，降低选择器的权重值
- 不要放空的class
- 多用继承属性，可以通过继承避免对属性重复使用

JS

浏览器遇到语义解释性的JS标签嵌入文件，那么此时IE的下载过程会启用单独连接进行下载，并在下载后继续进行解析。并且只有在JS文件解析完成并且加载完后才会继续往下解析（浏览器阻塞）

预解析

在当前作用域中，JavaScript代码执行之前，浏览器首先会默认的把所有带var和function声明的变量进行提前的声明或者定义（主要指的是ES6之前，由于ES6引了let和const所以会存在不同）

逐行解析代码

JS代码在逐行解析代码的时候，变量赋值表达式是可以修改预解析的值。但如果有多个表达式对相同的变量多次赋值，那么除过函数声明不能修改上次的赋值，变量赋值和函数表达式都可以修改这个变量的值

总结

整个渲染的过程大致上可以概述为

- 用户输入网址，服务器返回html文档

- 浏览器开始解析HTML文档
- 浏览器解析文档过程中解析到CSS或者JS标签嵌入文件，这时候浏览器优先解析标签嵌入文件，待标签嵌入文件解析完成并执行完成后在继续解析HTML文档
- 浏览器将解析好的DOM进行绘制，在浏览器中绘制出来

参考资料

https://segmentfault.com/a/1190000016253407
https://www.jianshu.com/p/b41f1258c044

览器输入URL到页面渲染完成，这个过程大致可分为两个阶段：网络通信和页面渲染。

一、网络通信

互联网内各网络间设备的通信遵循TCP/IP协议，利用TCP/IP协议进行网络通信时，会通过分层与对方通信。数据传输的过程：由应用层产生数据后，经过传输层的分段处理（添加TCP或UDP包头）、网络层（添加IP地址信息）、数据链路层（封装成MAC帧）、物理层传输电信号。

代浏览器的组成

浏览器可以分为两部分：shell和浏览器内核，shell是外壳，如工具栏，菜单等，内核是根本，是基于标记语言显示的程序或模块。

浏览器内核分为两部分：渲染引擎和JS引擎。

渲染引擎

渲染引擎主要负责解析浏览器所呈现的内容，比如HTML,CSS。渲染引擎的主要流程

始解析 HTML 文档，并将各标记逐个转化成“内容树”上的 DOM 节点。同时也会解析外部 CSS 文件以及样式元素中的样式数据。HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构：呈现树。呈现树包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。

呈现树构建完毕之后，进入“布局”处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。下一个阶段是绘制 - 呈现引擎会遍历呈现树，由用户界面后端层将每个节点绘制出来。

需要着重指出的是，这是一个渐进的过程。为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。 Webkit 渲染引擎主流程如下图：

Gecko渲染引擎如下图：

浏览器的结构

1、用户界面。包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。

2、浏览器引擎。在用户界面和呈现引擎之间传送指令。

3、呈现引擎。负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。

4、用户界面后端。用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。

5、JavaScript 解释器。用于解析和执行 JavaScript 代码。

6、数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

7、网络。用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现

关于DOM解析有如下HTML片段

关于CSS解析

html代码：

css代码：

解析成CSS tree

注意：CSS遍历DOM，一层层找到对应的渲染规则是十分复杂的过程，这也是我们经常要求尽量精简DOM结构，减少CSS嵌套层级的原因。CSS渲染流程

1、计算CSS属性； 2、构建Render Tree； 3、Layout，进行定位，元素的坐标及尺寸，将元素放到指定位置； 4、绘制注意：图中有两种箭头，一种是指向流程自身的，表示“回流”，即修改某个属性会导致页面进行重新渲染，一种的指向外部的，表示“重绘”，即修改某个属性不会影响整个页面布局。

重绘与回流

这是前端经常会提到的两个概念。重绘：Repaint，可以理解为页面局部某个元素要进行重新绘制，比如修改元素的背景颜色，但是几何尺寸并不会变；回流：Reflow，可以理解为页面整个重新绘制，比如修改元素的尺寸，往往会导致整个render tree要进行重新计算，reflow是从html标签开始自上而下一次重新计算元素尺寸，重新布局。通过两者概念区别明显得知，回流要比重绘的成本大得多，我们应该尽量减少回流操作，减少页面性能消耗。

（1）引起回流的方法或操作：

任何会改变元素几何信息(元素的位置和尺寸大小)的操作，都会触发回流。

元素尺寸改变——边距、填充、边框、宽度和高度
内容变化，比如用户在input框中输入文字
浏览器窗口尺寸改变——resize事件发生时
计算 offsetWidth 和 offsetHeight 属性
设置 style 属性的值

（2）常见引起重绘属性和方法减少reflow/repaint

不要一条一条地修改DOM的样式。与其这样，还不如预先定义好css的class，然后修改DOM的className。
把DOM离线后修改。

使用documentFragment 对象在内存里操作DOM
先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他显示出来。
clone一个DOM结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。

不要把DOM结点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。

4.尽可能的修改层级比较低的DOM。当然，改变层级比较底的DOM有可能会造成大面积的reflow，但是也可能影响范围很小。

5.千万不要使用table布局。因为可能很小的一个小改动会造成整个table的重新布局。

在线咨询

上一篇：HTML制作图文混排型网页
下一篇：HTML网络编程之时间格式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商