获取js渲染后的html_#19 页面渲染是什么样的一个过程？——浅谈页面渲染

首先在我们访问了一个网站的时候浏览器从你输入地址到展现出来页面，大致的有这样的过程

1.解析HTML

最开始获取的就是HTML文档，在下载完成后开始解析

2.其他静态资源

在解析HTML的过程中如果遇到了css，js等外部外部资源时，浏览器会立即下载这些资源，但是需要注意的是js文件，在解析HTML的时候如果遇到的是js文件HTML的解析会暂停下来，等js下载执行后再继续解析HTML，这也是为什么我们的js文件总是放在body的闭合标签之前的原因，为了首屏渲染的速度

3.DOM树

HTML时浏览器会把解析出来的HTML转为DOM对象，并组装DOM树

4.CSSOM树

css也是同理，会吧css解析成css对象并组装成CSSOM树

5.render tree

在有了DOM树和CSSOM树后，浏览器会依据他们俩构建渲染树，而不同浏览器的构建方式有可能不同，但是还是有很多共同点的

6.布局

有了渲染树所有元素的位置与样式就可以确定了，浏览器就可以开始计算所有元素的位置，样式，大小

7.渲染

计算完成后浏览器就会开始渲染，最终将页面呈现在我们面前

---

渲染树

1.渲染树结构不完全与DOM树结构相同

渲染树会忽略不可见元素，但是不会忽略需要站位但不可见的元素如：[visibility:hidden]

2.样式优先级

大部分情况下遵循以下情况

内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器 > 继承样式 > 浏览器默认样式

---

重绘与重排

从之前的介绍的浏览器渲染页面的过程你肯定可以发现，渲染树是动态构建的

既然是动态构建那么我们的改动肯定会造成渲染树重建，那这就要提到两个机制重绘与重排

1.重排

在做前端开发的时候对于元素的增加，删除，或者改变布局，大小等操作肯定十分的熟悉了，

执行这类操作的dom节点和受其影响的节点都要重新计算，重新来一遍之前介绍过的流程，DOM树和CSSOM树等也会重新构建，这种机制就叫做重排，所以频繁的重排肯定会影响性能，在开发过程中应该合理规划这些操作，不要逐项执行

2.重绘

在我们给在元素改变背景色，字体等操作时，不涉及大小与位置的改变，也不会影响其他元素的布局时，并不会重新构建渲染树，而是对元素的样式重新绘制，这就是重绘