js 延迟加载 改变JS的位置加快网页加载速度

preview
试读
1页
延迟加载
加载速度
需积分: 0 0 下载量 5 浏览量 更新于2020-10-27 收藏 35KB PDF 举报
在讨论如何通过延迟加载JavaScript代码来加快网页加载速度之前，首先需要了解JavaScript代码在页面加载过程中如何影响页面的渲染。JavaScript的执行会阻塞DOM的构建，也就是说，在浏览器解析HTML生成DOM树时，如果遇到JavaScript代码，会暂停HTML的解析，转而执行JavaScript代码。这意味着如果在页面的<head>标签中放置过多的JavaScript代码，将会导致页面加载时间变长，因为浏览器需要等待JavaScript代码执行完毕后才能继续解析HTML。理解了这个原理之后，我们可以总结以下几点重要的知识点： 1. 延迟加载JavaScript代码 延迟加载JavaScript代码是指将JavaScript的执行推迟到页面加载完毕之后。这可以通过JavaScript的内置函数setTimeout实现。例如，可以设置一个定时器，在页面加载3秒后执行某个JavaScript文件的加载。这样做的好处是页面能够先加载完成，给用户先看到页面内容，然后再加载那些不是立即需要的JavaScript代码。 2. 将JavaScript代码放在HTML文档底部 将JavaScript标签放置在<body>标签的底部是一个常用且有效的提升页面加载速度的方法。因为浏览器是从上到下解析HTML文档的，将JavaScript放置在底部可以确保浏览器在解析完页面的主体内容之后再加载JavaScript，这样可以减少浏览器解析HTML时被阻塞的时间。注意，在HTML4中，推荐在</body>标签之前放置JavaScript标签，而在HTML5中，则是推荐直接将JavaScript放在</body>标签内。 3. 动态创建JavaScript标签 动态创建JavaScript标签是一种在页面加载过程中，不是直接在HTML中写死JavaScript代码，而是通过JavaScript创建script标签并将其添加到DOM中。这样做的好处是可以在页面加载的任何时刻动态地加载JavaScript文件，而不会影响到页面的渲染。例如，可以先在页面上显示“加载中...”的文字或加载动画，等到实际的JavaScript代码加载完成后再替换显示内容。 4. 用“async”和“defer”属性加载外部JavaScript HTML5为script标签新增了两个属性：async和defer，这两个属性都是用来改进脚本加载行为的。async属性告诉浏览器该脚本应异步加载，加载完即执行，不会阻塞HTML的解析。而defer属性则告诉浏览器在HTML解析完毕后立即执行脚本，但是会等待所有同步脚本执行完毕之后才开始执行。使用这些属性，可以更精细地控制JavaScript的加载时机，以提高页面的加载速度和用户体验。 5. 利用现代前端构建工具的代码分割功能 当代前端开发中，使用如Webpack、Rollup等构建工具已经是标准实践。这些工具提供了代码分割（code splitting）的功能，可以根据应用的不同模块，将JavaScript代码分割成多个包（chunks），并且按需加载。这样可以有效地减少首屏加载时需要加载的代码量，只有在用户实际需要使用到某个功能时，才会加载对应的代码。 6. 使用外部脚本文件 尽量使用外部的.js文件而不是内联JavaScript代码。因为外部的.js文件可以被浏览器缓存，当用户再次访问页面时，浏览器可以直接使用缓存中的脚本文件，不需要重新下载。内联JavaScript每次加载页面时都会重新下载，增加了不必要的带宽消耗和加载时间。 通过上述方法，可以有效地通过延迟加载JavaScript来加快网页的加载速度，从而改善用户体验。需要注意的是，不同场景下效果最好的延迟加载策略可能会有所不同，因此实际应用中需要根据具体情况进行适当的策略选择和调整。
js 延迟加载延迟加载 改变改变JS的位置加快网页加载速度的位置加快网页加载速度
当一个网站有很多js代码要加载，js代码放置的位置在一定程度上将会影像网页的加载速度,为了提高加载速度，
本文总结了一下几个注意点
当一个网站有很多js代码要加载，js代码放置的位置在一定程度上将会影像网页的加载速度，为了让我们的网页加载速度更
快，本文总结了一下几个注意点：
1、延迟加载、延迟加载js代码代码
复制代码 代码如下:
<script type=”text/javascript” src=”" id=”my”></script>
<script type=”text/javascript”>
setTimeout(“document.getElementById(‘my').src='include/php100.php'; “,3000);//延时3秒
</script>
这样通过延迟加载js代码，给网页加载留出更多的时间！
2、、js最后加载方案一最后加载方案一
在需要插入JS的地方插入以下代码:
程序代码
复制代码 代码如下:
<span id=”L4EVER”>LOADING…</span>
当然,那个LOADING…你可以换成自己喜欢的小图片.看起来很有AJAX效果呢.
然后在页面最底端插入:
程序代码
复制代码 代码如下:
<span id=”AD_L4EVER”>你的JS代码在这里!</span >
<script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML=”";</script>
3、让、让JS最后加载方案二最后加载方案二
这个牵涉到网页的加载顺序问题，例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页
面，而放入body中，则会按照页面从上倒下的加载顺序来运行javascript的代码~~~ 所以我们可以把js外部引入的文件放到页
面底部，来让js最后引入，从而加快页面加载速度。

下载后可阅读完整内容，剩余0页未读，立即下载

资源推荐
资源评论
weixin_38635996
  • 粉丝: 3
  • 资源: 851
上传资源 快速赚钱
voice
center-task 前往需求广场，查看用户热搜

最新资源