速记：SFDC 2016 - 腾讯AlloyTeam 郭碧青 《Web 前端性能优化思路与学习方法》.docxVIP

主题：2016杭州开发者大会—前端分会场 时间：2016年12月10日下午1：40 会场主持人：独立开发者(时光相册) 郭宇 议题：《Web 前端性能优化思路与学习方法》 讲师：腾讯AlloyTeam 郭碧青 郭碧青：大家下午好，今天我的题目取得略显文艺，而且有点装逼的嫌疑。但是我看到它，现在觉得很欣慰，因为我觉得本来是想讲写关于rlex的东西，发现还好没有讲它。 自我介绍一下，我叫郭碧青，在腾讯有六年的Web研发经验。主要是做C侧用户，普通用户的社交场景，有很多涉及到性能优化的需求和点。我目前是负责手机QQ里面兴趣部落产品技术架构和研发，还是要解释一下为什么要讲性能这个东西。因为性能这个题目很大，很多人都多多少少有关注。我以前也想去分享这些话题，但是发现不太适合。但今天就很高兴来SFDC的前端专场，因为它是偏向于学习和实践的，所以我把几年来的思考大概整理一下。 首先我是在团队里负责招聘的事情，面试。经常会看到大家简历上写熟悉这个框架，熟悉HTTP协议，对前后端非常在行。很少有人说性能优化有一些探索的，对一些新的标准，新的技术有实践的，这方面比较少。我想了一下这个原因，比如很多学习网站和书籍方面，框架介绍得比较多。但是性能优化会比较少，不成一个体系。第二，性能这个纬度可以从一个代码级层面到一个工程级的层面。像我以前学校刚刚毕业出来的时候，就喜欢看出一些图灵的动物书系列。其中有一本是高性能的XX，对里面细节扣得比较紧，我可能有一点代码洁癖，性能洁癖。从零开始去编译，也可以从最后去编译，这种写法在当时场景下有两种，写法的性能是不同的。 比如通过一些非常喜酒的API性能，最后看到的可能是十万级操作才能产生的，百毫秒的性能差异，你去扣这些细节放到代码优化里面，其实在用户侧是看不到的。从什么样的纬度切入性能优化，对用户真正产生影响，这是我们需要考虑的。然后是一个特定场景，包括刚才有些同学提问的，其他嘉宾也遇到的情况。很多特定场景下你去分析这些问题是比较散乱的，像我在公司讲课也是，很多同学就会问到我，比如CSS动画怎么优化，这些都是比较具体的问题。出来分享的话，还是希望听取一些方法论的东西。 最后就是积累和飞跃的思考，很多同学在做项目的时候，可能项目时间比较紧，没有时间进行优化。是不是等到有一天空闲下来之后系统性做一次优化，突然间看到提升，但这种事情在实际工作中是非常难找到这种机会。还有就是不建议大家，周期性的review产品性能。大家在编码过程中，可以把业界正在发展的东西融入到自己做的事情中来，这样的积累最后达到一个比较好的优化效果。 我分享的内容主要分四块，前面过得快一点，后面贯穿一些实践的东西。刚刚讲的还是偏向于前端性能的认识，这里列出来的，比如JS执行效率，像我刚才说的怎么样编译。浏览器渲染性能，CSS动画性能，事件代理，再加上雅虎优化建议。为什么大家看到的是这些性能，因为大家平时编码过程中做到了这些事情。但实际性能，本地运行性能和用户性能是不是完全对等的情况，并不是的。本地情况是解决了很多问题，比如说经常出现产品经理说有什么什么问题。我们第一反应是不是有缓存，倾向缓存，或者不可能有BUG。 但用户那一侧并不是这样，我不卖关子。为什么我们看到的和用户看到的不一样，因为本地环境，很多网络环节是做了简化的。特别是前端开发，平时开发也没有说一定要把代码push到测试，再去获取，其实是本地文件替换的模式，这样效率比较高。我们平时所经历，但是那个时间非常短的白屏时间是不care的，单用户是很care的。有时候我们会想做一些性能的优化，比如面试时大家都会说，我把CSS放在顶部，JS放在顶部，有一些图页面可以渐进式渲染。 实际上从前年开始，我做的业务偏向于手机QQ，它是一个在非常复杂的网络环境中进行使用的产品。我们的手机平时并不是直接连到电信部署的服务器，本身要经过手机运营商的限令分配，获取到网络资源。网络运营商还有计费的过程，最终是移动的网络，有可能会经过一次骨干网的数据交换访问到电信机房的资源。我会比较探寻影响首屏时间的因素，除了网络因素之外，还有大家熟知的浏览器渲染机制。浏览器，这一块关注比较多，因为以前文章比较多。比如说你从浏览器敲下一个ULL开始，到整个页面的呈现，中间经历了哪些事情。 DOM数和CSSOM对象数都会经过解析，然后渲染数最后会通过系统的API汇集到屏幕上。以前大家会说，比如DOM的深度一定要简单，CSS规则不要特别多层，简单明了把一个渲染数呈现出来。实际上需求你是不能砍的，设计是不能去顶的。这方面性能消耗并不是影响页面性能最大的一部分。回到前端性能认识的小结来看，我大概把前端性能分成两部分。一个是网络性能；一个是运行时性能。其实运行时性能除