怎么实现JS脚本延迟加载?

怎么实现JS脚本延迟加载?这是一道非常高频的前端面试题,但是很多同学在面试时候都回答不出来。老规矩,点赞收藏,点点关注支持一下,给我一分钟,理想哥教大家该怎么满分回答这个问题

如果我是求职者,我会这么回答:

JS的延迟加载就是等页面加载完成之后再加载 JS 文件,有助于提高页面加载速度。可以有以下几种方式:

第一:使用defer 属性

添加defer属性后,浏览器会异步加载该JS脚本,加载完成之后不会立即执行,会在DOMContentLoaded 事件之前执行,defer可以保证脚本将按照它们在 HTML 中出现的顺序执行并且不会阻塞浏览器解析其它代码

第二:使用async 属性

添加async属性后,浏览器会异步加载该JS脚本,加载完成之后会立即执行,可以在DOM尚未完全下载完成就加载和执行该脚本,async 执行与文档顺序无关,先加载哪个就先执行哪个

第三:动态创建 DOM

可以对文档的load事件进行监听,当文档加载完成后再动态的创建 script 标签来引入 js 脚本。

第四:使用 setTimeout 延迟

我们可以设置一个setTimeout定时器来延迟加载 js 脚本文件

第五:最后加载JS

我们可以把 js 脚本放在文档的底部,来使 js 脚本尽可能的在最后来加载执行。

以上就是这个问题的回答了,大家可以下次面试时试试这么回答看看效果。

最后,欢迎关注理想哥,每天学点前端面试小技巧。

#前端##前端开发##前端面试#
全部评论

相关推荐

3 6 评论
分享
牛客网
牛客企业服务