请求时才延迟加载JavaScript文件 - 优化篇

技术关键词 · 收集：

阻塞浏览器、并行下载、竞态条件、关联函数（关联JavaScript代码）、非阻塞请求、动态创建<script>标签、异步下载、延时加载

代码实例：

下面我们先看一段代码示例：

function loadScript (src, onload) {
	var scriptTag = document.createElement("script");
	scriptTag.src = src;
	if (typeof onload === "function") {  // 如果onload 是个函数
		scriptTag.onload = onload;
		scriptTag.onreadystatechange = function () {
			if (scriptTag.readyState === 4) {
				onload();
			}
		}
	}
	document.body.appendChild(scriptTag);
}

可以在项目代码中的任意位置使用上述 loadScript()函数方法 ；

再比如：

// 加载my-script.js文件，当完成时，弹出提示： “ script 已经加载完成” 
loadScript ("my-script.js", function () {
	alert("script 已经加载完成");
});

// 加载my-script.js文件，所需功能包含在文件内部，一旦该文件完成加载好并不需要执行额外的代码
// 因此，不需要传入第二个参数，即格式为：loadScript(src)，所以代码如下所示
loadScript("my-script.js");

如今，已经有一些JS第三方库（比如，RequireJS库）支持实现JavaScript文件的延时加载，以及利用标准化的格式来实现代码文件依赖的简单管理。

关于 “ RequireJS库 ” 的相关使用和介绍，请参看相关文章关键词。

• RequireJS官网下载
• RequireJS代码文件依赖管理

本篇不再赘述。

---

以上就是关于“ 请求时才延迟加载JavaScript文件 - 优化篇 ” 的全部内容。