js延迟加载的方式有哪些？

最新推荐文章于 2020-04-19 23:48:25 发布

weixin_34256074

最新推荐文章于 2020-04-19 23:48:25 发布

阅读量71

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/8080zh/p/9232177.html

版权

共有：defer和async、动态创建DOM方式（用得最多）、按需异步载入js

defer属性：(页面load后执行)

HTML 4.01 为 <script>标签定义了 defer属性。
用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。

在<script> 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。

<head>
    <script src="test1.js" defer="defer"></script>
    <script src="test2.js" defer="defer"></script>
</head>

async属性:(页面load前执行)

HTML5 为 <script>标签定义了 async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。
目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。异步脚本一定会在页面 load 事件前执行。不能保证脚本会按顺序执行。

<head>
    <script src="test1.js" async></script>
    <script src="test2.js" async></script>
</head>
<body>

动态创建Dom：

//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">  
   function downloadJSAtOnload() {  
       varelement = document.createElement("script");  
       element.src = "defer.js";  
       document.body.appendChild(element);  
   }  
   if (window.addEventListener)  
      window.addEventListener("load",downloadJSAtOnload, false);  
   else if (window.attachEvent)  
      window.attachEvent("onload",downloadJSAtOnload);  
   else 
      window.onload =downloadJSAtOnload;  
</script>

转载于:https://www.cnblogs.com/8080zh/p/9232177.html

weixin_34256074

关注

0
点赞
踩
1

收藏

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

共有：defer和async、动态创建DOM方式（用得最多）、按需异步载入jsdefer属性：(页面load后执行)HTML 4.01 为<script>标签定义了defer属性。用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。在<script>元素中设置defer属性，等于告诉浏览器立即下载，但延迟执...
复制链接

扫一扫