javascript的性能优化tips

谈到javascript的性能优化,有好多点,比如把script放到离body闭合标签附近,合并多个script标签等等,还有一些代码的性能,for的性能不如while的性能好,用while模拟for循环等等等。

1.从加载开始

在浏览器中,js文件的执行和下载会阻塞css和dom的渲染,这是浏览器的单线程所致,后来chrome,ff等浏览器启用了
js文件的并行下载,然而js文件的运行还是会被阻塞,有的浏览器支持defer关键字。

<script type="text/javascript" defer>
    alert("defer");
</script>
<script type="text/javascript">
    alert("ok")
</script>
<script type="text/javascript">
    window.onload=function(){
        alert("onload");
    }
</script>

不支持defer的浏览器会输出defer,ok,onload,支持的会弹出ok,defer和onload,defer是在dom渲染之前的。
还可以把js文件的script标签用js动态加载。这样文件的下载执行就不会影响其他页面的处理过程。

另外,你可以监听script标签load事件,而ie触发一个readystatechange事件,而且有一个readyState,
它有5个状态,最主要的就是loaded和complete事件,然而ie的这两个事件表现又不一致,有时候又loaded事件没有complete,有时候反之。
那我们在用的时候就可以同时判断:

var script=document.createElement("script");
script.type="text/javascript";
script.onreadystatechange=function(){
    if (script.readyState=="loaded"||script.readyState=="complete") {
        script.onreadystatechange=null;//为了防止事件处理两次
        alert("script ok");
    };
}
script.src="file.js";
document.body.append(script);

2.数据存储的优化

如果外部数据在函数作用域内多次使用,最好用一个局部变量来表示,因为局部变量在函数作用域内的性能消耗是最少的,
函数作用域链中优先查找局部变量,全局变量的性能消耗相对较多。

var a=doucument.getElementById("aa");
document.body.onclick=function(){
    var temp=a;
    // temp to do something...
}

3.dom操作的优化

javascript中存在的dom集合,如document.getElementsByTagName(‘‘),document.links,document.images,document.forms,
document.forms[0].elements,他们都是类数组,有一个length属性,而在遍历的时候会重新查找计算,而把它们放到一个真正的数组里是一个优化方案。
或者可以把length用一个变量表示一下;

var col=document.getElementsByTagName(‘div‘);
var len=col.length;
for (var i = 0; i < len; i++) {
    //todo;
};

在选择dom的结构中,firstChild,nextSibling,previousSibling都是包含文本节点和注释节点,比如在我以前写的选择dom里面,就写了好几个nextSibling。在选取子元素的时候nextSibling比childNodes性能更节省,在ie下节省的性能更多,而jquery的children里面也是用的nextSibling选取的。
下面这个结构,img1的nextSibling是文本节点,如果自己过滤的话会产生性能消耗,现代浏览器提供了nextElementSibling,previousElementSibling等等,他们可以自动过滤文本节点和注释节点,从而提升性能,
ie6,7,8只支持children。

<img src="" id="img1">
<!-- zhushi -->
<img src="" id="img2">

在dom的选择中,querySelectorAll的特性比getElementById的性能好,比如这个结构里:

