javascript性能优化之避免重复工作
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性能优化之避免重复工作的更多相关文章
- JavaScript性能优化
如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...
- 摘：JavaScript性能优化小知识总结
原文地址:http://www.codeceo.com/article/javascript-performance-tips.html JavaScript的性能问题不容小觑,这就需要我们开发人员在 ...
- JavaScript性能优化小窍门汇总（含实例）
在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛.在web应用项目中,需要大量JavaScript的代码,将来也会越来越多.但是由于J ...
- JavaScript性能优化小知识总结(转)
JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 前言 一直在 ...
- JavaScript性能优化篇js优化
JavaScript性能优化篇js优化 随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...
- javascript性能优化-repaint和reflow
repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲 ...
- Javascript 性能优化的一点技巧
把优秀的编程方式当成一种习惯,融入到日常的编程当中.下图是今天想到的一点Javascript 性能优化的技巧,分享一下,抛砖引玉.
- JavaScript性能优化 DOM编程
最近在研读<高性能JavaScript>,在此做些简单记录.示例代码可在此处查看到. 一.DOM 1)DOM和JavaScript 文档对象模型(DOM)是一个独立于语言的,用于操作XML ...
- JavaScript性能优化【转载】
你愿意为打开一个网页等待多长时间?我一秒也不愿意等.但是事实上大多数网站在响应速度方面都让人失望.现在越来越多的人开始建立自己的网站,博客,你的网页响应速度如何呢?在这篇文章中我们来介绍一下提高网页性 ...
随机推荐
- hdu6331 Walking Plan
题意: sol: 考虑floyed 直接暴力做的话复杂度是kn^3会炸. 考虑一个比较神仙的分块做法. 注意到我们是可以直接求单独某个k的矩阵,使用矩阵快速幂即可(取min的矩阵乘法). 单独求一次的 ...
- 『PyTorch』第三弹_自动求导
torch.autograd 包提供Tensor所有操作的自动求导方法. 数据结构介绍 autograd.Variable 这是这个包中最核心的类. 它包装了一个Tensor,并且几乎支持所有的定义在 ...
- CF-503div2-A/B/C
A. New Building for SIS time limit per test 1 second memory limit per test 256 megabytes input stand ...
- InnoDB存储引擎介绍-(2)redo和undo学习
01 – Undo LogUndo Log 是为了实现事务的原子性,在MySQL数据库InnoDB存储引擎中,还用Undo Log来实现多版本并发控制(简称:MVCC). - 事务的原子性(Atomi ...
- Git的安装和创建版本库
1.Git是分布式版本控制系统 2.安装Git 下载Git后,按照默认设置即可实现安装,安装完毕后点击git目录下的Git Bash 输入以下命令符: git config --global user ...
- Python3模块-random、hashlib和base64
random模块 random.random()用于生成一个浮点数x,范围为0 =< x < 1 import random >>>print(random.random ...
- Linux NTP服务配置 for Oracle RAC
安装Oracle 11g RAC时,我们需要配置ntp服务.在使用虚拟机的情况下对于时钟同步方式的配置有很多种方式,可以使用vmware自带的时钟同步功能,也可以直接将本地的一个节点用作时间服务器.本 ...
- Oracle RAC管理及维护命令详解
Oracle Clusterware的命令集可以分为以下4种: 节点层:osnodes 网络层:oifcfg 集群层:crsctl, ocrcheck,ocrdump,ocrconfig 应用层:sr ...
- js 鼠标滚动 禁用 启用
function disabledMouseWheel() { var div = document.getElementById('divid'); if (div.addEventListener ...
- Latex 循环插图、文件名包含空格
\,...,} { \begin{figure} \centering \includegraphics[width=10cm]{pictures//rela\n} \caption{Attribut ...