web浏览器渲染流程，window.onload() 与 $(window).load()、$(document).ready() 与 $(function(){}) 的区别和关联
一、前言
我们在编写前端代码的js文件时，往往是会先写一个$(function(){})，然后才会在大括号里面继续写我们自己的代码。当时并不能理解为什么要添加这样一个东西，只是把它当做一个标签一样添加到代码中。直到有一次单独写个页面，把它给漏掉了，于是。。。
报错了，UNcaught ReferenceError: ... is not defined
原来$(function(){})的作用是将括号中的代码，延迟到HTML的DOM树构建完成再执行，这样就可以避免：js操作先于DOM树创建而引起的bug。
可是刚刚理解了这个$(function(){})，window.onload = function(){}又出现了，这又是个什么东东。。。好像和前者一样的作用，可是又有区别，笔者表示困惑了。
二、window.onload() 与 $(window).load()、$(document).ready() 与 $(function(){}) 的区别和关联性
1. 关联
- $(window).load() 类似于 window.onload() ，$(window).load() 实际是 window.addEventListener("load", function (e) {}, false)
- $(function(){}) 是 $(document).ready() 的简写
2. 执行时机
- window.onload()，即$(window).load() 是在页面内容完全加载完成执行（包括图片文件等）
- $(function(){})，即 $(document).ready() 是在DOM结构树绘制完成时执行，无需等待文件加载
3. 使用限制
- window.onload()，一个项目中只能执行一次，若有多个，后者覆盖前者，注意：$(window).load() 不是
- $(function(){})，即 $(document).ready() 可以使用多个
测试：
<script> $(window).load(function() { console.log("$(window).load()" + 123) }) $(window).load(function() { console.log("$(window).load()" + 456) }) window.onload = function() { console.log("window.onload = " + 111) } window.onload = function() { console.log("window.onload = " + 222) } window.onload(function() { console.log("window.onload()" + 333) }) window.onload(function() { console.log("window.onload()" + 444) }) $(function(){ console.log("$(function(){})" + 555) }) $(function(){ console.log("$(function(){})" + 666) }) $(document).ready(function(){ console.log("$(document).ready()" + 777) }) $(document).ready(function(){ console.log("$(document).ready()" + 888) }) </script>
结果：
由此可见， 执行顺序是：
window.onload *2 —— $(function(){}) —— $(document).ready() —— $(window).load() —— window.onload *1
其中，可得结论：
- $(function(){}) 与 $(document).ready() 应该是摆放顺序的问题
- window.onload(function() {}) 这是错误写法，不执行
- window.onload 如果有多个，只执行后一个
疑惑：
- window.onload为啥先执行两遍，最后的最后又执行一遍，这和之前了解的只在完全加载完成时执行，不大符合。（会不会是写了两遍的原因，试试。。。）
再试一遍：
<script> $(window).load(function() { console.log("$(window).load()" + 123) }) $(window).load(function() { console.log("$(window).load()" + 456) }) window.onload = function() { console.log("window.onload = " + 111) } // window.onload = function() { // console.log("window.onload = " + 222) // } window.onload(function() { console.log("window.onload()" + 333) }) window.onload(function() { console.log("window.onload()" + 444) }) $(document).ready(function(){ console.log("$(document).ready()" + 777) }) $(document).ready(function(){ console.log("$(document).ready()" + 888) }) $(function(){ console.log("$(function(){})" + 555) }) $(function(){ console.log("$(function(){})" + 666) }) </script>
结论：
- $(function(){}) 与 $(document).ready() 确实是摆放顺序的问题
- window.onload 还是执行两遍，最后又执行了一遍（不是因为写了两遍）
最终结论：
执行顺序： window.onload *2 —— $(function(){}) 或 $(document).ready() —— $(window).load() —— window.onload *1
window.onload的使用： window.onload 只能用一次，否则后者覆盖前者（但是和它类似的$(window).load() 可以执行多个）
结合上文提到的：
$(function(){}) 与 $(document).ready() 是DOM结构绘制完毕后就执行，不必等到加载完毕。 即：DOM树加载完毕就执行，不必等到页面中图片或其他外部文件都加载完毕。并且可以写多个。
另外引用：
window.onload = function (e) {}//这种方式只能对同一事件绑定一个函数
window.addEventListener("load", function (e) {}, false)//这种方式可以对同一事件绑定多个函数，jquery绑定事件的内部也是调用的 addEventListener
$(window).load() 和 window.onload 的区别：
window.onload只能用一次，否则后者覆盖前者， $(window).load() 实际是 window.addEventListener("load", function (e) {}, false)，可以使用多次
三、浏览器渲染流程
通过网络模块加载到HTML文件后渲染引擎渲染流程如下，这也通常被称作关键渲染路径（Critical Rendering Path）：
- 解析html以构建dom树（构建DOM节点）：渲染引擎开始解析html，并将标签转化为内容树中的dom节点。
- 构建render树（解析样式信息）：解析外部CSS文件及style标签中的样式信息。Render树由一些包含有各种属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。
- 布局render树（布局DOM节点）：执行布局过程，它将确定每个节点在屏幕上的确切坐标。
- 绘制render树（绘制DOM节点）：Render树构建好了之后，将会再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。
以上就是HTML渲染的基本流程，但这并不包含解析过程中浏览器加载外部资源如图片、脚本、iframe等的过程。
说白了，上面的四步仅仅是HTML结构的渲染流程，而外部资源的加载在HTML结构的渲染流程中贯穿始终，即便绘制DOM节点已经完成，外部资源依然可能正在加载中或尚未加载。
对于HTML浏览器有专门的html解析器来解析，并在解析的过程中构建DOM树。在这里我们讨论两种DOM元素的解析，即样式（link、style）与脚本文件（script）。由于浏览器采用自上而下的方式解析，在遇到这两种元素时都会阻塞浏览器的解析，直到外部资源加载并解析或执行完毕后才会继续向下解析html。
1）外部样式会阻塞后续脚本执行，直到外部样式加载并解析完毕。
2）外部样式不会阻塞后续外部脚本的加载，但会阻塞外部脚本的执行。
3）如果后续外部脚本含有async属性（IE下为defer），则外部样式不会阻塞该脚本的加载与执行
4）对于动态创建的link标签不会阻塞其后动态创建的script的加载与执行，不管script标签是否具有async属性，但对于其他非动态创建的script，以上三条结论仍适用
动态创建的外部脚本并未受link的阻塞。
