首页 > 代码库 > 学习javascript总结下来的性能优化的小知识（二）
学习javascript总结下来的性能优化的小知识（二）
上面一篇文章大致介绍了一些javascript当中使用的一些小技巧，当下这篇文章继续介绍一下内存管理、松散耦合、性能方面的一些小知识、为避免错误应该注意的点
内存管理
1、循环引用
如果循环引用中包含DOM对象或者ActiveX对象，那么就会发生内存泄露。内存泄露的后果是在浏览器关闭前，即使是刷新页面，这部分内存不会被浏览器释放。
简单的循环引用：
var el = document.getElementById(‘MyElement‘); var func = function () { //… } el.func = func; func.element = el;
但是通常不会出现这种情况。通常循环引用发生在为dom元素添加闭包作为expendo的时候。
function init() { var el = document.getElementById(‘MyElement‘); el.onclick = function () { //…… } } init();
init在执行的时候，当前上下文我们叫做context。这个时候，context引用了el，el引用了function，function引用了context。这时候形成了一个循环引用。
下面2种方法可以解决循环引用：
1) 置空dom对象
function init() { var el = document.getElementById(‘MyElement‘); el.onclick = function () { //…… } } init(); //可以替换为： function init() { var el = document.getElementById(‘MyElement‘); el.onclick = function () { //…… } el = null; } init();
将el置空，context中不包含对dom对象的引用，从而打断循环应用。
如果我们需要将dom对象返回，可以用如下方法：
function init() { var el = document.getElementById(‘MyElement‘); el.onclick = function () { //…… } return el; } init(); //可以替换为： function init() { var el = document.getElementById(‘MyElement‘); el.onclick = function () { //…… } try { return el; } finally { el = null; } } init();
2) 构造新的context
function init() { var el = document.getElementById(‘MyElement‘); el.onclick = function () { //…… } } init(); //可以替换为： function elClickHandler() { //…… } function init() { var el = document.getElementById(‘MyElement‘); el.onclick = elClickHandler; } init();
把function抽到新的context中，这样，function的context就不包含对el的引用，从而打断循环引用。
2、通过javascript创建的dom对象，必须append到页面中
IE下，脚本创建的dom对象，如果没有append到页面中，刷新页面，这部分内存是不会回收的！
function create() { var gc = document.getElementById(‘GC‘); for (var i = 0; i < 5000; i++) { var el = document.createElement(‘div‘); el.innerHTML = "test"; //下面这句可以注释掉，看看浏览器在任务管理器中，点击按钮然后刷新后的内存变化 gc.appendChild(el); } }
3、释放dom元素占用的内存
将dom元素的innerHTML设置为空字符串，可以释放其子元素占用的内存。
在rich应用中，用户也许会在一个页面上停留很长时间，可以使用该方法释放积累得越来越多的dom元素使用的内存。
4、释放javascript对象
在rich应用中，随着实例化对象数量的增加，内存消耗会越来越大。所以应当及时释放对对象的引用，让GC能够回收这些内存控件。
对象：obj = null
对象属性：delete obj.myproperty
数组item：使用数组的splice方法释放数组中不用的item
5、避免string的隐式装箱
对string的方法调用，比如‘xxx‘.length，浏览器会进行一个隐式的装箱操作，将字符串先转换成一个String对象。推荐对声明有可能使用String实例方法的字符串时，采用如下写法：
var myString = new String(‘Hello World‘);
松散耦合
1、解耦HTML/JavaScript
JavaScript和HTML的紧密耦合：直接写在HTML中的JavaScript、使用包含内联代码的<script>元素、使用HTML属性来分配事件处理程序等
HTML和JavaScript的紧密耦合：JavaScript中包含HTML，然后使用innerHTML来插入一段html文本到页面
其实应该是保持层次的分离，这样可以很容易的确定错误的来源，所以我们应确保HTML呈现应该尽可能与JavaScript保持分离
2、解耦CSS/JavaScript
显示问题的唯一来源应该是CSS，行为问题的唯一来源应该是JavaScript，层次之间保持松散耦合才可以让你的应用程序更加易于维护，所以像以下的代码element.style.color=”red”尽量改为element.className=”edit”，而且不要在css中通过表达式嵌入JavaScript
3、解耦应用程序/事件处理程序
将应用逻辑和事件处理程序相分离：一个事件处理程序应该从事件对象中提取，并将这些信息传送给处理应用逻辑的某个方法中。这样做的好处首先可以让你更容易更改触发特定过程的事件，其次可以在不附加事件的情况下测试代码，使其更易创建单元测试
性能方面的注意事项
1、尽量使用原生方法
2、switch语句相对if较快
通过将case语句按照归可能到最不可能的顺序进行组织
3、位运算较快
当进行数字运算时，位运算操作要比任何布尔运算或者算数运算快
4、巧用||和&&布尔运算符
function eventHandler(e) { if (!e) e = window.event; } //可以替换为： function eventHandler(e) { e = e || window.event; }
if (myobj) { doSomething(myobj); } //可以替换为： myobj && doSomething(myobj);
避免错误应注意的地方
1、每条语句末尾须加分号
在if语句中，即使条件表达式只有一条语句也要用{}把它括起来，以免后续如果添加了语句之后造成逻辑错误
2、使用+号时需谨慎
JavaScript 和其他编程语言不同的是，在 JavaScript 中，‘+‘除了表示数字值相加，字符串相连接以外，还可以作一元运算符用，把字符串转换为数字。因而如果使用不当，则可能与自增符‘++‘混淆而引起计算错误
var valueA = 20; var valueB = "10"; alert(valueA + valueB); //ouput: 2010 alert(valueA + (+valueB)); //output: 30 alert(valueA + +valueB); //output:30 alert(valueA ++ valueB); //Compile error
3、使用return语句需要注意
一条有返回值的return语句不要用()括号来括住返回值，如果返回表达式，则表达式应与return关键字在同一行，以避免压缩时，压缩工具自动加分号而造成返回与开发人员不一致的结果
function F1() { var valueA = 1; var valueB = 2; return valueA + valueB; } function F2() { var valueA = 1; var valueB = 2; return valueA + valueB; } alert(F1()); //output: 3 alert(F2()); //ouput: undefined
4、==和===的区别
避免在if和while语句的条件部分进行赋值，如if (a = b)，应该写成if (a == b)，但是在比较是否相等的情况下，最好使用全等运行符，也就是使用===和!==操作符会相对于==和!=会好点。==和!=操作符会进行类型强制转换
var valueA = "1"; var valueB = 1; if (valueA == valueB) { alert("Equal"); } else { alert("Not equal"); } //output: "Equal" if (valueA === valueB) { alert("Equal"); } else { alert("Not equal"); } //output: "Not equal"
5、不要使用生偏语法
不要使用生偏语法，写让人迷惑的代码，虽然计算机能够正确识别并运行，但是晦涩难懂的代码不方便以后维护
6、函数返回统一类型
虽然JavaScript是弱类型的，对于函数来说，前面返回整数型数据，后面返回布尔值在编译和运行都可以正常通过，但为了规范和以后维护时容易理解，应保证函数应返回统一的数据类型
7、总是检查数据类型
要检查你的方法输入的所有数据，一方面是为了安全性，另一方面也是为了可用性。用户随时随地都会输入错误的数据。这不是因为他们蠢，而是因为他们很忙，并且思考的方式跟你不同。用typeof方法来检测你的function接受的输入是否合法
8、何时用单引号，何时用双引号
虽然在JavaScript当中，双引号和单引号都可以表示字符串, 为了避免混乱，我们建议在HTML中使用双引号，在JavaScript中使用单引号，但为了兼容各个浏览器，也为了解析时不会出错，定义JSON对象时，最好使用双引号
9、部署
- 用JSLint运行JavaScript验证器来确保没有语法错误或者是代码没有潜在的问
- 部署之前推荐使用压缩工具将JS文件压缩
- 文件编码统一用UTF-8
JavaScript 程序应该尽量放在 .js 的文件中，需要调用的时候在 HTML 中以 <script src="http://www.mamicode.com/filename.js"> 的形式包含进来。JavaScript 代码若不是该 HTML 文件所专用的，则应尽量避免在 HTML 文件中直接编写 JavaScript 代码。因为这样会大大增加 HTML 文件的大小，无益于代码的压缩和缓存的使用。另外，<script src="http://www.mamicode.com/filename.js"> 标签应尽量放在文件的后面,最好是放在</body>标签前。这样会降低因加载 JavaScript 代码而影响页面中其它组件的加载时间。
永远不要忽略代码优化工作，重构是一项从项目开始到结束需要持续的工作，只有不断的优化代码才能让代码的执行效率越来越好
学习javascript总结下来的性能优化的小知识（二）