增强JavaScript性能之优化页面加载时间

17-05-17 来源：[db:作者]

收藏我要投稿

这里将介绍如何在JavaScript代码和文件上下功夫，来提升网站和应用程序的性能。

优化页面加载时间

在修改JavaScript代码以改进应用程序的性能之前，我们首先要了解浏览器与JavaScript代码之间的交互处理。JavaScript代码是通过HTML<script>标签进行引用来实现加载的。在这个阶段，我们所做的变化处理将确保代码会快速、高效地加载，及代码可以更快的准备就绪来执行，从而提升应用程序的可感知响应能力。

1.HTML标签顺序

当浏览器遇到<script>标签时，在大多数情况下，它会停止渲染页面，直到完成对该脚本的读取和解析。这是为了防止脚本中包含document.write()方法的调用，这意味着在这一时刻会对当前所渲染的页面进行改变。出于这个原因，把所有能够移动的<script>标签挪移至HTML的<body>标签前。这样整个页面将会在各项脚本加载和解析之前进行渲染，从而提升了页面的可感知响应能力。

2.JavaScript文件的GZip编码传输

在JavaScript等文件发送之前，可以进行压缩，当数据到达浏览器之后，进行解压缩，这样一来，通过线路传输的数据更少，文件到达浏览器的时间更快。这项设置称作gzip编码。

在每个请求发生时进行即时的gzip编码处理会消耗服务器上额外的资源和CPU处理时间。

3.缩编、混淆和编译

JavaScript文件文件越小，通过线路把文件下载至浏览器的时间越快，浏览器对文件的读取和解析也就更快。因此，我们要想方设法让代码的体积尽可能的小。这可以通过缩编、混淆和编译。

（1）使用JSMin进行代码缩编

（2）使用UglifyJS进行代码混淆

（3）使用Google Closure Compiler进行代码编译

（4）避免全局变量的使用以实现更优压缩

4.请求时才延迟加载JavaScript文件

动态的使用JavaScript创建一个新的<script>标签，设置其src标签特性指向目标文件以实现异步加载，从而建立一个非阻塞请求来下载JavaScript文件。通过关联一个函数至该新标签的onload方法，我们可以执行那些依赖于这个脚本（异步下载的JavaScript文件）加载后才能运行的指定代码。

代码清单1-1 请求时才加载JavaScript文件，从而不阻塞浏览器

//src为要加载的文件的位置，load为文件成功加载后所执行的函数
function loadScript(src,load){
	var scriptTag = document.createElement("script");
	scriptTag.src = src;
	if(typeof onload === "function"){
		scriptTag.load = load;
		scriptTag.onreadystatechange = function(){
			if(scriptTag.readyState ===4){
				onload();
			}
		}
	}
	document.body.appendChild(scriptTag);
}

可以在代码中的任何位置使用代码清单1-1中的loadScript方法，如下所示：

//加载-script.js文件，当完成时，弹出提示框
loadScript("my-script.js",function(){
	alert("script loaded and available!");
});
//加载-script.js文件，所需功能包含在文件内部，一旦该文件完成加载后并不需要执行额外的代码
//因此，不需要传入第二个参数
loadScript("my-script.js");

ps:可以使用RequireJS库来实现JavaScript文件的延时加载，以及利用标准化的格式来实现代码文件依赖的简单管理。

点击复制链接与好友分享!回本站首页