快速入门JavaScript性能优化小窍门

但是由于JavaScript是一个作为解释执行的语言，而且它的单线程机制，决定了性能问题是JavaScript的弱点，也是开发者在写JavaScript的时候需注意的一个问题。

因为经常会遇到Web 2.0应用性能欠佳的问题，主因就是JavaScript性能不足，导致浏览器负荷过重。 Javascript性能优化绝不是一种书面的技能，那么应该如何正确的加载和执行 JavaScript代码，从而提高其在浏览器中的性能呢?下面就给大家做一些优化小窍门的知识汇总。

无论当前 JavaScript 代码是内嵌还是在外链文件中，页面的下载和渲染都*停下来等待脚本执行完成。JavaScript 执行过程耗时越久，浏览器等待响应用户输入的时间就越长。

浏览器在下载和执行脚本时出现阻塞的原因在于，脚本可能会改变页面或JavaScript的命名空间，它们会对后面页面内容造成影响。一个典型的例子就是在页面中使用：

document.write()

示例：

<html><head>

<title>Source Example</title></head><body>

<p>

<script type="text/javascript">

document.write("Today is " + (new Date()).toDateString()); </script>

</p></body></html>

当浏览器遇到<script>标签时，当前 HTML 页面无从获知 JavaScript 是否会向<p> 标签添加内容，或引入其他元素，或甚至移除该标签。

因此，这时浏览器会停止处理页面，先执行 JavaScript代码，然后再继续解析和渲染页面。

同样的情况也发生在使用 src 属性加载 JavaScript的过程中，浏览器*先花时间下载外链文件中的代码，然后解析并执行它。在这个过程中，页面渲染和用户交互完全被阻塞了。

不要使用 with() 语句

这是因为 with() 语句将会在作用域链的开始添加额外的变量。额外的变量意味着，当任何变量需要被访问的时候，JavaScript引擎都需要先扫描with()语句产生的变量，然后才是局部变量，较后是全局变量。

因此with()语句同时给局部变量和全局变量的性能带来负面影响，较终使我们优化JavaScript性能的计划破产。

对象属性和数组元素的速度都比变量慢

谈到JavaScript的数据，一般来说有4种访问方式：数值、变量、对象属性和数组元素。在考虑优化时，数值和变量的性能差不多，并且速度显著优于对象属性和数组元素。

因此当你多次引用一个对象属性或者数组元素的时候，你可以通过定义一个变量来获得性能提升。(这一条在读、写数据时都有效)虽然这条规则在绝大多数情况下是正确的，但是Firefox在优化数组索引上做了一些有意思的工作，能够让它的实际性能优于变量。

但是考虑到数组元素在其他浏览器上的性能弊端，还是应该尽量避免数组查找，除非你真的只针对于火狐浏览器的性能而进行开发。

避免全局查找

在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些

function search() { //当我要使用当前页面地址和主机域名

alert(window.location.href + window.location.host);

} //较好的方式是如下这样 先用一个简单变量保存起来

function search() { var location = window.location;

alert(location.href + location.host);

}

避免with语句

和函数类似，with语句会创建自己的作用域，因此会增加其中执行的代码的作用域链的长度，由于额外的作用域链的查找，在with语句中执行的代码肯定会比外面执行的代码要慢，在能不使用with语句的时候尽量不要使用with语句。

with (a.b.c.d) {

property1 = 1;

property2 = 2;

} //可以替换为：

var obj = a.b.c.d;

obj.property1 = 1;

obj.property2 = 2;

数字转换成字符串

一般较好用”" + 1来将数字转换成字符串，虽然看起来比较丑一点，但事实上这个效率是较高的，性能上来说：

(“” +) > String() > .toString() > new String()

通过模板元素clone，替代createElement

很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。

通常我们可能会使用字符串直接写HTML来创建节点，其实这样做，1：无法增加代码的有效性，2：字符串操作效率低，所以应该是用document.createElement()方法，而如果文档中存在现成的样板节点，应该是用cloneNode()方法，因为使用createElement()方法之后，你需要设置多次元素的属性，使用cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素，应该先准备一个样板节点。

var frag = document.createDocumentFragment(); for (var i = 0; i < 1000; i++) { var el = document.createElement('p');

el.innerHTML = i;

frag.appendChild(el);

} document.body.appendChild(frag); //替换为：

var frag = document.createDocumentFragment(); var pEl = document.getElementsByTagName('p')[0]; for (var i = 0; i < 1000; i++) { var el = pEl.cloneNode(false);

el.innerHTML = i;

frag.appendChild(el);

} document.body.appendChild(frag);

避免低效率的脚本位置

HTML 4 规范指出 <script> 标签可以放在 HTML 文档的<head>或<body>中，并允许出现多次。Web 开发人员一般习惯在 <head> 中加载外链的 JavaScript，接着用 <link> 标签用来加载外链的 CSS 文件或者其他页面信息。

低效率脚本位置示例：

<html><head>

<title>Source Example</title>

<script type="text/javascript" src="script1.js"></script>

<script type="text/javascript" src="script2.js"></script>

<script type="text/javascript" src="script3.js"></script>

<link rel="stylesheet" type="text/css" href="styles.css"></head><body>

<p>Hello world!</p></body></html>