浅析 浏览器渲染的过程

德玛敲前端
109 阅读3分钟

以下内容均为学习分享，如有错误或遗漏，欢迎各位前辈指点…

浏览器的渲染过程(画)

解析HTML

浏览器从网络或本地文件中获取HTML源代码，然后从上到下的解析源代码(源代码是一个字符串，需要解析) 若解析过程中，读取css或js，停止解析html，转而解析css或执行JS

<!DOCTYPE html> //文档声明
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    //停止html解析，下载和解析css之后，再进行html解析
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <h1>hello world</h1>
    //图片，音频资源不会停止解析html
    <img src="./1.jpg">
    //停止html解析，下载和执行js文件之后，再继续html解析
    <script src="js/indedx.js"></script>
    <p>小耗子敲前端</p>
</body>
</html>

解析html过程如下图所示：

flowchart LR
    读取html --> 1解析html --> 读取css --> 解析css--> 2解析html -->读取JS --> 执行JS -->解析html

问题1：
为什么要将css写到页面的开头，而js写到页面的最后？
将css写到页面开头，是为了让浏览器尽快的读取并解析样式；避免用户看到丑陋并且单一的页面，也是为了避免页面闪烁
将JS代码写到最后，是为了让浏览器尽快呈现页面给客户，然后再执行js完成交互功能。

生成dom树

浏览器一边解析HTML，一边会生成dom树，我们在JS中获取到的DOM就是DOM树中的DOM

image.png

如果把获取dom元素对象操作的js写在开头，是获取不到dom对象的 那么应该怎么做才能拿到dom元素？

  • 当DOM树完全生成之后，会触发DOMContentLoaded事件
<script>
       //这个事件不能通过document.ondom...来注册
       document.addEventListener('DOMContentLoaded',fucntion(){
           ......
       })
</script>
  • 当页面中的所有外部资源全部加载完毕后，会触发load事件
    window.onload=function(){
                .....
     }
  • 两个事件有什么区别？ load事件是网页中的所有资源都加载完成才会触发，也可以针对单个外部资源使用 DOMContentLoaded事件是dom元素加载完就会触发

生成渲染树

浏览器一边生成DOM树，一边计算dom树中每个节点的样式规则，最终形成渲染树 css属性的计算过程，发生在这一步骤

布局layout/重排reflow

这个步骤又reflow(回流，重排)，是指浏览器一边生成渲染树，一边计算每个元素最终的尺寸和位置完成后，页面中所有元素的位置和尺寸就确定下来了，即将渲染到页面。 这个步骤在页面之后的运行过程中不断的重复，下面的js操作均会导致refolw

  • 获取元素的尺寸和位置
  • 直接或间接改变元素的尺寸和位置

reflow非常的耗时，浏览器为了提升性能，对js中连续导致reflow的代码，把reflow的时间点延迟到结束后进行，但是在此过程中，如果遇到了获取尺寸和位置的代码，浏览器会迫不得已立即reflow

dom.style.width=""
dom.style.height=""
dom.style.left=""
dom.style.top=""

    改变宽度 --> 改变高度 --> 改变横坐标 --> 改变纵坐标 --> reflow

dom.style.width=""
dom.style.height=""
dom.clientHeight //读取高度，导致强行reflow
dom.style.left=""
dom.style.top=""

    改变宽度 --> 改变高度 -->读取高度--> reflow --> 改变横坐标 --> 改变纵坐标 --> reflow

重绘

浏览器一边reflow，一边进行生成对应的图形绘制到页面，绘制的过程就叫做重绘 所有会导致reflow的代码，均会导致重绘 绘制的过程是靠gpu（图形处理器）完成的，速度非常快，因此，相对于导致reflow的代码，仅会导致重绘的代码效率高出很多 凡是不会影响盒子排列，仅影响盒子外观的代码都不会导致reflow，仅仅会发生重绘，例如

  • 改变背景颜色
  • 改变字体颜色
  • 边框
  • 背景图
  • .....

这也是css3效率更高的原因，因为同样的操作， css3可能不会发生reflow，只会重绘。

avatar
文章
阅读
粉丝