JavaScript常用优化分享（三）

JavaScript前端开发：HTML+CSS+JS三者结合理解 #生活技巧# #工作学习技巧# #编程语言学习路径#

这篇文章主要介绍内存管理、松散耦合、性能方面的一些小知识、为避免错误应该注意的点。

（一）内存管理： 1、循环引用

如果循环引用中包含DOM对象或者ActiveX对象，那么就会发生内存泄露。内存泄露的后果是在浏览器关闭前，即使是刷新页面，这部分内存不会被浏览器释放。
简单的循环引用：

var el = document.getElementById('MyElement'); var func = function () { //… } el.func = func; func.element = el; 1234

但是通常不会出现这种情况。通常循环引用发生在为dom元素添加闭包作为expendo的时候。

function init() { var el = document.getElementById('MyElement'); el.onclick = function () { //…… } } init(); 12345

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(); 1

将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(); 1 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(); 1

把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); } } 1 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、使用包含内联代码的

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); 123 （四）避免错误应注意的地方： 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 1 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" 1 5、不要使用生偏语法

不要使用生偏语法，写让人迷惑的代码，虽然计算机能够正确识别并运行，但是晦涩难懂的代码不方便以后维护

6、函数返回统一类型

虽然JavaScript是弱类型的，对于函数来说，前面返回整数型数据，后面返回布尔值在编译和运行都可以正常通过，但为了规范和以后维护时容易理解，应保证函数应返回统一的数据类型

7、总是检查数据类型

要检查你的方法输入的所有数据，一方面是为了安全性，另一方面也是为了可用性。用户随时随地都会输入错误的数据。这不是因为他们蠢，而是因为他们很忙，并且思考的方式跟你不同。用typeof方法来检测你的function接受的输入是否合法

8、何时用单引号，何时用双引号

虽然在JavaScript当中，双引号和单引号都可以表示字符串, 为了避免混乱，我们建议在HTML中使用双引号，在JavaScript中使用单引号，但为了兼容各个浏览器，也为了解析时不会出错，定义JSON对象时，最好使用双引号

9、部署

- 用JSLint运行JavaScript验证器来确保没有语法错误或者是代码没有潜在的问题 - 部署之前推荐使用压缩工具将JS文件压缩 - 文件编码统一用UTF-8 - JavaScript 程序应该尽量放在 .js 的文件中，需要调用的时候在 HTML 中以 <script src="filename.js"> 的形式包含进来。JavaScript 代码若不是该 HTML 文件所专用的，则应尽量避免在 HTML 文件中直接编写 JavaScript 代码。因为这样会大大增加 HTML 文件的大小，无益于代码的压缩和缓存的使用。另外，<script src="filename.js"> 标签应尽量放在文件的后面,最好是放在</body>标签前。这样会降低因加载 JavaScript 代码而影响页面中其它组件的加载时间。 1234

网址：JavaScript常用优化分享（三） https://www.yuejiaxmz.com/news/view/201468

相关内容

自动化技术：用JavaScript打造轻松生活
JavaScript作用域
有个开发者总结这 15 优雅的 JavaScript 个技巧
script type=“text/JavaScript”是什么
javascript中等于（==）与全等（===）的区别说明
优化扬声器组件的三个例子分享
JavaScript 中，num = num
Javascript中点击（click）事件的3种写法
推荐几款常用Web自动化测试神器！
Javascript基础第六天知识点以及案例：作用域、JS预解析、对象

随便看看