总览

可维护性

可理解性，直观性，可适应性，可扩展性

• 做好注释
• 变量初始化时给出他的类型。

松散耦合

代码要尽量做到解耦。

解耦的关键就是让他们尽量做好自己的事情。分工要明确。

• js 不要直接修改 css 的样式，用更改类名的形式可以降低耦合。
• css 里面也最好不要写 expression 那种东西
• 应用逻辑与事件处理程序最好也能够解耦(比如将从事件中获取和应用逻辑拆分开)
• 任何应用层面的程序都应该可以在不触发事件的情况下运行，这才是测试的可能性

编程实践

不负责创建或者维护某个对象，我们就不能对它们进行修改

• 不要为实例或者原型添加属性和方法
• 不要重新定义已经存在的方法
• 避免全局变量

例如 YUI 就是单一的全局变量，是一个命名空间的概念

• 避免与 null 进行比较
• 将数据单独抽取出来作为常量，隔离逻辑与数据

性能

注意作用域

减少向上层作用域的查找过程，局部的函数或者变量肯定要比全局的开销要小一些。

避免使用with，因为 with 会建立自己的作用域链，延长了作用域链，肯定是会影响性能的。

选择正确的方法

时间复杂度上的优化

• O(1)：正常的常数和变量值，还有数组元素的访问也是 O(1)
• O(log n)：二分查找
• O(n)：对象的属性获取(因为是个遍历的过程)
• O(n2)：每个值都得获取 n 次，插入排序

就是说尽量减少算法的复杂度，多使用局部变量来暂存住，然后如果能够使用数字化的数组位置来访问的话，就尽量用数字位置。

优化循环

• 减值迭代：价值不大，感觉浏览器基本帮你做完了
• 简化终止条件：每次循环都会操作，可以尽量减少 O(n)的属性查找
• 简化循环体：这也是废话了，执行最多的，所以要保证最大限度的优化
• 使用后测试循环：一般的 for 和 while 都是前测试，而如果我们能够保证第一次的值肯定会有一个的话，可以改成后测试循环！！

展开循环

就是在循环次数确定时，消除掉循环换成多次调用函数往往更快。(原理是消除了建立循环和处理终止条件的额外开销)

//duff装置
function duff(array, callback) {
  var iterations = Math.ceil(values.length / 8);
  var left = values.length % 8;
  var i = 0;
  if (left > 0) {
    do {
      callback(array[left]);
    } while (--left > 0);
    //--left的值就是操作结束的值
  }
  do {
    callback(i++);
    callback(i++);
    callback(i++);
    callback(i++);
    callback(i++);
    callback(i++);
    callback(i++);
    callback(i++);
  } while (--iterations > 0);
}

这个已经是一个改良过的 duff，最初版本的是通过 switch 写的，通过不写 break 来向下执行的。Duff 的好处就是在大数据处理的时候减少了每次的判断的逻辑，还是很有意思的~

其实价值不是特别高

发现了个不错的网站，用来测试计算的性能：https://jsperf.com/

避免双重解释

比如下面的

eval("alert(3)");
var say = new Function("alert(4)");
setTimeout("alert(2)", 1000);

这三种写法 js 都需要新建一个解释器来对字符串进行解析的，开销是很大的，尽量避免吧。

还有一些小的 tip

• 尽量用原生的方法，主要是 Math 的，因为这些事 c/c++写的，速度更快
• switch 语句比一般的 for 的速度要快，而且 case 语句可以按照最可能到最不可能的顺序来写
• 位运算符应该会更快一些

最小化语句数

• 语句数其实也会影响执行的速度，我们在申明的时候可以将他们整合。
• 迭代值可以使用++的形式来节省语句。
• 使用数组和对象字面量的形式来书写是能够减少语句的

优化 DOM 操作

• 最小化现场更新，就是 createDocumentFragment 来作为一个占位的，然后都 append 好了之后一次搞定就行。
• 比这个更快地，使用innerHtml来改变，因为 innerHtml 是内部调用了内置的 DOM 调用，而不是基于 JS 的 DOM 调用。
• 使用事件代理，这个比较常用，就是在祖先节点上绑定来节省绑定次数以及支持动态绑定
• 合理使用 HTMLCollection，因为文档上的查询开销很昂贵，合理使用

部署

我们的 Js 代码是没法直接放到线上的，因为注释，长变量名和空白其实都是没有价值的。

一般会进行一次 js 的验证，比如 JSLint。

所以一般会进行压缩，比如 YUICompressor，删除空白，注释，缩短变量名。

然后还会有 HTTP 的压缩，比如 GZIP 压缩。

Gzip其实是浏览器与http提供的，浏览器在发送request的时候会发一个Accept-Encoding:gzip,deflate之类，然后服务器就会返回按照它支持的压缩过的文本

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 981909093@qq.com