通过网上查找资料了解关于性能优化方面的内容,现简单整理,仅供大家在优化的过程中参考使用,如有什么问题请及时提出,再做出相应的补充修改。

一、 让代码简洁:一些简略的表达方式也会产生很好的优化

eg:x=x+1;在不影响功能的情况下可以简写为x++;

二、 变量名方法名尽量在不影响语意的情况下简单。(可以选择首字母命名)

eg:定义数组的长度可以取名为:ArrLen而不需要取为ArrayLength。

三、 关于JS的循环,循环是一种常用的流程控制。

JS提供了三种循环:for(;;)、while()、for(in)。在这三种循环中for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for(;;)、while()循环的性能基本持平。当然,推荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或–运算符。

四、 如果需要遍历数组,应该先缓存数组长度,将数组长度放入局部变量中,避免多次查询数组长度。

因为我们常常要根据字符串、数组的长度进行循环,而通常这个长度是不变的,比如每次查询a.length,就要额外进行一个操作,而预先把var len=a.length,则就少了一次查询。

五、 尽量选用局部变量而不是全局变量。

局部变量的访问速度要比全局变量的访问速度更快,因为全局变量其实是window对象的成员,而局部变量是放在函数的栈里的。

六、 尽量少使用eval。

每次使用eval需要消耗大量时间,这时候使用JS所支持的闭包可以实现函数模板。

七、 减少对象查找

因为JavaScript的解释性,所以a.b.c.d.e,需要进行至少4次查询操作,先检查a再检查a中的b,再检查b中的c,如此往下。所以如果这样的表达式重复出现,只要可能,应该尽量少出现这样的表达式,可以利用局部变量,把它放入一个临时的地方进行查询。

八、 字符串连接。

如果是追加字符串,最好使用s+=anotherStr操作,而不是要使用s=s+anotherStr。

如果要连接多个字符串,应该少使用+=,如s+=a;s+=b;s+=c;应该写成s+=a + b + c; 
而如果是收集字符串,比如多次对同一个字符串进行+=操作的话,最好使用一个缓存。怎么用呢?使用JavaScript数组来收集,最后使用join方法连接起来,如下

复制代码代码如下:
var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join(""); 

九、 类型转换

1. 把数字转换成字符串,应用"" + 1,虽然看起来比较丑一点,但事实上这个效率是最高的,性能上来说:("" +) > String() > .toString() > new String()

尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。

String()属于内部函数,所以速度很快,而.toString()要查询原型中的函数,所以速度逊色一些,new String()用于返回一个精确的副本。

2. 浮点数转换成整型,这个更容易出错,很多人喜欢使用parseInt(),其实parseInt()是用于将字符串转换成数字,而不是浮点数和整型之间的转换,我们应该使用Math.floor()或者Math.round()。Math是内部对象,所以Math.floor()其实并没有多少查询方法和调用的时间,速度是最快的。

3. 对于自定义的对象,如果定义了toString()方法来进行类型转换的话,推荐显式调用toString(),因为内部的操作在尝试所有可能性之后,会尝试对象的toString()方法尝试能否转化为String,所以直接调用这个方法效率会更高

十、 尽量作用JSON格式来创建对象,而不是var obj=new Object()方法。

因为前者是直接复制,而后者需要调用构造器,因而前者的性能更好。

十一、 当需要使用数组时,也尽量使用JSON格式的语法,

使用JSON格式的语法即直接使用如下语法定义数组:[parrm,param,param...],而不是采用new Array(parrm,param,param...)这种语法。因为使用JSON格式的语法是引擎直接解释的。而后者则需要调用Array的构造器。

十二、 对字符串进行循环操作,例如替换、查找,就使用正则表达式。

因为JS的循环速度比较慢,而正则表达式的操作是用C写成的API,性能比较好。

十三、 插入HTML

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

十四、 对象查询

使用[“”]查询要比.items()更快

十五、 定时器

