从输入URL到页面展示的详细过程（从输入url到页面展示到底发生了什么）

从输入URL到页面展示的这个过程中牵扯到太多知识点，这里做一个大概的整理。文章主要内容摘自以下参考文献，流程有调整，为个人整理。
参考文章主要有：
https://www.cnblogs.com/xiaohuochai/p/9193083.html
https://blog.csdn.net/wlk2064819994/article/details/79756669（转载自https://www.cnblogs.com/xianyulaodi/p/6547807.html的一篇博文）
https://segmentfault.com/a/1190000006879700
TCP的三次握手和四次挥手：
https://blog.csdn.net/qq_38950316/article/details/81087809
https://www.jianshu.com/p/29868fb82890
TCP的拥塞控制参考：https://www.cnblogs.com/losbyday/p/5847041.html

大概流程：

1. 输入url地址
2. 应用层进行DNS解析
3. 应用层生成HTTP请求报文
4. 传输层建立TCP连接
5. 网络层使用IP协议来选择路线
6. 数据链路层实现网络相邻节点间可靠的数据通信
7. 物理层传输数据
8. 服务器处理反向传输
9. 服务器返回一个 HTTP 响应
10. 浏览器渲染

写在前边：

从输入URL到页面加载的主干流程如下：（参考https://www.cnblogs.com/xiaohuochai/p/9193083.html）
　　1、浏览器构建HTTP Request请求
　　2、网络传输
　　3、服务器构建HTTP Response 响应
　　4、网络传输
　　5、浏览器渲染页面

（图源自：https://www.cnblogs.com/xiaohuochai/p/9193083.html）

1. 输入url地址

当我们开始在浏览器中输入网址的时候，浏览器其实就已经在智能的匹配可能得 url 了，他会从历史记录，书签等地方，找到已经输入的字符串可能对应的 url，然后给出智能提示，让你可以补全url地址。对于 google的chrome 的浏览器，他甚至会直接从缓存中把网页展示出来，就是说，你还没有按下 enter，页面就出来了。

2. 应用层进行DNS解析

(1)什么是DNS？

DNS（Domain Name System，域名系统），因特网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过主机名，最终得到该主机名对应的IP地址的过程叫做域名解析（或主机名解析）。
　　通俗的讲，我们更习惯于记住一个网站的名字，比如www.baidu.com,而不是记住它的ip地址，比如：167.23.10.2。而计算机更擅长记住网站的ip地址，而不是像www.baidu.com等链接。因为，DNS就相当于一个电话本，比如你要找www.baidu.com这个域名，那我翻一翻我的电话本，我就知道，哦，它的电话（ip）是167.23.10.2。

(2)DNS查询的两种方式：递归查询和迭代查询

1、递归解析

当局部DNS服务器自己不能回答客户机的DNS查询时，它就需要向其他DNS服务器进行查询。此时有两种方式，如图所示的是递归方式。局部DNS服务器自己负责向其他DNS服务器进行查询，一般是先向该域名的根域服务器查询，再由根域名服务器一级级向下查询。最后得到的查询结果返回给局部DNS服务器，再由局部DNS服务器返回给客户端。

2、迭代解析

当局部DNS服务器自己不能回答客户机的DNS查询时，也可以通过迭代查询的方式进行解析，如图所示。局部DNS服务器不是自己向其他DNS服务器进行查询，而是把能解析该域名的其他DNS服务器的IP地址返回给客户端DNS程序，客户端DNS程序再继续向这些DNS服务器进行查询，直到得到查询结果为止。也就是说，迭代解析只是帮你找到相关的服务器而已，而不会帮你去查。比如说：baidu.com的服务器ip地址在192.168.4.5这里，你自己去查吧，本人比较忙，只能帮你到这里了。

（图源自https://segmentfault.com/a/1190000006879700）

（3）DNS域名称空间的组织方式

我们在前面有说到根DNS服务器，域DNS服务器，这些都是DNS域名称空间的组织方式。按其功能命名空间中用来描述 DNS 域名称的五个类别的介绍详见下表中，以及与每个名称类型的示例

（盗图）（图源于：https://blog.csdn.net/wlk2064819994/article/details/79756669）

（4）DNS优化

了解了DNS的过程，可以为我们带来哪些？上文中请求到google的IP地址时，经历了8个步骤，这个过程中存在多个请求(同时存在UDP和TCP请求，为什么有两种请求方式，请自行查找)。如果每次都经过这么多步骤，是否太耗时间？如何减少该过程的步骤呢？那就是DNS缓存。

