最近在为管理系统的网站做点优化，压缩都用了工具，就没太多可以讨论的。

主要还是代码上的精简和优化。稍微整理一下，顺便做点测试。

这里先贴上项目中用来替代iFrame的Ajax处理的局部代码,本人比较讨厌用iFrame来实现模块管理(主要是多重嵌套,存在一些刷屏时候白屏、脚本对象不一致、缓存数据问题等等，还有一些是对象引用丢失或者被重定向的情况)。

这里引入的是jQuery1.8.3.js的版本库

var ie = (function () {

  // ie10-6

  var ua = navigator.userAgent;

  return ua && /MSIE/.test(ua) ? Number(ua.match(/MSIE\s+([^\.]*)/) [1])  : 0;

}());

var ajaxHtml = function (url, data0, target) {

  var flag = ie > 8 || !/MSIE/.test(ua);

  // ie9+ 和其他主流浏览器

  var getByTagName = function (data, name1, name2, attr) {

    // 手写的脚本代码,用来处理传回的HTML字符串(IE9+和主流浏览器支持直接解析成HTMLDocument对象)

    if (!data || !name1 || !name2) return 0;

    var s = 0,

    e,

    result = [

    ],

    _dom,

    _val;

    while ((s = data.indexOf(name1, s)) > - 1) {

      e = data.indexOf(name2, s);

      _dom = data.substring(s, e);

      if (attr) {

        _val = _dom.match(new RegExp('src="([^"]+)')) [1];

        _dom = document.createElement(name1.replace(/</g, ''));

        _dom.setAttribute(attr, _val);

      }

      result.push(_dom);

      s = e;

    }

    return result;

  };

  $.get(url, data0, function (data) {

    var links,

    styles,

    scripts,

    body;

    if (flag) {

      links = $(data) .find('link');

      styles = $(data) .find('style');

      scripts = $(data) .find('script');

      body = $(data) .find('body') .html();

    } else {

      var start = data.indexOf('<body>'),

      end = data.indexOf('</body>');

      body = data.substring(start + 6, end);

      links = getByTagName(data, '<link', '/>', 'href');

      styles = getByTagName(data, '<style', '</style>');

      scripts = getByTagName(data, '<script', '</script>', 'src');

    }

    target.empty() .append(links) .append(styles) .html(body) .append(scripts);

  }, flag ? 'xml' : undefined);

};
var ua = navigator.userAgent;

return ua && /MSIE/.test(ua) ? Number(ua.match(/MSIE\s+([^\.]*)/) [1])  : 0;

这一段代码中就有用到优化了，把navigator.userAgent存到局部变量中，减少了查询次数，如下循环体中经常应用到的代码

for (var i = 0, len = arr.length;  i < len; i++) {

  // test

}

当arr数组的长度固定的时候,我们直接存在变量里,循环体就不会每次都去计算arr数组的长度了,这边贴上一个简单测试的数据(有兴趣的人自己去测试一下，毕竟不同环境，不同代码测出来的效果不一定一样)

优化过的代码大概运行效率是97%,在大多数脚本中基本都可以忽略不计了，可能这也是IDE代码填补时候直接跳出的都是没有优化过打代码吧。而且在实际应用场景中数据的长度可能经常会变化，在这边我们只是探讨优化的原则。

 原则1：减少查询次数 如: var href = window.location.href;

if (!data || !name1 || !name2) return 0;

上面这段代码就运用到了能力检测,这是动态脚本语言中编码的一个习惯,因为不同于Java等强语言具有接口、严格的数据类型,JavaScript只严格区分数据和指令,有一个理论的名字我不太记得了，大致描述的是：

不会飞，会游泳，2只翅膀的鸟，我就认为是鸭子。

作者描述的不太准确，不过相信读者能明白这个意思。有另外一句话是：不管白猫、黑猫,能抓到老鼠的就是好猫。 其实也是同一个道理。

!data,对于数据就是测试这个数据是否存在,对于方法,就是测试这个功能是否存在。

而这边 return 0;则是用0来代替false,节省了四个字符,不管是在网络传输中(js脚本从后台服务中拉到pc浏览器),还是在脚本解释中都会加快速度。当然在返回值是数字的时候就不应该这么用了。

原则2:在方法返回布尔型的时候可以用 0 代替 false ,1代替true

$.get(url, data0, function (data) {

  var links,

  styles,

  scripts,

  body;

  if (flag) {

    links = $(data) .find('link');

    styles = $(data) .find('style');

    scripts = $(data) .find('script');

    body = $(data) .find('body') .html();

  } else {

    var start = data.indexOf('<body>'),

    end = data.indexOf('</body>');

    body = data.substring(start + 6, end);

    links = getByTagName(data, '<link', '/>', 'href');

    styles = getByTagName(data, '<style', '</style>');

    scripts = getByTagName(data, '<script', '</script>', 'src');

  }

  target.empty() .append(links) .append(styles) .html(body) .append(scripts);

}, flag ? 'xml' : undefined);

上面这段代码我原本if和else方法做了2种处理，代码逻辑几乎一样，变量名也几乎重复，后面我简单修改了一下，以高内聚低耦合的原则将重复性高的代码提取出来，只处理局部差异，实现了封装。

getByTagName方法的封装尤其体现了OOP，而不是面向过程开发，如果是每一种情况都去写一个处理过程，也能把代码实现，但难免代码过于冗长。

