文档章节

javascript性能优化之避免重复工作

 老韭菜
发布于 07/21 20:22
字数 848
阅读 7
收藏 0

    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>

分析代码可知优化前代码每次调用addHandler函数都要进行浏览器的功能检测,我们可以通过以下方式进行优化

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>

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

© 著作权归作者所有

共有 人打赏支持
粉丝 4
博文 56
码字总数 92784
作品 0
杭州
后端工程师
WEB前端开发学习常见面试问题系列:web前端性能优化你有哪些办法?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/26
0
0
优化 JavaScript 执行[转]

JavaScript 经常会触发视觉变化。有时是直接通过样式操作,有时是会产生视觉变化的计算,例如搜索数据或将其排序。时机不当或长时间运行的 JavaScript 可能是导致性能问题的常见原因。您应当...

行列
07/05
0
0
高性能javascript-算法和流程控制笔记

如同其他编程语言,代码的写法和算法会影响javascript的运行时间。与其他语言不同的是,javascript可用资源有限,因此优化技术更为重要。 1、for,while和do-while循环性能特性相似,所以没有...

chuhx
2012/04/04
0
0
[译] JavaScript 是如何工作的:CSS 和 JS 动画背后的原理 + 如何优化性能

原文地址:How JavaScript works: Under the hood of CSS and JS animations + how to optimize their performance 原文作者:Alexander Zlatkov 译文出自:掘金翻译计划 本文永久链接:git......

辣手摧花
05/15
0
0
JavaScript性能优化小知识总结

前言   一直在学习javascript,也有看过《犀利开发Jquery内核详解与实践》,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于思考懒...

leycau
2015/03/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

困扰当前数据中心管理的三大难题

导读 当企业发展到一定程度,或者之前的机房不能满足现在的数据中心使用时,企业会对数据中心进行迁移。那么在数据中心进行迁移的时候会遇到哪些风险呢?针对这些风险我们应该做出怎样的措施来...

问题终结者
16分钟前
0
0
设计模式:工厂方法模式(工厂模式)

工厂方法模式才是真正的工厂模式,前面讲到的静态工厂模式实际上不能说是一种真正意义上的设计模式,只是一种变成习惯。 工厂方法的类图: 这里面涉及到四个种类: 1、抽象产品: Product 2、...

京一
32分钟前
0
0
区块链和数据库,技术到底有何区别?

关于数据库和区块链,总会有很多的困惑。区块链其实是一种数据库,因为他是数字账本,并且在区块的数据结构上存储信息。数据库中存储信息的结构被称为表格。但是,区块链是数据库,数据库可不...

HiBlock
40分钟前
0
0
react native 开发碰到的问题

react-navigation v2 问题 问题: static navigationOptions = ({navigation, navigationOptions}) => ({ headerTitle: ( <Text style={{color:"#fff"}}>我的</Text> ), headerRight: ( <View......

罗培海
47分钟前
0
0
Mac Docker安装流程

久仰Docker大名已久,于是今天趁着有空,尝试了一下Docker 先是从docker的官网上下载下来mac版本的docker安装包,安装很简易,就直接拖图标就好了。 https://www.docker.com/products/docker...

writeademo
55分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部