JS 实现 jQuery的$(function(){});

1、浏览器渲染引擎的HTML解析流程

 

何谓“渲染”，其实就是浏览器把请求到的HTML内容显示出来的过程。渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。下面是渲染引擎在取得内容之后的基本流程：

1，解析html以构建dom树（构建DOM节点）：渲染引擎开始解析html，并将标签转化为内容树中的dom节点。

2，构建render树（解析样式信息）：解析外部CSS文件及style标签中的样式信息。Render树由一些包含有各种属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。

3，布局render树（布局DOM节点）：执行布局过程，它将确定每个节点在屏幕上的确切坐标。

4，绘制render树（绘制DOM节点）：Render树构建好了之后，将会再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

以上就是HTML渲染的基本流程，但这并不包含解析过程中浏览器加载外部资源如图片、脚本、iframe等的过程。说白了，上面的四步仅仅是HTML结构的渲染流程，而外部资源的加载在HTML结构的渲染流程中贯穿始终，即便绘制DOM节点已经完成，外部资源依然可能正在加载中或尚未加载。

 

2、window.onload

了解了浏览器渲染引擎的HTML解析流程，我们就回到domReady。前文提到了，那个蛋疼的TypeError是由于在DOM树构建完成之前对节点进行了操作，而通常的解决的办法就是让js在window.onload的回调里执行，也就是说，在文档所有的解析渲染、资源加载完成之前，不让js脚本执行，这样一来就妥妥地避免了因js操作先于DOM树创建而带来的bug：

1 Window.onload = function(){
2 //doSomething
3 }

这样的解决办法应该是初学原生js时很多人最常用的解决办法，看起来也的确没什么问题。如果文档外部资源不多的时候也没什么问题，但，我们来做一个假设。假设一个页面上有100张远程图片，我需要让js做到在点击每张图片时alert出图片的src属性，又该怎么做？

是不是已经发现点小问题了？按照第二部分内容对浏览器解析渲染HTML流程的介绍，DOM树很快就构建完毕了，而100张图片还在缓慢地加载。而要想执行alert出图片src属性的js，则需要等到100张图片全部加载完成后才能执行。而在这期间，页面元素不会响应你的任何操作，就好像“死”了一样。如果是在实际项目中，用户很可能不会等到你页面所有东东加载完以后才去操作，在面对一个不会对自己的操作做任何响应的页面，唯一比较解气的方式就是——果断关掉~然后……就没有了然后。

所以在实际应用中，我们经常会遇到这样的场景，让页面加载后去做一些事情：绑定事件、DOM操作某些结点等。使用window.onload对于很多实际的应用而言有点太“迟”了，比较影响用户体验。那有没有更好的方法解决这个问题？比如提前到只要DOM树创建完成之后就可以进行如上操作呢？答案当然是有的：DOMContentLoaded事件。

 

3、DOMContentLoaded

说这个之前必须要提一下jQuery中的domReady机制。很多时候在使用jq也会出现最前面出现的那个TypeError，解决办法就是把j