【高性能前端 3】高性能 JavaScript
In 未分类 on 2012年10月10日 by view: 24,744
10

使用事件代理

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

缓存选择器查询结果

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

更好的写法是:

避免频繁的 IO 操作

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

避免频繁的 DOM 操作

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

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

使用微类库

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

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2012/10/high-performance-front-end-high-performance-javascript/

  1. 网站性能优化工具大全 | 创意兄弟 2015 年 7 月 10 日

    […]【高性能前端 3】高性能 JavaScript […]

  2. henry 2013 年 8 月 7 日

    替楼主稍微展开下。

    1. 使用事件代理
    虽然减少了绑定的事件的次数,但对于容器的每次操作都会触发事件、内部进行判断。引用楼主的例子,假设 div 与 viewport 一样大,那么每次点击都会触发代理事件,虽然仅仅是判断是否点击到了按钮上。 这个。。。具体情况具体对待吧
    2. 缓存查询
    版本不太低的 jquery 貌似已经在 jQuery.cache 中缓存过了。

    其他,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);
    }
    };

  3. 新影吧 2012 年 10 月 29 日

    总结的很少,但是每个都可以展开很多内容,全做到就难了,前端优化无止境

  4. TAT.html5

    html5 2012 年 10 月 28 日

    这样的写法适合幻灯。

  5. mcc 2012 年 10 月 25 日

    var cached = jQuery(‘#top’); cached.find(‘p.classA’); cached.find(‘p.classB’);
    链式查询效率更好一点

  6. 高性能javascript - otarim | otarim 2012 年 10 月 23 日

    […] 原文链接:http://www.alloyteam.com/2012/10/high-performance-front-end-high-performance-javascript/ This entry was posted in javascript and tagged javascript, 高性能 by otarim. Bookmark the permalink. […]

  7. 网站性能优化工具大全 | Javascript | 前端观察 2012 年 10 月 18 日

    […]【高性能前端 3】高性能 JavaScript […]

  8. mooring 2012 年 10 月 17 日

    更好的写法是:
    var cached = jQuery(‘#top’); cached.find(‘p.classA’); cached.find(‘p.classB’);

    其实 jq 里已经有对小于 512bytes 节点的缓冲功能了

  9. 匿名 2012 年 10 月 15 日

    适合初学者

  10. 高性能JavaScript(转) « 胡言乱语 2012 年 10 月 12 日

    […] 原文地址:http://www.alloyteam.com/2012/10/high-performance-front-end-high-performance-javascript/ […]

发表评论