高效编写JavaScript代码的技巧
如何能高效的编写出优秀的JavaScript代码,有哪些技巧?下面YJBYS小编为你介绍!
原则
不要做任何优化除非的确需要优化
任何的性能优化都必须以测量数据为基础,如果你怀疑代码存在性能问题,首先通过测试来验证你的想法。
性能优化三问
我还能做哪些工作从而让代码变得更有效率?
流行的JavaScript引擎通常会做哪些优化工作?
哪些优化是JavaScript引擎不能做的,垃圾回收器是否能清理我们期望清理的?
对JavaScript引擎的深入了解有助于我们编写高效的JavaScript代码,但不要只针对某一特定引擎做性能优化。
V8的几个关键概念
基础编译器,解析你的JavaScript代码并生成Native Machine Code执行,而不是执行字节码或是直接对JavaScript解释执行。
在V8中,对象以object model的形式存在。对象在JavaScript中是以关联数组的形式存在,但V8采用的是Hidden
Classes——一种对查找操作进行了优化的内部类型系统。
运行时探查器监视运行中的系统,并识别出Hot functions,即是耗用了较长时间的代码
优化编译器重新编译并优化由运行时探查器识别出来的Hot代码
V8支持反优化,优化编译器能够发现过度优化的`代码并对其进行处理
V8有自己的垃圾回收器
垃圾回收垃圾回收是一种内存管理机制,垃圾回收器会尝试清理掉不再被使用的对象,并回收内存。
在绝大多数情况下都不需要手动解除引用
你不可能强制垃圾回收器工作
删除引用的误区
尽可能不要使用delete,在下面的列子中,delete 带来的弊远远大于利
var o = { x: 1};delete o.x;
主要的原因是为了避免在运行时修改Hot对象的结构,因为固定的对象结构有助于JavaScript引擎对其进行优化,而delete会导致对象结构改变。
另外一个误区是将对象设置为null,将对象设置为null不会删除对象,只是将对象指向null,这要好过采用delete,但通常也是不必要的。
全局变量在整个页面生命周期中都是不会被清理的,无论页面打开多长时间,除非是刷新页面或者转到其他页面。局部变量(Function-scoped)在方法执行完后,且没有被引用的情况下将会被回收。
所以,请尽量避免使用全局变量。
经验法则为了使垃圾回收器尽早回收对象,不要保持不必要的对象引用。
比手动解除引用更好的方法是将对象放在合适的变量域中,能用局部变量就不要采用全局变量
当事件监听不再需要时,请解除事件绑定,尤其是当事件绑定的DOM对象被删除时
如果有使用本地缓存,请确保有合适的清理机制(比如时效机制),从而避免大量无用的数据存储。
方法 (Function)
如前面所说,垃圾回收器只有在对象不可触及的时候才会对其做回收处理。考虑如下两个列子:
function foo(){
var bar = new LargeObject()
bar.someCall();}
function foo(){
var bar = new LargeObject()
bar.someCall();
return bar;}var b = foo();
在第一个例子中,bar指向的对象会在方法执行完毕后处于可回收状态;在第二个列子中,由于在局部变量外维护了一个全局变量b,bar指向的对象无法被回收。
闭包 (Closures)
当一个方法返回一个内部方法时,被返回的内部方法能访问外部方法的局部变量域即使外部方法已经执行完毕。
function sum(x){
function sumIt(y){
return x + y;
}}var sumA = sum(4);var sumB = sumA(3);
在上面的例子中,sumIt方法即使处于sum的局部变量域中,但由于存在一个sumA全局变量,在sum执行完毕后也无法被回收。再看两个例子
var a = function(){
var largeObj = new LargeObject();
return function(){
return largeObj;
}}();var a = function(){
var smallObj = new SmallObj();
var largeObj = new LargeObj();
return function(n){
return smallObj;
}}();
第一个例子中,largeObj可以通过变量a访问,因此不可被回收;在第二个例子中,方法一旦执行完毕,largeObj就无法被访问了,因此处于可回收状态。
定时器 (Timer)在setTimeout / setInterval方法中的引用,只有当定时器执行完成后才能被回收。
V8优化小贴士
某些行为会导致V8停止优化工作,比如try-catch,为了能弄清哪些代码可以被优化,哪些不能,你可以在V8命令行工具中使用—trace-opt file.js获得有用的信息。
如果你在意速度,那就尽可能保证你的方法是”单形的(monomophic)"
不要做类似如下的尝试
function add(x, y){
return x+y;}add(1,2);add('a','b');add(my_custom_object, undefined);
不要加载没有被初始化或者已被删除的元素,尽管在输出上没有不同,但却会让代码变得更慢
不要写大方法,因为他们很难被优化。
对象还是数组, 如何选择?
如果存储的是大量数字,或者是相同类型的对象列表,采用数组;
如果根据语义你需要一个有很多属性的对象,那就采用对象,在内存利用方面这会很高效,同时也很快;
无论是数组还是对象,采用整数索引都最快的。
var sum = 0;for (var x=0; x
sum + = arr[x].payload;}
var sum = 0;for(var x in obj){
sum += obj[x].payload;}
var sum = 0;for(var x=0; x<1000,++x){
sum += obj[x].payload;}
var sum = 0;var keys = Objects.keys(obj);for(var x=0; x
sum += obj[keys[x]].payload;}
在上面的四段代码中,第一段和第三段速度比第二段和第四段要快很多。其中,第一段代码执行最快,最后一段代码执行最慢。
相比数组中的元素,对象的属性在结构上相对复杂。在引擎层面,内存中越是简单的结构越容易被优化,尤其是包含数字的数组。因此,如果你需要向量,采用数组而不是一个包含x,y, z属性的对象会有更优的性能表现。