var b=document.querySelectorAll(‘img#img1,img#img2‘);

querySelectorAll比较方便,而循环迭代getElementById的性能就不怎么样了。浏览器支持就用吧。

4.for循环的优化

for循环的优化,在迭代1000次以上,用达夫设备比较快,基本思想就是用while代替for。而forEach比for循环还慢;
if else和switch相比,在条件多的时候用 switch条件少用if else 这也符合性能的考虑。
递归的优化,可以将递归转化为迭代。为了防止递归做一些重复的计算,可以建立缓存如下,视实际情况选用。称为制表技术。这里给一个制表技术的例子:

function merta(n){
    if (!merta.cache) {
        merta.cache={
            0:0,
            1:1
        }
    };
    if (!merta.cache.hasOwnProperty(n)) {
        merta.cache[n]=n*merta(n-1);
    };
    return merta.cache[n];
}

求数字的阶乘,每次递归的结果都被缓冲,从而达到节省性能。

5.字符串的优化

str+="one"+"two";

在运行的时候会产生一个临时变量="onetwo",然后让这个临时变量+=str,而str=str+‘one‘+‘two‘,就会阻止临时变量的产生,从而做到优化。在大多数浏览器会加快10%-40%

在ie中,这些优化并不适用,ie的字符串处理机制不用,在ie8中连接字符串只会记下各个字符串的引用,在连接的时候把各个字符串拷贝到真正的字符串中,并取代它的引用。
而ie8以前的实现更糟,这种方法反而会使效率更慢。ie8以前给每一个字符串的拷贝分配空间,在大量字符串连接的时候性能消耗成倍增长,只能用数组的连接方法来达到优化

while(len--){
    newstr[newstr.length]=str;
}
newStr=newstr.join(‘‘);
时间: 2024-08-05 06:02:00

javascript的性能优化tips的相关文章

[转]JavaScript 的性能优化:加载和执行

原文链接:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html?ca=drs- JavaScript 的性能优化:加载和执行 蔡 愉晟, 软件工程师, IBM 简介: 随着 Web2.0 技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就

【转】js JavaScript 的性能优化:加载和执行

JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情.本文详

Android应用程序性能优化Tips

主要介绍一些小细节的优化技巧,虽然这些小技巧不能较大幅度的提升应用性能,但是恰当的运用这些小技巧并发生累积效应的时候,对于整个App的性能提升还是有不小作用的.通常来说,选择合适的算法与数据结构会是你首要考虑的因素,在这篇文章中不会涉及这方面的知识点.你应该使用这篇文章中的小技巧作为平时写代码的习惯,这样能够提升代码的效率. 通常来说,高效的代码需要满足下面两个原则: 不要做冗余的工作 尽量避免执行过多的内存分配操作 To ensure your app performs well across

JavaScript 的性能优化:加载和执行

随着 Web2.0 技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情.本文详细介绍了如何正确的加载和执行 JavaScript 代码,从而提高其在浏览器中的性能. 概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必

JavaScript的性能优化:加载和执行

随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情.本文详细介绍了如何正确的加载和执行 JavaScript 代码,从而提高其在浏览器中的性能. 1.概述 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染

javascript循环---性能优化

循环是编程中是最为常见的结构,优化循环是性能优化中很重要的一个部分. 减值迭代:大多数循环使用一个从0开始.增加到某个特定值的迭代器.在很多情况下,从最大值开始,在循环中不断减值的迭代器更加高效. 简化终止条件:如前所说,属性查找或者其它O(n)的操作不应该出现在终止条件这个地方. 简化循环体:循环体是执行最多的,一定要确保没有某些可以被很容易移出循环的密集计算. 使用后测试循环:最常用的for循环和while循环都是前测试循环,而如do-while为后测试循环,可以避免最初终止条件的计算,因此

Javascript常见性能优化

俗话说,时间就是生命,时间就是金钱,时间就是一切,人人都不想把时间白白浪费,一个网站,最重要的就是体验,而网站好不好最直观的感受就是这个网站打开速度快不快,卡不卡. 当打开一个购物网站卡出翔,慢的要死,是不是如同心塞一样的感受,蓝瘦香菇,想买个心爱的宝贝都不能买,心里想这尼玛什么玩意. 那么如何让我们的网站给用户最佳的体验呢?大环境我们不说,什么网络啊,浏览器性能啊,这些我们无法改变,我们能改变的就是我们码农能创造的,那就是代码的性能.代码精简,执行速度快,嵌套层数少等等都是我们可以着手优化注意

JavaScript 前端性能优化小窍门实例汇总

在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛. 在web应用项目中,需要大量JavaScript的代码,将来也会越来越多. 但是由于JavaScript是一个作为解释执行的语言,而且它的单线程机制,决定了性能问题是JavaScript的弱点,也是开发者在写JavaScript的时候需注意的一个问题. 因为经常会遇到Web 2.0应用性能欠佳的问题,主因就是JavaScript性能不足,导致浏览器负荷过重. Javascript

javascript基础-性能优化

优化点 性能检测 基调网络 http://www.cesule.com/cesule/status/show/3496d91653a14743af2bd2e261aee204 chrome检测 优化原则 ‘两害取其轻’: 没有完美的方案.比如,优化与项目工程冲突时,择其一. 并不是每一条都需要优化,根据具体情况来.    优化前后需对比是否有效. 性能优化属于前端集成解决方案的一部分.即推进前端工业化,自动处理.使研发人员只专注于‘业务逻辑’.