DNS缓存
DNS存在着多级缓存，从离浏览器的距离排序的话，有以下几种: 浏览器缓存，系统缓存，路由器缓存，IPS（运营商）服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。

（5）DNS负载均衡

• 不知道大家有没有思考过一个问题: DNS返回的IP地址是否每次都一样？
• 如果每次都一样是否说明你请求的资源都位于同一台机器上面，那么这台机器需要多高的性能和储存才能满足亿万请求呢？其实真实的互联网世界背后存在成千上百台服务器，大型的网站甚至更多。
• 但是在用户的眼中，它需要的只是处理他的请求，哪台机器处理请求并不重要。DNS可以返回一个合适的机器的IP给用户。
• 可以根据每台机器的负载量，该机器离用户地理位置的距离等等，这种过程就是DNS负载均衡，又叫做DNS重定向。
• 大家耳熟能详的CDN(Content Delivery Network)就是利用DNS的重定向技术，DNS服务器会返回一个跟用户最接近的点的IP地址给用户，CDN节点的服务器负责响应用户的请求，提供所需的内容。在这里打个免费的广告，我平时使用的比较多的是七牛云的CDN(免费)储存图片。

原理：在DNS服务器中为同一个主机名配置多个IP地址,在应答DNS查询时,DNS服务器对每个查询将以DNS文件中主机记录的IP地址按顺序返回不同的解析结果，DNS服务器会返回一个跟用户最接近的点的IP地址给用户，CDN节点的服务器负责响应用户的请求，提供所需的内容，将客户端的访问引导到不同的机器上去,使得不同的客户端访问不同的服务器,从而达到负载均衡的目的｡

3. 应用层生成HTTP请求报文

应用层生成针对目标WEB服务器的HTTP请求报文，HTTP请求报文包括起始行、首部（请求头(Request Header)）和主体（请求正文）部分。

GET/sample.jspHTTP/1.1
Accept:image/gif.image/jpeg,*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
Accept-Encoding:gzip,deflate

username=jinqiao&password=1234

• 起始行：请求方法URI协议/版本（GET/sample.jsp HTTP/1.1）
• 首部：包括域名host、keep-alive、User-Agent、Accept-Encoding、Accept-Language、Cookie等信息。请求头(Request Header)请求头包含许多有关的客户端环境和请求正文的有用信息。例如，请求头可以声明浏览器所用的语言，请求正文的长度等。
• 请求正文：主体内容即要传输的内容。如果是get请求，则主体内容为空
• 请求头和请求正文之间是一个空行，这个行非常重要，它表示请求头已经结束，接下来的是请求正文。请求正文中可以包含客户提交的查询字符串信息：

username=jinqiao&password=1234

重要插入：HTTPS协议：

TTP报文是包裹在TCP报文中发送的，服务器端收到TCP报文时会解包提取出HTTP报文。但是这个过程中存在一定的风险，HTTP报文是明文，如果中间被截取的话会存在一些信息泄露的风险。那么在进入TCP报文之前对HTTP做一次加密就可以解决这个问题了。HTTPS协议的本质就是HTTP + SSL(or TLS)。在HTTP报文进入TCP报文之前，先使用SSL对HTTP报文进行加密。从网络的层级结构看它位于HTTP协议与TCP协议之间。

（图源自https://segmentfault.com/a/1190000006879700）
HTTPS过程

• HTTPS在传输数据之前需要客户端与服务器进行一个握手(TLS/SSL握手)；
• 在握手过程中将确立双方加密传输数据的密码信息；
• TLS/SSL使用了非对称加密，对称加密以及hash等；（具体过程请参考经典的阮一峰先生的博客TLS/SSL握手过程。）
• HTTPS相比于HTTP，虽然提供了安全保证，但是势必会带来一些时间上的损耗，如握手和加密等过程，是否使用HTTPS需要根据具体情况在安全和性能方面做出权衡。

4. 传输层建立TCP连接

• 传输层传输协议分为UDP和TCP两种

UDP是无连接的协议，而TCP是可靠的有连接的协议，主要表现在：接收方会对收到的数据进行确认、发送方会重传接收方未确认的数据、接收方会将接收到数据按正确的顺序重新排序，并删除重复的数据、提供了控制拥挤的机制（TCP的拥塞控制参考：https://www.cnblogs.com/losbyday/p/5847041.html）