原则3：OOP-面向对象编程(即封装)

flag ? 'xml' : undefined

这边用 ?: 三元运算符号来代替if else，明显可以把一个语句作为一个变量放在括号里面作为方法的实参，一行代码是三元运算符的一个特色，另外从效率方面，也是三元运算符占优（与if else相比，具体原理作者也不清楚）

原则4：用三元运算符代替if else

还有一些代码中没有运用到的技巧，稍微提及一下

  • (‘’ +) > String() > toString() > new String()
  • if else多分支使用的时候要把最有可能的情况靠前写,运用到&&和||等具有短路特性的符号的时候也是这个原则
  • 可以用 var a = b || c;来代替 a = b ? b : c;
  • 可以用 var a = b && b.c && b.c.d;来代替 if (b && b.c) a = b.c.d; 同样 可以用 bool && (a = 1); 来代替 if(bool) a = 1;
  • 把方法存在一个json变量中，你就不用再用if else 一个一个方法名地写出来，直接求出json的key，然后引用json中的方法即可 
    var fcJson = {
    
  1: function() {},
    
  2: function() {}
    
};
    
fcJson[key]();
    
// 原先的方式
    
/*
    
switch(key) {
    
case 1: fc1(); break;
    
case 2: fc2(); break;
    
}
    
*/

JavaScript优化参考的更多相关文章

  1. 前端网络、JavaScript优化以及开发小技巧

    一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...

  2. 前端性能优化（三）——传统 JavaScript 优化的误区

    注:本文是纯技术探讨文,无图无笑点,希望您喜欢 一.前言 软件行业极其缺乏前端人才这是圈内的共识了,某种程度上讲,同等水平前端的工资都要比后端高上不少,而圈内的另一项共识则是--网页是公司的脸面! 几 ...

  3. Nginx性能优化参考

    nginx性能优化参考 1)调整配置文件中的配置项的值(配置文件:nginx.conf) worker_processes auto;开启的进程数,一般配置为跟逻辑CPU核数一样worker_rlim ...

  4. 比较全面的MySQL优化参考（上下篇）

    转自:http://imysql.com/2015/05/24/mysql-optimization-reference-1.shtml 本文整理了一些MySQL的通用优化方法,做个简单的总结分享,旨 ...

  5. JavaScript 核心参考教程 内置对象

    这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft).Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言,从 ...

  6. 比较全面的MySQL优化参考

      本文整理了一些MySQL的通用优化方法,做个简单的总结分享,旨在帮助那些没有专职MySQL DBA的企业做好基本的优化工作,至于具体的SQL优化,大部分通过加适当的索引即可达到效果,更复杂的就需要 ...

  7. Canvas API -- JavaScript 标准参考教程（alpha）

    Canvas API -- JavaScript 标准参考教程(alpha) Canvas API

  8. Javascript 优化

    Javascript 优化 作者:@gzdaijie本文为作者原创,转载请注明出处:http://www.cnblogs.com/gzdaijie/p/5324489.html 目录 1.全局变量污染 ...

  9. Nginx配置优化参考

    Nginx配置优化参考                                                                                          ...

随机推荐

  1. uva 10922 - 2 the 9s

    題目意思:讀取一數字,此數字最大有1000位.計算該數字是否為九的倍數?如是,再計算其階層數. ※判斷是否為九的倍數:所有位數相加 ÷ 9＝0,即為九的倍數. ※計算階層數:所有位數相加後得出的第一個 ...

  2. javascript两种定时器的使用及其清除

    <!--示例代码如下:--><!DOCTYPE html> <html> <body> <p>A script on this page s ...

  3. css3中的提供的元素变化属性

    通过 CSS3 提供的2d元素转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. css3中为我们 提供了: translate() rotate() scale() skew() matrix( ...

  4. php模板引擎技术简单实现

    用了smarty,tp过后,也想了解了解其模板技术是怎么实现,于是写一个简单的模板类,大致就是读取模板文件->替换模板文件的内容->保存或者静态化 tpl.class.php主要解析 as ...

  5. jquery1.9学习笔记 之选择器(基本元素五)

    多种元素选择器  jQuery("selector1,selector2,selectorN") 例子: <!doctype html> <html lang=' ...

  6. python之6-2高阶函数

    1. map函数 map(函数A,字符串或者列表) map函数的意思是将函数A依次作用到字符串的每个字符或者列表的每个元素. 例如: map(lambda x: x*x,[1,2]) [1, 4] 这 ...

  7. HSV颜色识别demo

    HSV(Hue, Saturation, Value)色彩空间是一种区别与RGB的表示形式.其模型可视为一个倒立的棱锥或圆锥. 其中H为色调,用角度度量,取值范围为0°-360°,从红色开始按逆时针方 ...

  8. 十六进制string转换UIColor －备用

    - (UIColor *) colorWithHexString: (NSString *) stringToConvert { NSString *cString = [[stringToConve ...

  9. iOS 第三方 需要 引用的库

    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ AFNetWorking   是基于 nsurlconnection   所以不需要引入库 ＝＝＝ ...

  10. cf C. Sereja and Algorithm

    http://codeforces.com/contest/368/problem/C 从左向右记录从1位置到每一个位置上x,y,z的个数.然后判断在l,r区间内的x,y,z的关系满不满足abs(x- ...