杀手 '杀手' 发布于2017-09-11,阅读706次,热度3次

深入浏览器渲染原理(一)—浏览器渲染DOM过程

当访问一个网站的时候需要加载html,一个完整的html结构包含:dom树、文档、图片和媒体资源、样式css资源和脚本js资源。然后我们提出一个疑问


  1. 浏览器是如何加载(渲染)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>
// 弹出的顺序为
第一次alert:null
第三次alert:[object HTMLDivElement]
第四次alert:[object HTMLDivElement]
第二次alert:[object HTMLDivElement]


在第一次打开浏览器的时候,如果你注意的话,首先会弹出1、3,之后出现图片和弹出4,最后弹出2。如果你对浏览器的渲染不了解的话,看到这样的结果你也许会很纳闷,下面我就带大家来看看上面我们提到的三个问题。


浏览器是如何加载(渲染)html的?

浏览器在加载html的时候是自上而下渲染的,具体的步骤如下:

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


弹出1、3可以看出来来是自上而下的,第一次弹出的是null说明DOM还没渲染完成,找不到对应的标签。第三次能正常弹出是DOM对象,说明DOM树已经加载完可以找到对应的标签。第二次和第四次是添加了一些事件,在DOM渲染的过程触发对应的事件执行。从弹出的内容和先后顺序可以看出 DOMContentLoaded 是在DOM结构加载完毕触发的。之后出现了图片,最后弹出第二个,说明 onload 是页面资源(包括图像、脚本文件、CSS 文件等)加载完毕才弹出的。通过这样一个小例子彻底的掌握了浏览器加载html的全过程。jquery 中的ready和load的的实现也是通过封装 DOMContentLoaded和onload 来实现的他做了一层兼容处理。


事件DOMContentLoaded和load的区别:

DOMContentLoaded 是在DOM结构加载完毕触发的;
load 是页面资源(包括图像、脚本文件、CSS 文件等)加载完毕才弹出的





扫一扫移动端阅读或分享

杀手  做个有信仰的程序猿杀手,解决您所有的问题

iGeekBar 的 Party Boy,主要从事于web大前端,喜爱coding、设计、产品、健身、跑步、游泳,爱折腾不将就。
     扫一扫立刻加入iGeekBar会员QQ群(545980198)
    和更多iG客会员交流分享吧~