1. defer 属性
HTML 4.01 为 <script>标签定义了 defer属性。
用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。

在<script> 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。

<!DOCTYPE html>
<html>
<head>
<script src="test1.js" defer="defer"></script>
<script src="test2.js" defer="defer"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
说明：虽然<script> 元素放在了<head>元素中，但包含的脚本将延迟浏览器遇到</html>标签后再执行。

HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中，延迟脚本并不一定会按照顺序执行。

defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的 defer属性。

2. async 属性
HTML5 为 <script>标签定义了 async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。
目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。

异步脚本一定会在页面 load 事件前执行。
不能保证脚本会按顺序执行。

<!DOCTYPE html>
<html>
<head>
<script src="test1.js" async></script>
<script src="test2.js" async></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
async和defer一样，都不会阻塞其他资源下载，所以不会影响页面的加载。
缺点：不能控制加载的顺序

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最后加载
把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

js 延迟加载的几种方法的更多相关文章

  1. js去除空格12种方法

    注:本文非本人原著:原文作者: 黄卉  <js去除空格12种方法> //JS去除空格的方法目前共有12种: //实现1 String.prototype.trim = function() ...

  2. 判断数组的方法/判断JS数据类型的四种方法

    参考文: 以下 3 个判断数组的方法,请分别介绍它们之间的区别和优劣Object.prototype.toString.call() . instanceof 以及 Array.isArray() h ...

  3. 动态加载JS脚本的4种方法

    实现OPOA(One Page One Application)时,必须使用动态加载js. 也就是在用户选择某个菜单项后,再动态加载对应的全部js到客户端. 动态加载js的情况很多啊,比如解决ajax ...

  4. OC和JS交互的三种方法

    看简书上说一共有六种OC和JS交互的方法,但是前三种原理都一致,都是通过检测.拦截Url地址实现互相调用的.剩下的react native等第三方框架原理不一样,也没有去研究,下边记录我使用的三种方法 ...

  5. 判断JS数据类型的四种方法

    在 ECMAScript 规范中,共定义了 7 种数据类型,分为 基本类型 和 引用类型 两大类,如下所示: 基本类型:String.Number.Boolean.Symbol.Undefined.N ...

  6. 判断js数据类型的四种方法，以及各自的优缺点（转）

    转载地址:https://blog.csdn.net/lhjuejiang/article/details/79623973 数据类型分为基本类型和引用类型: 基本类型:String.Number.B ...

  7. js数组去重五种方法

    今天来聊一聊JS数组去重的一些方法,包括一些网上看到的和自己总结的,总共5种方法(ES5). 第一种:遍历数组法 这种方法最简单最直观,也最容易理解,代码如下: var arr = [2, 8, 5, ...

  8. 实现JS继承的几种方法

    总的来说,JS的继承大体上分为两种:借用构造函数方式和原型方式 首先,我们来看看借用构造函数方式的几种做法: //方式一function Person(name, sex){ this.name = ...

  9. 判断JS数据类型的几种方法

    原文转自http://www.cnblogs.com/onepixel/p/5126046.html! 说到数据类型,我们先说一下JavaScript 中常见的几种数据类型: 基本类型:string, ...

随机推荐

  1. JDBC 工具类封装

    每次使用jdbc 我们都要 加载驱动类 创建链接 创建Statement 接口对象执行sql 关闭资源 按照这样的套路可以封装一些重用代码方便在其他方法中调用 package com.xzlf.jdb ...

  2. PHP使用token防止表单重复提交的方法

    本文实例讲述了PHP使用token防止表单重复提交的方法.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2 ...

  3. 获取 ProgramData 之类的环境变量（文件夹路径）的值

    GetEnvironmentVariable Recognized Environment Variables https://docs.microsoft.com/en-us/windows/dep ...

  4. Java语言和C++语言的差异

    Java采用了C及C++的语法格式,对于学习过C及C++的程序设计者来说,学习Java将有可能很轻松.但是,如果仔细检查Java语言的许多细节,就会发现Java取消了不少C及C++的特性,并且加入了一 ...

  5. Linux / mac OS Shell常用命令

    一.文件.目录操作命令 1.ls命令 功能:显示文件和目录的信息 ls 以默认方式显示当前目录文件列表 ls -a 显示所有文件包括隐藏文件 ls -l 显示文件属性,包括大小,日期,符号连接,是否可 ...

  6. golang 线上项目部署折腾之一

    最近自己使用golang折腾了一点东西,可是需要部署到线上才好玩,那么服务器使用了aws,然后使用了docker和没有使用docker部署了一次.简单记录一下过程 aws服务器 为什么使用aws呢,说 ...

  7. Fourier Transform

    为了在统一框架里分析周期信号与非周期信号,可以给周期信号也建立傅里叶变换. 有两种方法求周期信号的傅里叶变换: **1. 利用傅里叶级数进行构造 ** 对于周期信号\(x(t)\),其傅里叶级数展开式 ...

  8. Code force-CodeCraft-20 (Div. 2) D. Nash Matrix 详解（DFS构造）

    D. Nash Matrix time limit per test2 seconds memory limit per test256 megabytes inputstandard input o ...

  9. ASP.NET MVC使用log4net

    本文介绍如何在ASP.NET MVC中使用log4net来记录日志文件. 参考链接:https://www.codeproject.com/Articles/823247/How-to-use-Apa ...

  10. Jenkins+Ansible+Gitlab自动发布/回滚Spring项目

    一.实现方法流程图 流程图如下:代码托管在本地GitLab上(为了复现整套流水线,我直接使用了GitHub,懒得再搭建GitLab),开发完成后提交代码到代码仓库,[自动]触发Jenkins进行持续集 ...