如果针对的是不断运行的代码,不应该使用setTimeout,而应该是用setInterval。setTimeout每次要重新设置一个定时器。

十六、 尽量减少DOM调用

在Web开发中,JavaScript的一个很重要的作用就是对DOM进行操作。可是对DOM的操作是非常昂贵的,因为这会导致浏览器执行回流 (reflow)操作。我们应该尽可能的减少DOM操作。 
回流操作主要会发生在几种情况下: 
* 改变窗体大小 
* 更改字体 
* 添加移除stylesheet块 
* 内容改变哪怕是输入框输入文字 
* CSS虚类被触发如 :hover 
* 更改元素的className 
* 当对DOM节点执行新增或者删除操作或内容更改时。 
* 动态设置一个style样式时(比如element.style.width="10px")。 
* 当获取一个必须经过计算的尺寸值时,比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值 
解决问题的关键,就是限制通过DOM操作所引发回流的次数: 
1.在对当前DOM进行操作之前,尽可能多的做一些准备工作,保证N次创建,1次写入。 
2.在对DOM操作之前,把要操作的元素,先从当前DOM结构中删除: 
2.1. 通过removeChild()或者replaceChild()实现真正意义上的删除。 
2.2. 设置该元素的display样式为“none”。

3.CSS部分 
另外一个经常引起回流操作的情况是通过style属性对元素的外观进行修改,如element.style.backgroundColor = "blue"; 
每次修改元素的style属性,都肯定会触发回流操作,要解决这个问题可以: 
3.1.使用更改className的方式替换style.xxx=xxx的方式。 
3.2.使用style.cssText = '';一次写入样式。 
3.3. 避免设置过多的行内样式 
3.4. 添加的结构外元素尽量设置它们的位置为fixed或absolute 
3.5. 避免使用表格来布局 
3.6. 避免在CSS中使用JavaScript expressions(IE only) 
4.将获取的DOM数据缓存起来。这种方法,对获取那些会触发回流操作的属性(比如offsetWidth等)尤为重要。 
5.当对HTMLCollection对象进行操作时,应该将访问的次数尽可能的降至最低,最简单的,你可以将length属性缓存在一个本地变量中,这样就能大幅度的提高循环的效率。

十七、 重构<script>和<style> 调用方式或合并js文件来优化请求次数,并尽量使用外部链接方式引用

我们常常在一个HTML文件头中看到这样标记代码:

<script src="/scripts/a.js"></script>

<script src="/scripts/b.js"></script>

<script src="/scripts/c.js"></script>

大多是情况下,上述代码可以被简化成:

<script src="/ scripts /d.js"></script>

其中d.js中引用了a.js/b.js/c.js。通过document.write方法写入。

十八、 对于大的JS对象,因为创建时时间和空间的开销都比较大,因此应该尽量考虑采用缓存。

十九、 将脚本放到底部。

脚本一般是用来于用户交互的,建议可以等页面加载完成之后再加载js文件。所以,脚本和CSS正好相反,脚本应该放在页面的底部。

二十、 除去JavaScript中的空白区域

可以用相关工具去除空白注释等,将所有的名称都重新用一个或两个字母来命名将带来显著的改善。(但需要留有一个未验收的备份文件,方便以后维护)

