js的延迟加载方式

最新推荐文章于 2023-11-02 19:08:46 发布

嚣张.miner

最新推荐文章于 2023-11-02 19:08:46 发布

阅读量584

点赞数

分类专栏： JavaScript 文章标签： js的延迟加载面试

本文链接：https://blog.csdn.net/zm_miner/article/details/120059859

版权

本文探讨了JavaScript延迟加载的重要性，由于DOM渲染与JS执行的冲突可能导致错误，因此提出了6种延迟加载方法：包括`defer`属性，`async`属性，使用`setTimeout`，动态创建DOM，让JS最后加载，以及利用jQuery的`getScript()`方法。这些方法旨在提高页面加载速度，不影响用户体验。

摘要由CSDN通过智能技术生成

首先我们要考虑为什么要提出js的延迟加载??
有助于提高页面加载速度, js延迟加载就是等页面加载完成以后再加载js文件

我们都知道 dom元素是从上到下渲染的, 如果js来管理页面上的元素, 并且js加载操作想在HTML之前, 代码就会报错.

eg:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    var d = document.getElementsByTagName('div')[0]
    console.log(d);
    var p1 = d.getElementsByTagName('p')
  </script>
</head>
<body>
  <div>
    <p></p>
  </div>
</body>
</html>

在这里插入图片描述
这是因为js加载执行在DOM结构之前, 所以获取不到, 解决方法就是吧script放到div后面

最低0.47元/天解锁文章

嚣张.miner

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的延迟加载方式

首先我们要考虑为什么要提出js的延迟加载??有助于提高页面加载速度, js延迟加载就是等页面加载完成以后再加载js文件我们都知道 dom元素是从上到下渲染的, 如果js来管理页面上的元素, 并且js加载操作想在HTML之前, 代码就会报错.eg:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
复制链接

扫一扫

专栏目录