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');

更好的写法是:

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类库中的部分功能。为了更大的提升性能,应尽量避免使用这类大而全的类库,而是按需使用微类库来辅助开发。

 

高性能之js的更多相关文章

  1. 高性能的js第三方库——lodash、 Underscore、async、md5及moment

    背景:为了实现某些功能,如:数据排序.分组.筛选.深拷贝等,自己写的函数或网上搜索处理的转换函数质量无法保证,这时直接使用成熟的js第三方库是首选. *注:“framework(框架)”,“libra ...

  2. js库收集

    ------图表 中文 http://www.highcharts.me/ 英文 http://www.highcharts.com/ ------web前端开发框架 中文 http://www.bo ...

  3. Headroom.js – 快速响应用户的页面滚动操作

    Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...

  4. 【干货分享】Node.js 中文学习资料和教程导航

    这篇文章来自 Github 上的一位开发者收集整理的 Node.js 中文学习资料和教程导航.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念,它的目标是帮助程 ...

  5. node.js中文资料导航 Mark

    Node.js HomePage Infoq深入浅出Node.js系列(进阶必读) Node.js中文文档 被误解的 Node.js Node.js C++ addon编写实战系列 热门node.js ...

  6. 【干货分享】Node.js 中文资料导航

    这篇文章与大家分享一批高质量的的 Node.js 中文资料.Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的, 易于扩展的网络应用 Node ...

  7. node.js中文资料导航

    以下资料来自gitHUb上面:https://github.com/youyudehexie/node123 Node.js HomePage Node官网七牛镜像 Infoq深入浅出Node.js系 ...

  8. Headroom.js

    下载 Development (3.7kB) Production (1.7kB) Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它 ...

  9. 《高性能JavaScript》的新征程

    已经学了<JavaScript语言精粹>,现在学高性能. JS的出现是为了改善网页用户体验的,随着互联网通信速度的改善.计算机性能的提升,web越发丰富:但一段时间内,JS的引擎变化不大. ...

随机推荐

  1. mysql alter 效率

    2017年9月15日 10:36:54 星期五 今天遇到一个效率问题记下来: 场景: mysql要更改一下表字段的注释, 因为sql语句问题, 导致更新了整张表.. 错误: ) UNSIGNED ' ...

  2. cocos2dx-lua 延迟调用函数和定时器

    下面是cocos官方的方法. function performWithDelay(node, callback, delay) local delay = cc.DelayTime:create(de ...

  3. Confluence 6 为登录失败配置使用验证码

    如果你具有 Confluence 管理员的权限,你可以限制 Confluence 登录失败的最大尝试次数.在给予最大登录失败尝试(默认为 3 次)次数后,Confluence 将会在用户进行再次尝试的 ...

  4. Confluence 6 色彩选择器展开的页面

    色彩选择器展开的页面中对色彩的选择配置. https://www.cwiki.us/display/CONFLUENCEWIKI/Customising+Colour+Schemes

  5. bat如何提取文本指定行的内容

    背景:使用CTS框架运行完测试后,会在logs中生成devices_log和host_log,在results中生成相应的结果(报告).根据报告信息我们可以得知失败的用例,但是却不能知道为什么用例会失 ...

  6. LoadRunner监控window系统各项指标详解

    一.监控系统时,需要监控的项 System 系统 Processor 处理器 Memory 内存 PhysicalDisk 磁盘 Server 服务器 二.指标详解 (一). PhysicalDisk ...

  7. python DLL接口测试

    #coding=utf-8 import clr import sys import threading from itertools import permutations sys.path.app ...

  8. AI-URL注册器

    官方文档地址:https://www.django-rest-framework.org/tutorial/quickstart/#serializers #url生成器生成四个url,就可以访问关于 ...

  9. C++ Primer 笔记——异常处理

    1.栈展开过程沿着嵌套函数的调用链不断查找,直到找到了与异常匹配的catch句子为止,或者也可能一直没找到匹配的catch,则程序将调用terminate,退出主函数后查找过程终止.假设找到了一个ca ...

  10. C#的值传递与引用传递

    值传递:在使用值传递时,是把变量的值传给函数,函数中对此变量的任何修改都不影响该变量本身的值. 引用传递:使用引用传递时,在函数中对此变量的修改会影响变量的值. 说简单点,值传递,就是我把身份证复印件 ...