JS性能优化笔记搜索整理的更多相关文章

  1. js性能优化文章集锦

    总结的js性能优化方面的小知识http://www.it165.net/pro/html/201503/35336.html 如何优化你的JS代码http://www.php100.com/html/ ...

  2. U3D开发性能优化笔记(待增加版本.x)

    http://blog.csdn.net/kaitiren/article/details/45071997 此总结由自己经验及网上收集整理优化内容 包括: .代码方面: .函数使用方面: .ui注意 ...

  3. js 性能优化 篇一

    JS性能优化 摘自:http://www.china125.com/design/js/3631.htm  首先,由于JS是一种解释型语言,执行速度要比编译型语言慢得多.(注:,Chrome是第一款内 ...

  4. js性能优化-事件委托

    js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少 ...

  5. Android App性能优化笔记之一:性能优化是什么及为什么?

    By Long Luo   周星驰的电影<功夫>里面借火云邪神之口说出了一句至理名言:“天下武功,唯快不破”. 在移动互联网时代,同样如此,留给一个公司的窗口往往只有很短的时间,如何把握住 ...

  6. js 性能优化利器:prepack

    1. js 性能优化 js 本身是没有像 python 一样的预编译功能,更没有像 java 一样的编译功能,所以,这里所说的 js 代码预编译 只是通过工具实现的类似功能而已. 这就要提到 prep ...

  7. js性能优化--学习笔记

    <高性能网站建设进阶指南>: 1.使用局部变量,避免深入作用域查找,局部变量是读写速度最快的:把函数中使用次数超过一次的对象属性和数组存储为局部变量是一个好方法:比如for循环中的.len ...

  8. 移动web性能优化笔记

    移动web性能优化 最近看了一些文章,对移动web性能优化方法,做一个简单笔记 笔记内容主要出自 移动H5前端性能优化指南和移动前端系列——移动页面性能优化

  9. 你不知道的Node.js性能优化,读了之后水平直线上升

    本文由云+社区发表 "当我第一次知道要这篇文章的时候,其实我是拒绝的,因为我觉得,你不能叫我写马上就写,我要有干货才行,写一些老生常谈的然后加上好多特技,那个 Node.js 性能啊好像 D ...

随机推荐

  1. 与你相遇好幸运,Waterline的属性

    >支持的数据类型: string / text / integer / float / date / time / datetime / boolean / binary / array / j ...

  2. Ajax 的 GET 和 POST 模式

    Ajax 异步请求数据的方式有两种:GET 和 POST. 如果是 GET 模式,则直接将数据放置到异步请求的 URL 地址中,而 send() 方法不发送任何数据: var queryString ...

  3. 6-05使用SQL语句删除数据

    删除数据语法: DELETE  FROM 表名  WHERE  删除条件. TRUNCATE  TABLE 表名. --[1]基本删除,省略WHERE条件,将删除表中的所有数据 DELETE FROM ...

  4. Win10 for Phone 裁剪保存

    //StorageFolder savedPics = ApplicationData.Current.LocalFolder; //BitmapImage bi = new BitmapImage( ...

  5. visio如何让动态连接线的单箭头变成双箭头?

    1 选中线,右击,然后选择“格式”,“线条” 2 3

  6. Cygwin的安装,卸载,以及安装gdb

    转载来源 http://10000001.blog.51cto.com/4600383/1341484   1.安装 其实Cygwin的安装时很简单的,需要的安装相应的就可以了,要详细的去网上找,很多 ...

  7. JQuery常用函数及功能小结--转载

    1.文档加载完成执行函数 $(document).ready(function(){  alert("开始了"); }); 2.添加/删除CSS类 $("#some-id ...

  8. 用户视角 vs 系统视角 看性能

    如何评价性能的优劣: 用户视角 vs. 系统视角 对于最终用户(End-User)来说,评价系统的性能好坏只有一个字——“快”.最终用户并不需要关心系统当前的状态——即使系统这时正在处理着成千上万的请 ...

  9. 【MySQL 忘记密码】MySQL忘记密码怎么解决 mysql5.5 windows7

    ---恢复内容开始--- 如果MySQL 长久不使用,忘记密码,怎么解决??? 1.首先,需要在任务管理器关闭mysql相关的服务进程 2.cmd,进入DOS窗口,进入到mysql的安装路径的bin目 ...

  10. nefu558 bfs

    Description AC小公主很喜欢设计迷宫,她设计的迷宫只有两个口,一个入口,一个出口.但小公主有时候很调皮,她会让挑战者走不出迷宫.现在给你AC小公主的迷宫请你判断挑战者能否成功从出口走出迷宫 ...