利用Chrome Workspace分析你的JS性能

利用Chrome Workspace分析你的JS性能

大家应该为如何优化JS感到头疼吧,因为很多时候网上一搜各种JS优化方案和方法,但是要怎么证明这些人所说的方法就是对的呢,是不是只能盲目的使用他们所说的方法,在我刚开始工作的时候也是这样的,看了一些人的文章优化自己编写的代码,但是其实自己也不知道优化后的代码是不是比之前的要快(坑爹)。


好了,马上进入今天的正题,其实我们可以用Chrome的调式工具来检测你写的javascript的性能,应该有些人同学会说Firefox也有提供这方面的性能检测,但是webkit内核的浏览器(chrome和safari)在对代码进行性能分析和展示时间线方面应该是做的最好的。


首先打开Chrome调试工具我们选择(Profiles)其实他这个工具已经给我们提供了三个类型的性能检测:

1、javascript cpu 性能测试

显示javascript占用了多少CPU


2、css选择器性能测试

显示处理CSS选择器占用的CPU


3、堆栈快照

显示javascript对象的内存占用情况


我们想要查看的是javascript代码执行的性能,所以我们进行CPU性能测试。选择好了以后,点击Start开始检测:


我在这里写个简单的JS,同一个功能,用不同的方法实现,我们对比看下他们之间的哪个执行性能更好:

function test(){
	this.name = "qowww";
	console.log(this.name);
}

这个方法我们在页面上调用2-5次最佳,没有实际数据显示调用越多越好,但是不要少于2次最佳。

<html>
<head>
    <title>Source Example</title>
</head>
<script type="text/javascript">
function test(){
    this.name = "qowww";
    console.log(this.name);
}
/*执行两次这个方法*/
test();
test();
</script>
<body>
    <h1>JS性能检测</h1>
</body>
</html>


我们来看下性能检测出来的结果:


我们在把上面的方法改一下,用prototype方法来实现上面的功能:

<html>
<head>
    <title>Source Example</title>
</head>
<script type="text/javascript">
function test(){
    this.name = "qowww";
}
test.prototype = {
    say:function(){
        console.log(this.name);
    }
}
/*执行两次这个方法*/
var s = new test();
s.say();
s.say();
</script>
<body>
    <h1>JS性能检测</h1>
</body>
</html>


我们来看一下这个方法的性能报告:


上面的报告我们可以看到第一种方法占用的CPU是明显比第二种要高的,至于为什么使用Prototype方法更高效,大家可以看下《javascript面向对象编程之封装方法》这篇文章。


很多人对优化JS感到非常头疼,因为不知道该从哪里开始优化,我相信只要掌握了这个检测方法,大家应该就可以轻易的发现自己的项目中哪些JS方法占用CPU比较高,从而去优化他了。


可能有些同学会发现我的调试工具跟你们有些不同,因为我用的是老版本的Chrome,感觉这个版本挺好的,所以一直没有更新,


新版的操作方法跟老版本的方法基本上差不多。检测功能也比我这个版本的功能多。


转载请注明来自 520UED http://www.520ued.com/article/53882388b992a7c43f5c203d

comments powered by Disqus