世界上最伟大的投资就是投资自己的教育

首页Html-CSS
xiaohesong · 凡人

网站页面生命周期

xiaohesong发布于11786 次阅读

页面中的生命周期主要有三个

  • DOMContentLoaded

    这个是 dom 树构建完成之后,并没有进行加载资源 (styles, imgs).处理 cssom 之前的 dom 树完成的情况.html.js.css 渲染顺序.md

    • ##### DOMContentLoaded and scripts

    我们知道 js 加载会阻塞 dom 树的构建,因此可知道 dom 树构建完成的时候,js 是已经解析完成了 (正常情况)

    非正常的情况,就是 js 脚本的加载方式 (async, defer)

    ⚠️asyncdefer这两个属性仅仅适用于外部属性,即脚本指定了src属性,否则会被忽略。

    使用这两个属性,浏览器就知道会去继续解析 dom,并且在后台加载执行这些 js。

    script的这两个属性 (async, defer) 还是有些不同的.

    • async

    加载顺序: 谁先加载谁就先执行。

    DOMContentLoaded: 在 dom 未完全解析之前,在这个阶段就可以下载执行异步的脚本。如果脚本很小或缓存,并且文档足够长,就会发生 .
    这种情况

    • defer

    加载顺序: defer 的这个属性,始终是按照在 dom 中的顺序来加载执行。

    DOMContentLoaded: 他会延迟到在 dom 加载解析之后加载执行,但是在 DOMContentLoaded 事件之前。

    • #### DOMContentLoaded and styles

    我们知道,css 不会直接的阻塞 dom 树的构建,但是 css 的解析执行会阻塞 js 的下载执行,从而间接的影响到 dom 的构建.

    • #### Built-in browser autofill

    浏览器内置的填充功能,比如有些网站的登录的账号密码,会在 DOMContentLoaded 时自动填充进去,用户允许的情况。

    因此脚本长时间加载执行,会导致 DOMContentLoaded 在等待,填充的功能也在等待。所以asyncdefer也可以防止这一点。

  • load

浏览器加载了所有资源之后。

  • ### beforeunload/unload

用户离开页面时候触发。

unload 和 beforeunload 的区别是,一个是已经卸载了,一个是在卸载之前。所以如果有一些确定的东西,大多在beforeunload中处理。

  • ### document.readyState

有些时候需要知道页面执行到了哪个阶段,去执行相应的脚本。就可以通过 readyState 来知晓。readyState 有三个阶段:

  1. loading : dom 加载中
  2. interactive : dom 解析完成,几乎与 DOMContentLoaded 同时发生,但是在 DOMContentLoaded 之前
  3. complete : 全部资源加载完毕,window.load.

readyState有个对应的readystatechange事件,每次readyState变化的时候,都会调用readystatechange

本站文章均为原创内容,如需转载请注明出处,谢谢。

0 条回复
暂无回复~~
喜欢
我的微信官网服务号精品文章订阅号微信视频号
程序员随风
统计信息
    学员: 21820
    视频数量: 1433
    文章数量: 457

© 汕尾市求知科技有限公司 | 专业版网站 | 关于我们 | 在线学员:1151

粤公网安备 44152102000088号粤公网安备 44152102000088号 | 粤ICP备19038915号

Top