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. 敏捷软件开发Note

    [敏捷原则] 1.我们最优先要做的是通过尽早的.持续的交付有价值的软件为使客户满意. 初期交付的系统中所包含的功能越少,最终交付的系统的质量就越高.交付的越频繁,最终的产品质量就越高.敏捷实践会说早地 ...

  2. 整理出一个比较实用的SqlHelper类 满足大多数情况的使用

    /// <summary> /// SqlHelper类 by zy 2016-3-11 /// </summary> public sealed class SqlHelpe ...

  3. Linux 下Nginx 运行Vue

    首相基础的安装Node.js  npm 先建个目录把 /node/www 然后在这个目录下 wget https://nodejs.org/dist/v8.11.1/node-v8.11.1-linu ...

  4. SqlDataAdapter 批量更新数据库表

    在数据库中批量插入数据许多人都已经了解了,就是使用.net 中的SqlBulkCopy对象(MSDN详解).我们在做评教系统的时候使用过这个对象,它能将数据表批量导入到数据库中,效率比单条插入数据效率 ...

  5. Hyperledger Fabric Orderer节点启动

    Orderer 节点启动通过 orderer 包下的 main() 方法实现,会进一步调用到 orderer/common/server 包中的 Main() 方法. 核心代码如下所示. // Mai ...

  6. c语言实践输出某个区间中不是3的倍数的偶数

    OK,先审题,我们最后要输出的那些数是需要满足两个条件的,第一个条件是,这个数不是3的倍数,第二个条件是这个数是偶数.也就是这样的数需要同时满足这两个条件的时候才把这个数输出. 不是3的倍数这个条件在 ...

  7. ROW_NUMBER分页

    var query = string.Format("SELECT {0} FROM (SELECT ROW_NUMBER() OVER (ORDER BY {3}) AS RowNum, ...

  8. 编写高质量代码改善C#程序的157个建议——建议15: 使用dynamic来简化反射实现

    建议15: 使用dynamic来简化反射实现 dynamic是Framework 4.0的新特性.dynamic的出现让C#具有了弱语言类型的特性.编译器在编译的时候不再对类型进行检查,编译器默认dy ...

  9. C++小学生四则运算_余伟淇_郑鉴

    https://github.com/kielingpao/sizeyunsuan 项目相关要求 1题目:实现一个自动生成小学四则运算题目的命令行程序 2说明 自然数:0, 1, 2, ….• 真分数 ...

  10. OM—>AR相关会计科目

    业务会计核算 挑库:           借:发出商品 (递延销货成本) 贷:发出商品 (递延销货成本)   发运:           借:发出商品 (递延销货成本) 贷:库存商品/原材料 (库存估 ...