研究高性能前端之JavaScript

性能是前端工程师们在开发的时候必不可少要考虑的因素,研究高性能前端之JavaScript如下:

使用事件代理

有时候我们会感觉到页面反应迟钝,这是因为DOM树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用事件代理是一种好方法了。如果你在一个div中有10个按钮,你只需要在div上附加一次事件句柄就可以了,而不用去为每一个按钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。

虽然减少了绑定的事件的次数,但对于容器的每次操作都会触发事件、内部进行判断。

缓存选择器查询结果

选择器查询是开销很大的方法。所以,使用选择器的次数应该越少越好,并且尽可能缓存选中的结果,便于以后反复使用。比如,下面这样的写法就是糟糕的写法:

jQuery('#top').find('p.classA');
jQuery('#top').find('p.classB');

更好的写法是:

var cached = jQuery('#top'); cached.find('p.classA'); cached.find('p.classB');

避免频繁的IO操作

对 cookie 与 localstorage 操作的API是同步的,且cookie与localstorage是多个tab页面间共享的,多页面同时操作时会存在同步加锁机制,建议应尽量少的对cookie或localStorage进行操作。

避免频繁的DOM操作

使用JavaScript访问DOM元素是比较慢的,因此为了提升性能,应该做到:

  1. 缓存已经查询过的元素;
  2. 线下更新完节点之后再将它们添加到文档树中;
  3. 避免使用JavaScript来修改页面布局;

使用微类库

通常开发者都会使用JavaScript类库,如jQuery、Mootools、YUI、Dojo等,但是开发者往往只是使用JavaScript类库中的部分功能。为了更大的提升性能,应尽量避免使用这类大而全的类库,而是按需使用微类库来辅助开发。

补充:

javascript如果需要提高性能,那么瓶颈绝对在dom操作方面。改变style、display等的方式可修改为改变className
增、删、修改、查都需要注意。js动画、大数据填充的可优化性是很高的,在移动端,显得尤为重要。

探讨单引号/双引号、push与字符串+=、是否单例对象意义不是很大,但如果要极致性能,这些也是必须做到的。例如:

有一段代码是这样的,参数不定,判断参数的length,如果大于3,使用call(that,args1,args2),手动指定参数;反之使用apply(that,args),据说是call效率优于apply。此方法的参数大多数情况是小于等于3的,参见backbone.js

var triggerEvents = function(events, args) {
var ev, i = -1, l = events.length, a1 = args[0], a2 = args[1], a3 = args[2];
switch (args.length) {
case 0: while (++i < l) (ev = events[i]).callback.call(ev.ctx); return;
case 1: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1); return;
case 2: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2); return;
case 3: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2, a3); return;
default: while (++i < l) (ev = events[i]).callback.apply(ev.ctx, args);
}
};

打赏此文

如果您觉得本站的内容对您有所帮助,您可以扫描下面的二维码小额支付请我喝杯茶,感谢!打赏记录
支付宝
微信
承诺:凡打赏捐助的朋友,留言备注自己的邮箱,在打赏捐助时间点的6个月内,本站会每周邮件推送原创专业技术博文,供大家学习和参考!

留下评论

All fields marked (*) are required