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. MySQL练习2

    学习MySQL过程中做的练习题,感觉是不错的例子就记录下来. 练习要使用到的表: 表一:员工表–> yg y_id y_name y_sex y_age y_address b_id 1 赵老大 ...

  2. springboot+redis

    上篇整合了DB层,现在开始整合缓存层,使用redis. springboot驱动注解,使用spring注入JedisPool便可封装自己的redis工具类. package hello.configu ...

  3. windows2003 DHCP中批处理绑定IP与MAC

    最近正在实施Windows Server 2008 R2 DHCP服务器部署,要求把员工的IP地址和MAC以及姓名完成在DHCP服务器上的绑定,使用的系统是windows2003-x64,要添加的用户 ...

  4. ACM入门

    1.给n个数字,将它们重新排序得到一个最大的数字 例子 4123 124 56 90--------------90561241235123 124 56 90 9------------990561 ...

  5. 【linux编程】linux中HZ和Jiffies的关系

    读cubic源码的时候遇到了HZ和jiffies,不懂这两者代表什么.网上描述的是这样的 全局变量jiffies用来记录自系统启动以来产生的节拍的总数.启动时,内核将该变量初始化为0,此后,每次时钟中 ...

  6. MAC安装M2Crypto报command &#39;cc&#39; failed with exit status 1

    出错分析主要是因为由于OSX升级之后 /usr/include 没有了,使用命令修改swig寻址路径: sudo env LDFLAGS="-L$(brew --prefix openssl ...

  7. 网页中三角切边还半透明,现在的设计师越来越牛,css也要跟上啊

    需求 今天在群里看到一个需求,啊这种三角形缺角怎么做啊,还带半透明阴影的. 分析 要实现这个,可以用css做三角,网上找一下代码,像这样. 由于以前没有试过border能不能带透明,所以需要试验一下. ...

  8. c++实现单向链表

    一.问题描述 1.题目内容:集合的并.交和差运算 编写一个能演示执行集合的并.交和差运算的程序. 2.基本要求 由用户输入两组整数分别作为两个集合的元素,由程序计算它们的交.并和差集,并将运算结果输出 ...

  9. juqery easyui

    私人做程序开发一直有个头疼的问题就是后台管理界面,以前一般都是自己用jquery+ps自己设计的,效果很一般,很不理想. 今天初次使用Jquery EasyUi,简单的做了个布局页面感觉还不错,给大家 ...

  10. [1].jekyll扫盲

    一.jekyll是什么? jekyll是一款免费的blog生成工具,将纯文本(plain text)转换为静态网站或博客. Jekyll是一个使用Ruby编写的静态站点生成工具,使用Liquid模板渲 ...