【整理】domReady

最新推荐文章于 2023-10-09 13:22:13 发布
最新推荐文章于 2023-10-09 13:22:13 发布
阅读量205 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_30511235/article/details/52089316
版权

window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发.


浏览器通过渲染引擎将html解析为dom节点

页面上所有html都转换为节点以后叫做dom树构建完毕，简称dom ready

渲染引擎职责将请求的内容显示到浏览器屏幕上，默认情况下，可以显示html、xml、图片，通过插件扩展可以显示其他类型的文档

                                                   

html渲染的积累过程
不包含浏览器加载的外部过程css 


 

window.onload事件:
浏览器绘制完dom节点，再加载完页面上的所有资源以后，才执行我们自己定义的业务逻辑代码。
也就是说在文档解析渲染，资源加载完成之前，不让js脚本执行.

为了解决window.onload的短板，w3c提供了DOMContentLoaded事件，
与window.onload相比触发的时间更早即在页面的DOM树创建完成后即可触发，
但低版本的ie本事件不支持.

1.HTML是XML的子集
2.XML 矢量绘图分为两大类SVG、VML    


  判断XML和HTML的方法：
先使用isElememt判断是否为元素节点，再用creatElement判断元素名大写小写是否都等同，大小写不等同为XML，等同为HTML                                                                                                                                                