由于HTTP协议使用的是TCP协议，为了方便通信，将HTTP请求报文按序号分为多个报文段(segment)，并对每个报文段进行封装。使用本地一个大于1024以上的随机TCP源端口(这里假设是1030)建立到目的服务器TCP80号端口(HTTPS协议对应的端口号是443)的连接，TCP源端口和目的端口被加入到报文段中，学名叫协议数据单元(Protocol Data Unit, PDU)。因TCP是一个可靠的传输控制协议，传输层还会加入序列号、确认号、窗口大小、校验和等参数，共添加20字节的头部信息。

（图源自：https://www.cnblogs.com/xiaohuochai/p/9193083.html）

• 浏览器向 web 服务器发送一个 HTTP 请求：
  
• 三次握手（建立连接）：
  
  
• 构建TCP请求会增加大量的网络时延，常用的优化方式如下所示

（1）资源打包，合并请求

（2）多使用缓存，减少网络传输

（3）使用keep-alive建立持久连接

（4）使用多个域名，增加浏览器的资源并发加载数，或者使用HTTP2的管道化连接的多路复用技术

• 四次挥手（断开连接）：

（图源自：https://www.jianshu.com/p/29868fb82890）
TCP三次握手和四次挥手详解：
https://www.jianshu.com/p/29868fb82890

5. 网络层使用IP协议来选择路线

处理来自传输层的数据段segment，将数据段segment装入数据包packet，填充包头，主要就是添加源和目的IP地址，然后发送数据。在数据传输的过程中，IP协议负责选择传送的路线，称为路由功能

6. 数据链路层实现网络相邻节点间可靠的数据通信

为了保证数据的可靠传输，把数据包packet封装成帧(Frame)，并按顺序传送各帧。由于物理线路的不可靠，发出的数据帧有可能在线路上出错或丢失，于是为每个数据分块计算出CRC(循环冗余检验)，并把CRC添加到帧中，这样接收方就可以通过重新计算CRC来判断数据接收的正确性。一旦出错就重传

将数据包packet封装成帧(Frame)，包括帧头和帧尾。帧尾是添加被称做CRC的循环冗余校验部分。帧头主要是添加数据链路层的地址，即数据链路层的源地址和目的地址，即网络相邻结点间的源MAC地址和目的MAC地址

7. 物理层传输数据

数据链路层的帧(Frame)转换成二进制形式的比特(Bit)流，从网卡发送出去，再把比特转换成电子、光学或微波信号在网络中传输

补充：网络传输

从客户机到服务器需要通过许多网络设备， 一般地，包括集线器、交换器、路由器等

【集线器】

集线器是物理层设备，比特流到达集线器后，集线器简单地对比特流进行放大，从除接收端口以外的所有端口转发出去

【交换机】

交换机是数据链路层设备，比特流到达交换机，交换机除了对比特流进行放大外，还根据源MAC地址进行学习，根据目的MAC地址进行转发。交换机根据数据帧中的目的MAC地址査询MAC地址表，把比特流从对应的端口发送出去

【路由器】
　　路由器是网络层设备，路由器收到比特流，转换成帧上传到数据链路层，路由器比较数据帧的目的MAC地址，如果有与路由器接收端口相同的MAC地址，则路由器的数据链路层把数据帧进行解封装，然后上传到路由器的网络层，路由器找到数据包的目的IP地址，并查询路由表，将数据从入端口转发到出端口。接着在网络层重新封装成数据包packet，下沉到数据链路层重新封装成帧frame，下沉到物理层，转换成二进制比特流，发送出去

8. 服务器处理反向传输

服务器接收到这个比特流，把比特流转换成帧格式，上传到数据链路层，服务器发现数据帧中的目的MAC地址与本网卡的MAC地址相同，服务器拆除数据链路层的封装后，把数据包上传到网络层。服务器的网络层比较数据包中的目的IP地址，发现与本机的IP地址相同，服务器拆除网络层的封装后，把数据分段上传到传输层。传输层对数据分段进行确认、排序、重组，确保数据传输的可靠性。数据最后被传到服务器的应用层

HTTP服务器，如nginx通过反向代理，将其定位到服务器实际的端口位置，如8080。比如，8080端口对应的是一个NodeJS服务，生成响应报文，报文主体内容是google首页的HTML页面

接着，通过传输层、网络层、数据链路层的层层封装，最终将响应报文封装成二进制比特流，并转换成其他信号，如电信号到网络中传输

