Be Prepared before writing code[9:35]

Understand how V8 optimzes Javascript;

Write code mindfully;

Learn you tools and how they can help you;

Be Prepared - Hidden Classes[10:30]

Hidden Classes Make JavaScript Faster.

(注:Hidden Class 可以理解为VM内部实现对描述抽象类的描述,共享隐藏类才能让VM更高效)

Limit Compile-time type information

It's expensive to reason about JavaScript types at compile time...

  • V8 internally creates hidden classes for objects at runtime.
  • Objects with the same hidden class can use the same optimzed generated code.

Initialize all object members in constructor functions;

Always Initialize members in the same order;

(If you add members in different orders, you create a different tree of hidden classes.

And at the end, you'll have objects with two different hidden classes that can't use the same optimized code)

Be Prepared - Numbers[15:30]

We use a technique called tagging. So inside of V8 we pass around values of 32-bit numbers and objects.

But we want to be able to use the same 32 bits to represent both. And that way we can have one code path that can handle, in many cases, the objects and integers. So what we do is we use the bottom bit.

And each of the values have s special meaning. If the bit is se, it's an object pointer. If it's clear, it's what we call small integer or smi. And that's a 31-bit signed integer. Now if you have a numeric value that you're passing around, assigning to a member that is bigger -it's a numeric value that's bigger than 31 signed bits - then it doesn't fit in one of these smis. And we have to create what's called a box for it. We box the number. We turn it into a double and we create a new object to put that number inside of it. And what follows from that is the next speed trap to avoid, which is make sure, whenever possible, you use 31-bit signed numbers for performance critical calculations.

Prefer numberic values that can be represented as 31-bit signed integers.

Be prepared - Arrays[17:25]

  • Fast Elements: linear storage for compact key sets.
  • Dictionary Elements: hash table storage otherwise.

