首页 > 操作系统 >

深入的浏览器渲染原理（1）

电脑杂谈　发布时间：2020-03-23 17:11:08　来源：网络整理

js 同步加载异步加载图片_mac装到一半提示安装器加载失败_浏览器加载图片原理

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

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

浏览器加载图片原理_mac装到一半提示安装器加载失败_js 同步加载异步加载图片

首先，渲染时弹出的以下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>

// 弹出的顺序为
第一次alert：null
第三次alert：[object HTMLDivElement]
第四次alert：[object HTMLDivElement]
第二次alert：[object HTMLDivElement]

js 同步加载异步加载图片_浏览器加载图片原理_mac装到一半提示安装器加载失败

第一次打开浏览器时，如果您注意，它将弹出1、3，然后是图片并弹出4，然后弹出2. 如果您不了解浏览器渲染，您可能想知道何时看到这样的结果. 我将为您介绍上面提到的三个问题.

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

mac装到一半提示安装器加载失败_浏览器加载图片原理_js 同步加载异步加载图片

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

(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//js:DOMContentLoaded; jq:ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//js:onload; jq:load

mac装到一半提示安装器加载失败_js 同步加载异步加载图片_浏览器加载图片原理

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

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

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

相关阅读

发表评论　　请自觉遵守互联网相关的政策法规，严禁发布、暴力、反动的言论

计晓博

以乱放屁罪判处3年有期徒刑

2026年03月26日回复顶转发

每日福利

热点图片

热点排行