sinat_30511235
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
domReady的实现案例
09-01
`domReady`是一个JavaScript编程中的常见概念，它指的是在网页的文档对象模型（Document Object Model，简称DOM）加载完成但不等待所有外部资源（如图片、脚本等）加载完毕时执行一段代码的机制。在jQuery中，通常...
DOMReady详解
jlin991的博客
02-21 6795
0. 什么是DOMReady？ 一个被封装的方法，用以当浏览器生成DOM树结构后就开始解析某些js代码。 为什么需要DOMReady？ 在初学js时，我们都知道使用window.onload用以保证页面的所有资源都加载完毕后才执行当中的js代码，否则当js在title中定义或则引用时会报错：不能为空节点添加某某属性。是的，onload的确是一个简单易用的方法，但随着我们学习的深入，当我们
domReady的理解
WindrunnerMax
09-21 1220
domReady的理解 domReady是名为DOMContentLoaded事件的别称，当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的完全加载。 描述 浏览器渲染DOM结构是有一定顺序的，虽然不同浏览器的实现各有不同，但是基本流程都大致相同： 自上而下，首先解析HTML标签，生成DOM Tree。 在解析到<link>或者<style>标签时，开始解析CSS，生成CSSOM，值的注意的是此时解析HTML标
【JavaScript学习总结】【9】、DOM Ready
最新发布
lily19970107的博客
10-09 72
这就是所谓的文档片段节点。属性的一系列操作是与元素的类型息息相关的，如果我们不对元素的节点类型作判断，就不知道如何操作：例如：obj.xx = yy 还是 obj.setAttribute(xx, yy)，setAttribute() 方法可添加一个新属性并指定值，或者把一个现有的属性设定为指定的值，如果我们知道节点的类型，就可以直接设置或者是使用方法设置，所以我们有必要判断节点的类型，避免耗费资源，造成意想不到的结果。文档节点，就是整个文档，是文档树的根节点，是文档中所有其他节点的父节点。
DOM Ready 详解
09-20 117
DOM Ready 概述 熟悉jQuery的人, 都知道DomReady事件. window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发. 另外我们需要在DOM准备完毕后, 再修改D...
何谓domReady
JessicaLi的博客
07-18 232
了解dom ready
JS DOMReady事件的六种实现方法总结
10-21
以下是对六种实现DOMReady事件方法的详细说明： 1. **Prototype框架**： Prototype的实现方式是通过判断浏览器类型来决定不同的处理策略。在WebKit浏览器中，它会设置一个定时器，不断检查`document.readyState`的...
一些主流JS框架中DOMReady事件的实现小结
10-28
在实际应用中，我们经常会遇到这样的场景，当页面加载完成后去做一些事情：绑定事件、DOM操作某些结点等。
domReady:Bower-domReady
05-15
domReady 一个用于检测DOM就绪的AMD加载程序插件。 已知可在RequireJS中使用，但应在支持相同加载器插件API的其他AMD加载器中运行。 文件 请参阅。 最新发布 最新版本可从“最新”标签获得。 执照 麻省理工学院 ...
谈谈DOMContentLoaded：Javascript中的domReady引入机制
weixin_34071713的博客
11-12 133
一、扯淡部分 回想当年，在摆脱写页面时js全靠从各种DEMO中copy出来然后东拼西凑的幽暗岁月之后，毅然决然地打算放弃这种处处“拿来主义”的不正之风，然后开启通往高大上的“前端攻城狮”的飞升之旅。想想都有些小激动呢~然而人生不如意者十之八九，刚踏上征程就经常会被各种Error虐到体无完肤，有时候甚至会被在现在看来很低级的bug折磨得生不如死。但没有一种成长是不需要付出代价的，也就是那段刚跳入泥...
domReady机制探究及DOMContentLoaded研究
前端-后端学习之路
11-10 1150
domReady机制是很多框架和库都具有的种子模块，使用了在DOM树解析完成后就立即响应，不用等待图片等资源下载完成（onload执行时候表示这些资源完全下载完成）的一种机制，那怎么实现呢。1）支持DOMContentLoaded事件的，就使用DOMContentLoaded事件； 2）不支持的，就用来自Diego Perini发现的著名Hack兼容。兼容原理大概就是，通过IE中的document
JS - DOM_Ready、DOM_Load 区别
牧码的博客
05-28 700
页面加载完成有两种事件： 一、ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）。 二、onload，指示页面包含图片等文件在内的所有元素都加载完成。1、Dom Ready /* 使用jq时一般都是这么开始写脚本的 */ $(function(){ // do something }); /* jq ready()的简写，它等价于 */ $(document...
南大软院大神养成计划--DOM操作
hiiiji的博客
12-02 1174
domready window.onload=function(){ document.getElementById("header").style.color="red";} 这是第一行 domready尝试
JavaScript DOM-Ready 机制
weixin_30348519的博客
04-13 84
IE9开始和其他现代浏览器可以通过绑定DOMContentLoaded事件；IE9之前的的浏览器需要绑定onreadystatechange事件并等待readyState为"complete"来判断；此外IE9之前的浏览器还可以通过不停地执行document.documentElement.doScroll("left")直到不抛出异常来判断。 IE还可以通过<script&gt...
面试题：first paint和dom ready的关系
Sfh的博客
07-13 1010
白屏时间first paint和可交互时间dom ready的关系是（A ） A、先触发first paint ，后触发dom ready B、先触发dom ready，后触发first paint C、一起触发 D、没关系 解析：白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止 首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间 用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通
如何在纯JavaScript中等待DOM ready事件
cuk0051的博客
08-27 342
You can do so by adding an event listener to the document object for the DOMContentLoaded event: 您可以通过将事件监听器添加到DOMContentLoaded事件的document对象中来实现： document.addEventListener('DOMContentLoaded', (event...
DOM Ready
weixin_30263073的博客
04-15 65
一、说明 当页面有一个URL的时候，浏览器就会加载HTML，所有的HTML标签都转换完毕以后就叫做DOM树构建完毕。 渲染引擎的职责就是把请求的内容显示在屏幕上，渲染引擎可以显示HTML，XML，图片。通过插件可以显示其他类型的文档。渲染引擎首先通过网络获得所请求的内容，通常以8k分块的方法来完成。 这四步仅仅是HTML结构的渲染过程，并不包括加载外部的文件、脚本，外部文件...
declare function domready(callback: () => void): void; 是什么
09-16
declare function domready(callback: () => void): void; 是一种函数声明语法，在编程中用于声明一个叫做 "domready" 的函数。这个函数接受一个叫做 "callback" 的参数，类型为 () => void，表示一个不接受任何参数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值