今天我们继续上一个阶段关于web的性能优化,如何对js高级进行优化

(1)闭包

何为闭包; 一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.  我认为比较通俗的理解就是;

闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。(@阮一峰)

闭包如何优化体现在性能里面?

1、匿名自执行函数
  我们知道所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去,这样的临时变量加入全局对象有很多坏处,
比如:别的函数可能误用这些变量;造成全局对象过于庞大,影响访问速度(因为变量的取值是需要从原型链上遍历的)。除了每次使用变量都是用var关键字外,我们在实际情况下经常遇到这样一种情况,即有的函数只需要执行一次,其内部变量无需维护,
var data= {
table : [],
tree : {}
};
(function(dm){
for(var i = 0; i < dm.table.rows; i++){
var row = dm.table.rows[i];
for(var j = 0; j < row.cells; i++){
drawCell(i, j);
}
}
})(data);

我们创建了一个匿名的函数,并立即执行它,由于外部无法引用它内部的变量,因此在函数执行完后会立刻释放资源,关键是不污染全局对象。

2、结果缓存
我们开发中会碰到很多情况,设想我们有一个处理过程很耗时的函数对象,每次调用都会花费很长时间,那么我们就需要将计算出来的值存储起来,当调用这个函数的时候,首先在缓存中查找,如果找不到,则进行计算,然后更新缓存并返回值,如果找到了,直接返回查找到的值即可。闭包正是可以做到这一点,因为它不会释放外部的引用,从而函数内部的值可以得以保留。
var CachedSearchBox = (function(){
var cache = {},
count = [];
return {
attachSearchBox : function(dsid){
if(dsid in cache){//如果结果在缓存中
return cache[dsid];//直接返回缓存中的对象
}
var fsb = new uikit.webctrl.SearchBox(dsid);//新建
cache[dsid] = fsb;//更新缓存
if(count.length > 100){//保正缓存的大小<=100
delete cache[count.shift()];
}
return fsb;
},
clearSearchBox : function(dsid){
if(dsid in cache){
cache[dsid].clearSelection();
}
}
};
})();
CachedSearchBox.attachSearchBox("input");

(2)Jquery样式选择器

jQuery选择器有关的性能问题是尽量采用链式调用来操作缓存选择器结果集。因为每一个$()的调用都会导致一次新的查找,所以,采用链式调用和设置变量缓存结果集,减少查找,提升性能。

链式调用示例:

$(document).ready(function() {
function stripe() {
$('#news').find('tr.alt').removeClass('alt').end().find('tbody').each(function() {
  $(this).children(':visible').has('td').filter(':group(3)').addClass('alt');
});
}
stripe();
});

通过链式调用,采用find(),end(),children(),has,filter()等方法,来过滤结果集,减少$()查找方法调用,提升性能。

缓存结果集示例:

$(document).ready(function() {
var $news = $('#news');
function stripe() {
$news.find('tr.alt').removeClass('alt');
$news.find('tbody').each(function() {
$(this).children(':visible').has('td').filter(':group(3)').addClass('alt');
});
}
stripe();
});

