页面渲染的过程html

整个渲染过程其实就是通过浏览器渲染引擎的解析，输出URL对应的各种资源，从而输出一个视觉图像。URL：统一资源定位符（UniformResourceLocator）URI：因为I（Identifier）是统一资源标识符，所以可以唯一标识一个资源。导语：URI、URL、URNURI可以分为URL、URN或者一个兼具定位符和名称特征的东西。URN就像一个人的名字，而URL就像一个人的地址。换句话说：URN标识事物，URL提供查找它的方法。例如：动物地址约定：//地球/中国/浙江省/杭州市/西湖区/某大学/No.14号宿舍楼/525宿舍/张三人。可以看出，这个字符串标识了一个唯一的人，起到了URI的作用，所以URL是URI的一个子集。在上面，我们也可以通过身份证号来唯一标识一个人。对于杭州的张三，我们也可以通过：身份证号：123456789来识别他。所以，无论我们使用定位还是编号，都可以唯一确定一个人，这是对URl的一种实现，而URL是通过定位实现的URI。渲染模块：HTML解释器：解释HTML语言的解释器，本质上是将HTML文本解释成DOM树（文档对象模型）。CSS解释器：解释样式表的解释器，其作用是为DOM中的每个元素对象添加样式信息，从而为最终结果的布局计算提供依据。布局：结合DOM和CSS样式信息，计算出它们的大小、位置等布局信息，形成一个可以表示所有信息的内部表示模型，即渲染树。JavaScript引擎：JavaScript可以修改网页内容，也可以修改CSS信息。JavaScript引擎解释JavaScript代码，将代码的逻辑和对DOM和CSS的改变应用到布局中，从而改变渲染结果。基本流程：1.解析HTML文件，创建DOM树浏览器解析html源代码，然后创建DOM树。并行请求css/image/js在DOM树中，每个HTML标签都有对应的节点，每个文本也有对应的文本节点。DOM树的根节点是documentElement，对应html标签。2、解析CSS，形成CSS对象模型浏览器解析CSS代码，计算出最终的样式数据。构建一个CSSOM树。它会简单地忽略CSS代码中的非法语法。解析CSS时，会按照以下顺序定义优先级：浏览器默认设置<用户设置<外部链接样式<内联样式renderingtree（渲染树）。渲染树有点像DOM树，但也有区别。DOM树与HTML标签完全一一对应，但是渲染树忽略了不需要渲染的元素，比如head、display:none元素等。text是渲染树中的一个独立节点。渲染树中的每个节点存储相应的css属性。4.布局和绘制渲染树创建好后，浏览器就可以直接根据渲染树将页面绘制到屏幕上。以上四个步骤不是一次依次完成的。如果修改了DOM或CSSOM，则会重复上述过程。事实上，CSS和JavaScript经常多次修改DOM或CSSOM。Repaint（重绘）重绘是改变不影响元素在网页中位置的元素样式，如background-color（背景色）、border-color（边框色）、visibility（可见性）、浏览器会根据元素的新属性重绘一次（这就是重绘，或者重建样式），让元素有一个新的外观。重新绘制不会导致重新布局，因此它不一定会伴随回流。Reflow（重新排列）渲染对象在创建并添加到渲染树时不包含位置和大小信息。计算这些值的过程称为布局或回流。“重绘”并不一定需要“重排”。比如改变某个网页元素的颜色，只会触发“重绘”，不会触发“重排”，因为布局没有改变。然而，“重排”必然导致“重绘”。例如改变网页元素的位置，会同时触发“重排”和“重绘”，因为布局发生了变化。这引出了一个问题：浏览器如何优化渲染？(1)将多次更改样式属性的操作合并为一个操作(2)将需要多次重排的元素的position属性设置为absolute或fixed，使该元素脱离文档流，其变化不会影响到其他元素。比如有动画效果的元素最好设置为绝对定位。(3)由于display属性为none的元素不在渲染树中，所以对隐藏元素的操作不会引起其他元素的重排。如果要对某个元素进行复杂的操作，可以先将其隐藏，操作完成后再显示。这只会在隐藏和显示时触发2次重排。