编写高性能javascript

2023-08-21    分类: 网站建设

百度权重查询 站长交易 友情链接交换 网站监控 服务器监控 seo监控

许多javascript引擎,如Google的V8引擎(被Chrome和Node所用),是专门为需要快速执行的大型javascript应用所设计的。假如你是一个开发者,并且关心内存使用情况与页面性能,你应该了解用户浏览器中的javascript引擎是如何运作的。无论是V8,SpiderMonkey的(Firefox)的Carakan(Opera),Chakra(IE)或其他引擎,这样做可以帮助你更好地优化你的应用程序。这并不是说应该专门为某一浏览器或引擎做优化,万万别这么做。

但是,你应该问自己几个问题:

•在我的代码里,是否可以使代码更高效一些

•主流的javascript引擎都做了哪些优化

•什么是引擎无法优化的,垃圾回收器(GC)是否能回收我所期望的东西

加载快速的网站就像是一辆快速的跑车,需要用到特殊定制的零件

编写高性能代码时有一些常见的陷阱,在这篇文章中,我们将展示一些经过验证的、更好的编写代码体例。

那么,javascript在V8里是如何工作的?

假如你对JS引擎没有较深的了解,开发一个大型Web应用也没啥问题,就好比会开车的人也只是看过引擎盖而没有看过车盖内的引擎一样。鉴于Chrome是我的浏览器,所以谈一下它的javascript引擎。V8是由以下几个核心部分组成:

•一个基本的编译器,它会在代码执行前解析javascript代码并生成本地机器码,而不是执行字节码或简单地诠释它。这些代码好开始并不是高度优化的。

•V8将对象构建为对象模型。在javascript中对象体现为关联数组,但是在V8中对象被看作是隐藏的类,一个为了优化查询的内部类型系统。

•运行时分析器监视正在运行的系统,并标识了“hot”的函数(例如花费很长时间运行的代码)。

•优化编译重视新编译和优化那些被运行时分析器标识为“hot”的代码,并进行“内联”等优化(例如用被调用者的主体替代函数调用的位置)。

•V8支撑去优化,这意味着优化编译器假如发现对于代码优化的假设过于乐观,它会舍弃优化过的代码。

•V8有个垃圾收集器,了解它是如何工作的和优化javascript一样主要。

垃圾回收

垃圾回收是内存管理的一种形式,其实就是一个收集器的概念,尝试回收不再被使用的对象所占用的内存。在javascript这种垃圾回收语言中,应用程序中仍在被引用的对象不会被消灭。

手动消弭对象引用在大多数情况下是没有需要的。通过简单地把变量放在需要它们的地方(理想情况下,尽可能是局部作用域,即它们被使用的函数里而不是函数外层),一切将运作地很好。

垃圾回收器尝试回收内存

在javascript中,是不可能强制进行垃圾回收的。你不应该这么做,因为垃圾收集过程是由运行时控制的,它知道什么是好好的清理时机。

“消弭引用”的误解

网上有许多关于javascript内存回收的讨论都谈到delete这个关键字,虽然它可以被用来删除对象(map)中的属性(key),但有部分开发者认为它可以用来强制“消弭引用”。建议尽可能避免使用delete,在下面的例子中delete o.x 的弊大于利,因为它改变了o的隐藏类,并使它成为一个"慢对象"。

var o = { x:1 };

delete o.x; // true

o.x; // undefined

你会很容易地在流行的JS库中找到引用删除——这是具有语言目的性的。这里需要注重的是避免在运行时修改”hot”对象的结构。javascript引擎可以检测出这种“hot”的对象,并尝试对其进行优化。假如对象在生命周期中其结构没有较大的改变,引擎将会更容易优化对象,而delete操作现实上会触发这种较大的结构改变,因此不利于引擎的优化。

对于null是如何工作也是有误解的。将一个对象引用设置为null,并没有使对象变“空”,只是将它的引用设置为空而已。使用o.x= null比使用delete会更好些,但可能也不是很需要。

var o = { x:1 };

o = null;

o; // null

o.x // TypeError

假如此引用是当前对象的好后引用,那么该对象将被作为垃圾回收。假如此引用不是当前对象的好后引用,则该对象是可访问的且不会被垃圾回收。

另外需要注重的是,全局变量在页面的生命周期里是不被垃圾回收器清理的。无论页面打开多久,javascript运行时全局对象作用域中的变量会一向存在。

var myGlobalNamespace = {};

全局对象只会在刷新页面、导航到其他页面、关闭标签页或退出浏览器时才会被清理。函数作用域的变量将在超出作用域时被清理,即退出函数时,已经没有任何引用,这样的变量就被清理了。

经验法则

为了使垃圾回收器尽早收集尽可能多的对象,不要hold着不再使用的对象。这里有几件事需要记住:

•正如前面提到的,在合适的范围内使用变量是手动消弭引用的更好选择。即一个变量只在一个函数作用域中使用,就不要在全局作用域声明它。这意味着更干净省心的代码。

•确保解绑那些不再需要的事件监听器,尤其是那些即将被销毁的DOM对象所绑定的事件监听器。

•假如使用的数据缓存在本地,确保清理一下缓存或使用老化机制,以避免大量不被重用的数据被存储。

函数

接下来,我们谈谈函数。正如我们已经说过,垃圾收集的工作原理,是通过回收不再是访问的内存块(对象)。为了更好地说明这一点,这里有一些例子。

function foo(){

var bar = new LargeObject();

bar.someCall();

}

