51CTO专访嗷嗷：WEB前端性能优化问题

在2012年7月7日阿里技术嘉年华上记者遇到阿里巴巴前端技术专家刘杰（花名：嗷嗷）。嗷嗷从事前端开发多年，期间做过设计转过产品，混过后端，写过《Web 标准设计》一书。目前就职于淘宝网，主要负责前端性能监控、优化等前端开发相关的工作。在会上嗷嗷以“如何发现前端的性能问题”为话题分享了如何通过日志来分析问题，如何通过 har 来分析问题以及通过监控来发现问题等内容。

嗷嗷你好，据我的了解你之前有做过设计、产品以及后端，是因为什么让你从事前端开发的？

嗷嗷：其实这跟个人的发展有关吧，不同的阶段可能你需要了解到一些知识也不一样，比如你想深入了解后端的一些东西，那你如果作为一名前端的，所以你了解的不够多也不够深入。或者是即使你了解到的只是片面，不知道他们为什么这么做。你只有整个人切过去的时候才知道那你就可以比较深入的了解他们为什么这么做，这样做有什么好处。然后回过来的时候你就会把这些偷来汇总应用。

现在国内的前端分很多种，像淘宝的前端现阶段可能稍微纯前端一种，像我以前我在有些公司呆过，前端他有写一些后端开发的东西，这些只是一个名字而已，可能跟自己的职者在不同的公司下区分还不一样。

前端性能优化是一项非常重要的技术活，对于用户体验有非常大的影响。但是对于一些刚踏入的前端开发人员可能在技术上有些限制，你对他们有什么好的建议吗？

嗷嗷：其实现在进入前端的同学比较幸运吧，因为现在已经有一些大量的经验，方法，优化等等。对于刚刚入门的时候，认真学习这些东西已经足够了，虽然这些东西比较通用，可能对于某些业务不具备非常好的优化，但对于入门的话用利用这些来了解为什么，比如这些东西为什么这样做会更好，了解这些信息的时候，这样你的能力就会提升了。当你了解这些信息的时候你就会针对业务做一些个性化的定制或者处理。

对于现在的前端性能优化的规范特别多，以你的经验来说，有哪些建议比较重要？

嗷嗷：规范也不是特别多，大家了解最多的是网站性能优化的34条黄金法则，我们称之为雅虎军规，但也不能说是规范，它只是一个建议。但不同的公司都有着不同的背景会导致每个公司都会加上自己的一些特殊的东西。所以让人感觉有很多，每个人出来讲都不一样了。其实最基础的我还是觉得雅虎军规，就是前人的方法总结了，可能由于时代在变，有些方案也会发生变化，所以要自己再去深入研究。

雅虎现在前端没有以前那么好，就是雅虎辉煌的时候很多人都去看看人家是怎么做的。现在雅虎就没有像以前那么重视了，或者是由于公司的一些原因。我们可能也不是太了解，但是他们曾经留下那些经验是非常好的。

我个人认为在前端开发上性能和视觉效果永远是矛盾的，鱼与熊掌不能兼得。你认为呢？

嗷嗷：这是很正常，比如设计师喜欢用图，因为图能更好的体现出UI效果，但是这些图要在客户端呈现的时候，肯定需要下载花费时间的，等待的时候让你觉得性能变差了，但这也不是完成不能解决的。一些方案比如我们现在利用CSS技术把几个图合成一个，尽量控制它的请求数。也有一些我们比较推荐的是方案，比如我们用一些新技术，IE6这种它不支持的，那我们就可以跟设计帅说那我们在好的浏览器中就做出好的效果，低版本的浏览器达到可用的效果就可以，消耗又少很多。这样就尽量找个平衡点，不能这个不能做，那个不能做。

据我了解在前端开发中有两种职位，一个是前端开发工程师，另一个是前端架构师。这两种职位的区别的哪里？在淘宝做前端开发的有这两种职位吗？

嗷嗷：从我个人的角度其实我觉得只是名称的不同，因为我以前有个想法就是想当前段架构师，但后来我觉得其实任何个前端开发者都要按照着自己是一个架构师的标准来要求自己，哪怕你做一个很小的业务，你对这个业务的架构也是有一定的了解。当然这里的前端架构师指的的是我就是只负责一个大网站的架构，其实这种是很少的，也可能不是特别的需要。因为每个产品都有自己的特性，你一套方案可以适用个别产品，但是不能适用所有的产品。当然也有些方案是通用的，但是现在很多公司他们不叫架构组，他们称为通用组。就是尽量做一些通用的东西。具体我认为做业务的人才叫架构师，因为他要设计好这个业务所需要的东西。

可能一开始新人对公司的业务不是了解那么多，现在有很多基础成熟的模式，学习了之后可能会更深入的了解。比如像淘宝的业务的一些特殊性，详细的我们会在上面做下记号说明，用户就能更快的看到了产品的信息，那我们就可以根据它来做些特殊的处理。那我们认为做这个设计的人他就是一个架构师。我觉的这个架构师人们把它的定位台的特别高了。

你在做前端性能优化过程中有没有遇过哪些困难？你是如何去解决这些困难的？

嗷嗷：困难肯定是有的，因为之前也了解了前端后端各方面相关的知识，所以在做平台的时候，像搭建一些基础平台，也遇过一些困难。自己可以去解决一些问题，当再取大规模数据的时候很麻烦，同事也给了很多的帮助。对于自己我要求可能也比较高，很多麻烦也有个时间差，对于自己了解会做的时候很快就可以把原型各个方面处理好。

在技术上的一些大问题我个人觉得都没有什么，从国内来说我们前端这块发展的比较慢，我们做的东西大部分遇到的问题国外都解决了，或者是有些解决方案。其实我们现在更重要的是把各种解决方案混合在一起，更多大家都是互相帮助，互相借鉴。

做前端性能优化有没有什么技巧？可以快速发现问题，解决问题？

嗷嗷：其实没有什么特殊的技巧，第一，你基础知识要扎实，如果你知识不扎实的情况下去模仿其他人的一些所谓的技巧不一定适用，可能对你还有反作用，而且你还没有了解他的利弊。然后，我觉得在你的基础知识扎实了以后，才可以去尝试别人的一些相关技巧，就能够把控得住。

假如我是一个前端开发者，我想去淘宝做前端开发，你认为我应该具备哪些素质和技能？

嗷嗷：淘宝现在的前端综合性要求可能稍微高点，不像某些公司只要求你会写脚本或者CSS就行，我们这边可能有些综合性的要求。其实关于一些具体的明细要求在这里一项一项列出其实也没有特别大的意义。

1）对于做前端的有没有要求像你一样懂些后端的知识呢？

嗷嗷：现在没有特别的要求，但是在招聘过程中如果有后端基础的会优先，因为这是一个加分的点。对于以后公司的发展可能也会开始慢慢的也会要求大家对于后端的知识需要深入了解多一些。

2）对于前端的招聘需要一定要懂得什么JS之类的框架吗？