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. ThinkPHP3.2 插入数据库数据,缓存问题

    每个字段都是有数据的,可是就是is_new插不进去, 最后的原因就是TP有数据库字段缓存,FUCK 把RunTIme下面的Data文件夹删除掉,在开发模式中就把自动缓存改成Fasle

  2. IFC标准是为了满足建筑行业的信息交互与共享而产生的统一数据标准,是建 筑行业事实上的数据交换与共享标准。本文概要介绍了IFC标准的产生及发展 历程,IFC的整体框架结构,简要说明了IFC标准的实现方法和过程,描述了 当前的应用以及我们应该更加积极地利用IFC标准为建筑软件行业服务。

  3. Solidity transfer vs send 区别

    原文地址: https://ethereum.stackexchange.com/questions/19341/address-send-vs-address-transfer-best-pract ...

  4. 利用arcgis实现经纬度和平面坐标互转

    一平面直角坐标(投影坐标)转经纬度 基本程序是这样的 经纬度计算操作 1. 定义坐标系:在AreToolbox下→数据管理工具→投影和变换→定义投影→输入数据或要素点击▼选择定义同层(同时在坐标系中点 ...

  5. 卡2-SLAM

    ---恢复内容开始--- 1.下载 首先需要从github上Git以下两个包: git clonehttps://github.com/ros-perception/open_karto(开源的kar ...

  6. html5之音频、视频(video&audio)

    音频&视频 本篇为本人的学习笔记. 在Html5之前,浏览器对于视频和音频的处理并没有一个标准.因此在网页中看到的视频,都是通过第三插件的方式嵌入的,如:QuickTime.RealPlaye ...

  7. Displaying Speed and Direction Symbology from U and V vectors (转)

    This blog shows you how to calculate and symbolize wind or current speed and direction when the unde ...

  8. Linux下的多线程下载工具mwget

    之前在做项目的时候,遇到一个难题,需要一个多线程下载器,于是阴差阳错的看到了这款工具--mwget,之所以是阴差阳错,是因为mwget的多线程下载功能,并不是我们想要的多线程. wget大家都知道吧, ...

  9. eclipse启动了tomcat,但是浏览器打不开欢迎页

    tomcat在eclipse中启动成功,主页却打不开 症状: tomcat在eclipse里面能正常启动,而在浏览器中访问http://localhost:8080/不能访问,且报404错误.同时其他 ...

  10. .net Reflection(反射)- 一

    Reflection 反射需要引用 using System.Reflection; 命名空间.  通过 Assembly 类的 Load( ); 加载指定的 程序集 Assembly 是不能被实例化 ...