文档章节

js性能优化小技巧

西园里的猫
 西园里的猫
发布于 2017/04/28 16:19
字数 782
阅读 18
收藏 0
点赞 0
评论 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"
}

© 著作权归作者所有

共有 人打赏支持
西园里的猫
粉丝 0
博文 52
码字总数 5771
作品 0
深圳
程序员
优化 JavaScript 执行[转]

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

行列
07/05
0
0
精读《JS 引擎基础之 Shapes and Inline Caches》

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

黄子毅
06/25
0
0
[译] JavaScript 是如何工作的:对比 WebAssembly + 为什么在某些场景下它比 JavaScript 更合适

原文地址:How JavaScript works: A comparison with WebAssembly + why in certain cases it’s better to use it over JavaScript 原文作者:Alexander Zlatkov 译文出自:掘金翻译计划 本......

stormluke
05/23
0
0
使用Google Page Speed优化Web前端性能

安装步骤:http://jingyan.baidu.com/article/597035523c54cd8fc00740ed.html 安装好以后,打开Firebug,可以看到新增的标签页:Page Speed: 使用Page Speed 其中,Page Speed标签页包括两个...

星辰~
2012/08/10
0
4
四月前端知识集锦(每月不可错过的文章集锦)

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

夕阳
05/02
0
0
网站性能工具Yslow的使用方法

Yslow是雅虎开发的基于网页性能分析浏览器插件,从年初我使用了YSlow后,改变了博客模板大量冗余代码,不仅提升了网页的打开速度,这款插件还帮助我分析了不少其他网站的代码,之前我还特意写...

LorinLuo
2015/03/11
0
0
前端每周清单第 46 期: 2017 Node.js / GraphQL / Vue.js 盘点,前端性能优化与可用性保障

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公...

王下邀月熊
01/08
0
0
编写更好的jQuery代码的建议及优化方法

讨论jQuery和javascript性能的文章并不罕见。然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味...

乐派电影
2014/04/12
0
0
【JSConf EU 2018】JavaScript引擎: 精粹部分

JSConf EU 2018圆满结束, 谷歌V8的开发者Mathias Bynens以及Benedikt Meurer一起发表了《JavaScript Engines: The Good Parts™》演讲,本文将带领大家回顾一下演讲上所提到的重点。 演讲第一...

想成为工匠的码农
06/19
0
0
[译] JavaScript 是如何工作的:CSS 和 JS 动画背后的原理 + 如何优化性能

原文地址:How JavaScript works: Under the hood of CSS and JS animations + how to optimize their performance 原文作者:Alexander Zlatkov 译文出自:掘金翻译计划 本文永久链接:git......

辣手摧花
05/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

NNS域名系统之域名竞拍

0x00 前言 其实在官方文档中已经对域名竞拍的过程有详细的描述,感兴趣的可以移步http://doc.neons.name/zh_CN/latest/nns_protocol.html#id30 此处查阅。 我这里主要对轻钱包开发中会用到的...

暖冰
今天
0
0
32.filter表案例 nat表应用 (iptables)

10.15 iptables filter表案例 10.16/10.17/10.18 iptables nat表应用 10.15 iptables filter表案例: ~1. 写一个具体的iptables小案例,需求是把80端口、22端口、21 端口放行。但是,22端口我...

王鑫linux
今天
0
0
shell中的函数&shell中的数组&告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析

影夜Linux
今天
0
0
Linux网络基础、Linux防火墙

Linux网络基础 ip addr 命令 :查看网口信息 ifconfig命令:查看网口信息,要比ip addr更明了一些 centos 7默认没安装ifconfig命令,可以使用yum install -y net-tools命令来安装。 ifconfig...

李超小牛子
今天
1
0
[机器学习]回归--Decision Tree Regression

CART决策树又称分类回归树,当数据集的因变量为连续性数值时,该树算法就是一个回归树,可以用叶节点观察的均值作为预测值;当数据集的因变量为离散型数值时,该树算法就是一个分类树,可以很...

wangxuwei
昨天
1
0
Redis做分布式无锁CAS的问题

因为Redis本身是单线程的,具备原子性,所以可以用来做分布式无锁的操作,但会有一点小问题。 public interface OrderService { public String getOrderNo();} public class OrderRe...

算法之名
昨天
10
0
143. Reorder List - LeetCode

Question 143. Reorder List Solution 题目大意:给一个链表,将这个列表分成前后两部分,后半部分反转,再将这两分链表的节点交替连接成一个新的链表 思路 :先将链表分成前后两部分,将后部...

yysue
昨天
1
0
数据结构与算法1

第一个代码,描述一个被称为BankAccount的类,该类模拟了银行中的账户操作。程序建立了一个开户金额,显示金额,存款,取款并显示余额。 主要的知识点联系为类的含义,构造函数,公有和私有。...

沉迷于编程的小菜菜
昨天
1
0
从为什么别的队伍总比你的快说起

在机场候检排队的时候,大多数情况下,别的队伍都要比自己所在的队伍快,并常常懊悔当初怎么没去那个队。 其实,最快的队伍只能有一个,而排队之前并不知道那个队快。所以,如果有六个队伍你...

我是菜鸟我骄傲
昨天
1
0
分布式事务常见的解决方案

随着互联网的发展,越来越多的多服务相互之间的调用,这时候就产生了一个问题,在单项目情况下很容易实现的事务控制(通过数据库的acid控制),变得不那么容易。 这时候就产生了多种方案: ...

小海bug
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部