在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript咱们能够作不少事情 , 应用普遍。在web应用项目中,须要大量JavaScript的代码,未来也会愈来愈多。可是因为JavaScript是一个做为解释执行的语言,并且它的单线程机制,决定了性能问题是JavaScript的弱点,也是开发者在写JavaScript的时候需注意的一个问题,由于常常会遇到Web 2.0应用性能欠佳的问题,主因就是JavaScript性能不足,致使浏览器负荷太重。 Javascript性能优化毫不是一种书面的技能,那么应该如何正确的加载和执行 JavaScript代码,从而提升其在浏览器中的性能呢?下面就给你们作一些优化小窍门的知识汇总。
javascript
不管当前 JavaScript 代码是内嵌仍是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的缘由在于,脚本可能会改变页面或JavaScript的命名空间,它们会对后面页面内容形成影响。一个典型的例子就是在页面中使用:css
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的过程当中,浏览器必须先花时间下载外链文件中的代码,而后解析并执行它。在这个过程当中,页面渲染和用户交互彻底被阻塞了。
谈到JavaScript的数据,通常来讲有4种访问方式:数值、变量、对象属性和数组元素。在考虑优化时,数值和变量的性能差很少,而且速度显著优于对象属性和数组元素。
所以当你屡次引用一个对象属性或者数组元素的时候,你能够经过定义一个变量来得到性能提高。(这一条在读、写数据时都有效)虽然这条规则在绝大多数状况下是正确的,可是Firefox在优化数组索引上作了一些有意思的工做,可以让它的实际性能优于变量。可是考虑到数组元素在其余浏览器上的性能弊端,仍是应该尽可能避免数组查找,除非你真的只针对于火狐浏览器的性能而进行开发。html
function search() {
//当我要使用当前页面地址和主机域名
alert(window.location.href + window.location.host);
}
//最好的方式是以下这样 先用一个简单变量保存起来
function search() {
var location = window.location;
alert(location.href + location.host);
}
with (a.b.c.d) {
property1 = 1;
property2 = 2;
}
//能够替换为:
var obj = a.b.c.d;
obj.property1 = 1;
obj.property2 = 2;
(“” +) > String() > .toString() > new String()
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>
<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>
然而这种常规的作法却隐藏着严重的性能问题。在清单 2 的示例中,当浏览器解析到 <script> 标签(第 4 行)时,浏览器会中止解析其后的内容,而优先下载脚本文件,并执行其中的代码,这意味着,其后的 styles.css 样式文件和<body>标签都没法被加载,因为<body>标签没法被加载,那么页面天然就没法渲染了。所以在该 JavaScript 代码彻底执行完以前,页面都是一片空白。下图描述了页面加载过程当中脚本和样式文件的下载过程。
<head>
<title>Source Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
<!-- Example of efficient script positioning -->
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>
<script type="text/javascript" src="script3.js"></script>
</body>
</html>
这段代码展现了在 HTML 文档中放置<script>标签的推荐位置。尽管脚本下载会阻塞另外一个脚本,可是页面的大部份内容都已经下载完成并显示给了用户,所以页面下载不会显得太慢。这是优化 JavaScript 的首要规则:将脚本放在底部。
document.getElementById('foo').onclick = function(ev) { };
闭包的问题在于:根据定义,在它们的做用域链中至少有三个对象:闭包变量、局部变量和全局变量。这些额外的对象将会致使其余的性能问题。可是Nicholas并非要咱们因噎废食,闭包对于提升代码可读性等方面仍是很是有用的,只是不要滥用它们(尤为在循环中)。
java
提到性能,在循环中须要避免的工做一直是个热门话题,由于循环会被重复执行不少次。因此若是有性能优化的需求,先对循环开刀有可能会得到最明显的性能提高。web
一种优化循环的方法是在定义循环的时候,将控制条件和控制变量合并起来,下面是一个没有将他们合并起来的例子:编程
for ( var x = 0; x < 10; x++ ) { };
当咱们要添加什么东西到这个循环以前,咱们发现有几个操做在每次迭代都会出现。JavaScript引擎须要:
#1:检查 x 是否存在
#2:检查 x 是否小于 0 <span style="color: #888888;">(这里可能有笔误)</span>
#3:使 x 增长 1
然而若是你只是迭代元素中的一些元素,那么你可使用while循环进行轮转来替代上面这种操做:
var x = 9;
do { } while( x-- );
<script>
元素将 JavaScript 代码注入页面。
var xhr = new XMLHttpRequest();
xhr.open("get", "script1.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);
此代码向服务器发送一个获取 script1.js 文件的 GET 请求。onreadystatechange 事件处理函数检查readyState 是否是 4,而后检查 HTTP 状态码是否是有效(2XX 表示有效的回应,304 表示一个缓存响应)。若是收到了一个有效的响应,那么就建立一个新的<script>元素,将它的文本属性设置为从服务器接收到的 responseText 字符串。这样作实际上会建立一个带有内联代码的<script>元素。一旦新<script>元素被添加到文档,代码将被执行,并准备使用。
var images = document.getElementsByTagName('img');
for (var i = 0, len = images.length; i < len; i++) { }
编写JavaScript的时候必定要知道什么时候返回NodeList对象,这样能够最小化对它们的访问
因为JavaScript是弱类型的,因此它不会作任何的自动类型检查,因此若是看到与null进行比较的代码,尝试使用如下技术替换:数组
一、若是值应为一个引用类型,使用instanceof操做符检查其构造函数浏览器
二、若是值应为一个基本类型,做用typeof检查其类型缓存
三、若是是但愿对象包含某个特定的方法名,则使用typeof操做符确保指定名字的方法存在于对象上
安全
var el = document.getElementById('MyElement');
var func = function () {
//…
}
el.func = func;
func.element = el;
可是一般不会出现这种状况。一般循环引用发生在为dom元素添加闭包做为expendo的时候。
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {
//……
}
}
init();
init在执行的时候,当前上下文咱们叫作context。这个时候,context引用了el,el引用了function,function引用了context。这时候造成了一个循环引用。
下面2种方法能够解决循环引用:
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {
//……
}
}
init();
//能够替换为:
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {
//……
}
el = null;
}
init();
将el置空,context中不包含对dom对象的引用,从而打断循环应用。
若是咱们须要将dom对象返回,能够用以下方法:
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {
//……
}
return el;
}
init();
//能够替换为:
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {
//……
}
try {
return el;
} finally {
el = null;
}
}
init();
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {
//……
}
}
init();
//能够替换为:
function elClickHandler() {
//……
}
function init() {
var el = document.getElementById('MyElement');
el.onclick = elClickHandler;
}
init();
把function抽到新的context中,这样,function的context就不包含对el的引用,从而打断循环引用。
IE下,脚本建立的dom对象,若是没有append到页面中,刷新页面,这部份内存是不会回收的!
function create() {
var gc = document.getElementById('GC');
for (var i = 0; i < 5000; i++) { var el = document.createElement('div'); el.innerHTML = "test"; //下面这句能够注释掉,看看浏览器在任务管理器中,点击按钮而后刷新后的内存变化 gc.appendChild(el); } }
若是要链接多个字符串,应该少使用+=,如
s+=a;
s+=b;
s+=c;
应该写成s+=a + b + c;
而若是是收集字符串,好比屡次对同一个字符串进行+=操做的话,最好使用一个缓存,使用JavaScript数组来收集,最后使用join方法链接起来
var buf = [];
for (var i = 0; i < 100; i++) { buf.push(i.toString()); } var all = buf.join("");
var myVar = "3.14159", str = "" + myVar, // to string i_int = ~ ~myVar, // to integer f_float = 1 * myVar, // to float b_bool = !!myVar, /* to boolean - any string with length and any number except 0 are true */ array = [myVar]; // to array若是定义了toString()方法来进行类型转换的话,推荐 显式调用toString() ,由于内部的操做在尝试全部可能性以后,会尝试对象的toString()方法尝试可否转化为String,因此直接调用这个方法效率会更高
var aTest = new Array(); //替换为 var aTest = []; var aTest = new Object; //替换为 var aTest = {}; var reg = new RegExp(); //替换为 var reg = /../; //若是要建立具备一些特性的通常对象,也可使用字面量,以下: var oFruit = new O; oFruit.color = "red"; oFruit.name = "apple"; //前面的代码可用对象字面量来改写成这样: var oFruit = { color: "red", name: "apple" };
var num = 0; setTimeout('num++', 10); //能够替换为: var num = 0; function addNum() { num++; } setTimeout(addNum, 10);
if (oTest != '#ff0000') { //do something } if (oTest != null) { //do something } if (oTest != false) { //do something } //虽然这些都正确,但用逻辑非操做符来操做也有一样的效果: if (!oTest) { //do something }
在rich应用中,随着实例化对象数量的增长,内存消耗会愈来愈大。因此应当及时释放对对象的引用,让GC可以回收这些内存控件。
对象:obj = null
对象属性:delete obj.myproperty
数组item:使用数组的splice方法释放数组中不用的item
一、尽可能使用原生方法
二、switch语句相对if较快
经过将case语句按照最可能到最不可能的顺序进行组织
三、位运算较快
当进行数字运算时,位运算操做要比任何布尔运算或者算数运算快
四、巧用||和&&布尔运算符
function eventHandler(e) { if (!e) e = window.event; } //能够替换为: function eventHandler(e) { e = e || window.event; }
if (myobj) { doSomething(myobj); } //能够替换为: myobj && doSomething(myobj);
一、每条语句末尾须加分号
在if语句中,即便条件表达式只有一条语句也要用{}把它括起来,以避免后续若是添加了语句以后形成逻辑错误
二、使用+号时需谨慎
JavaScript 和其余编程语言不一样的是,在 JavaScript 中,’+'除了表示数字值相加,字符串相链接之外,还能够做一元运算符用,把字符串转换为数字。于是若是使用不当,则可能与自增符’++’混淆而引发计算错误
var valueA = 20; var valueB = "10"; alert(valueA + valueB); //ouput: 2010 alert(valueA + (+valueB)); //output: 30 alert(valueA + +valueB); //output:30 alert(valueA ++ valueB); //Compile error
三、使用return语句须要注意
一条有返回值的return语句不要用()括号来括住返回值,若是返回表达式,则表达式应与return关键字在同一行,以免压缩时,压缩工具自动加分号而形成返回与开发人员不一致的结果
function F1() { var valueA = 1; var valueB = 2; return valueA + valueB; } function F2() { var valueA = 1; var valueB = 2; return valueA + valueB; } alert(F1()); //output: 3 alert(F2()); //ouput: undefined
var valueA = "1"; var valueB = 1; if (valueA == valueB) { alert("Equal"); } else { alert("Not equal"); } //output: "Equal" if (valueA === valueB) { alert("Equal"); } else { alert("Not equal"); } //output: "Not equal"