JavaScript脚本延迟加载的方式有哪些？（笔记）

原文

延迟加载就是等页面加载完成之后再加载 JavaScript 文件。 js 延迟加载有助于提高页面加载速度。

加载方式：

1.阻塞加载

平时默认的加载方式，前边进行加载会阻止浏览器后续处理，比如加载js会暂停图像的渲染。所以可以讲需要加载的js放到最后，使得js最后加载，先让页面显示出来。

2.延迟加载

延迟加载是脚本延迟到文档被完全解析和显示之后再执行。非必须的模块代码延迟加载。

3.异步加载

异步加载是立即下载js'脚本的同时又不妨碍页面中的其他操作。

延迟的方法：

defer 属性：给 js 脚本添加 defer 属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样。
async 属性：给 js 脚本添加 async 属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js 脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。

tip： HTML 5为 <script>标签定义了async属性。
动态创建 DOM 方式：动态创建 DOM 标签的方式，可以对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入 js 脚本。
使用 setTimeout 延迟方法：设置一个定时器来延迟加载js脚本文件
让 JS 最后加载：将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最后来加载执行。

JavaScript脚本延迟加载的方式有哪些？（笔记）相关推荐

JavaScript脚本延迟加载的方式有哪些？
延迟加载就是等页面加载完成之后再加载 JavaScript 文件. js 延迟加载有助于提高页面加载速度. 一般有以下几种方式: defer 属性:给 js 脚本添加 defer 属性,这个属性会让脚 ...
JavaScript脚本延迟加载的方式有哪些
延迟加载就是等页面加载完成之后再加载JavaScript 文件.js 延迟加载有助于提高页面加载速度般有以下几种方式:defer 属性: 给js 脚本添加 defer 属性,这个属性会让脚本的加载与 ...
Javascript脚本运行的方式（js写在页面什么地方）
1.脚本写在函数里,body标签里加onload这个函数,意为body加载完成执行函数func.代码如下: <script type="text/javascript"> ...
【JavaScript脚本】——T1基本语法——重点笔记
删除按钮与超链接删除 <h1>删除按钮</h1> <input type="button" onclick="return confirm( ...
JavaScript脚本语⾔基础语法笔记总结
JavaScript脚本语⾔&基础语法&笔记总结 0.学前准备: JavaScript简介使⽤⽅法 1. JavaScript简介什么是JavaScript? 前端Web技术的组成: ...
MongoDB学习笔记-06 数据库命令、固定集合、GridFS、javascript脚本
介绍MongoDB支持的一些高级功能: 数据库命令固定大小的集合 GridFS存储大文件 MongoDB对服务端JavaScript的支持数据库命令命令的原理 MongoDB中的命令其实是作为一 ...
JavaScript标准参考教材（alpha）--笔记
一.导论二.基本语法 1.严格来说var a=1与a=1效果不太一样,delete命令无法删除前者. JavaScirpt是一种动态类型语言,也就是说,变量的类型没有限制,可以赋予各种类型的值. J ...
SpiderMonkey－让你的C++程序支持JavaScript脚本
译序有些网友对为什么D2JSP能运行JavaScript脚本程序感到奇怪,因此我翻译了这篇文章,原文在这里.这篇教程手把手教你如何利用SpiderMonkey创建一个能执行JavaScript脚本的 ...
❗HTML引入JavaScript的三种常用方式汇总❗
引言 JavaScript是一门脚本语言,虽然名字里有Java,但是和Java没有一点关系,它原名是LiveScript:现在的前端JavaScript可以说是异常火爆,但是博主本人并不准备向前端发展 ...

JavaScript脚本延迟加载的方式有哪些？（笔记）

原文

延迟加载就是等页面加载完成之后再加载 JavaScript 文件。 js 延迟加载有助于提高页面加载速度。

JavaScript脚本延迟加载的方式有哪些？（笔记）相关推荐

最新文章

热门文章