最新的Web开发教程
 

JavaScript性能


如何加快你的JavaScript代码。


在循环减少活动

环路在编程中通常使用的。

在循环中每个语句,包括for声明,是循环的每个迭代执行。

搜索可以放置在循环外陈述或分配。

糟糕的代码:

for (i = 0; i < arr.length; i++) {

更好的代码:

l = arr.length;
for (i = 0; i < l; i++) {

坏代码访问数组的长度属性中的每个循环迭代的时间。

更好的代码访问外循环的长度属性,使循环运行得更快。


减少DOM访问

访问HTML DOM是很慢的,相对于其他JavaScript语句。

如果您希望在访问DOM元素几次,一次访问它,并把它作为一个局部变量:

obj = document.getElementById("demo");
obj.innerHTML = "Hello";
试一试»

减少DOM大小

保持在HTML DOM小的基元的数量。

这将始终把提高页面加载,加速渲染(页面显示),尤其是在更小的设备。

千方百计搜索DOM(类似的getElementsByTagName)将受益于更小的DOM。


避免不必要的变量

不要创建新的变量,如果你不打算保存的值。

通常你可以这样替换代码:

var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

有了这个:

document.getElementById("demo").innerHTML = firstName + " " + lastName

延迟加载的JavaScript

在页面主体的底部把你的脚本,让浏览器首先加载页面。

虽然脚本下载,浏览器将不会启动任何其他下载。 此外,所有的解析和渲染活动可能被阻止。

HTTP规范定义了浏览器应该不平行下载超过两种组分。

另一种方法是使用defer="true"的脚本标签。 defer属性指定的页面已完成解析后,该脚本会被执行,但它仅适用于外部脚本。

如果可能的话,可以通过代码脚本添加到页面,在页面加载后:

<script>
window.onload = downScripts;

function downScripts() {
    var element = document.createElement("script");
    element.src = "myScript.js";
    document.body.appendChild(element);
}
</script>

避免使用

避免使用带有关键字 。 它对速度有负面影响。 它还杂波了JavaScript的作用域。

该关键字与严格模式不允许的