WebKit’s JavaScript Profiler Explained

本文介绍如何使用WebKit的JavaScript性能剖析工具来定位和优化客户端JavaScript代码中的CPU瓶颈。通过手动或编程方式运行剖析,并理解结果中的专业术语,如Self、Total等,以便更有效地提升应用程序性能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

http://fuelyourcoding.com/webkits-javascript-profiler-explained/


The trend toward rich client-side web applications has brought with it a need for robust JavaScript development tools. Firebug lead the way in this arena, but WebKit’s Web Inspectorhas caught up in a big way and ships with all recent versions of Safari and Chrome.

One powerful tool inside Web Inspector that is likely under utilized is the Profiles pane. I write a lot of client-side JavaScript and it still took me a long time to work up the gusto to dig into this tool and get anything out of it. If you find yourself in the position I was in, hopefully this post will give you what you need to get up and running quickly.

Basics

The JavaScript profiler is used to find and alleviate CPU bottlenecks in your code. To use it you invoke one or more “profile” runs in which Web Inspector tracks all JavaScript executed on the page and the time taken to execute it. In the picture below you will see a single profile called “Profile 1” being displayed.

base-1

There are two ways to run a profile:

1) MANUALLY

The pane itself has a little button in the lower left-hand corner which can be used to start and stop a profile. This is the least precise of the two methods, but is sometimes good enough for one-off profiles. Click it once, go perform whatever action on the page that invokes the code you want profiled, and then click it again to stop.

2) PROGRAMMATICALLY

The way I suggest you invoke profile runs is by calling into the console directly from your code. This will allow you to precisely position the start and stop of the profile for maximum signal to noise ratio. Here is how you might profile a totally contrived for loop programmatically:

console.profile('for loop');
for (var i = 0; i < 100; i++) {
  console.log('i is: ', i);
}
console.profileEnd('for loop');

After that bit of code is executed a new profile titled “for loop” will appear in the Profiles pane to be reviewed. The string argument to these functions is optional. If you don’t provide one it will simply increment “Profile [x]” like it does when run manually.

The Lingo

Now we know what the Profiles pane looks like and how to make it run, but its of no use unless we can derive meaning from the results. We can’t do that without understanding the terms used, so here are explanations as I understand them:

Self — the amount of time spent directly in the corresponding function

Total — the amount of time spent in the corresponding function and all functions called by it

Calls — how many times the corresponding function was called

Average — the value of the corresponding function’s Self divided by its Calls

Of these, Self and Total are the most confusing. The key thing to know is that the profiler tracks not only the time spent in each individual function, but also the time spent in functions called by that function. This is very useful when “drilling down” on a stack of function calls because you can look to see if the Total is bigger than the Self and if it is you know the time-consuming function is nested beneath the current one.

Everything’s Relative (or Absolute)

By default the Profiles pane displays all information in relative times so that each function is assigned a percentage of the total time of the profile. This is helpful in some scenarios, but I find the absolute times (measured in milliseconds and seconds) much more useful most of the time. To switch the profile result to absolute times, just click the little % sign at the bottom of the pane.

absolute-time

Top to Bottom. Bottom to Top

You can also sort the profile results using two different approaches. The default is the “Heavy” view or bottom up approach, which will more quickly float up the offending functions to the top of the heap. This is helpful to quickly identify trouble areas, but sometimes confusing because it doesn’t follow the logical structure of your code. For that, switch to the “Tree” view or top down approach. It looks like this instead:

tree-view

Focus

One more feature of the Profiles pane is the ability to remove sections of the results and focussolely on the interesting bits. Do this by highlighting the interesting function and clicking the little eye icon in the lower lefthand corner. Other results will disappear and time percentages will be recalculated in the scope of the focused function.

Conclusion

I hope the above information explains what Web Inspector’s Profiles pane is, how to invoke it, what the results mean, and how to better organize them to increase their value. Give this power tool a try the next time you have some CPU intensive JavaScript that needs optimizing!

Jerod Santo is an Editor at Fuel Your Coding and a contract software developer at RSDi where he works daily with Ruby, JavaScript, and related technologies. He loves shiny toys, powerful tools, and open-source software. Learn more about Jerod by visiting his homepage or following him onTwitter.

 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值