javascript性能优化总结

js加载顺序优化

原理:在使用src 属性加载JavaScript 的过程中浏览器必须首先下载外部文件的代码,这要占用一些时间,然后,解析并运行此代码。此过程中,页面解析和用户交互是被完全阻塞的。

解决方案:

——将所有<script>标签放置在页面的底部,紧靠body 关闭标签</body>的上方。

——将脚本成组打包。页面的<script>标签越少,页面的加载速度就越快,响应也更加迅速。

——为<script>标签添加defer 属性(只适用于Internet Explorer 和Firefox 3.5 以上版本)
——动态创建<script>元素,用它下载并执行代码
——用XHR 对象下载代码,并注入到页面中

js对于数据访问优化

在JavaScript 中,数据存储位置可以对代码整体性能产生重要影响。有四种数据访问类型:直接量,变量,数组项,对象成员。它们有不同的性能考虑。

直接量和局部变量访问速度非常快,数组项和对象成员需要更长时间。

局部变量比域外变量快,因为它位于作用域链的第一个对象中。变量在作用域链中的位置越深,访问所需的时间就越长。全局变量总是最慢的,因为它们总是位于作用域链的最后一环。

嵌套对象成员会造成重大性能影响,尽量少用。

一个属性或方法在原型链中的位置越深,访问它的速度就越慢。

一般来说,你可以通过这种方法提高JavaScript 代码的性能:将经常使用的对象成员,数组项,和域外变量存入局部变量中。然后,访问局部变量的速度会快于那些原始变量。

DOM访问优化

DOM 访问和操作是现代网页应用中很重要的一部分。但每次你通过桥梁从ECMAScript 岛到达DOM 岛时,都会被收取“过桥费”。

最小化DOM 访问,在JavaScript 端做尽可能多的事情。

在反复访问的地方使用局部变量存放DOM 引用.

小心地处理HTML 集合,因为他们表现出“存在性”,总是对底层文档重新查询。将集合的length 属性缓存到一个变量中,在迭代中使用这个变量。如果经常操作这个集合,可以将集合拷贝到数组中。

注意重绘和重排版;批量修改风格,离线操作DOM 树,缓存并减少对布局信息的访问。

动画中使用绝对坐标,使用拖放代理。

使用事件托管技术最小化事件句柄数量。

算法和流程优化

for,while,do-while 循环的性能特性相似,谁也不比谁更快或更慢。

除非你要迭代遍历一个属性未知的对象,否则不要使用for-in 循环。

改善循环性能的最好办法是减少每次迭代中的运算量,并减少循环迭代次数。

一般来说,switch 总是比if-else 更快,但并不总是最好的解决方法。

当判断条件较多时,查表法比if-else 或者switch 更快。

浏览器的调用栈尺寸限制了递归算法在JavaScript 中的应用;栈溢出错误导致其他代码也不能正常执行。

如果你遇到一个栈溢出错误,将方法修改为一个迭代算法或者使用制表法可以避免重复工作。

运行的代码总量越大,使用这些策略所带来的性能提升就越明显。

时间: 2024-08-03 16:03:39

javascript性能优化总结的相关文章

JavaScript性能优化

1.使用局部变量 在函数中,总是使用var来定义变量.无论何时使用var都会在当前的范围类创建一个局部变量.如果不使用var来定义变量,那么变量会被创建在window范围内,那么每次使用这个变量的时候,解释程序都会搜索整个范围树.同时全局变量要在页面从浏览器中卸载后才销毁,而局部变量在函数执行完毕即可销毁,过多的全局变量增加了不必要的内存消耗.只要有可能就应该用局部变量或者数字索引的数组来替代命名特性.如果命名特性要多次使用,就先将它的值存储在局部变量中,以避免多次使用线性算法请求命名特性的值.

JavaScript性能优化小知识总结(转)

JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解. 鉴于想让自己有一个提升,进不了一个更加广阔的天地,总得找一个

javascript性能优化-repaint和reflow

repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染. reflow(渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显. 何时发生: 1. DOM元素的添加.修改(内容).删除( Reflow + Repa

[转]JavaScript性能优化

如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍JavaScript性能优化的技巧,并提供相应的测试用例,供大家在自己使用的浏览器上验证, 同时会对特定的JavaScript背景知识做一定的介绍. 变量声明带上var 如果声明变量忘记了var,那么js引擎将会遍历整个作用域查找这个变量,结果不管找到与否,都是悲剧. 如果在上级作用域找到了这个变量,

摘:JavaScript性能优化小知识总结

原文地址:http://www.codeceo.com/article/javascript-performance-tips.html JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太

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

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

JavaScript 性能优化技巧分享

JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中.为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择. 本文从加载.上下文.解析.编译.执行和捆绑等多个方面来讲解 JavaScript 的性能优化技巧,以便让更多的前端开发人员掌握这方面知识. 什么是高性能的 JavaScript 代码? 尽管目前没有高性能代码的绝对定义,但却存在一个以用户为中心的性能模型,可以用作参考:RAIL模型. 响应 如果你的应用程序能在1

JavaScript强化教程——javascript性能优化

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 ——数据存取 数据的存取位置也影响着JavaScript的运行速度,我们来总结一下如能分配存取位置最合理,能够高效的运行JavaScript数据存取位置 分为 1.字面量(如true.false.null等) 2.本地变量(var a=5;) 3.数组元素(var arr=[]; arr[0]=5;) 4.对象成员 以上这些都可以存储数据根据不同浏览器进行的200 000次读取数据所需时间得出,由快到慢为

JavaScript性能优化小知识总结

一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解.鉴于想让自己有一个提升,进入一个更加广阔的天地,总得找一个属于自己的居所好好生存,所以平时会有意无意的去积累一些使用jQuerry的常用知识,特别是对于性能要求这一块,总是会想是不是有更好的方式来实现.下面是我总结的一些小技巧,仅供参考.(我先会说一个总标

Javascript性能优化(一)

一.加载 1. 依据HTML 4规范,script标签可以放置在head和body标签中的任意位置 2. 下载js脚本会阻塞其他页面文件下载,所以应尽可能将script标签放置在body底部 3. HTML 4为script标签增加了一个defer属性,表明延迟执行,但这并不是标准做法 4. 将多个script合并后压缩,放置在body标签底部,是引入多个外链javascript文件的最佳实践 5. 通过动态创建标签,可以异步引入js文件,代码如下: 1 function loadScript(