反向传输的过程与正向传输的过程类似，就不再赘述

9. 服务器返回一个 HTTP 响应

自然而然这部分对应的就是后端工程师眼中的HTTP。后端从在固定的端口接收到TCP报文开始，这一部分对应于编程语言中的socket。它会对TCP连接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request对象，供上层使用。这一部分工作一般是由Web服务器去进行，我使用过的Web服务器有Tomcat, Jetty和Netty等等。

HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。

HTTP/1.1 200 OK
Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122

＜html＞
＜head＞
＜title＞http＜/title＞
＜/head＞
＜body＞
＜!-- body goes here --＞
＜/body＞
＜/html＞

状态行：

状态行由协议版本、数字形式的状态代码、及相应的状态描述，各元素之间以空格分隔。

• 格式: HTTP-Version Status-Code Reason-Phrase CRLF
• 例如: HTTP/1.1 200 OK \r\n

– 协议版本：是用http1.0还是其他版本

– 状态描述：状态描述给出了关于状态代码的简短的文字描述。比如状态代码为200时的描述为 ok

– 状态代码：状态代码由三位数字组成，第一个数字定义了响应的类别，且有五种可能取值。

响应报头
常见的响应报头字段有: Server, Connection…。

响应报文
服务器返回给浏览器的文本信息，通常HTML, CSS, JS, 图片等文件就放在这一部分。

如果HTTP响应报文是301或302重定向，则浏览器会依相应头中的location再次发送请求。

1）301和302的区别。

301和302状态码都表示重定向，就是说浏览器在拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址，这个地址可以从响应的Location首部中获取（用户看到的效果就是他输入的地址A瞬间变成了另一个地址B）——这是它们的共同点。

他们的不同在于。301表示旧地址A的资源已经被永久地移除了（这个资源不可访问了），搜索引擎在抓取新内容的同时也将旧的网址交换为重定向之后的网址；

302表示旧地址A的资源还在（仍然可以访问），这个重定向只是临时地从旧地址A跳转到地址B，搜索引擎会抓取新的内容而保存旧的网址。 SEO302好于301

2）重定向原因：

（1）网站调整（如改变网页目录结构）；
（2）网页被移到一个新地址；
（3）网页扩展名改变(如应用需要把.php改成.Html或.shtml)。
这种情况下，如果不做重定向，则用户收藏夹或搜索引擎数据库中旧地址只能让访问客户得到一个404页面错误信息，访问流量白白丧失；再者某些注册了多个域名的网站，也需要通过重定向让访问这些域名的用户自动跳转到主站点等。

3）什么时候进行301或者302跳转呢？

    当一个网站或者网页24—48小时内临时移动到一个新的位置，这时候就要进行302跳转，而使用301跳转的场景就是之前的网站因为某种原因需要移除掉，然后要到新的地址访问，是永久性的。

清晰明确而言：使用301跳转的大概场景如下：
1、域名到期不想续费（或者发现了更适合网站的域名），想换个域名。
2、在搜索引擎的搜索结果中出现了不带www的域名，而带www的域名却没有收录，这个时候可以用301重定向来告诉搜索引擎我们目标的域名是哪一个。
3、空间服务器不稳定，换空间的时候。

4）状态码

状态码是由3位数组成，第一个数字定义了响应的类别，且有五种可能取值:

1xx：指示信息–表示请求已接收，继续处理。

2xx：成功–表示请求已被成功接收、理解、接受。

3xx：重定向–要完成请求必须进行更进一步的操作。

4xx：客户端错误–请求有语法错误或请求无法实现。

5xx：服务器端错误–服务器未能实现合法的请求。
平时遇到比较常见的状态码有:200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500。

• 200 OK 表示客户端请求成功
• 204 No Content 成功，但不返回任何实体的主体部分
• 206 Partial Content 成功执行了一个范围（Range）请求
• 301 Moved Permanently 永久性重定向，响应报文的Location首部应该有该资源的新URL
• 302 Found 临时性重定向，响应报文的Location首部给出的URL用来临时定位资源
• 303 See Other 请求的资源存在着另一个URI，客户端应使用GET方法定向获取请求的资源
• 304 Not Modified 服务器内容没有更新，可以直接读取浏览器缓存
• 400 Bad Request 表示客户端请求有语法错误，不能被服务器所理解
• 401 Unauthonzed 表示请求未经授权，该状态代码必须与 WWW-Authenticate 报头域一起使用
• 403 Forbidden 表示服务器收到请求，但是拒绝提供服务，通常会在响应正文中给出不提供服务的原因
• 404 Not Found 请求的资源不存在，例如，输入了错误的URL
• 500 Internel Server Error 表示服务器发生不可预期的错误，导致无法完成客户端的请求
• 503 Service Unavailable 表示服务器当前不能够处理客户端的请求，在一段时间之后，服务器可能会恢复正常

