黑龙江省建设教育信息网站,中国基建人才库证书查询,影响网站建设价格的因素有,折扣网站怎么做文章目录为什么要异步加载如何实现异步加载参考为什么要异步加载
两个原因其实是一个意思。
原因1#xff1a;
JS是单线程的语言#xff0c;它会同步的执行代码#xff0c;从上往下执行 但是#xff0c;一旦网络不好#xff0c;或要加载的js文件过大的话#xff0c;会…
文章目录为什么要异步加载如何实现异步加载参考为什么要异步加载
两个原因其实是一个意思。
原因1
JS是单线程的语言它会同步的执行代码从上往下执行 但是一旦网络不好或要加载的js文件过大的话会造成页面阻塞不利于后续的渲染工作十分影响交互体验此时可以使用异步加载的方法解决这个问题。
原因2
浏览器在解析HTML时遇到script会先执行JS脚本再构建DOM树。
原因是 JS的作用之一是操作并修改DOM若等到DOM树构建完成再渲染并执行JS会造成严重的回流和重绘。 但在如今的开发模式中JS往往比HTML内容更多处理时间更长。若先执行完JS再执行HTML会造成页面的解析阻塞在JS执行完成之前用户在页面上什么也看不到。这样是不好的。
因此我们要用异步加载解决这个问题。
如何实现异步加载
asyncdefer动态创建script标签
举例说明
没有defer或async浏览器会立即加载并执行指定的脚本。
script srcscript.js/script有async加载和渲染后续文档元素的过程 与 script.js的加载和执行 并行这就是异步
script async srcscript.js/script有defer加载和渲染后续文档元素的过程 与 script.js的加载和执行 并行但是script.js的执行要在所有元素解析完成之后DOMContentLoaded事件触发之前完成。
script defer srcmyscript.js/script如图 绿色HTML解析。 蓝色网络请求脚本。 红色执行脚本。
由图可知
若没有defer或async当代码执行到script标签就进行网络请求脚本和执行脚本HTML的解析会停掉若有defer会在HTML继续解析的同时网络请求脚本并且在HTML解析完成之后执行脚本若有async会在HTML继续解析的同时网络请求脚本且脚本一旦下载完成就执行
由此可以看出async和defer的区别执行脚本的时机不同。async在下载完成后立马执行js而defer在HTML解析完成后执行js。
参考
如何实现JS异步加载 - 简书 (jianshu.com)
javascript异步加载的三种方式以及如何动态创建script标签_Choo01的博客-CSDN博客_动态script
【JavaScript高级】浏览器原理渲染引擎解析页面步骤、回流和重绘、composite合成、defer与async_karshey的博客-CSDN博客
defer和async的区别面试被问到了 - 掘金 (juejin.cn)
js异步加载——defer和async的区别 - sakuramoon - 博客园 (cnblogs.com)
