高性能 建议 实践

1、避免双重判断

var num1 = 5,

num2 = 6,

result = eval("num1 + num2"),

sum = new Function("arg1", "arg2", "return arg1 + arg2");

setTimeout("sum = num1 + num2", 100);

setInterval("sum = num1 + num2", 100);

首先上面的代码会像普通代码一样评估求值,但是在执行的时候,字符串里面的代码会引起另外一个评估求值操作。有些javascript引擎优化了,缓存相同的eval()执行结果。

2、使用对象、数组字面量

var myObject = {
    name: "Nicholas",
    count: 50
};
var myArray = ["Nicholas", 50, true, null];

这样速度是最快的。

3、不要重复工作

function addHandler(target, eventType, handler){
     if (target.addEventListener){                                             //DOM2 Events
          target.addEventListener(eventType, handler, false);
     } else {                                                                        //IE
          target.attachEvent("on" + eventType, handler);
     }
}
function removeHandler(target, eventType, handler){
     if (target.removeEventListener){                                          //DOM2 Events
          target.removeEventListener(eventType, handler, false);
     } else {                                                                           //IE
          target.detachEvent("on" + eventType, handler);
     }
}

上面的函数,每次调用都会做同样的检测,每次检测都需要在对象里查找,事实上检测一次就可以了,避免重复工作的办法有很多,接下来的就是  ↓

4、lazy load function  延迟加载函数

function addHandler(target, eventType, handler) {
     if (target.addEventListener) {                                                
          addHandler = function(target, eventType, handler) {          //覆盖原来的方法,第一次运行该函数检测,下次调用就不用再检测
               target.addEventListener(eventType, handler, false);
          };
     } else {                                                                           
          addHandler = function(target, eventType, handler) {
               target.attachEvent("on" + eventType, handler);
          };
     }

addHandler(target, eventType, handler);                                   //为了第一次调用的时候能够执行,以后调用就直接运行覆盖后的新函数了
}

function removeHandler(target, eventType, handler) {
     if (target.removeEventListener) {                                               
          removeHandler = function(target, eventType, handler) {
               target.addEventListener(eventType, handler, false);
          };
     } else { 
          removeHandler = function(target, eventType, handler) {
               target.detachEvent("on" + eventType, handler);
          };
     }

removeHandler(target, eventType, handler);  
}

当然也可以在函数定义的时候就检测而不是第一次运行的时候:

var  addHandler = (function (target, eventType, handler) {

if (target.addEventListener) {                                                
          addHandler = function(target, eventType, handler) {          
               target.addEventListener(eventType, handler, false);
          };
     } else {                                                                           
          addHandler = function(target, eventType, handler) {
               target.attachEvent("on" + eventType, handler);
          };
     }

addHandler(target, eventType, handler);                                  
})();

5、有条件地预加载

var addHandler = document.body.addEventListener ?             需要放在前面,在代码解析的时候就提前进行了判断,而不用等待函数调用

function(target, eventType, handler){

target.addEventListener(eventType, handler, false);

}:

function(target, eventType, handler){

target.attachEvent("on" + eventType, handler);

};

var removeHandler = document.body.removeEventListener ?

function(target, eventType, handler){

target.removeEventListener(eventType, handler, false);

}:

function(target, eventType, handler){

target.detachEvent("on" + eventType, handler);

};

6、使用位运算

7、native方法,不管怎么优化你写的的代码,都不会比原生的更快滴。原因是,那些原本就存在浏览器里的原生方法是用更底层的语言编写的(如C++),这些方法本来就被编译成了浏览器的组成部分

时间: 2024-11-09 02:12:10

高性能 建议 实践的相关文章

知乎技术分享:从单机到2000万QPS并发的Redis高性能缓存实践之路

