MyException - 我的异常网
当前位置:我的异常网» Web前端 » 深入浏览器点染原理—浏览器渲染DOM过程

深入浏览器点染原理—浏览器渲染DOM过程

www.MyException.Cn  网友分享于:2013-12-30  浏览:0次
深入浏览器渲染原理—浏览器渲染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>

 

// 弹出的顺序为

第一次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 文件等)加载完毕才弹出的

 

.

文章评论

初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
我的丈夫是个程序员
我的丈夫是个程序员
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
程序员和编码员之间的区别
程序员和编码员之间的区别
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
程序员必看的十大电影
程序员必看的十大电影
编程语言是女人
编程语言是女人
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
Java程序员必看电影
Java程序员必看电影
程序员的鄙视链
程序员的鄙视链
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
旅行,写作,编程
旅行,写作,编程
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
漫画:程序员的工作
漫画:程序员的工作
我是如何打败拖延症的
我是如何打败拖延症的
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
为什么程序员都是夜猫子
为什么程序员都是夜猫子
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
程序员应该关注的一些事儿
程序员应该关注的一些事儿
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
中美印日四国程序员比较
中美印日四国程序员比较
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
代码女神横空出世
代码女神横空出世
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
老程序员的下场
老程序员的下场
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
每天工作4小时的程序员
每天工作4小时的程序员
一个程序员的时间管理
一个程序员的时间管理
那些争议最大的编程观点
那些争议最大的编程观点
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
10个调试和排错的小建议
10个调试和排错的小建议
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
鲜为人知的编程真相
鲜为人知的编程真相
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
总结2014中国互联网十大段子
总结2014中国互联网十大段子
如何成为一名黑客
如何成为一名黑客
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有