[js高手之路]性能优化技巧 - 缓存与函数重载实战

所谓缓存,通俗点讲就是把已经做过的事情结果先暂时存起来,下次再做同样的事情,不用再重新去做,只要把之前的存的结果拿出来用即可,很明显大大提升了效率。他的应用场景非常广泛。如:

1、缓存ajax结果,大多数网站都会有产品推荐功能,比如按热销推荐,简单低效的做法,每次点击切换的时候,都要通过ajax去数据库中取出结果,其实他的结果并不是要实时去获取,完全可以用缓存技术保存起来,减少数据库处理压力

2、单例模式,也是缓存的应用

一、缓存原理与应用

我们先来一个的简单例子,比如,判断一个数是不是素数,普通的做法:

 1         function isPrime( n ){
 2             if( n ==1 ) {
 3                 return false;
 4             }else {
 5                 var flag = true;
 6                 for( var i = 2; i < n; i++ ){
 7                     if( n % i == 0 ) {
 8                         flag = false;
 9                         break;
10                     }
11                 }
12                 return flag;
13             }
14         }
15         alert( isPrime( 1 ) );
16         alert( isPrime( 1 ) );

每次调用isPrime都需要去把这个函数完整的执行一遍,如果判断的素数比较大,那么程序每次都要做大量的循环判断计算,耗时很大。第一次为了获取到结果,肯定是要完整的执行一遍程序,而第二次做重复的事情,就没有必要再去完整的执行一次,我们完全可以把第一次的结果缓存起来,第二次再次判断1是不是素数,直接返回结果即可.

利用缓存技术,改进之后的素数判断:

 1         function isPrime(value){
 2             if ( !isPrime.answers ) isPrime.answers = {};
 3             if( isPrime.answers[value] != null ){
 4                 return isPrime.answers[value];
 5             }
 6             var flag = value != 1;
 7             for( var i = 2; i < value; i++ ){
 8                 if ( value % i == 0 ) {
 9                     flag = false;
10                     break;
11                 }
12             }
13             return isPrime.answers[value] = flag;
14         }
15         alert( isPrime( 2 ) );
16         alert( isPrime.answers[2] );

我们为函数动态添加一个属性answers,在第13行,存储每个被计算过的素数结果,下次再判断同样的素数,在第3行判断是否存着结果,然后返回即可,不用再重新做循环判断.

还有,javascript要做点东西,dom操作是很频繁的,如果获取同样的dom元素,完全可以采用缓存技术把他们存起来

html代码:

1     <input type="button" value="按钮1">
2     <input type="button" value="按钮2">
3     <input type="button" value="按钮3">
4     <input type="button" value="按钮4">
5     <input type="button" value="按钮5">
1         function getElements( name ) {
2             if ( !getElements.cache ) getElements.cache = {};
3             return getElements.cache[name] =
4                         getElements.cache[name]
5                         || document.getElementsByTagName( name );
6         }
7
8         console.log( getElements( "input" ) );
9         console.log( getElements.cache["input"].length );

第二次调用getElements( ‘input‘ ) 直接就会从getElements.cache[‘input‘]把元素返回,不用再去页面查找dom元素。

二、函数重载原理与应用

所谓函数重载,通俗点理解,可以认为一个函数名,可以出现多种参数,实现不同的功能,比如,加法运算,1个数的时候,直接显示,2个数的时候,求2个数的和,

3个数的时候,求3个数的和。还有,在强类型(编译阶段确定类型)语言中,重载的参数是区分类型的.

在javascript中,默认是没有函数重载的,同名函数会产生覆盖,最后一个会把前面的函数覆盖.

通常,我们可以通过arguments来做文章:

 1         var obj = {
 2             show : function(){
 3                 switch( arguments.length ){
 4                     case 0:
 5                         alert( ‘ghostwu‘ );
 6                         break;
 7                     case 1:
 8                         alert( arguments[0] );
 9                         break;
10                     case 2:
11                         alert( arguments[0] + arguments[1] );
12                         break;
13                 }
14             }
15         }
16         obj.show(); //ghostwu
17         obj.show( ‘ghostwu‘ ); //ghostwu
18         obj.show( 10, 20 ); //30

这样就实现了一个简单的重载,show方法,在不同的参数个数下,实现的功能不一样,但是这种重载方式,扩展性很差,如果有四个参数,5个参数,6个参数。。。。等等,那么就要添加分支了,接下来,我们就来看一个狂炫酷拽叼咋天的实现,不需要修改源码,可以任意增加函数重载功能.

 1         function addMethod( obj, name, fn ) {
 2             var old = obj[name];
 3             obj[name] = function(){
 4                 if ( fn.length == arguments.length ){
 5                     return fn.apply( this, arguments );
 6                 }else if ( typeof old == ‘function‘ ){
 7                     return old.apply( this, arguments );
 8                 }
 9             }
10         }
11
12         var person = { userName : ‘ghostwu‘ };
13         addMethod( person, ‘show‘, function(){
14             alert( this.userName + ‘---->‘ + ‘show1‘ );
15         } );
16         addMethod( person, ‘show‘, function( str ){
17             alert( this.userName + ‘---->‘ + str );
18         } );
19         addMethod( person, ‘show‘, function( a, b ){
20             alert( this.userName + ‘---->‘ + ( a + b ) );
21         } );
22         person.show();
23         person.show( 10 );
24         person.show( 10, 20 );

