深入的浏览器渲染原理-浏览器渲染DOM过程

访问网站时浏览器加载图片原理，您需要加载html. 完整的html结构包含: dom树，文档，图片和媒体资源，样式css资源和脚本js资源. 然后我们提出一个问题

浏览器如何加载（渲染）html？

首先查看以下呈现时弹出的html代码？并注意图片何时出来？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
<script>
    var box1 = document.getElementById('box')
    alert("第一次alert：" + box1)
    window.onload = function(){
        var box2 = document.getElementById('box')
        alert("第二次alert：" + box2)
    }
</script>
</head>
<body>
    <div id="box">
        <h1>测试代码</h1>
        <img src="img/logo.png" alt="">
    </div>
<script>
    var box3 = document.getElementById('box')
    alert("第三次alert：" + box3)
    document.addEventListener('DOMContentLoaded', function(){ 
        var box4 = document.getElementById('box')
        alert("第四次alert：" + box4)
    }, false)
</script>
</body>
</html>

//弹出顺序是

第一警报: 空

第三个警报: [object HTMLDivElement]

第四警报: [object HTMLDivElement]

第二警报: [object HTMLDivElement]

第一次打开浏览器时，如果注意，它将首先弹出1、3，然后是图片并弹出4，最后弹出2. 如果您不知道浏览器，您可能会很困惑地看到这样的结果. 下面，我将带您了解上面提到的三个问题.

浏览器如何加载（渲染）html？

加载HTML时，浏览器从上到下呈现，具体步骤如下:

（1）解析HTML结构.

（2）加载外部脚本和样式表文件.

（3）解析并执行脚本代码.

（4）构造HTML DOM模型. // js: DOMContentLoaded; jq: 准备好了

（5）加载图片等外部文件.

（6）页面已加载. // js: onload; jq: 加载

弹出窗口1和3可以看作是自上而下的. 第一个弹出窗口为null，指示尚未渲染DOM，并且找不到相应的标签. 它第三次可以正常弹出的是DOM对象，表示在DOM树加载后可以找到相应的标签. 在第二次和第四次中，添加了一些事件，并且在DOM渲染过程中触发了相应的事件. 从弹出的内容和加载DOM结构后触发DOMContentLoaded的顺序可以看出. 之后，出现图片，最后弹出第二个图片浏览器加载图片原理，指示在加载页面资源（包括图像，脚本文件，CSS文件等）后弹出onload. 通过这样一个小的示例，我完全掌握了浏览器加载HTML的整个过程. 通过封装DOMContentLoaded和onload也可以在jquery中实现ready和load的实现. 他做了一层兼容的处理.

事件DOMContentLoaded和负载之间的区别:

①在加载DOM结构时触发DOMContentLoaded；

②仅在加载页面资源（包括图像，脚本文件，CSS文件等）后弹出加载

.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-200461-1.html