摘要:简介最近对于文档加载方法有了新的理解,因此整理成一片简记,方便以后进行查阅。此状态为树构建完成后触发,和一样,但在其之后触发兼容性以上可用方法当浏览器窗口,文档或其资源将要卸载时,会触发事件。没有赋值时,该事件不做任何响应。
简介
最近对于文档加载方法有了新的理解,因此整理成一片简记,方便以后进行查阅。
先来一段Html,作为我们研究的基础吧。
这就够了。
Onload方法支持的Html标签:
兼容性良好,所有主要浏览器都支持.onload()方法
说明:
1、 window.onload() 为在全部文档加载完成后触发,包括页面的css、js和图片资源加载完成 2、 img.onload() 方法为在图片加载完成后触发,因此img.onload() 要优先于window.onload(),其次如果是从缓存中读取到的图片,则不会触发该方法 3、 body.onload() 方法设置addEventListener监听load事件无效,会与window.onload()方法冲突,同时声明二者,后声明的会覆盖前者, 其次是与window.addEventListener("load", function() {} )不会冲突,但是会影响执行顺序,先定义先执行, 最后是我的一点观点body.onload()实质就是window.onload()方法Onreadystatechange方法
该方法为document对象上的方法,当document对象上的readyState改变时触发
document对象的readyState一共有三个值
1、 loading 文档正在加载 2、 interactive DOM树构建完成,可以访问到DOM里面的元素 3、 complete 渲染树(Render Tree)构建完成 4、 MDN中关于readyState只有三种状态(本人测试也是),但也有文章指出还有另外两种状态: 1、 uninitialized (未初始化) :对象尚未初始化 2、 loaded (加载完毕) :对象加载数据完成, (如果有同学知道为什么,请在下方评论好吗?谢谢)
说明
1、设置document.onreadystatechange事件,在此函数中没有监听到loading状态 2、interactive 状态为DOM树构建完成,在图片加载完成前就会触发此状态,其次此状态要比document对象的另外一个事件DOMContentLoaded触发稍早 3、complete 状态为Render Tree构建完成,在图片以及样式表文件加载完成前就会触发此状态DOMContentLoaded方法
当初始HTML文档被完全加载和解析时,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架完成加载,即DOM树构建完成。
此状态为DOM树构建完成后触发,和document.readyState=="interactive"一样,但在其之后触发
兼容性:IE9以上可用
Beforeunload方法当浏览器窗口,文档或其资源将要卸载时,会触发.beforeunload()事件。
如果处理函数为Event对象的returnValue属性赋值非空字符串,浏览器会弹出一个对话框,来询问用户是否确定要离开当前页面。没有赋值时,该事件不做任何响应。
即此函数在页面第一次加载时不会触发,当用户要离开此页面或者关闭浏览器等操作时会被触发,为用户将要离开时的第一个触发的事件
兼容性良好
Unload方法当文档或一个子资源正在被卸载时, 触发unload事件。
说明:触发此事件时,文档会处于一种特殊的状态
1、所有资源仍存在 (图片, iframe 等.) 2、对于终端用户所有资源均不可见 3、界面交互无效 (window.open, alert, confirm 等.) 4、错误不会停止卸载文档的过程
此事件为用户离开页面是触发的第三个事件,在 pagehide 事件触发后触发
此事件在触发后会导致页面不被bfcache缓存
兼容性良好
Pagehide方法在用户离开页面时触发的第二个事件,在.beforeunload()事件触发后触发
此事件可以用来替换.unload()事件,使得页面确保被缓存,要考虑浏览器的兼容性,
通过对监听此事件的event对象的persisted属性,可以获知页面是否从bfcache(FF和Opera提供的往返缓存)加载的
兼容性:IE11
Pageshow方法用户在打开页面时就会触发此方法,与.onload()事件类似,但是.onpageshow()在每次加载页面时都会被触发,而window.onload()方法在缓存中加载页面时将不会被触发(火狐浏览器1.5版本)
此事件可以用来替换window.onload()事件,使得页面加载事件确保被触发,要考虑浏览器的兼容性
此事件在window.onload()事件后触发
通过对监听此事件的event对象的persisted属性,可以获知页面是否从bfcache(FF和Opera提供的往返缓存)加载的
兼容性:IE11
备注一火狐的这篇文章提到了如何使用pagehide与pageshow方法,但是MDN中没有关于pagehide与pageshow的详细说明,所以大家仅作了解即可
二是在讨论pagehide与pageshow方法时,与这篇文章的博主一样, 我得到的event.persisted属性始终为false,不知是什么原因呢
这篇文章仅是个人的一篇笔记,如果你发现本文存在不严谨的或者错误的地方请轻喷!谢谢。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51091.html
摘要:简介最近对于文档加载方法有了新的理解,因此整理成一片简记,方便以后进行查阅。此状态为树构建完成后触发,和一样,但在其之后触发兼容性以上可用方法当浏览器窗口,文档或其资源将要卸载时,会触发事件。没有赋值时,该事件不做任何响应。 简介 最近对于文档加载方法有了新的理解,因此整理成一片简记,方便以后进行查阅。先来一段Html,作为我们研究的基础吧。 ...
摘要:访问集合元素时使用局部变量对于任何类型的访问,如果对同一个属性或者方法访问多次,最好使用一个局部变量对此成员进行缓存。 三、DOM Scripting DOM编程 我们都知道对DOM操作的代价昂贵,这往往成为网页应用中的性能瓶颈。在解决这个问题之前,我们需要先知道什么是DOM,为什么他会很慢。 DOM in the Browser World 浏览器中的DOM DOM是一个独立于语言...
摘要:访问集合元素时使用局部变量对于任何类型的访问,如果对同一个属性或者方法访问多次,最好使用一个局部变量对此成员进行缓存。 三、DOM Scripting DOM编程 我们都知道对DOM操作的代价昂贵,这往往成为网页应用中的性能瓶颈。在解决这个问题之前,我们需要先知道什么是DOM,为什么他会很慢。 DOM in the Browser World 浏览器中的DOM DOM是一个独立于语言...
摘要:对于直接量和局部变量的访问性能差异微不足道,性能消耗代价高一些的是全局变量数组项对象成员。当一个函数被创建后,作用域链中被放入可访问的对象。同样会改变作用域链,带来性能问题。 早前阅读高性能JavaScript一书所做笔记。 一、Loading and Execution 加载和运行 从加载和运行角度优化,源于JavaScript运行会阻塞UI更新,JavaScript脚本的下载、解析...
阅读 1432·2021-11-25 09:43
阅读 2027·2021-07-26 23:38
阅读 739·2019-08-30 15:53
阅读 2279·2019-08-30 15:43
阅读 1167·2019-08-29 18:40
阅读 1969·2019-08-26 13:28
阅读 1973·2019-08-23 18:20
阅读 541·2019-08-23 15:07