【转】高性能前端3-高性能javascript

2024-06-15 06:40:41

转载地址：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元素是比较慢的，因此为了提升性能，应该做到：

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

使用微类库

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

再次感谢原作者：元彦

转载于:https://www.cnblogs.com/xmmcn/archive/2012/11/22/2783126.html

【转】高性能前端3-高性能javascript相关推荐

Java Web 高性能开发，第 1 部分: 前端的高性能
原文地址:http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/#ibm-pcon 魏强, 研究生, 东北大学简介: Web ...
Java Web 高性能开发,前端的高性能
Java Web 高性能开发,第 2 部分: 前端的高性能 Web 发展的速度让许多人叹为观止,层出不穷的组件.技术,只需要合理的组合.恰当的设置,就可以让 Web 程序性能不断飞跃.Web 的思想是 ...
MUI（最接近原生APP体验的高性能前端框架）
MUI-最接近原生APP体验的高性能前端框架MUI: 最接近原生APP体验的高性能前端框架https://dev.dcloud.net.cn/mui/ 最接近原生APP体验的高性能前端框架,追求性能体 ...
好程序员web前端教程分享JavaScript验证API
好程序员web前端教程分享JavaScript验证API,小编每天会分享一下干货给大家.那么今天说道的就是web前端培训课程中的章节. JavaScript验证API 约束验证DOM方法 Proper ...
好程序员web前端分享使用JavaScript正则表达式如何去掉双引号
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享使用JavaScript正则表达式如何去掉双引号,最近接了一个项目,项目需求需要用js正则表达式过滤掉页面文本域 ...
前端必备，JavaScript面试问题及答案
前端必备,JavaScript面试问题及答案 1.使用 typeof bar === "object" 来确定 bar 是否是对象的潜在陷阱是什么?如何避免这个陷阱? 尽管 typ ...
javascript技术教程蔡敏_程序员都必掌握的前端教程之JavaScript基础教程（上）
阅读本文约需要10分钟,您可以先关注我们,避免下次无法找到. 本篇文章成哥继续带大家来学习前端教程之JavaScript,网页的动态事件基本上都是靠它来实现的.下面我们就一起来学习内容吧! 01 Ja ...
前端优化方案-JavaScript 优化方案收藏此文于2010-06-04被推荐到CSDN首页
前端优化方案-JavaScript 优化方案收藏此文于2010-06-04被推荐到CSDN首页如何被推荐? Author: 李丽媛 Date: 2010/6/2 Email: lly219#gm ...
好程序员Web前端教程分享JavaScript开发技巧
好程序员Web前端教程分享JavaScript开发技巧,相信知道Web前端的小伙伴都熟悉,Javascript的很多扩展的特性是的它变得更加的犀利,同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站 ...

最新文章

热门文章