Use contiguous keys starting at 0 for Arrays. (

Don't pre-allocate large Arrays(e.g. > 64K elements) to their maxium size, instead grow as you go.

Don't delete elements in arrays, especially numberic arrays.

Double Array Unboxing

  • Array's hidden class tracks elements types
  • Arrays contraining only doubles are unboxed
  • Unboxing causes hidden class change

Initialize using array literals for small fixed-sized arrays

Preallocate small arrays to correct size before using them

Don't store non-numeric values(objects) in numeric arrays

Be prepared - Full Compiler[26:36]

V8 has tow compilers

  • "Full" compiler can generate good code for any Javascript
  • Optimizing compiler produces great code for most JavaScript

"Full" compiler Starts Executing Code ASAP

  • Quickly generates good but not great JIT code
  • Assumes(almost) nothing about types at compilation time
  • Uses Inline Caches(or ICs) to refine knowledge about types while program runs

Inline Caches(ICs) handle Types Efficiently

  • Type-dependent code for operations
  • Validate type assumptions first, then do work
  • Change at runtime via backpathcing as more types are discovered

Monomorphic Better Than Polymophic

  • Operations are monomophic if the hidden class is always the same
  • Otherwise they are polymorphic
function add(x,y) {
 return x + y;

add(1,2);         //+ in add is monomorphic
add("a", "b")    //+ in add becomes polymorphic

Prefer monomorphic over polymorphic whenever is possible.

Type Feedback Makes Code Faster

  • Types taken from ICs
  • Operations speculatively get inlined
  • Monomophic functions and constructors can be inlined entirely
  • Inlininig enables other optimizations

Logging What Gets Optimized

d8 --trace-opt prime.js

logs names of optimized functions to stdout

Not Everything Can Be Optimized

Some features prevent the optimizing compiler from running(a "bail-out")

Avoid the speed trap

Optimizing compiler "bail-out" on functions with try{} catch{} blocks.

Maximizing Performance With Exceptions

function perf_sensitive() {
  //Do performance-sensitive work here
} catch(e) {
 //handle exceptions here

How to Find Bailouts

d8 --trace-bailout prime.js

logs optimizing compiler bailouts

Invalid assumptions lead to deoptimization[37:55]


  • ...throws away optimized code
  • ...resumes execution at the right place in "full" compiler code
  • Reoptimization might be triggered again later, but for the short term, execution slows down.

Passing V8 Options to Chrome

"/Applicaitons/Google Chrome.app/Contents/MacOS/Google Chrome" \--js-flags="--trace-opt --trace-deopt --trace-bailout"

Avoid the speed trap

Avoid hidden class changes in functions after they are optimized

Identify and Understand[39:50]

"Identify and Understand" for V8

  • Ensure problem is JavaScript
  • Reduce to pure JavaScript(no DOM!)
  • Collect metrics
  • Locate bottleneck(s)

Prime Generator -- Profile It

%out/ia32.release/d8 prime.js --prof


using teh built-in sampling profiler

  • Takes sampe every millisecond
  • Writes v8.log

What to expect from the primes Code

function Primes() {
this.addPrime = function(i) {
  this.primes[this.prime_count++] = i;

this.isPrimeDivisible = function(candidate) {
  for(var i = 1; i <= this.prime_count; ++i) {
    if(candidate % this.primes[i]) == 0) {
      return true;
  return false;

function main() {
  p = new Primes();
  var c = 1;
  while (p.getPrimeCount() < 25000) {
    if(!p.isPrimeDivisible(c)) {

Prediction: Most Time Spent in main

  • All properties and functions monomorphic
  • All numeric operations are SMIs
  • All functions can be inlined
  • No deoptimizations or bailouts

(输出省略 @42:50)

Can you spot the bug?

this.isPrimeDivisible = function(candidate) {
  for(var i = 1 ; i <= this.prime_count; ++i) {
    if (candidate % this.primes[i] == 0) return true;  
  return false;

(Hint: primes is an array of length prime_count)

% out/ia32.release/d8 primes-2.js --prof


JavaScript is 60% faster than C++


% g++ primes.cc -o primes
% time ./primes

real  0m2.955s
user  0m2.952s
sys   0m.001s


% .js

real 0m1.829s
user 0m1.827s
sys  0m0.010s

JavaScript is 17% slower than optimized C++

Fix What Matters[49:59]

Optimize Your Algorithm

this.isPrimeDivisible = function(candidate) {
  for(var i = 1 ; i < this.prime_count; ++i) {
    var current_prime = this.primes[i];
    if(current_prime*current_prime > candidate){
      return false;
    if (candidate % this.primes[i] == 0) return true;  
  return false;

Final Results


That's more than a 350x Speed-up!

Keep Your Eyes on the Road

  • Be prepared
  • Identify and Understand the Crux
  • Fix What matters

JavaScript 性能优化 --By Google V8 Team Manager的更多相关文章

  1. JavaScript性能优化

    如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...

  2. javascript性能优化-repaint和reflow

    repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲 ...

  3. 摘:JavaScript性能优化小知识总结

    原文地址:http://www.codeceo.com/article/javascript-performance-tips.html JavaScript的性能问题不容小觑,这就需要我们开发人员在 ...

  4. Javascript 性能优化的一点技巧

    把优秀的编程方式当成一种习惯,融入到日常的编程当中.下图是今天想到的一点Javascript 性能优化的技巧,分享一下,抛砖引玉.

  5. JavaScript性能优化:度量、监控与可视化1

    HTTP事务所需要的步骤: 接下来,浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接,类似对讲机的Over(完毕) Roger(明白) TCP/IP模型 TCP即传输控制协议( ...

  6. JavaScript性能优化 DOM编程

    最近在研读<高性能JavaScript>,在此做些简单记录.示例代码可在此处查看到. 一.DOM 1)DOM和JavaScript 文档对象模型(DOM)是一个独立于语言的,用于操作XML ...

  7. javascript性能优化:创建javascript无阻塞脚本

    javaScript 在浏览器中的运行性能,在web2.0时代显得尤为重要,成千上万行javaScript代码无疑会成为性能杀手, 在较低版本的浏览器执行JavaScript代码的时候,由于浏览器只使 ...

  8. javascript性能优化总结一(转载人家)

    一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于 ...

  9. JavaScript 性能优化1

    一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于 ...


  1. 前台给后台传JSON字符串,后台解析并保存

    前台 function BMSure() { var DanWeiName = $("[id$='BusinessName']").val(); var Address = $(& ...

  2. Unity3D中以任意格式获取时间(C# .net也可用)

    最近楼主在开发中遇到了一个小问题 需要保存截图,同时把时间作为截图的名字存储 时间的保存格式为 2016-12-08 13:15:00 保存截图的流程就不说了,这篇博客只说一下以任意的格式保存时间. ...

  3. Hackerrank Going to the Office

    传送门 Problem Statement Ms.Kox enjoys her job, but she does not like to waste extra time traveling to ...

  4. javascript高级程序设计---Event对象二

    鼠标事件 事件种类 鼠标事件指与鼠标相关的事件,主要有以下一些. (1)click事件 click事件当用户在Element节点.document节点.window对象上,单击鼠标(或者按下回车键)时 ...

  5. miniui设置边框的方法

    if (field == "loginname") { if (record._id == 2) { e.cellHtml = ""; e.cellStyle ...

  6. node.js基础 1之基本概念常识

    node.js 好牛逼的样子哦 很火,很腻害~~~~ 有关node.js的版本常识: 一般用最新的稳定版本,非稳定版本用于测试,其中包括api的不稳定等. 起一个web服务器: ndoejs可以自定义 ...

  7. MySQL表分区技术

    MySQL表分区技术 MySQL有4种分区类型: 1.RANGE 分区 - 连续区间的分区 - 基于属于一个给定连续区间的列值,把多行分配给分区: 2.LIST 分区 - 离散区间的分区 - 类似于按 ...

  8. HTML5图片旋转

    HTML5图片旋转 首先我们使用Cococs2dx-Js-Lite版,来创建一个工程,我们所需要的开发环境如下: 1,webstrom 2,google chrome浏览器 3,cocos2dx-Js ...

  9. hdu1561 树形dp + 背包

    #include<cstdio> #include<cstring> #include<iostream> #define INF 999999999 using ...

  10. postgresql 函数demo

    create or replace function refresh_product_usage() returns void as $$ declare rec record; sub_rec re ...