$.ready()事件的实现机制
2016-07-28 11:02
204 查看
$.ready()事件的实现机制
.ready()用于在document对象上绑定一个ready事件监听函数,当DOM结构加载完成后,监听函数被执行ready 作用于DOM结构加载完成时,浏览器如何解析前端文件? 因此先了解什么是DOM结构?
浏览器如何解析文件(这里只大概介绍渲染的流程)
渲染引擎首先通过网络获得所请求文档的内容,通常以8K分块的方式完成。
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
渲染引擎开始解析html,并将标签转化为内容树中的dom节点。接着,它解析外部CSS件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。
render树的主要作用就是把HTML按照一定的布局与样式显示出来
什么是DOM结构
DOM把整个页面映射为一个多层节点结构,在解析html文件时,解释器将一个个节点构造为一棵树。节点的基本类型为Node。Docuemnt类型表示整个文档,是一组分层节点的根节点。
判断DOM树何时加载完毕
对IE9+和其他浏览器中绑定DOMContentLoaded事件
document.addEventListener(“DOMContentLoaded”, Fun, false);
在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轴,如何滚动???
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android Manifest 用法
- Android学习笔记(二九):嵌入浏览器
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 回顾 Firefox 历史
- 小白观察:微软释放出其基于 Chromium 的 Edge 浏览器
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- 浏览器 cookie 限制
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码