$.ready()事件的实现机制

$.ready()事件的实现机制

---

.ready()用于在document对象上绑定一个ready事件监听函数，当DOM结构加载完成后，监听函数被执行

---

1. ready 作用于DOM结构加载完成时，浏览器如何解析前端文件？ 因此先了解什么是DOM结构？

   ---

   1. 浏览器如何解析文件（这里只大概介绍渲染的流程）
      
      • 渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。
      • 解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
      • 渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。
      • render树的主要作用就是把HTML按照一定的布局与样式显示出来
   2. 什么是DOM结构
      DOM把整个页面映射为一个多层节点结构，在解析html文件时，解释器将一个个节点构造为一棵树。节点的基本类型为Node。Docuemnt类型表示整个文档，是一组分层节点的根节点。
      

      ---

2. 判断DOM树何时加载完毕

   ---

   1. 对IE9+和其他浏览器中绑定DOMContentLoaded事件
      document.addEventListener(“DOMContentLoaded”, Fun, false);

   2. 在IE9以下的浏览器绑定onreadystatechange事件。
      document.addEventListener(“onreadystatechan