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. Linux哲学思想--基本法则

    1.一切皆文件: 2.单一目的的小程序: 3.组合小程序完成复杂任务: 4.文本文件保存配置信息: 5.尽量避免捕获用户接口: 6.提供机制,而非策略. 自从Linux一诞生就注定了其成为经典的命运. ...

  2. Tomcat使用详解

    Tomcat简介 官网:http://tomcat.apache.org/ Tomcat GitHub 地址:https://github.com/apache/tomcat Tomcat是Apach ...

  3. 【转】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  4. C++求一个十进制的二进制中1的个数

    int oneNumInBinary(int n){ ; while(n){ n = n&(n-); cnt++; } return cnt; }

  5. 【转】C#使用ESC指令控制POS打印机打印小票

    .前言 C#打印小票可以与普通打印机一样,调用PrintDocument实现.也可以发送标注你的ESC指令实现.由于 调用PrintDocument类时,无法操作使用串口或TCP/IP接口连接的pos ...

  6. 安装Docker Toolbox后出现的问题

    Installing Docker Toolbox on Windows with Hyper-V Installed Installing Docker on Windows is a fairly ...

  7. wordnet的一些入门性介绍

    关于wordnet的介绍很多,中英文都有,我这里主要是参考了别人的.自己组织了一下. 1.简介 1.1关于词典 Wordnet是一个由普林斯顿大学认识科学实验室在心理学教授乔治·A·米勒的指导下建立和 ...

  8. 利用Spring创建定时任务

    啊Spring Task看似很简单的感觉,但是自己搞起来还是花了蛮大的精力的,因为以前没接触过这个东西,所有当任务交给我的时候,我是一头的雾水的.然后我就各种查资料.其中我印象最深的是版本的问题和架包 ...

  9. Tomcat部署问题

    一.无法部署,访问路径报404错误,在tomcat的页面的manager app中无法启动,提示:FAIL - Application   could not....: 重新更改web.xml之后就正 ...

  10. 移动h5自适应布局

    问题一,分辨率Resolution适配:不同屏幕宽度,html元素宽高比和字体大小,元素之间的距离自适应,使用rem单位. 问题二,单位英寸像素数PPI适配:使用rem单位,文字会发虚.段落文字,使用 ...