编写高性能JavaScript

来源：懂视网责编：小采时间：2020-11-27 20:24:49

编写高性能JavaScript

编写高性能JavaScript: 很多JavaScript引擎，如Google的V8引擎（被Chrome和Node所用），是专门为需要快速执行的大型JavaScript应用所设计的。如果你是一个开发者，并且关心内存使用情况与页面性能，你应该了解用户浏览器中的JavaScript引擎是如何运作的。无论是V8，Spide

推荐度：

点击下载本文 文档为doc格式

导读编写高性能JavaScript: 很多JavaScript引擎，如Google的V8引擎（被Chrome和Node所用），是专门为需要快速执行的大型JavaScript应用所设计的。如果你是一个开发者，并且关心内存使用情况与页面性能，你应该了解用户浏览器中的JavaScript引擎是如何运作的。无论是V8，Spide

　　在文章中，Derick涵盖了许多使用Backbone.js时的常见内存缺陷，以及如何解决这些问题。

　　Felix Geisend?rfer的在Node中调试内存泄漏的教程也值得一读，尤其是当它形成了更广泛SPA堆栈的一部分。

　　减少回流（REFLOWS）

　　当浏览器重新渲染文档中的元素时需要重新计算它们的位置和几何形状，我们称之为回流。回流会阻塞用户在浏览器中的操作，因此理解提升回流时间是非常有帮助的。

　　回流时间图表

　　你应该批量地触发回流或重绘，但是要节制地使用这些方法。尽量不处理DOM也很重要。可以使用DocumentFragment，一个轻量级的文档对象。你可以把它作为一种方法来提取文档树的一部分，或创建一个新的文档“片段”。与其不断地添加DOM节点，不如使用文档片段后只执行一次DOM插入操作，以避免过多的回流。

　　例如，我们写一个函数给一个元素添加20个p。如果只是简单地每次append一个p到元素中，这会触发20次回流。

function addps(element) {
 var p;
 for (var i = 0; i < 20; i ++) {
 p = document.createElement('p');
 p.innerHTML = 'Heya!';
 element.appendChild(p);
 }
}

　　要解决这个问题，可以使用DocumentFragment来代替，我们可以每次添加一个新的p到里面。完成后将DocumentFragment添加到DOM中只会触发一次回流。

function addps(element) {
 var p;
 // Creates a new empty DocumentFragment.
 var fragment = document.createDocumentFragment();
 for (var i = 0; i < 20; i ++) {
 p = document.createElement('a');
 p.innerHTML = 'Heya!';
 fragment.appendChild(p);
 }
 element.appendChild(fragment);
}

　　可以参阅 Make the Web Faster，JavaScript Memory Optimization 和 Finding Memory Leaks。

　　JS内存泄漏探测器

　　为了帮助发现JavaScript内存泄漏，谷歌的开发人员（(Marja H?ltt?和Jochen Eisinger）开发了一种工具，它与Chrome开发人员工具结合使用，检索堆的快照并检测出是什么对象导致了内存泄漏。

　　一个JavaScript内存泄漏检测工具

　　有完整的文章介绍了如何使用这个工具，建议你自己到内存泄漏探测器项目页面看看。

　　如果你想知道为什么这样的工具还没集成到我们的开发工具，其原因有二。它最初是在Closure库中帮助我们捕捉一些特定的内存场景，它更适合作为一个外部工具。

　　V8优化调试和垃圾回收的标志位

　　Chrome支持直接通过传递一些标志给V8，以获得更详细的引擎优化输出结果。例如，这样可以追踪V8的优化：

"/Applications/Google Chrome/Google Chrome" --js-flags="--trace-opt --trace-deopt"

　　Windows用户可以这样运行 chrome.exe –js-flags=”–trace-opt –trace-deopt”

　　在开发应用程序时，下面的V8标志都可以使用。

trace-opt —— 记录优化函数的名称，并显示跳过的代码，因为优化器不知道如何优化。

trace-deopt —— 记录运行时将要“去优化”的代码。

trace-gc —— 记录每次的垃圾回收。

　　V8的处理脚本用*（星号）标识优化过的函数，用~（波浪号）表示未优化的函数。

　　如果你有兴趣了解更多关于V8的标志和V8的内部是如何工作的，强烈建议阅读Vyacheslav Egorov的excellent post on V8 internals。

　　HIGH-RESOLUTION TIME 和 NAVIGATION TIMING API

　　高精度时间（HRT）是一个提供不受系统时间和用户调整影响的亚毫秒级高精度时间接口，可以把它当做是比 new Date 和 Date.now()更精准的度量方法。这对我们编写基准测试帮助很大。

　　高精度时间（HRT）提供了当前亚毫秒级的时间精度

　　目前HRT在Chrome（稳定版）中是以window.performance.webkitNow()方式使用，但在Chrome Canary中前缀被丢弃了，这使得它可以通过window.performance.now()方式调用。Paul Irish在HTML5Rocks上了关于HRT更多内容的文章。

　　现在我们知道当前的精准时间，那有可以准确测量页面性能的API吗？好吧，现在有个Navigation Timing API可以使用，这个API提供了一种简单的方式，来获取网页在加载呈现给用户时，精确和详细的时间测量记录。可以在console中使用window.performance.timing来获取时间信息：