本文来自知乎官方技术团队的"知乎技术专栏",感谢原作者陈鹏的无私分享. 1.引言 知乎存储平台团队基于开源Redis 组件打造的知乎 Redis 平台,经过不断的研发迭代,目前已经形成了一整套完整自动化运维服务体系,提供很多强大的功能.本文作者陈鹏是该系统的负责人,本次文章深入介绍了该系统的方方面面,值得互联网后端程序员仔细研究. (本文同步发布于:http://www.52im.net/thread-1968-1-1.html) 2.关于作者 陈鹏:现任知乎存储平台组 Redis 平

编译nodejs及其源码研究

本文将从 源码 研究nodejs 的原理.本质,探讨nodejs的应用场景,以及高性能开发实践指南. 目录: 第一节:编译node.js 第二节:源码分析 进入主题:以下是在win7 64 下进行,其他平台编译 ,请参见官网. 第一节:编译node.js,过程很简单 1.下载源码.  git clone https://github.com/joyent/node 如果没有安装git客户端,可以在打开https://github.com/joyent/node  点击 Download ZIP,

mysql编码问题总结

网上查了一些mysql编码相关的资料,在这里整理下,不对的地方欢迎各位批评指正. 1. mysql字符集相关的变量: - character_set_server:默认的内部操作字符集 – character_set_client:客户端来源数据使用的字符集 – character_set_connection:连接层字符集 – character_set_results:查询结果字符集 – character_set_database:当前选中数据库的默认字符集 – character_set

Web最新力作 有奖试读

Web开发最强阵容 趋势 深度 专业 实战 夺冠有你 读你想读 为了继续营造CSDN博客频道分享学习.共同进步的技术氛围,本月CSDN博客频道携手电子工业出版社博文视点共同举办技术图书试读活动.我们特为大家选定了五本最新WEB开发图书:<使用HTML5和Node构建超媒体API> .<WebKit技术内幕> .<跨终端 Web> .<WebGL编程指南>,<RESTful Web APIs中文版>总有一本适合你吧?先来试读一次,就知道是你想要的!

WebKit技术内幕

WebKit技术内幕(浏览器内核|渲染引擎| HTML5| Chromium项目Committer重磅作品) 朱永盛 著   ISBN 978-7-121-22964-0 2014年6月出版 定价:79.00元 456页 16开 编辑推荐 WebKit作为支持HTML5的主流渲染引擎,近年来备受前端开发者关注.本书将揭示WebKit总体架构.网页渲染原理,及其对硬件与最新技术的高效利用,以及高性能Web实践等,内容涉及Web前端所有重要话题. √本书作者为Chromium贡献者,及开源项目Cro

(转)GlusterFS 01 理论基础,企业实战,故障处理

https://jaminzhang.github.io/glusterfs/GlusterFS-01-Theory-Basis/--------GlusterFS 01 理论基础 https://jaminzhang.github.io/glusterfs/GlusterFS-02-Deploy-and-Config/------GlusterFS 02 部署配置 https://jaminzhang.github.io/glusterfs/GlusterFS-03-Build-Enterpr

大前端应用开发与架构设计-书籍推荐

大前端应用开发与架构设计-书籍推荐 大前端应用开发与架构设计 在学习新技能(无论是工作还是生活方面),书籍总是呈现知识最完善.系统的方式之一. 接下来将推荐在前端领域的一些著作,如果你想成为一名优秀的前端工程师,那就去好好拜读它们吧. HTML5+CSS3+JavaScript Web设计与前端开发秘籍:HTML CSS JavaScript jQuery 构建网站 HTML 5与CSS 3权威指南(第3版 上册) HTML5基础知识 核心技术与前沿案例 HTML5权威指南 CSS世界 图解CS

学Linux到底学什么?

我们常常听到很多人说要学学Linux或者被人告知说应该学学Linux,那么学Linux到底要学什么? 为什么要学Linux 在回答学什么之前,我们先看看为什么要学.首先我们需要认识到的是,很多服务器使用的是Linux系统,而作为服务器应用程序的开发者或者维护者,如果不了解Linux的基本使用,该如何进行开发或者维护呢? 当然,也有可能你听说Linux更高大上,或者是说Linux对开发者更加友好(Windows用户把刀放下),这都是题外话了. 在我看来,学习Linux主要有以下两点原因 使用标准C

2019读过的好书推荐

目录 1. 引言 2. 推荐书籍列表 2.1 IT技术类 <深入浅出Spring Boot 2.x> <面向程序员的数据挖掘指南> <企业IT架构转型之道:阿里巴巴中台战略思想与架构实战> <Spring Batch批处理框架> 2.2 科普类 <文明之光> <生命是什么> <从一到无穷大> 物理大咖李淼作品集 2.3 经管励志类 <软技能:代码之外生存指南> <斜杠青年:如何开启你的多重身份> &