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. Unity3D Asset 导入&导出

    [Unity3D Asset 导入&导出] 通过Assets->Export Package..菜单可以导出当前选中Assets.若没有选中Assets,则会导出全部assets. 在弹 ...

  2. Spring总结二:IOC(控制反转)xml方式

    1,简介: IoC :Inverse of control 控制反转 ,思想就是在项目中引入一个工厂容器,对项目中接口依赖对象的创建,实现项目中对于依赖对象解耦合. 将程序中对象的创建权以及对象的整个 ...

  3. NFA/DFA算法

    1.问题概述 随着计算机语言的结构越来越复杂,为了开发优秀的编译器,人们已经渐渐感到将词 法分析独立出来做研究的重要性.不过词法分析器的作用却不限于此.回想一下我们的老师刚刚开始向我们讲述程序设计的时 ...

  4. opennebula 对接创建模板参数

    { "id": 8, "name": "c5d1390c-1930-45a5-a686-5cef38b319d7", "displ ...

  5. linux下配置eclipse环境

    注明:本文为博主原创文章,转载请注明出处 前期准备 (此文使用的是非安装版jdk1.8,你也可以下载版本更低的,而且建议使用1.6版本,66大顺嘛,嘻嘻) 1.点击下载jdk 2.点击下载eclips ...

  6. 627D Preorder Test

    传送门 题目大意 给出一棵无根树,每个节点有一个权值,现在要让dfs序的前k个结点的最小值最大,求出这个值.分析 首先可以对这个值v进行二分然后01分数规划现在问题转化为求出一个dfs序,使得dfs序 ...

  7. Struts中ActionContext和ServletActionContext的比较

    一.ActionContext在Struts2开发中除了将请求参数自动设置到Action的字段中,往往也需要在Action里直接获取请求(Request)或会话(Session)的一些信息,甚至需要直 ...

  8. HDU 4118 Holiday's Accommodation (dfs)

    题意:给n个点,每个点有一个人,有n-1条有权值的边,求所有人不在原来位置所移动的距离的和最大值. 析:对于每边条,我们可以这么考虑,它的左右两边的点数最少的就是要加的数目,因为最好的情况就是左边到右 ...

  9. sql 与 oracle 几个简单语法差别

    sql 与 oracle 之间的 语法差别. 简单的几个函数转换 sql->  Up_Time=getdate(),  isnull(), substring(),  charindex(), ...

  10. Linux 命令之chmod

    立贴今日吉,不断更新,欢迎斧正,支持为感! 1. chmod --权限控制 chmod [-cfvR] [--help] [--version] mode file... 说明 : Linux/Uni ...