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. spring注解注入属性

  2. Windchill 设计变更流程卡死查询方法

    设计变更流程卡死查询方法 1. 导出设计变更表单查看填写了“需要”和“是”字眼的文本框  2.打开进程管理器显示流程卡死的地方,确定哪里出错导致没法执行下一步  3.打开设计变更流程图,里面可以查看有 ...

  3. 为什么学习python?(知乎大神的回答)

    学习PHP 是因为得到一份工作 学习Java 是因为他们选修了计算机科学这门课程 学习python 是因为爱这门语言,因为寻求美

  4. ajax load事件

    ajax.load  使用ajax 来改变div元素文本. load( url [, data][, callback] ) load()方法的传递方式根据参数data来自动指定.如果没有参数传递,则 ...

  5. Hyperledger Fabric源码解析

    Hyperledger Fabric开源于2015年12月,截至2018年2月初有185个公司/组织成员加入.最初由IBM和DAH的工程师贡献,现在约有70名的代码贡献者,4000+代码提交,代码行数 ...

  6. CLR VIA C# 泛型的协变和逆变

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. Vim编码知识,乱码问题

    原文:http://demi-panda.com/2012/12/26/vim-encoding/ 在vim的初始学习阶段,乱码经常是困扰新手的一个比较烦躁的问题,本文试图阐述Vim的编码知识,及设置 ...

  8. open与fopen的用法

    1.  fopen    打开普通文件 带缓冲区 缓冲文件系统是借助文件结构体指针来对文件进行管理,通过文件指针来对文件进行访问,既可以读写字符.字符串.格式化数据,也可以读写二进制数据.   函数原 ...

  9. Oracle 写存储过程的一个模板还有一些基本的知识点

    我很少用Oracle,也算新手,不过其实入手没有那么难,下面只是一个基本知识,高手绕道,其实数据库基本是相同的,这里提供都是基本知识点 有一个Oracle溢出的问题,容易让新手怀疑到无所怀疑,其实就是 ...

  10. Django工程中使用echarts怎么循环遍历显示数据

    前言: 后面要开发测试管理平台,需要用到数据可视化,所以研究了一下 先看下最后的图吧,单击最上方的按钮可以控制柱状图显隐 views.py # -*- coding: utf-8 -*- from _ ...