这样扩展的函数,如果再想添加4个,5个。。。任意参数的功能就非常的方便。完全不需要去函数体中修改,增加分支什么的.

时间: 2024-10-10 09:00:52

[js高手之路]性能优化技巧 - 缓存与函数重载实战的相关文章

Java代码性能优化技巧

流方面: private FileOutputStream writer; writer = new FileOoutputStream(fileName); 使用BufferedOutputStream 对写入FileOutputStream的数据进行缓存 //将writer的类型由FileOutputStream 变更为BufferedOutputStream //private FileOutputStream writer; private BufferedOutputStream wr

Java程序性能优化技巧

多线程.集合.网络编程.内存优化.缓冲..spring.设计模式.软件工程.编程思想 1.生成对象时,合理分配空间和大小new ArrayList(100); 2.优化for循环Vector vect = new Vector(1000);for( inti=0; i<vect.size(); i++){ ...}for循环部分改写成:int size = vect.size();for( int i=0; i>size; i++){ ...} 如果size=1000,就可以减少1000次si

李洪强iOS开发之性能优化技巧

李洪强iOS开发之性能优化技巧 通过静态 Analyze 工具,以及运行时 Profile 工具分析性能瓶颈,并进行性能优化.结合本人在开发中遇到的问题,可以从以下几个方面进行性能优化. 一.view优化 1.不透明的View 设置为opaque. 2.根据实际情况重用.延迟加载或预加载View. 3.减少subviews数量,定制复杂cell使用drawRect.尽量使用drawRect而不是layoutSubView. 4.不直接调用drawRect. layoutSubviews方法.万不

android App性能优化技巧浅谈

Android App性能优化,安卓App性能优化技巧,无论锤子还是茄子手机的不断冒出,Android系统的手机市场占有率目前来说还是最大的,因此基于Android开发的App数量也是很庞大的.那么,如何能开发出更高性能的Android App?相信是软件开发公司以及广大程序员们头疼的一大难题.今天,就给大家提供几个提高Android App性能的技巧. 高效地利用线程1.在后台取消一些线程中的动作 我们知道App运行过程中所有的操作都默认在主线程(UI线程)中进行的,这样App的响应速度就会受

iOS开发——实战项目总结&amp;UITableView性能优化技巧

UITableView性能优化技巧 Table view需要有很好的滚动性能,不然用户会在滚动过程中发现动画的瑕疵. 为了保证table view平滑滚动,确保你采取了以下的措施: 正确使用`reuseIdentifier`来重用cells 尽量使所有的view opaque,包括cell自身 避免渐变,图片缩放,后台选人 缓存行高 如果cell内现实的内容来自web,使用异步加载,缓存请求结果 使用`shadowPath`来画阴影 减少subviews的数量 尽量不适用`cellForRowA

iOS性能优化技巧

iOS性能优化技巧 通过静态 Analyze 工具,以及运行时 Profile 工具分析性能瓶颈,并进行性能优化.结合本人在开发中遇到的问题,可以从以下几个方面进行性能优化. 一.view优化 1.不透明的View 设置为opaque. 2.根据实际情况重用.延迟加载或预加载View. 3.减少subviews数量,定制复杂cell使用drawRect.尽量使用drawRect而不是layoutSubView. 4.不直接调用drawRect. layoutSubviews方法.万不得已时可以用

25个Apache性能优化技巧推荐

25个Apache性能优化技巧推荐 Apache至今仍处于web服务器领域的霸主,无人撼动,没有开发者不知道.本篇文章介绍25个Apache性能优化的技巧,如果你能理解并掌握,将让你的Apache性能有显著的提升! Apache部分: 1. 移除不用的模块. 2. 使用 mod_disk_cache NOT mod_mem_cache . 3. 扁平架构配置mod_disk_cache. 4. 安装恰当的Expires, Etag, 和 Cache-Control Headers . 5. 将缓

JavaScript 性能优化技巧分享

JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中.为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择. 本文从加载.上下文.解析.编译.执行和捆绑等多个方面来讲解 JavaScript 的性能优化技巧,以便让更多的前端开发人员掌握这方面知识. 什么是高性能的 JavaScript 代码? 尽管目前没有高性能代码的绝对定义,但却存在一个以用户为中心的性能模型,可以用作参考:RAIL模型. 响应 如果你的应用程序能在1

[js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表

所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理,由主板,电源,内存条,显卡, 机箱,显示器,外设等组成的 把一个成型的产品组成部件,分成一个个独立的部件,这种方式可以做出很多灵活的产品,这就是组合模式的优势 比如:家用台式机电脑,要求配置比较低, 这个时候只需要主板+电源+内存条+机箱+显示器+外设就可以了,不需要配置独立显卡 鸡腿堡+鸡翅+紫薯