• 浏览器——浏览器的解析过程以及CSS、JS、DOM之间的加载关系

    一、浏览器的渲染过程

    1. 解析HTML构成DOM树
    2. 解析CSS构成CSSOM树
    3. 合并DOM树和CSSOM树为render树
    4. 进行回流，确定各DOM的尺寸、位置
    5. 进行重绘，绘制页面的像素信息
    6. 将信息发送给GPU，GPU将页面绘制到屏幕上

     如上图，我们可以得到两个信息：

    1. CSS和HTML的加载是异步的，二者互不干扰
    2. CSS的加载会阻塞DOM的渲染，因为必须等DOM树和CSSOM树合并为渲染树之后，才能进行DOM的渲染

    二、JS阻塞DOM解析

    如果script标签内不带defer/async，那么浏览器在解析到script标签时会停止DOM的解析，一直等到script标签的加载与执行完成后，再进行之后的DOM解析。

    如果添加defer标签，则script标签的加载不阻塞DOM加载，并在DOM加载完成后按照引入的顺序执行。

    如果添加async标签，则script标签的加载也不阻塞DOM加载，但是在加载完之后立马执行，不能保证执行的顺序。

    三、CSS阻塞JS执行

    CSS的加载会阻塞JS的执行，进而阻塞DOM的解析。

    1. <head>
    2.   <link rel="stylesheet" href="./style.css?sleep=3000"> // 假设css的加载会花3s
    3.   <script src="./index.js"></script>
    4. </head>
    5. <body>
    6.   <p>hello world</p>
    7. </body>

    css和js同时加载，但是由于css未加载完毕，js代码不执行  -> 由于js代码还未执行，DOM元素不加载 -> 3秒后css加载完毕，js代码开始执行 -> js代码执行完毕，开始解析DOM

    四、JS会触发页面的渲染

    因为JS代码需要操作DOM，遇到script标签后，会先渲染一次标签之前的所有DOM，然后再加载和执行JS 。

    1. <body>
    2.     <p id="box1">world</p>
    3.     <script>
    4.         console.log(document.getElementById('box1'));
    5.         console.log(document.getElementById('box2'));
    6.     </script>
    7.     <p id="box2">hello</p>
    8. </body>

    上述代码能获取到box1，但是无法获取到box2，因为js执行时box1已经解析和渲染，而box2还未解析和渲染。

  • 相关阅读:
    Android中fastboot devices无法发现设备解决方案和adb remount问题解决
    ai智能机器人关于语音打断怎么设置
    nn.AdaptiveAvgPool2d(output_size)详解
    ESP-IDF-V5.1.1使用websocket
    linux11.22
    工作记录2
    Java多线程编程怎么学？10年开发大佬用300案例进行详解，附带学习路线
    哈夫曼树的递归打印不能实现
    编程参考 - std::exchange和std::swap的区别
    【从零开始学习 SystemVerilog】11.4、SystemVerilog 断言—— $rose, $fell, $stable
  • 原文地址：https://blog.csdn.net/ZKH129/article/details/125498367