深入浏览器渲染原理(一) — 浏览器渲染DOM过程
当访问一个网站的时候需要加载html，一个完整的html结构包含：dom树、文档、图片和媒体资源、样式css资源和脚本js资源。然后我们提出一个疑问:浏览器是如何加载（渲染）html的？
先看下面的html代码在渲染的时候弹出的是什么？并且注意图片是什么时候出来的？
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <!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>
|
1 2 3 4 5
| // 弹出的顺序为 第一次alert：null 第三次alert：[object HTMLDivElement] 第四次alert：[object HTMLDivElement] 第二次alert：[object HTMLDivElement]
|
在第一次打开浏览器的时候，如果你注意的话，首先会弹出1、3，之后出现图片和弹出4，最后弹出2。如果你对浏览器的渲染不了解的话，看到这样的结果你也许会很纳闷，下面我就带大家来看看上面我们提到的三个问题。
浏览器是如何加载（渲染）html的？
浏览器在加载html的时候是自上而下渲染的，具体的步骤如下：
1 2 3 4 5 6
| (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的区别：
1 2
| DOMContentLoaded 是在DOM结构加载完毕触发的； load 是页面资源（包括图像、脚本文件、CSS 文件等）加载完毕才弹出的
|