10. 浏览器渲染

客户机接受到二进制比特流之后，把比特流转换成帧格式，上传到数据链路层，客户机发现数据帧中的目的MAC地址与本网卡的MAC地址相同，拆除数据链路层的封装后，把数据包上传到网络层。网络层比较数据包中的目的IP地址，发现与本机的IP地址相同，拆除网络层的封装后，把数据分段上传到传输层。传输层对数据分段进行确认、排序、重组，确保数据传输的可靠性。数据最后被传到应用层。

浏览器在收到HTML,CSS,JS文件后，它是如何把页面呈现到屏幕上的？

主资源到达后，浏览器的Parser模块解析主资源的内容，生成派生资源对应的DOM结构，然后根据需求触发派生资源的加载流程。比如，在解析过程中，如果遇到img的起始标签，会创建相应的image元素HTMLImageElement，接着依据img标签的内容设置HTMLImageElement的属性。在设置src属性时，会触发图片资源加载，发起加载资源请求

这里常见的优化点是对派生资源使用缓存

1)、使用parse模块解析HTML、CSS、Javascript资源

【解析HTML】

HTML解析分为可以分为解码、分词、解析、建树四个步骤

（1）解码：将网络上接收到的经过编码的字节流，解码成Unicode字符

（2）分词：按照一定的切词规则，将Unicode字符流切成一个个的词语(Tokens)

（3）解析：根据词语的语义，创建相应的节点(Node)

（4）建树：将节点关联到一起，创建DOM树

【解析CSS】

页面中所有的CSS由样式表CSSStyleSheet集合构成，而CSSStyleSheet是一系列CSSRule的集合，每一条CSSRule则由选择器CSSStyleSelector部分和声明CSSStyleDeclaration部分构成，而CSSStyleDeclaration是CSS属性和值的Key-Value集合

CSS解析完毕后会进行CSSRule的匹配过程，即寻找满足每条CSS规则Selector部分的HTML元素，然后将其Declaration声明部分应用于该元素。实际的规则匹配过程会考虑到默认和继承的CSS属性、匹配的效率及规则的优先级等因素

【解析JS】

JavaScript一般由单独的脚本引擎解析执行，它的作用通常是动态地改变DOM树（比如为DOM节点添加事件响应处理函数），即根据时间（timer）或事件（event）映射一棵DOM树到另一棵DOM树

简单来说，经过了Parser模块的处理，浏览器把页面文本转换成了一棵节点带CSS Style、会响应自定义事件的Styled DOM树

2)、构建DOM树、Render树及RenderLayer树

浏览器的解析过程就是将字节流形式的网页内容构建成DOM树、Render树及RenderLayer树的过程

使用parse解析HTML的过程，已经完成了DOM树的构建，接下来构建Render树

【Render树】

Render树用于表示文档的可视信息，记录了文档中每个可视元素的布局及渲染方式

RenderObject是Render树所有节点的基类，作用类似于DOM树的Node类。这个类存储了绘制页面可视元素所需要的样式及布局信息，RenderObject对象及其子类都知道如何绘制自己。事实上绘制Render树的过程就是RenderObject按照一定顺序绘制自身的过程

DOM树上的节点与Render树上的节点并不是一一对应的。只有DOM树的根节点及可视节点才会创建对应的RenderObject节点

【Render Layer树】

Render Layer树以层为节点组织文档的可视信息，网页上的每一层对应一个Render Layer对象。RenderLayer树可以看作Render树的稀疏表示，每个RenderLayer树的节点都对应着一棵Render树的子树，这棵子树上所有Render节点都在网页的同一层显示

RenderLayer树是基于RenderObject树构建的，满足一定条件的RenderObject才会建立对应的RenderLayer节点

下面是RenderLayer节点的创建条件：

（1）网页的root节点

（2）有显式的CSS position属性（relative，absolute，fixed）

（3）元素设置了transform

（4）元素是透明的，即opacity不等于1

