JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件。
JS延迟加载有助于提高页面加载速度。
 

一般有以下几种方式:
 
1)defer 属性
<script src="test1.js" defer="defer"></script>

  

2)async 属性
<script src="test1.js" async></script>

  

3)动态创建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>

  

4)使用jQuery的getScript方法
$.getScript("outer.js",function(){//回调函数,成功获取文件后执行的函数
console.log("脚本加载完成")
});

  

5)使用setTimeout延迟方法
6)让JS最后加载

13. js延迟加载的方式有哪些的更多相关文章

  1. js延迟加载的方式有哪些?

    共有:defer和async.动态创建DOM方式(用得最多).按需异步载入js defer属性:(页面load后执行) HTML 4.01 为 <script>标签定义了 defer属性. ...

  2. 关于js延迟加载(异步操作)的方式

    一.概述 最近重新开始学习js,在第一章的一个小节里写到了“脚本调用策略”,书上写的这部分不多,但是发现在我之前的(笔)面试中,问到的频率还是比较高的.自己一直习惯于直接把所有js文件写在head里, ...

  3. js延迟加载优化页面响应速度

    网页打开速度是衡量网站性能的一个极为重要的指标,今天就来说说如何通过JS延迟加载的方式提高页面响应速度: JS延迟加载的 含义:即等页面加载完成之后再加载 JavaScript 文件.作用:JS延迟加 ...

  4. JS --- 延迟加载的几种方式

    标题:JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件.  JS延迟加载有助于提高页面加载速度. 1. defer 属性 HTML 4.01 为 <script>标 ...

  5. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  6. js各种继承方式和优缺点的介绍

    js各种继承方式和优缺点的介绍 作者: default 参考网址2 写在前面 本文讲解JavaScript各种继承方式和优缺点. 注意: 跟<JavaScript深入之创建对象>一样,更像 ...

  7. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!

    原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...

  8. JavaScript脚本延迟加载的方式有哪些?

    延迟加载就是等页面加载完成之后再加载 JavaScript 文件. js 延迟加载有助于提高页面加载速度. 一般有以下几种方式: defer 属性: 给 js 脚本添加 defer 属性,这个属性会让 ...

  9. css js 的引入方式和书写位置

    css 的引入方式 1.行内样式 <div id="div1" style="width:100px; height:100px; background:red&q ...

随机推荐

  1. saltstack系列(四)——zmq Paraller Pipeline模式

    push/pull模式 push/pull模式,这是一个什么模式呢?战争时期,食物紧缺,实行配给制,大家都排好队,有人专门发放食物,前一个人领取了食物,后一个人跟上继续领取食物,这个push端就是发放 ...

  2. MySQL日期数据类型总结

    MySQL:MySQL日期数据类型.MySQL时间类型使用总结 MySQL 日期类型:日期格式.所占存储空间.日期范围 比较. 日期类型        存储空间      日期格式           ...

  3. python子进程模块subprocess详解与应用实例 之二

    1.2. Popen 对象 Popen类的实例有下列方法: 1. Popen.poll() 检查子进程是否已经结束,设置并返回返回码值. 2. Popen.wait() 等待子进程结束,设置并返回返回 ...

  4. 【HDU5857】Median

    题意 给出一个长度为n的有序序列.给出m个询问,每个询问包括四个正整数l1,r1,l2,r2你用l1tor1的和l2tor2的元素来组成一个新的序列,然后找出这个序列的中位数. 分析 这是当时Spri ...

  5. C#获取当前站点的根地址

    /// <summary> /// 得到当前网站的根地址 /// </summary> /// <returns></returns> protecte ...

  6. 阿里云ECS购买优惠码

    今天收到了阿里云给我发的邮件,大意是阿里云推荐码限量开放,可享九折优惠! 于是就点击进去申请了一下 申请的优惠码是:C7IYIS有效期至2015-11-30 23:59:59 首次购买包年包月云服务器 ...

  7. OpenCV---resize

    转自http://www.cnblogs.com/korbin/p/5612427.html 在图像处理过程中,有时需要把图像调整到同样大小,便于处理,这时需要用到图像resize() 原函数void ...

  8. Linux oprofile命令

    一.简介 oProfile是Linux平台上的一个功能强大的性能分析工具,支持两种采样(sampling)方式:基于事件的采样(eventbased)和基于时间的采样(timebased),它可以工作 ...

  9. R dataframe 遗忘, which 矩阵搜索

    A data frame is used for storing data tables. It is a list of vectors of equal length. For example, ...

  10. Luogu 3265 [JLOI2015]装备购买

    BZOJ 4004 把所有不能相互表示出来的向量都买下,一定能得到最大能买的方案数. 求解线性无关向量可以高斯消元,最后没有变成$0$向量的就是基底. 本题还要求代价最小怎么办?我们只要先把所有向量按 ...