zoukankan      html  css  js  c++  java
  • 高性能之js

    alloyteam团队的总结:

    链接在:http://www.alloyteam.com/2012/10/high-performance-front-end-high-performance-javascript/

    使用事件代理

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

    缓存选择器查询结果

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

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

    更好的写法是:

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

    避免频繁的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/

  • 相关阅读:
    nodepad++中的正则表达式匹配和替换操作。
    QT Creator配置环境和安装
    圣诞树小程序的制作
    C#编辑xml文件
    delegate里的Invoke和BeginInvoke
    记录RFID操作错误
    关于Panel隐藏横向滚动条
    随笔
    Java图形打印 上下对称三角星
    Centos 7.5安装 Redis 5.0.0
  • 原文地址:https://www.cnblogs.com/love314159/p/7767028.html
Copyright © 2011-2022 走看看