html dom ready,【js】实现DOMReady
什么是DOMReady?
一个被封装的方法,用以当浏览器生成DOM树结构后就开始解析某些js代码。
为什么需要DOMReady?
在初学js时,我们都知道使用window.onload用以保证页面的所有资源都加载完毕后才执行当中的js代码,否则当js在title中定义或则引用时会报错:不能为空节点添加某某属性云云。是的,onload的确是一个简单易用的方法,但随着我们学习的深入,当我们构建的页面存在大量图片或其他需要较长时间加载的资源时,显然让js等待这些费事的资源加载完毕再执行是非常不合理且形成糟糕的用户体验。这时我们有了新的需求,需要在DOM树生成后&其他资源加载以及渲染前就执行js代码,所以DOMReady出现了,驾着七彩祥云而来...
实现DOMReady的原理
在说及DOMReady的原理之前,我们需要知道渲染引擎的渲染(浏览器把请求的html显示出来的过程)基本流程:
1.解析HTML,构建DOM树(构建DOM节点);
2.构建渲染树(解析样式信息,包括外部的css文件、style标签中的样式,按优先级解析)。渲染树由一些包含有各种属性的矩形组成,他们将会按照正确的顺序显示到屏幕上;
3.布局渲染树(布局DOM节点),执行布局的过程,将确定每个节点在屏幕上的确切坐标;
4.绘制渲染树(绘制DOM节点,即遍历渲染树),使用UI后端层来绘制每个节点。
基本渲染流程
DOMReady的原理:在构建了DOM树之后就开始解析js,而不是等待页面渲染完毕。
实现策略
IE8(包括)之前版本由于不支持符合W3C规范的DOMContentLoaded事件,所以需要用hack实现兼容。所以如下图所示,需要在DOMReady方法中同时提供下面两种策略。
DOMReady实现策略
实现代码
function myDOMReady(fn){
//判断如果支持addEc=ventListener(非IE--IE支持的是attachEvent)则绑定DOMContentLoaded事件
if(document.addEventListener){
document.addEventListener("DOMContentLoaded",fn,false);
}else{
IEContenLoaded(fn);
}
//IE下模拟DOMContentLoaded
function IEContenLoaded(fn){
var done = false;
//只执行一次用户的回调函数init
var init = function(){
if(!done){
done = true;
fn();
}
}
(function(){
try{
//DOM树未创建完之前调用doScroll会抛出错误
window.document.documentElement.doScroll("left");
}catch(error){
//延迟再执行,arguments.callee调用自己
setTimeout(argument.callee,1);
return;
}
//没有错误表示DOM树创建完毕,执行用户回调
init();
})();
//监听document的加载状态
window.document.onreadystatechange = function(){
//如果用户是在DOMReady之后调用的函数立即执行用户回调
if(window.document.readyState == 'complete'){
window.document.onreadystatechange=null;
init();
}
}
}
}
html dom ready,【js】实现DOMReady相关推荐
- Web UI - Javascript之DOM Ready
最近终于稍微适应了工作环境,终于可以让自己缓口气.于是决定要写点东西,算是督促.记录和提升自己的学习.代码的世界,你不轮它,以后就会被它轮.这个系列尽量保持在一周或两周更一篇,目标是在创造内容的时候更 ...
- DOM Ready 详解
DOM Ready 概述 熟悉jQuery的人, 都知道DomReady事件. window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致wind ...
- jQuery源码dom ready分析
一.前言 在平时开发web项目时,我们使用jquery框架时,可能经常这样来使用$(document).ready(fn),$(function(){}),这样使用的原因是在浏览器把DOM树渲染好之前 ...
- 前端开发学习之——dom ready和window onload的区别
1.ready事件是在页面中所有DOM结构已完全加载时执行,监听的是 DomContentload 事件,初始化并解析完成时触发,不需要等待样式表.图片和 iframes 加载完,也就是说当这个事件触 ...
- 白屏时间first paint 和可交互时间dom ready的关系
先触发first paint,后触发dom ready 白屏时间(first Paint Time)--用户从打开页面开始到页面开始有东西呈现为止 首屏时间--用户浏览器首屏内所有内容都呈现出来所花费 ...
- html dom createevent,js 中 document.createEvent的用法
js 中 document.createEvent的用法 更新时间:2010年08月29日 23:22:02 作者: 用该方法创建了 Event 对象以后,必须用上表中所示的初始化方法初始化对象. ...
- JavaScript/Ajax/JQuery知识点(BOM/DOM/ScriptEngine/JS引擎),JSCore
捋顺JavaScript底层知识,重点讲解如原型.作用域.执行上下文.变量对象.this.闭包.按值传递.call.apply.bind.new.继承等难点概念?? JS中的继承?JS的原型模式, ...
- 从template到DOM(Vue.js源码角度看内部运行机制)
写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(github.com/answershuto-)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些产出也会对同样想要学习Vue.j ...
- JavaScript(JS)的DOM对象(JS的Document对象)----什么是DOM对象?
1.概念: Document Object Model 文档对象模型:将标记语言文档的各个组成部分,封装为对象.可以使用这些对象,对标记语言文档进行CRUD(增删改查)的动态操作. 通过 HTML D ...
最新文章
- 机器学习(MACHINE LEARNING) 【周志华版-”西瓜书“-笔记】 DAY16-强化学习
- drf-频率组件 权限组件
- 【Core Spring】二、装配beans
- Spring RestTemplate中几种常见的请求方式
- greenplum配置高可用_Greenplum 的高可用是怎么做到的?
- matlab多元约束最小值,无约束多变量最小值求解问题
- python中mako中loop_python中Mako库实例用法
- ajax post django,Django中的Ajax POST请求失败
- 数据库管家----ADODB类库.
- ajax获取inputname值,jQuery - 获取ajax POST的表单值
- 厄拉多塞筛法求素数 c语言,求质数(Prime Number 素数)的方法——厄拉多塞筛法...
- Nachos Lab2 虚拟内存
- 状态转移矩阵 matlab,状态转移矩阵计算.PPT
- 快来直播:坦然面对东方甄选与股价跌宕起伏
- 大数据招聘,我就这样被算法选中
- GEE学习记录~~~
- 【Linux】必须掌握的Linux常见指令分类讲解
- SSL 2344 洛谷 2835 信息学奥赛一本通 1383 刻录光盘#floyd,tarjan,kosaraju#
- 9.String类 StringBuffer/StringBuilder 的定义
- Struts框架实战精讲 struts1(2)- 登录案例