温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript在浏览器中加载的方法

发布时间:2020-08-29 13:43:30 来源:亿速云 阅读:142 作者:小新 栏目:web开发

这篇文章给大家分享的是有关JavaScript在浏览器中加载的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

加载过程

(1)解析 web 页面也就是解析 HTML 元素和他们的文本内容,将对像和文本添加到文档中,document处于加载中

文档解析

(2)通过link引入 外部 css,创建线程,进行异步加载。

(3)通过 script 引入外部 js,并且没有设置 async、defer,浏览器同步加载,并阻塞等

(4)等待js加载后为其设置有async、defer,浏览器创建线程异步加载,其中 async在脚本加载完成后立即执行(注意 :异步加载应禁止使用 document.write())

(5)遇到 img 等带有 src的属性,应该先正常解析 dom 结构,然后浏览器异步加载 src,并继续解析文档,如果 看到标签就直接生产 dom 树,不需要等着 img 加载完 scr。

(6)文档解析完成后,所有设置有 defer 的脚本会按照顺序执行。(注意与 async 的不同,但同样禁止使用 document.write());

(7)document 对象触发 DOMContentLoaded 事件,这也标志着程序执行从同步脚本执行阶段,转化为事件驱动阶段。

(8)当所有 async 的脚本加载完成并执行后、img 等加载完成后(页面所有的都执行加载完之后),document.readyState = 'complete',window 对象触发 load 事件。

(9)从此,以异步响应方式处理用户输入、网络事件等

注意

我们在写程序的时候最好将script标签写在下面,虽然写在上面不仅可以操作div,又可以在dom解析完就立刻处理,这样使效率更高,但是最好还是写在最下面

<div style="width:100px;height:100px;background: pink;">
<script>
var div=document.getElementsByTagName("div")[0]
div.onclick=function(){
this.style.background="hotpink";
}
</script>

JavaScript在浏览器中加载的方法

感谢各位的阅读!关于JavaScript在浏览器中加载的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI