我昨天下载了《High Performance JavaScript》，来学习如何提高JavaScript在Web应用中的性能问题。前言中提到了JavaScript的最初目标是为了解决用户在访问Web页面时的交互和体验。接下来提到了Internet的发展和变革，当然，其中提到了JavaScript在这一过程中起到的作用。
然后是优化的必要性的原因。由于JavaScript的大量使用，嵌入在页面中的JavaScript代码成千上万。这就给Web页面的下载和运行带来很大的负荷。JavaScript代码的优化主要还是靠编码人员，这主要是由于JavaScript解释器不同于各种语言的代码编译器，后者可对编码人员写的代码进行优化。
接下来提到了下一代的JavaScript引擎，2008年Google公司推出的Chrome，Chrome是第一款引入JavaScript代码优化引擎的浏览器，该引擎以V8命名，它是一个JIT（just-in-time）的JavaScript编译引擎，可将JavaScript编译生成机器码并执行。紧接着其他的浏览器也相继推出了带有优化功能的JavaScript引擎。
性能问题一直被关注着，尽管JavaScript的核心执行时间有所进步，但JavaScript的很多方面在新引擎中无法处理来得到改善。
该书给我们讲述了很多关于JavaScript不同方面的技术和方法。 包括执行时间、下载、与DOM交互，页生命周期等等。该书的第一章主要讲解如何优化页面中的JavaScript代码的加载。接下来我着重讨论这方面的内容。
由于JavaScript的阻塞特性导致问题的复杂。也就是说，即使什么都没有发生时，JavaScript代码也在执行。 事实上，多数浏览器在处理UI更新和JavaScript执行用同一个Process，JavaScript执行花费的时间越长，浏览器响应用户的输入的等待就越长。无论JavaScript代码是内嵌在页面中的，还是通过外部JavaScript文件引用，该页面中每一个<script>标签的存在意味着需要等待script的解释和执行。页面的下载和呈现必须停下来以等待script的处理完成。这是页面生命周期所必须的，因为有些script会引起页面中的内容变化。
如下一段代码
<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>
<script type="text/javascript">
document.write("The date is " + (new Date()).toDateString());
</script>
</p>
</body>
</html>
当页面处理到script标签是，会停止呈现之后的html代码，转去执行JavaScript代码，当script执行完成后，再继续呈现之后的html元素。
同样通过src引用外部JavaScript代码的页面，当遇到script标签时，会转去执行该JavaScript文件中的代码而阻塞页面中html代码的解释和呈现。因而，script的位置就很重要了。HTML4规范中指定在<head>或者<body>标签中可以放置任意多个<script>标签，如下所示代码：
<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>
尽管该代码看上去没有什么不妥之处，但实际存在严重的性能问题：该代码中head标签有三个JavaScript文件需要被加载，每个都会阻塞页面继续呈现，直到这三个JavaScript代码下载并执行完成。
该书中的一幅图很能说明问题
蓝色部分为js文件加载时间，空白部分为该js文件执行时间。
Internet Explorer 8, Firefox 3.5, Safari 4, and Chrome 2运行并行下载JavaScript文件。但仍然会阻塞其他资源的下载。由于scripts阻塞下载页面中的其他资源，推荐将<script>标签放置在闭合<body>标签处，如下示例代码：
<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="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
</body>
</html>
这样script的加载和执行不会影响页面其他元素的下载和呈现。
OK，今天先说到这里！