（5）节点有溢出（overflow）、alpha mask或者反射（reflection）效果。

（6）元素有CSS filter（滤镜）属性

（7）2D Canvas或者WebGL

（8）Video元素

3)、布局和渲染

布局就是安排和计算页面中每个元素大小位置等几何信息的过程。HTML采用流式布局模型，基本的原则是页面元素在顺序遍历过程中依次按从左至右、从上至下的排列方式确定各自的位置区域

简单情况下，布局可以顺序遍历一次Render树完成，但也有需要迭代的情况。当祖先元素的大小位置依赖于后代元素或者互相依赖时，一次遍历就无法完成布局，如Table元素的宽高未明确指定而其下某一子元素Tr指定其高度为父Table高度的30%的情况

Paint模块负责将Render树映射成可视的图形，它会遍历Render树调用每个Render节点的绘制方法将其内容显示在一块画布或者位图上，并最终呈现在浏览器应用窗口中成为用户看到的实际页面

主要绘制顺序如下：

（1）背景颜色

（2）背景图片

（3）边框

（4）子呈现树节点

（5）轮廓

4)、硬件加速

开启硬件渲染，即合成加速，会为需要单独绘制的每一层创建一个GraphicsLayer

硬件渲染是指网页各层的合成是通过GPU完成的，它采用分块渲染的策略，分块渲染是指：网页内容被一组Tile覆盖，每块Tile对应一个独立的后端存储，当网页内容更新时，只更新内容有变化的Tile。分块策略可以做到局部更新，渲染效率更高

一个Render Layer对象如果需要后端存储，它会创建一个Render Layer Backing对象，该对象负责Renderlayer对象所需要的各种存储。如果一个Render Layer对象可以创建后端存储，那么将该RenderLayer称为合成层（Compositing Layer）

如果一个Render Layer对象具有以下的特征之一，那么它就是合成层：

（1）RenderLayer具有CSS 3D属性或者CSS透视效果。

（2）RenderLayer包含的RenderObject节点表示的是使用硬件加速的视频解码技术的HTML5 ”video”元素。

（3） RenderLayer包含的RenderObject节点表示的是使用硬件加速的Canvas2D元素或者WebGL技术。

（4）RenderLayer使用了CSS透明效果的动画或者CSS变换的动画。

（5）RenderLayer使用了硬件加速的CSSfilters技术。

（6）RenderLayer使用了剪裁(clip)或者反射(reflection)属性，并且它的后代中包括了一个合成层。

（7）RenderLayer有一个Z坐标比自己小的兄弟节点，该节点是一个合成层

最终的渲染流程如下所示：
　　
（图源自：https://www.cnblogs.com/xiaohuochai/p/9193083.html）
【重绘和回流】

重绘和回流是在页面渲染过程中非常重要的两个概念。页面生成以后，脚本操作、样式表变更，以及用户操作都可能触发重绘和回流

回流reflow是firefox里的术语，在chrome中称为重排relayout

回流是指窗口尺寸被修改、发生滚动操作，或者元素位置相关属性被更新时会触发布局过程，在布局过程中要计算所有元素的位置信息。由于HTML使用的是流式布局，如果页面中的一个元素的尺寸发生了变化，则其后续的元素位置都要跟着发生变化，也就是重新进行流式布局的过程，所以被称之为回流

前面介绍过渲染引擎生成的3个树：DOM树、Render树、Render Layer树。回流发生在Render树上。常说的脱离文档流，就是指脱离渲染树Render Tree

重绘是指当与视觉相关的样式属性值被更新时会触发绘制过程，在绘制过程中要重新计算元素的视觉信息，使元素呈现新的外观

由于元素的重绘repaint只发生在渲染层 render layer上。所以，如果要改变元素的视觉属性，最好让该元素成为一个独立的渲染层render layer

下面列举一些减少回流次数的方法

（1）不要一条一条地修改DOM样式，而是修改className或者修改style.cssText

（2）在内存中多次操作节点，完成后再添加到文档中去

（3）对于一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示

（4）在需要经常获取那些引起浏览器回流的属性值时，要缓存到变量中

（5）不要使用table布局，因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间

此外，将需要多次重绘的元素独立为render layer渲染层，如设置absolute，可以减少重绘范围；对于一些进行动画的元素，可以进行硬件渲染，从而避免重绘和回流
　
本文内容主要摘自其他参考文章，流程有调整，为个人整理，不到之处，欢迎留言指正。