通过声明$news变量缓存$(‘#news’)结果集,从而提升后面结果集对象调用方法的性能。

(3)惰性载入函数 
①惰性载入表示函数执行的分支仅会发生一次:既第一次调用的时候。在第一次调用的过程中,该函数会被覆盖为另一个按合适方式执行的函数,这样任何对原函数的调用都不用再经过执行的分支了。 
■优点: 
□要执行的适当代码只有当实际调用函数时才进行。 
□尽管第一次调用该函数会因额外的第二个函数调用而稍微慢点,但后续的调用都会很快,因避免了多重条件。

(4) 函数柯里化 
定义:用于创建已经设置好了一个或多个参数的函数。函数柯里化的基本方法和函数绑定是一样的:使用一个闭包返回一个函数。两者的区别在于,当函数被调用时,返回函数还需要设置一些传入的参数。

web优化 js性能高级篇的更多相关文章

  1. 事件委托能够优化js性能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. js性能提高篇

    ,最后统一将DocumentFragment添加到页面. 该做法可以减少页面渲染dom元素的次数.经IE和Fx下测试,在append1000个元素时,效率能提高10%-30%

  3. 【转载】Spark性能优化指南——高级篇

    前言 数据倾斜调优 调优概述 数据倾斜发生时的现象 数据倾斜发生的原理 如何定位导致数据倾斜的代码 查看导致数据倾斜的key的数据分布情况 数据倾斜的解决方案 解决方案一:使用Hive ETL预处理数 ...

  4. 【转】【技术博客】Spark性能优化指南——高级篇

    http://mp.weixin.qq.com/s?__biz=MjM5NjQ5MTI5OA==&mid=2651745207&idx=1&sn=3d70d59cede236e ...

  5. Spark性能优化指南——高级篇(转载)

    前言 继基础篇讲解了每个Spark开发人员都必须熟知的开发调优与资源调优之后,本文作为<Spark性能优化指南>的高级篇,将深入分析数据倾斜调优与shuffle调优,以解决更加棘手的性能问 ...

  6. Spark性能优化指南-高级篇

    转自https://tech.meituan.com/spark-tuning-pro.html,感谢原作者的贡献 前言 继基础篇讲解了每个Spark开发人员都必须熟知的开发调优与资源调优之后,本文作 ...

  7. Spark性能优化指南——高级篇

    本文转载自:https://tech.meituan.com/spark-tuning-pro.html 美团技术点评团队) Spark性能优化指南——高级篇 李雪蕤 ·2016-05-12 14:4 ...

  8. Spark性能优化指南-高级篇(spark shuffle)

    Spark性能优化指南-高级篇(spark shuffle) 非常好的讲解

  9. js 性能优化 篇一

    JS性能优化 摘自:http://www.china125.com/design/js/3631.htm  首先,由于JS是一种解释型语言,执行速度要比编译型语言慢得多.(注:,Chrome是第一款内 ...

随机推荐

  1. 《C程序设计语言》- 字符输入和输出

    书籍介绍: 本书是机械工业出版社的第2版·新版,作者两位,其中一位是C语言之父Dennis Ritchie,另一位是Brian Kernighan,也是一位牛人. 本书的目的是帮助读者学习如何用C语言 ...

  2. Eclipse使用Maven tomcat:run命令启动web项目时修改默认端口

  3. Android WebView使用

    转自:http://www.cnblogs.com/oakpip/archive/2011/04/08/2009800.html 大部分内容为网上整理其它高人的帖子,现只作整理,用于查看: 在Andr ...

  4. 53. 特殊的O(n)时间排序[sort ages with hashtable]

    [本文链接] http://www.cnblogs.com/hellogiser/p/sort-ages-with-hashtable.html [题目] 某公司有几万名员工,请完成一个时间复杂度为O ...

  5. 设计模式--享元模式Flyweight(结构型)

    一.享元模式 在一个系统中如果有多个相同的对象,这些对象有部分状态是可以共享的,我们运用共享技术就能有效地支持大量细粒度的对象. 二.例子 举个围棋的例子,围棋的棋盘共有361格,即可放361个棋子. ...

  6. 备份了我的CSDN博客

    刚用cnblogs的“博客搬家”功能把我此前在csdn发的所有文章都备份过来了. 发现cnblogs的博客备份功能比较好的一点是——文章的发表时间和原来的一致! 上次在CSDN发博客的时间是2015- ...

  7. IntelliJ IDEA WEB项目的部署配置

    以下内容是我网上找的比较全面了,其中关于facets配置很多地方都没有说明,其实很重要,我加入了自己的理解.其他来自网络.在导入一个项目有问题时,建议先创建一个正确的web项目,然后对比配置项,一般就 ...

  8. NFC OMA 访问

    正常的OMA访问: 但基本上IC原厂都会提供NFC swp-sim这一块的访问,但关于NFC内部eSe的访问一般NFC服务商又会整一套出来,导致有两套独立的SmartcardSevice需要运行,但他 ...

  9. android学习第一篇 基本概念

    一.   1.  Android 四大組件 Activity , Service  , BroadcastReceiver ,ContentProvider 2.  多個Activity組成棧,當前A ...

  10. Ruby混合类型

    当一个类拥有可以从多个父类继承的特点,类应该显示多重继承. Ruby没有直接支持多继承,但Ruby模块有另一个精彩使用.他们几乎消除多重继承的需要,提供了一个工厂,称为混入. 混合类型给一个精彩的控制 ...