在条记本电脑屏幕上的运用
输入 URL，浏览器的实行过程首先做 DNS 查询，如果这一步做了智能 DNS 解析的话，会供应访问速率最快的 IP 地址回来 ( DNS 解析 )接下来是 TCP 握手，( TCP 连接 )运用层会下发数据给传输层，这里 TCP 协议会指明两端的端口号，然后下发给网络层。网络层中的 IP 协议会确定 IP 地址，并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧构造中，末了便是物理层面的传输了TCP 握手结束后会进行 TLS 握手，然后就开始正式的传输数据数据在进入做事端之前，可能还会先经由卖力负载均衡的做事器，它的浸染便是将要求合理的分发到多台做事器上，这时假设做事端会相应一个 HTML 文件首先浏览器会判断状态码是什么,进行对应的操作，( HTTP 要求/相应 )如果是 200 那就连续解析，如果 400 或 500 的话就会报错，如果 300 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错浏览器开始解析文件，如果是 gzip 格式的话会先解压一下，然后通过文件的编码格式知道该如何去解码文件文件解码成功后会正式开始渲染流程，先会根据 HTML 构建 DOM 树，有 CSS 的话会去构建 CSSOM 树。如果碰着 script 标签的话，会判断是否存在 async 或者 defer ，存在 async ,会并行进行下载并实行 JS，存在 defer 会先下载文件，然后等待 HTML 解析完成后顺序实行，如果 async 或者 defer 都没有，就会壅塞住渲染流程直到 JS 实行完毕。碰着文件下载的会去下载文件，这里如果利用 HTTP 2.0 协议的话会极大的提高多图的下载效率。( http和https差异 ①安全性,② 通过tcp复用减少要求tcp握手,减少网络上的开销 )初始的 HTML 被完备加载和解析后, 会触发 DOMContentLoaded 事宜 CSSOM 树和 DOM 树构建完成后 , 会开始天生 Render 树，这一步便是确定页面元素的布局、样式等等诸多方面的东西在天生 Render 树的过程中，浏览器就开始调用 GPU 绘制，合成图层，将内容显示在屏幕上了 ( GPU =Graphic Processing Unit)图形处理器 )
重排（回流）与重绘
发生的根本事理便是元素的几何属性发生了改变 ,
重排卖力元素的几何属性更新，重绘卖力元素的样式更新。
重排一定带来重绘，但是重绘未必带来重排。比如，改变某个元素的背景，这个就不涉及元素的几何属性，以是只发生重绘。
如何减少重绘与重排(回流)CSS利用 transform 替代 top利用 visibility 更换 display: none ，
由于前者只会引起重绘，后者会引发重排（改变告终构)
避免利用table布局，可能很小的一个小改动会造玉成部 table 的重新布局。尽可能在DOM树的最末端改变class，重排是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限定了重排的范围，使其影响尽可能少的节点。避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。（只管即便层级扁平）<div> <a> <span></span> </a></div><style> span { color: red; } div > a > span { color: red; }</style>
对付第一种设置样式的办法来说，浏览器只须要找到页面中所有的 span 标签然后设置颜色，但是对付第二种设置样式的办法来说，浏览器首先须要找到所有的 span 标签，然后找到 span 标签上的 a 标签，末了再去找到 div 标签，然后给符合这种条件的 span 标签设置颜色，这样的递归过程就很繁芜。
以是我们该当尽可能的避免写过于详细的 CSS 选择器，然后对付 HTML 来说也只管即便少的添加无意义标签，担保层级扁平。
将动画效果运用到position属性为absolute或fixed的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是重排，同时，掌握动画速率可以选择 requestAnimationFrame避免利用CSS表达式，可能会引发重排(回流)。将频繁重绘或者回流的节点设置为图层。由于图层能够阻挡该节点的渲染行为影响别的节点，例如will-change、video、iframe等标签，浏览器会自动将该节点变为图层。CSS3 硬件加速（GPU加速），利用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对付动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。
JavaScript避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性变动class属性。避免频繁操作DOM，创建一个documentFragment，在它上面运用所有DOM操作，末了再把它添加到文档中。避免频繁读取会引发回流/重绘的属性，如果确实须要多次利用，就用一个变量缓存起来。对具有繁芜动画的元素利用绝对定位，使它分开文档流，否则会引起父元素及后续元素频繁重排。
DocumentFragment文档片段接口表示一个没有父级文件的最小文档工具。它被作为一个轻量版的 Document 利用，用于存储已排好版的或尚未打理好格式的 XML 片段。最大的差异是由于 DocumentFragment 不是真实 DOM 树的一部分，它的变革不会触发 DOM 树的重新渲染，且不会导致性能等问题。
