移动Web应用程序开发 高性能JavaScript篇 (三) JavaScript 加载解析和部署

介绍 

本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具:HTML5,JavaScript, CSS3。博文也分为三个大部分:

1. 众望所归的HTML5将主要介绍HTML5的前世今生,主要功能和API以及相关Demo,Demo的代码都可以在文章附件中下载到;

2. 高性能JavaScript将主要介绍如何让JavaScript更流畅,JavaScript debug和分析工具,可以说,没有JavaScript就不可能有互联网的今天,更不可能有移动互联网的明天,编写高性能的JavaScript至关重要;

3. 变化万千的CSS3将主要介绍如今异常强大的CSS3,结合HTML5编写动态的Web应用。熟练使用异常Fashion & Cool & 炫的CSS3将使Web应用增色不少。

本篇是高性能JavaScript介绍的第三篇,将给大家结合实例例子及分析工具介绍在加载JavaScript代码时,如何编程可以让Web应用或者网页更加高效。

相关文章 

移动Web应用程序开发 高性能JavaScript篇 (一) JavaScript 性能瓶颈

移动Web应用程序开发 高性能JavaScript篇 (二) JavaScript 性能分析工具

加载JavaScript

当Browser在遇到<script>标签的时候,整个页面会因为脚本解析、运行而出现等待,不论实际load的JavaScript代码是内联的还是包含在不相干的外部文件中。页面会因为JavaScript文件的下载,解析而停止,等待脚本完成了才能继续。所以对比以下两段代码看谁能高效:

代码片段一
[xhtml]<html>
<head>
<title>Script Example</title>
<-- Example of inefficient script positioning -->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
</body>
</html>[/xhtml]
代码片段二
[xhtml]<html>
<head>
<title>Script Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
<-- Example of recommend script positioning -->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
</body>
</html>[/xhtml]
很显然,代码片段二更高效。因为页面显示部分和JavaScript脚本没有直接的关系,所以完全可以先把界面渲染了再去load脚本。三个JS脚本加载时间我们可以从Chrome分析工具中获得,如下图所示:





将脚本成组加载

由于每个<script>标签在下载时都会阻塞页面解析的过程,所以限制页面<script>总数也可以改善性能。所以成组加载JavaScript脚本可以提升页面整体性能,这个规则不仅对内联脚本有效,对外部脚本同样适用。

原因是在于每个HTTP 请求都会产生额外的性能负担,下载一个100KB的脚本远比下载4个25KB的脚本要快。

下面我们用两个demo来证明一下:demo源代码可在本文结尾处下载。

代码片段一:
[xhtml]<html>
<head>
<title>Script Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
<-- Example of not recommended script positioning -->
<script type="text/javascript" src="
http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js">
</script>
<script type="text/javascript" src="
http://yui.yahooapis.com/combo?2.7.0/build/event/event-min.js ">
</script>
</body>[/xhtml]
代码片段二:
[xhtml]<html>
<head>
<title>Script Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
<-- Example of recommended script positioning -->
<script type="text/javascript" src="
http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&
2.7.0/build/event/event-min.js "></script>
</body>[/xhtml]
两段代码运行后,分别用Chrome开发者工具里面的TimeLine进行分析结果如下图:代码片段二要更加高效。



动态加载脚本

文件对象模型(DOM)允许用户使用JavaScript创建HTML文档中几乎全部的元素和内容。<script>元素也不例外。所以,使用DOM可以动态的在JavaScript动创建,移动,删除脚本文件,这样可以比较JavaScript在加载时对UI页面的阻塞。

参见代码片段:
[xhtml]<script >
var script = document.createElement("script")
script.type = "text/javascript";
//Firefox, Opera, Chrome, Safari 3+
script.onload = function(){
alert("Script loaded!");
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>[/xhtml]
运行后使用TimeLine分析如下图所示:可以看出JavaScript的加载并没有阻塞UI页面。



XHR脚本

另外一种非阻塞方式加载脚本的方法就是将XMLHttpRequest(XHR)对象加入到页面中。这种方式首先需要创建一个XHR对象,然后下载JavaScript文件,再使用一个动态的<script>元素将JavaScript代码加入到页面里面。

具体参加代码示例:
[xhtml]var xhr = new XMLHttpRequest();
xhr.open("get", "file1.js", true);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
var script = document.createElement("script");
script.type = "text/javascript";
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
};
xhr.send(null);[/xhtml]
部署JavaScript

为了让客户端Web应用更加高效和便捷,不仅仅在客户端编程时可以高效地使用JavaScript,同样在Server端可以通过以下途径来使Web页面的加载更高快速。

1. 尽可能地合并JavaScript文件,降低HTTP请求数量

2. 压缩JavaScript文件,缩小下载文件的大小,可以使用gzip的方式进行压缩。

3. 通过设定合适的HTTP 回复头文件来使客户端缓存一些大的JavaScript文件。一旦脚本被缓存,则用户下次打开时,可以显著降低加下载和解析时间。

4. 对于服务范围很广的公司,可以考虑使用CDN(Content Delivery Network)来部署JavaScript文件。

源代码下载地址: 下载

参考文章:High performance JavaScript O'Reilly Yahoo Press

在下一篇文章中将给大家介绍在JavaScript编程的过程中,如何通过一些编程技巧来提升Web应用的性能,缩短其处理时间。

相关文章

移动Web应用程序开发 高性能JavaScript篇 (一) JavaScript 性能瓶颈

移动Web应用程序开发 高性能JavaScript篇 (二) JavaScript 性能分析工具

For more complete information about compiler optimizations, see our Optimization Notice.