javascript最重要也最根本的性能优化标准之一是避免工作，避免工作又包括两点，第一，不做不必要的工作，第二，不做重复的已经完成的工作。第一部分可以通过代码重构完成，第二部分不做重复的工作有时候难以确定，很多工作可能因为各种原因不可避免的被重复，但我们仍可以通过对业务和技术场景的分析减少重复工作进而提升javascript的效率。下面是web前端开发中经常用到的浏览器检测的一个示例。

一、浏览器检测

优化前代码示例

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

</head>

<body>

<script>

//绑定事件函数各浏览器兼容版

function addHandler(target,eventType,handler){

if(target.addEventListener){

target.addEventListener(eventType,handler,false);

}else{

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

}

};

function removeHandler(target,eventType,handler){

//DOM2 Events

if(target.removeEventListener){

target.removeEventListener(eventType,handler,false);

}else{//IE

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

}

}

window.onload = function(){

var showButton = document.getElementById("showMessage");

addHandler(showButton,"click",function(){

console.log("show Message success.");

});

}

</script>

<button id="showMessage">提示信息</button>

</body>

</html>

解决方式：

1、延迟加载

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<title>延迟加载函数示例</title>

</head>

<body>

<script>

//使用延迟加载函数示例

function addHandler(target,eventType,handler){

if(target.addEventListener){//DOM2 Events

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){//DOM2 Events

removeHandler = function(target,eventType,handler){

target.removeEventListener(eventType,handler,false);

}

}else{//IE

removeHandler = function(target,eventType,handler){

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

}

}

removeHandler(target,eventType,handler);

}

window.onload=function(){

var showButton = document.getElementById("showMessage");

addHandler(showButton,"click",function(){

console.log("showButton success.");

})

}

</script>

<button id="showMessage">提示信息</button>

</body>

</html>
　　调用延迟加载函数总是在第一次使用较长时间，因为他必须运行检测然后调用另一个函数以完成任务。但是，后续调用同一个函数将会快很多，因为不在执行检测逻辑。延迟加载适用于函数不会在页面上立即被用到的场合

2、条件预加载　

　

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<title>延迟加载函数示例</title>

</head>

<body>

<script>

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.removeEventListener?function(target,eventType,handler){

if(handler == null|| typeof(handler)=="undefined"){

target.removeEventListener(eventType,handler,false);

return;

}

target.removeEventListener(eventType,handler,false);

}:function(target,eventType,handler){

if(handler == null|| typeof(handler)=="undefined"){

target.detachEvent("on"+eventType);

return;

}

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

};

function alertInfo(){

console.log("alertInfo success!");

};

window.onload = function(){

var showButton = document.getElementById("showMessage");

addHandler(showButton,"click",function(){

console.log("showMessage success!");

});

addHandler(showButton,"click",alertInfo);

removeHandler(showButton,"click",alertInfo);

}

</script>

<button id="showMessage">提示信息</button>

</body>

</html>
　　条件预加载在脚本加载之前提前进行检查，而不等待函数调用，这样做虽然仍旧只检测一次，但检测过程来的更早。条件预加载在脚本加载时进行检测，适用于一个函数马上就会被用到而且在整个页面的生命周期中反复用到的场合
 

javascript性能优化之避免重复工作的更多相关文章

  1. JavaScript性能优化

    如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...

  2. 摘：JavaScript性能优化小知识总结

    原文地址:http://www.codeceo.com/article/javascript-performance-tips.html JavaScript的性能问题不容小觑,这就需要我们开发人员在 ...

  3. JavaScript性能优化小窍门汇总（含实例）

    在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛.在web应用项目中,需要大量JavaScript的代码,将来也会越来越多.但是由于J ...

  4. JavaScript性能优化小知识总结(转)

    JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 前言 一直在 ...

  5. JavaScript性能优化篇js优化

    JavaScript性能优化篇js优化   随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...

  6. javascript性能优化-repaint和reflow

    repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲 ...

  7. Javascript 性能优化的一点技巧

    把优秀的编程方式当成一种习惯,融入到日常的编程当中.下图是今天想到的一点Javascript 性能优化的技巧,分享一下,抛砖引玉.

  8. JavaScript性能优化 DOM编程

    最近在研读<高性能JavaScript>,在此做些简单记录.示例代码可在此处查看到. 一.DOM 1)DOM和JavaScript 文档对象模型(DOM)是一个独立于语言的,用于操作XML ...

  9. JavaScript性能优化【转载】

    你愿意为打开一个网页等待多长时间?我一秒也不愿意等.但是事实上大多数网站在响应速度方面都让人失望.现在越来越多的人开始建立自己的网站,博客,你的网页响应速度如何呢?在这篇文章中我们来介绍一下提高网页性 ...

随机推荐

  1. 反射API（一）

    <?php function classData(ReflectionClass $class) { echo '<hr>'; $details = '当前文件:'; $detail ...

  2. DP 传球问题

    洛谷P1057 传球问题 分析:经过m次传球到第i个人的方法可以由经过m-1次传球到第i个人和到第i-1个人传递得来 设dp[i][j]为经过j次传球后到达第i个人的方法数,可得到状态转移方程为: d ...

  3. CSS3--难以想象的滤镜效果

    CSS 语法 filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate( ...

  4. Leetcode 860. 柠檬水找零

    860. 柠檬水找零  显示英文描述 我的提交返回竞赛   用户通过次数187 用户尝试次数211 通过次数195 提交次数437 题目难度Easy 在柠檬水摊上,每一杯柠檬水的售价为 5 美元. 顾 ...

  5. python， 在信用评级中，计算KS statistic值

    # -*- coding: utf-8 -*- import pandas as pd from sklearn.grid_search import GridSearchCV from sklear ...

  6. vue组件生命周期详解

    Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...

  7. sublime ctags跳转函数使用

    sublime 点击某函数 按F12可以查到相关函数文件 正题: 1.下载ctags客户端文件 http://prdownloads.sourceforge.net/ctags/ctags58.zip ...

  8. Android Studio打包生成APK教程

    一.修改版本和指定生成APK文件名[可选] 将项目切换到Project视图,打开app目录下的build.gradle文件 1.1 修定软件版本 如1.2图所示. versionCode是app的大版 ...

  9. RocketMQ安装教程

    1.下载 http://mirror.bit.edu.cn/apache/rocketmq/ 2.安装 .tar.gz cd alibaba-rocketmq/bin chmod u+x * 3.配置 ...

  10. Qt调用JS

    转自: 一. 简介 Qt提供了本地C++对象与JavaScript的无缝集成,可以进行本地与web混合应用开发.利用Qt的Webkit集成与QtNetwork模块,可以自由的混合JavaScript. ...