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. vue2.0构建淘票票webapp

    项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...

  2. SSRS(rdl报表)分页显示表头和对表头的冻结处理

    基础环境 最近在公司做西门子某系统的二次开发,需要用到SQLServer Reporting Services(SSRS).我们用的SQL版本是SQLServer 2008 R2:在设计报表时,表格用 ...

  3. [翻译]Apache Spark入门简介

    原文地址:http://blog.jobbole.com/?p=89446 我是在2013年底第一次听说Spark,当时我对Scala很感兴趣,而Spark就是使用Scala编写的.一段时间之后,我做 ...

  4. C++的隐式类型转换与转换操作符

    C++标准允许隐式类型转换,即对特定的类,在特定条件下,某些参数或变量将隐形转换成类对象(创建临时对象).如果这种转换代价很大(调用类的构造函数),隐式转换将影响性能.隐式转换的发生条件:函数调用中, ...

  5. 前端easyui的简化调用

    easyui近期一直都比较流行,虽然它在效果上被extjs爆了,它的使用难度低,在IE6下表现不错,的确受到了广泛企业程序员的好评. 但是他的API说明还是比较简陋的,刚上手可能还需要摸索一下,为什么 ...

  6. [BZOJ1101][POI2007]Zap

    [BZOJ1101][POI2007]Zap 试题描述 FGD正在破解一段密码,他需要回答很多类似的问题:对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a,y<=b,并且gcd ...

  7. 幂运算(codevs 2541)

    题目描述 Description 从m开始,我们只需要6次运算就可以计算出m31: m2=m×m,m4=m2×m2,m8=m4×m4,m16=m8×m8,m32=m16×m16,m31=m32÷m. ...

  8. DOS实用命令/工具

    winver  检查Windows版本wmimgmt.msc  打开windows管理体系结构wupdmgr  windows更新程序wscript  windows脚本宿主设置write  写字板w ...

  9. JS同名方法,

    JS同名方法只会调用最后一个方法. JS中同时绑定多个事件,先绑定的先调用.后绑定的后调用.

  10. CentOS 6.0下面安装JDK7

    下载地址:http://www.oracle.com/technetwork/java/javase/downloads/java-se-jdk-7-download-432154.html 1. 安 ...