当foo返回时,bar指向的对象将会被垃圾收集器主动回收,因为它已没有任何存在的引用了。

对比一下:

function foo(){

var bar = new LargeObject();

bar.someCall();

return bar;

}

// somewhere else

var b = foo();

现在我们有一个引用指向bar对象,这样bar对象的生存周期就从foo的调用一向持续到调用者指定别的变量b(或b超出范围)。

闭包(CLOSURES)

当你看到一个函数,返回一个内部函数,该内部函数将获得范围外的访问权,即使在外部函数执行之后。这是一个基本的闭包 —— 可以在特定的上下文中设置的变量的表达式。例如:

function sum (x){

function sumIt(y){

return x + y;

};

return sumIt;

}

// Usage

var sumA = sum(4);

var sumB = sumA(3);

console.log(sumB); // Returns 7

在sum调用上下文中生成的函数对象(sumIt)是无法被回收的,它被全局变量(sumA)所引用,并且可以通过sumA(n)调用。

让我们来看看另外一个例子,这里我们可以访问变量largeStr吗?

var a = function (){

var largeStr = new Array(1000000).join(‘x’);

return function (){

return largeStr;

};

}();

是的,我们可以通过a()访问largeStr,所以它没有被回收。下面这个呢?

var a = function (){

var smallStr = ‘x’;

var largeStr = new Array(1000000).join(‘x’);

return function (n){

return smallStr;

};

}();

我们不能再访问largeStr了,它已经是垃圾回收候选人了。【译者注:因为largeStr已不存在外部引用了】

准时器

好糟的内存泄露地方之一是在循环中,或者在setTimeout()/ setInterval()中,但这是相当常见的。思考下面的例子:

var myObj = {

callMeMaybe:function (){

var myRef = this;

var val = setTimeout(function (){

console.log(‘Time is running out!’);

myRef.callMeMaybe();

},1000);

}

};

假如我们运行myObj.callMeMaybe();来启动准时器,可以看到控制台每秒打印出“Time is running out!”。假如接着运行myObj = null,准时器依旧处于激活状况。为了能够持续执行,闭包将myObj传递给setTimeout,这样myObj是无法被回收的。相反,它引用到myObj的因为它捕捉了myRef。这跟我们为了保持引用将闭包传给其他的函数是一样的。

同样值得牢记的是,setTimeout/setInterval调用(如函数)中的引用,将需要执行和完成,才可以被垃圾收集。

当心性能陷阱

永远不要优化代码,直到你真正需要。现在经常可以看到一些基准测试,显示N比M在V8中更为优化,但是在模块代码或应用中测试一下会发现,这些优化真正的效果比你期望的要小的多。

做的过多还不如什么都不做.

比如我们想要创建这样一个模块:

•需要一个本地的数据源包含数字ID

•绘制包含这些数据的表格

•添加事件处理程序,当用户点击的任何单元格时切换单元格的css class

这个问题有几个不同的因素,虽然也很容易解决。我们如何存储数据,如何高效地绘制表格并且append到DOM中,如何更优地处理表格事件?

面对这些问题好开始(无邪)的做法是使用对象存储数据并放入数组中,使用jQuery遍历数据绘制表格并append到DOM中,好后使用事件绑定我们期望地点击行为。

注重:这不是你应该做的

var moduleA = function (){

return {

data:dataArrayObject,

init:function (){

this.addTable();

this.addEvents();

},

addTable:function (){

for (var i = 0; i <rows; i++){

$tr = $(‘<tr></tr>’);

for (var j = 0; j <this.data.length; j++){

$tr.append(‘<td>’ + this.data[j][‘id’]+ ‘</td>’);

}

$tr.appendTo($tbody);

}

},

addEvents:function (){

$(‘table td’).on(‘click’,function (){

$(this).toggleClass(‘active’);

});

}

};

}();

这段代码简单有用地完成了义务。

但在这种情况下,我们遍历的数据只是本应该简单地存放在数组中的数字型属性ID。有趣的是,直接使用DocumentFragment和本地DOM方法比使用jQuery(以这种体例)来生成表格是更优的选择,当然,事件代理比单独绑定每个td具有更高的性能。

要注重虽然jQuery在内部使用DocumentFragment,但是在我们的例子中,代码在循环内调用append并且这些调用涉及到一些其他的小知识,因此在这里起到的优化作用不大。希望这不会是一个痛点,但请务必进行基准测试,以确保自己代码ok。

对于我们的例子,上述的做法带来了(期望的)性能提拔。事件代理对简单的绑定是一种改进,可选的DocumentFragment也起到了助推作用。

var moduleD = function (){

return {

data:dataArray,

init:function (){

this.addTable();

this.addEvents();

},

addTable:function (){

var td,tr;

var frag = document.createDocumentFragment();

var frag2 = document.createDocumentFragment();

for (var i = 0; i <rows; i++){

tr = document.createElement(‘tr’);

for (var j = 0; j <this.data.length; j++){

td = document.createElement(‘td’);

td.appendChild(document.createTextNode(this.data[j]));

frag2.appendChild(td);

}

tr.appendChild(frag2);

frag.appendChild(tr);

}

tbody.appendChild(frag);

},

addEvents:function (){

$(‘table’).on(‘click’,‘td’,function (){

$(this).toggleClass(‘active’);

});

}

};

}();

网站标题:编写高性能javascript
路径分享:https://www.cdcxhl.com/news34/277584.html

成都网站建设公司_创新互联,为您提供微信公众号外贸建站品牌网站建设手机网站建设移动网站建设App开发

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

h5响应式网站建设