文档章节

js性能优化小技巧

西园里的猫
 西园里的猫
发布于 2017/04/28 16:19
字数 782
阅读 26
收藏 0

Js高性能优化小结

谨慎使用闭包

由于闭包[[Scope]] 属性包含与执行环境作用域链相同的对象引用,函数活动对象本来会随着执行环境完毕后一同销毁,但引入闭包,对象无法被销毁。

闭包会造成更多的内存开销,同时IE下还会造成内存泄露。

缓存对象成员

在同一个函数中,如果存在多次读取同一个对象成员,可以在局部函数中保存对象,减少查找。

function getWindowWH() {
    var elBody = document.getElementsByTagName('body')[0];
    return {
        width: elBody.offsetWidth,
        height: elBody.offsetHeight
    }
}

同时也解决了属性越深,访问速度越慢的问题。

DOM 操作

访问DOM的次数越多,代码运行的速度越慢,统一的保存结果最后在一并输出。 例子:

 function innerHTMLLoop() {
     var content = '';

     for (var count = 0; count < 10000; count++){
         content += 'a';
     }

     document.getElementById("idName").innerHTML += content;     
}

重绘(repaints)与重排(reflows)

当页面布局和几何属性改变时就需要"重排"

避免在修改样式的过程中使用 offsetTop, scrollTop, clientTop, getComputedStyle() 这些属性, 它们都会刷新渲染队列

  • 最小化重绘和重排, 尽量一次处理

    1. 使元素脱离文档流(隐藏元素
    2. 使用 documentFragment
    3. 将原始元素拷贝到一个脱离文档的节点中, 修改副本, 完成后再替换原始元素)

事件委托

当有很多元素需要绑定事件的时候,我们一个一个的去绑定事件是有代价的的,元素越多应用程序越慢。事件绑定不但占用了处理时间,并且追踪事件需要更多的内存,有时候很多元素是不需要,或者是用户不会点击的,所以我们需要使用事件委托来解决没有必要的资源消耗。

例子: 我们需监听li的click事件,通过冒泡事件来获取点击的对象。

<ul>
    <li index='1'>1</li>
    <li index='2'>2</li>
    <li index='3'>3</li>
</ul>
var ul = document.getElementById('ul');

ul.addEventListener('click', function(e) {
  var now_index = e.target.getAttribute('index');
  ...
})

循环性能

一般的for语句可能很多人都这么写

for(var i = 0; i < array.length; i++){
    ....
}

每次循环的时候需要查找array.length,这样不但很耗时,也造成性能损失。只要查找一次属性,存储在局部变量,就可以提高性能。

for(var i = 0, len = array.length; i < len; i++){
    ....
}

重写后的循环根据数组的长度能优化25%的运行时间,IE更多。所以平时书写的时候还是要多加注意。同时还是要避免使用for-in循环。

条件语句

if-else 对比 switch, 当条件语句较多的时候switch 更易读,运行的要更快。所以但条件少的情况下使用if-else,当条件增加时,更倾向于switch,会更佳合理。

避免使用构造器

通过避免使用eval()和Function()构造器来避免双重求值带来的性能消耗。比如:

eval('2 + 2');  

使用 Object/Array 直接量

直接量的速度回更快。


//bad
var myObject = new Object();
myObject.name = "xxxx";

//good
var myObject = {
    name: "xxxx"
}

© 著作权归作者所有

共有 人打赏支持
西园里的猫
粉丝 1
博文 73
码字总数 9291
作品 0
深圳
程序员
私信 提问
Javascript 性能优化的技巧

把优秀的编程方式当成一种习惯,融入到日常的编程当中。下图是今天想到的一点Javascript 性能优化的技巧,分享一下,抛砖引玉。 PS:下面几条规则仅仅是概括性的建议,不包括详细的Demo解说,...

reniM
2013/01/15
621
3
优化 JavaScript 执行[转]

JavaScript 经常会触发视觉变化。有时是直接通过样式操作,有时是会产生视觉变化的计算,例如搜索数据或将其排序。时机不当或长时间运行的 JavaScript 可能是导致性能问题的常见原因。您应当...

行列
07/05
0
0
JavaScript 到底有多慢?

拜浏览器大战所赐,主流浏览器的 JS 引擎已经引入了各种优化技术,不时出现的某某浏览器性能大幅提升的新闻也让前端同学们信心倍增。那么 JS 这门语言本身是否已经达到了接近原生的水平呢? ...

doodlewind
10/29
0
0
四月前端知识集锦(每月不可错过的文章集锦)

目前自己组建的一个团队正在写一份面试图谱,将会在七月中旬开源。内容十分丰富,第一版会开源前端方面知识和程序员必备知识,后期会逐步写入后端方面知识。因为工程所涉及内容太多(目前已经...

夕阳
05/02
0
0
精读《JS 引擎基础之 Shapes and Inline Caches》

1 引言 本期精读的文章是:JS 引擎基础之 Shapes and Inline Caches 一起了解下 JS 引擎是如何运作的吧! JS 的运作机制可以分为 AST 分析、引擎执行两个步骤: JS 源码通过 parser(分析器)...

黄子毅
06/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

线下工坊|Blockchain Coding Day:零基础教你开发DAPP(北京)

我们的目标是通过编程学习让你更了解区块链技术。这将对区块链开发初学者一次很好的体验。这里需要强调一下,编程零基础也能学会。 我们将以小组的形式,由教练带领学员完成DAPP开发。每位学...

HiBlock
25分钟前
2
0
查看内存情况

jinfo:可以输出并修改运行时的java 进程的opts。 jps:与unix上的ps类似,用来显示本地的java进程,可以查看本地运行着几个java程序,并显示他们的进程号。 jstat:一个极强的监视VM内存工具。...

Canaan_
26分钟前
2
0
基于对象特征的推荐

(本实验选用数据为真实电商脱敏数据,仅用于学习,请勿商用) 在上一期基于协同过滤的的推荐场景中,我们介绍了如何通过PAI快速搭建一个基于协同过滤方案的推荐系统,这一节会介绍一些如何基...

阿里云官方博客
34分钟前
2
0
Ugly Number(leetcode263)

Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers whose prime factors only include 2, 3, 5. Example 1: Input: 6Output: true......

woshixin
57分钟前
2
0
深度模型从研者 眼里的 似然估计 & Hessain 海森矩阵 & Fisher Information (费雪信息)

深度模型的训练的基本依据是最小化模型拟合数据的误差。旨在不仅知其然(如何构建和训练一个深度模型),还应知其所以然(为什么这样训练,可以做哪些优化)。我们就会发现,有很多研究者,在...

刘小米_思聪
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部