$.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(“onreadystatechange”, Fun, false);
      当属性 document.readyState的值改变时，onreadystatechange事件被触发。
      readyState 属性返回当前文档的状态（载入中……），返回以下值：
      * uninitialized - 还未开始载入
      * loading - 载入中
      * interactive - 已加载，文档与用户可以开始交互
      * complete - 载入完成
      if(document.readyState === ‘complete’) Fun();

      在IE9以下的浏览器中还有一种技巧是不停地执行document.documentElement.doScroll(‘left’);直到不抛出异常为止。

      doScroll方法是IE特有的，在DOM未加载完成时，调用此方法就会抛出异常，所以周期性的调用此方法，当不抛出异常时，可以判定DOM加载完毕。

      ---

这里只是一些总结，在使用使用方式方面不是很详细，而且也不用纠结doScroll 究竟是干什么的，毕竟在这里这只是一种判定方式而已。有的人说doscroll是滚动页面，这四个字我难以理解，毕竟即使DOM树加载完毕，但渲染未完成，页面又如何滚动，而且 document.documentElement.doScroll(‘left’);作用于X轴，如何滚动？？？