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

最新推荐文章于 2023-05-27 01:36:39 发布

justGY

最新推荐文章于 2023-05-27 01:36:39 发布

阅读量3.2k

点赞数

分类专栏： jquery 文章标签： jquery 浏览器

本文链接：https://blog.csdn.net/justGY/article/details/52053249

版权

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

ready 作用于DOM结构加载完成时，浏览器如何解析前端文件？因此先了解什么是DOM结构？
1. 浏览器如何解析文件（这里只大概介绍渲染的流程）
  - 渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。
  - 解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
  - 渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。
  - render树的主要作用就是把HTML按照一定的布局与样式显示出来
2. 什么是DOM结构
  DOM把整个页面映射为一个多层节点结构，在解析html文件时，解释器将一个个节点构造为一棵树。节点的基本类型为Node。Docuemnt类型表示整个文档，是一组分层节点的根节点。
判断DOM树何时加载完毕
1. 对IE9+和其他浏览器中绑定DOMContentLoaded事件
  document.addEventListener(“DOMContentLoaded”, Fun, false);
2. 在IE9以下的浏览器绑定onreadystatechange事件。
  document.addEventListener(“onreadystatechan

关注