文档章节

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>

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

© 著作权归作者所有

共有 人打赏支持
粉丝 11
博文 64
码字总数 107681
作品 0
杭州
后端工程师
精读《高效 javascript》

前言 本期我来给大家推荐的书是《高性能JavaScript》,在这本书中我们能够了解 javascript 开发过程中的性能瓶颈,如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。同样...

程序员解决师
08/23
0
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

没有更多内容

加载失败,请刷新页面

加载更多

io流

码农屌丝
13分钟前
0
0
SpringBoot基础篇之重名Bean的解决与多实例选择

更多Spring文章,欢迎点击 一灰灰Blog-Spring专题 当通过接口的方式注入Bean时,如果有多个子类的bean存在时,具体哪个bean会被注入呢?系统中能否存在两个重名的bean呢?如果可以,那么怎么...

小灰灰Blog
24分钟前
0
0
记录一次dubbo项目实战

一、案例说明 存在2个系统,A系统和B系统,A系统调用B系统的接口获取数据,用于查询用户列表。 二、环境搭建 安装zookeeper,解压(zookeeper-3.4.8.tar.gz)得到如下: 然后进入conf将zoo_s...

Java烂猪皮
27分钟前
0
0
拜托,别再问怎么深入学习分布式架构了!

由于分布式系统所涉及到的领域众多,知识庞杂,很多新人在最初往往找不到头绪,不知道从何处下手来一步步学习分布式架构。 本文试图通过一个最简单的、常用的分布式系统,来阐述分布式系统中...

Java架构资源分享
29分钟前
0
0
《netty入门与实战》笔记-05:心跳与空闲检测

本小节,我们一起探讨最后一个话题:心跳与空闲检测 首先,我们来看一下,客户端与服务端之间的网络会存在什么问题? 1. 网络问题 下图是网络应用程序普遍会遇到的一个问题:连接假死 连接假...

Funcy1122
34分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部