用户数过亿的QQ空间前端优化的思路是什么

5月7日，「腾讯SNG & msup技术开放日」在深圳召开。壹佰案例采访了一些与会讲师，谈谈他们将在会上分享的内容。本次采访的是腾讯云平台产品技术负责人陈子舜。

壹佰案例：首先想请您介绍一下您目前的工做以及您关注的领域

陈子舜：我目前在腾讯云团队，负责平台产品线的管理工做，其中包括前端团队、团队的能力建设等工做。从技术角度来讲，我如今更多关注前端的发展，包括前端的一些趋势和将来潜在的新技术。

壹佰案例：前端曾经被误解为「作网页」、「切图」的，但随着前端技术不断发展，咱们也能够看到前端技术是如今发展最快的技术之一，相似AngularJS、React等框架层出不穷。如今的前端开发从简单的Web开发到Web富应用开发，您对这种前端技术的发展趋势是怎么看的？

陈子舜：我很是认同前端发展很快这个说法，但也要注意到前端技术的起步是相对比较晚的。从2004年谷歌出了Gmail提出Ajax开始，你们才意识到这个技术其实能解决不少问题，可是若是再往前看的话，终端的一些发展，包括整个计算机领域的发展，其实对客户端的要求，这个路径已经走了很长时间。

前端由于发展的比较晚，如今才走到“我要去作组件”，“我要去提出AngularJS”，“提出一些从前端Router”到“提出双向绑定等方式”，包括像React提供了一种组件的管理方式。以上的这些说法实际上并不新鲜，在客户端开发里，这些概念一直都有，只是前端基本上是按照客户端的发展路径不断快速的对齐如今的发展趋势。如今若是要看前端之后能往什么方向发展的话，我以为更多能够参考客户端发展的路径。

壹佰案例：QQ空间的业务随着互联网的发展、用户数的增加，通过几回技术升级的过程，您能从前端的角度谈谈QQ空间这几回升级背后的故事吗？

陈子舜：
第一个阶段是我刚刚接触QQ空间的工做，这个阶段很重要的工做是什么呢？当时咱们面临十万用户同时在线的台阶，并且对咱们后台负载有很高的要求。

因此在当时咱们最主要的工做是：咱们怎么样先扛住用户快速增加的阶段，可以给后台下降负载压力。由于2006年的前端开发模式，就是后台主页面的方式，咱们发现若是按照这个方式作，后台压力很大，并且当时的后台也没有如今那么好的硬件条件。咱们前端的团队当时也只有三我的，咱们就想各类各样的办法来帮助后台减压。

怎么作呢？咱们把一些逻辑代码提到前端来，恰好也有Ajax的一些技术能够去创新，咱们能够用这种前端异步的方式把不少东西移到前端来。同时咱们也更多考虑怎么去减小后台的请求，好比说文件合并、预加载等，实际上不少都是咱们在当时的架构考虑到的事情。

固然还有后台请求过多的问题存在，不只仅是页面请求，还包括后台CGI过多，由于空间分不少模块：我的中心、博客、留言、头像等全部信息都表明后面有相应的服务。

当时按架构去考虑我怎么样在后端部署一个统一的环境来配合后台，作好这种按照标区类的方式知道哪个模块数据更新而后去动态拉取。其实这种逻辑在当时的前端是有些过于「重」的，但这也是一个标志性的，让咱们度过了2006-2007年用户快速增加的阶段。

第二个阶段咱们发现前端变得愈来愈重。那个时候前端的代码里面背负了不少历史问题，因此咱们一直没有对它进行太多改动。后来当时咱们决定花了很长时间对空间代码进行重写，须要重写的代码量在当时统计出来的数字是很是大的。

特别须要提到的是当时为了作到极致，减小请求，把不少逻辑层代码都拆分到很小的文件里面。因此在重构的过程当中，咱们也引入了一些模块化的管理方式。

坦白讲，比如今的模块化要引入的更早，但比较遗憾的是咱们没有对外输出这些工具。举例来讲，咱们内部写了一些工具怎么把这个文件拆分，把目录变得更加合理；还有一些工具自动化去合并，进行程序压缩；也采用了自动化的方式，可以保证咱们的代码管理和部署。我以为第二个很重要的阶段就是咱们怎么样对代码进行模块化管理。

第三个阶段是团队变得更大，团队规模从几我的变成十几我的的时候。那么怎么去作呢？这时候产品对前端的要求愈来愈高，须要你实现愈来愈多功能，并且跨团队的配合也愈来愈多，在我总结起来应该经历了一个叫技术规范化和标准化的过程。

在前面代码已经管理好了，模块已经作好了，那怎样提高效率，怎样让代码提交以后不会产生很明显的错误。

咱们当时的用户挑战不少，好比浏览器兼容不行，当时其实有不少浏览器可使用，好比火狐、Chorme这些版本都出来了，咱们在浏览器测试上花了不少功夫，可是实际上仍是没有达到要求。当时咱们就在想，咱们团队得有一个标准组件，有一个标准的框架来解决浏览器的兼容问题。

在当时的阶段，市面上能写的框架也不是不少，因此咱们决定本身去写。为何本身写呢？由于腾讯仍是有一种喜欢本身造轮子的心，因此后来我本身就给团队作了一份这样的标准框架，在内部咱们把它称之为QZFL，实现了规范化。

这个框架从1.0发展到2.0走了很长时间，也解决了你们在开发过程当中的问题，例如我不须要再去关注一些经常使用前端组件的实现、一些功能的实现，只要关注业务逻辑就能好了。

在技术标准化方面咱们引入了监控，引入监控后，咱们能够对整个网络的环境以及前端的客户有了掌握，经过监控我知道前端的性能是如何的，知道我每个请求的返回成功率是怎样的。监控发展到如今也拓展了不少新的维度，好比说我知道哪个省份的用户比较慢；哪个运营商网络比较慢；如今慢的用户大概的百分比是多少等等。

这些数据能够帮咱们不断提高总体空间的运营水平、运营能力。我以为这是一个很重要的标志，让咱们走到了一个工业化的程度。这是我以为空间如今作得比较成熟的很标志的一件事情。

壹佰案例：QQ空间相关的技术已经很成熟了，将来还会遇到哪些挑战？

陈子舜：QQ空间如今相对稳定，我也很难判断之后会遇到什么样的技术难点。我以为真正的难点在于它能不能应对如今日益变化的用户需求，很难说某一个技术难点能够算做难点。而是我以为QQ空间更多要应对的是如今终端用户习惯的变化，技术能不能及时更新，解决用户的问题。咱们作不少事情仍是以产品的价值为导向，咱们要考虑经过技术手段解决具体的产品问题。

空间如今相对来讲成熟，也是给咱们团队一个很好的机会。由于客户访问量仍然很是大，也就是如今比较火的海量服务。海量服务的特色是你每作一件事情，你的判断都会影响大量用户的使用。因此对程序员有很高的要求，每一件事都要考虑得很是清楚才能够去验证明施。

其实QQ空间走到如今，还在作不少很前沿的尝试。好比说但愿尝试HTTP2，空间的监控除了咱们以前讲的这种地区性能、运营商性能的监控之外，本身自己的数据染色、数据采集等等这些能力其实也作得愈来愈深刻了，同时空间的前端组件从浏览器到接入层都是一整套完整的解决方案，这是QQ空间成熟的表现。

壹佰案例：前端的工做中优化是很是重要的一个模块，在一些论坛上也会对优化有不少的争论，前不久就有用户在知乎上就QQ空间打开首页就加载100+的JS提出问题，在这个优化标准的问题上您怎么看，会不会以数字去衡量这些标准？

陈子舜：其实你们追求极致优化目标的衡量标准是惟一的，可是方案其实会随着业务而产生多样化的方案选择。其实空间一直以来都在作优化，咱们对极致的作法可能和不少人的常见的理解是不太同样。

咱们更喜欢不断尝试一些新方式，提出假设。我以为前端的优化方式，都有必定的时效性和适用性。不见得说加载一百多个文件就是好或坏,固然咱们也不否定如今加载一百多个文件确实不见得很好，多是团队管理，或一些其余技术之外的缘由。而最后咱们其实都是须要拿出的数据衡量。

例如：哪怕真的加载了100个文件，有没有想过：其实这100个文件也许并无使用户打开的页面变得很慢，而相反有办法可让他感受很快的？若是100多个文件并非在你首屏显示的时候加载的，支撑首屏文件作好控制，其余都走了异步请求，文件多也不见得对你的业务有太大影响。

因此咱们的判断在于用户看到的性能如何，他用这个功能的时候能不能快速得到想要的东西，这一切都是基于咱们有可靠的数据分析后进行论证的。不断提出假设，设计方案，更有针对性的优化某一些地方，针对用户常见的一些问题，拿出去论证、验证，而后采用或推翻以前的假设。

也许你会以为加载了100个文件有问题，可是从咱们这边的数据看，可能这并不会真正的影响用户体验。简单来讲，比如咱们以前一直在说一些优化，要进行合并。通过几回架构升级，咱们发现有一些文件咱们把它合了又拆，拆了又合，合了又拆。这是由于咱们随着客户的网络、硬件的变化，一直在进行调整。没有一个最终标准能够说按照这个标准就能够作到一劳永逸的优化。

壹佰案例：提到Web优化，有不少公司提出过一些黄金法则，例如Yahoo，您如何看待这些法则，腾讯内部有没有总结过相似的东西？

陈子舜：咱们在技术总结方面的角度可能和其余公司不太同样。我以前也讲了一些优化的原则，咱们的优化理念实际上是相似国外「增加黑客」的理念，就是提出假设，设计方案，分析数据，验证，推翻假设的过程。

咱们以为标准的东西不见得可以通用，因此咱们也没有对外推出一些黄金标准。举例来讲Facebook也没有对外提供标准，在给咱们分享Bigpipe的时候分享者最后说了一句话，“我如今作的优化可能也只适合Facebook用，不见得适合你们”。

在我看来，黄金法则是只告诉作法，可是并无告诉你们为何这样思考为何要用这些作法，而如今雅虎不少的优化理论会有一些不合适的地方。甚至说的更直接一点，若是HTTP/2有一天火了，基本上这个雅虎的优化黄金法则就废掉了，那你还要去用吗？

因此优化是不断演进的，我刚刚也讲到，前端优化是有必定的时效性和适用性的。这样就对前端开发有更高要求，必定是一个懂思考的程序员，才能提出更多的假设，并知道怎么去论证。

因此，在腾讯咱们不会看谁用了什么法则而去判断这我的能不能达到高级工程师的程度，而是看他的思考过程、思考逻辑，在解决这个问题的时候，你的思考逻辑是否是符合了这样的方式，你找到了创新点，更漂亮地解决了一个具体的性能优化的问题。

壹佰案例：前端性能优化对普通用户来讲其实就是他打开这个网页更快了，但实际上在这个快背后是有不少能够作的技术工做。

陈子舜：没错，咱们的性能优化目标是什么？刚刚讲得很清楚就是为了快。而快的目标是什么？好比个人页面打开时间是1秒钟，咱们为这1秒钟打开花了不少工夫，不只是前端压缩，不只是前端文件合并，我会采用一些cache，我在业务用的一些网络延迟的手段、技术去让网页打开的更快。其实这里面前端考虑了很是多的问题。

另外随着发展，如今前端愈来愈重，对用户的CPU是否是一个消耗，对CPU的把控是否是有一个方法？我监控CPU的即时状况，可否保证首屏渲染的内容优先得到CPU资源，一些重资源能够延迟渲染，不要影响用户的打开，因此咱们也尝试去经过对CPU资源的控制来提高性能。

另外也在思考在渲染方面咱们是否是能够作得更深，咱们要去研究浏览器的内核，考虑渲染方式，包括和咱们的X5团队、浏览器团队也有不少交流。你会发现整个前端优化到最后，更多在于怎么能发现问题，包括推进技术环节的各个角色去解决大部分的事情。

然而如今不少前端开发，大多数认为只要运用了某某原则、某某法则就完成了性能优化这件事情。可是他没有想到，在整个页面打开的流程下面，会有不少基础环节。包括页面打开的JS问题，页面的请求，后端的性能，浏览器发生什么事情，都有可能成为你的优化点。性能优化实际上是一个持续的技术运营。

最难的是，你怎么从各个环节发现可能存在的一些优化，提出假设以后，带领团队跟你们一块儿，把这种优化问题解决掉，这是程序工程师常常作的事情。

壹佰案例：提到带领团队，您经历了从3我的到几十我的的团队演变过程，也成了一个管理者，团队由小变大的过程当中有没有一些好的管理经验分享给你们。

陈子舜：我带领了不少团队，在云以前我带的基本上都是新团队，我刚刚过去就是几我的，人少的时候时候咱们先想办法扛住业务的须要。

接下来团队规模稍微大一些，咱们须要建设一些管理的部分，来帮助这个团队有效运转，怎样管理工做流程、开发模式，包括团队之间合做的方式、流程的建设等。

到团队规模再大一些，要求再高一些，就看你对团队提出的标准。好比说代码规范、工程化管理，有更好的管理手段和工具引入进来，帮助团队更有效的完成目标。

我以为这是整个管理的过程，就好像咱们管理方法中一个团队的造成阶段和磨合阶段，以及团队自身的规范期阶段，最后产生团队的绩效，基本上都是按照这样的思考方式去作。

壹佰案例：您的团队中确定有很多新人，随着前端的火热，也有很多人想去作前端，对于这些新人朋友，做为一个十年经验的前端前辈，有什么建议给他们？

陈子舜：前端其实和之前同样是很容易入门的一个技术，但这个技术的挑战也是太容易入门了，致使不少不是程序员的人过来作前端。要是真正喜欢作前端，想成为一个合格的前端开发，首先要是一个合格的程序员，而好的程序员是有一些要求的：

首先是计算机基础，掌握一些网络算法，对程序员来讲这是根基，不管你是前端也好，仍是后台也好，这些都是很重要的，这是计算机基础能力。

第二，程序员在编码过程中是不断挑战新问题、不断提高代码的。同时好的程序员不会给后辈留下坑，他会考虑代码的可适用性，这种通用素质他会想得很好。

第三，做为程序员应该有严谨的思惟逻辑。作任何事情、任何决策都须要数据论证，不会去猜想也不会轻易相信外界的一些黄金法则或建议。程序员懂得经过一个问题进行逆向思考，为何会提出这样一个问题，通常都会有这样一种很叛逆的想法。

另外，程序员对新技术要保持好奇心，但不该停留在我用了哪些新技术，而是要思考为何这个新技术会这么设计，最终解决什么问题，我以为好的程序员在这方面会想得很是多。

在这些问题上，若是以为本身均可以有这样的想法以后，你再去前端领域，再去前端作更多事，那你是一个好的前端程序员，而不只仅是一个简单的前端开发的角色。

壹佰案例：在重新人成长为管理者的过程当中，特别是经历过不少不一样的业务，您是如何在快变的环境下学习并迅速融入新业务的？

陈子舜：我其实在腾讯作了不少业务，从QQ空间到作增值产品到如今在作云，在这个过程当中我也在不断学习。在作任何业务以前，我首先要了解这一块业务是作什么的，这一块业务须要个人技术有什么样的变化。

从PC到手机终端的转变过程当中，那咱们就说咱们要去拥抱H5，拥抱相似的开发能力，让本身也能够学习这一方面的知识，保证本身可以达到业务要求，能够帮助业务解决问题。

如今作云以后，发现作云对狭义的前端（只写JS）要求不像QQ空间那么高，反而对程序员思惟逻辑，以及全栈的要求会更高，由于你首先要从新认识云的业务，从新理解业务对应的用户是谁，云的用户其实对应的是广大开发者；那广大开发者须要得到你什么样的帮助，你的产品能够给他什么样的支持，你怎么样作得更好。

而后就会思考我这个团队如今的一些技能能不能知足，个人团队须要作出变化，可以尝试更多，甚至是站在更广的层面思考这些开发者他们会遇到什么样的困难。

因此我这个团队基本上转变为全栈工程师的角色。到云以后，咱们须要了解更全面的知识点。咱们就要把本身打形成一个全栈工程师，从前端JS到后台NodeJS的能力，包括网络各个方面的东西，都要有很全面的把握，你打造出来的产品才能够解决更多客户的问题。

我以为在业务上个人学习方法，都是从业务的客户需求出发，去考虑个人技术应该怎么作出调整和转型。

壹佰案例：腾讯如何看待前端，从公司层面会不会为你们制定能力模型？

陈子舜：我恰好是腾讯前端通道的负责人，其实通道的标准在去年咱们也更新了一版，最先的晋升通道仍是聚焦在前端JS这方面。你怎么解决问题，怎么作到性能优化，怎么去作好业务的可持续运营，这些都是前端通道的要求。可是由于市场发展很快，咱们也作了一些拆分，拆分红什么样呢？

第一，前端的游戏方向。游戏的偏重在于要有更快的学习能力、学习要求，由于游戏技术变化也是很是快的，有不少新的游戏框架和引擎，包括H5自己也有不少游戏方案，你能不能快速学习。游戏还有一些新的要求，好比对安全的要求，由于会有不少人在写外挂，因此安全性的要求也是这个方向要考察的部分。
第二，前端的终端方向。对这个方向的要求会跟普通的前端开发不太同样，由于它得跨界，首先要对H5的能力有所了解，还要了解一些Native终端的知识。这样能够更好的解决用户的问题，因此都会有一些偏重。

第三，全栈工程师，咱们内部叫全端工程师，这个就是说，咱们把Node.js和PHP这部分放进来了。咱们为何认为这个属于前端领域呢？由于从用户访问页面的「最后一千米」来看，用户打开浏览器到浏览器页面输出内容，这些事情都应该是由前端来覆盖的。输出页面的技术，咱们一般叫接入层，或者叫接入web服务，接入web服务这方面咱们在前端有必定的话语权，而且可以可控，我可以在上面开发咱们的业务，这样作也能够减小咱们和后台开发协同的成本。

同时咱们在作新的优化，包括业务逻辑上更有可控性，而不像之前在空间的时候，好比说咱们要作一个优化，要push后台实际上是很难的事情，由于你们节奏可能会不一致，并且他也不必定理解你为何要这样作。因此咱们就提出了第三个叫作全栈工程师，这也是行业比较流行的概念。

第四，腾讯有一个更加特殊的领域叫体验工程师，也是一个专业化的前端团队。因此目前咱们在通道里面分了四个方向，来覆盖整个公司全端团队他们所作的工做要求。而每个方向也都由高级工程师制定的新的具体的要求，帮助你们不断成长，跟上行业对本身能力的要求。

壹佰案例：您对全栈如何看？

陈子舜：对全栈工程师我是这么看的，仍是回到程序员的问题来说，程序员不该该是一个挑活儿的角色，不少技术都该感兴趣。若是认为说多学几个语言、有必定的跨界就叫全栈工程师，那其实可能对全栈的理解就窄化了。

一个真正好的全栈工程师的概念是包括对覆盖的技术、对业务的理解、对各个角色的理解都应该有很是全面的认识。对全栈工程师来说，他最大的特质是说他可以接受变化，遇到变化的时候，可以快速转变，能够解决具体问题，固然也要有必定的深度，这才是一个比较好的全栈。

从我自己来讲，我本身虽然也说全栈，各类技术我都接触过，包括后台，包括Java，基本上都研究过一遍，固然我不能说全部的方面都有很深的了解，可是有一件事情我是可以深刻了解的，其余事情你让我去作我也可以去完成，基本上就是适应性很强的一个程序员。

你们都知道国外的知名IT公司，都喜欢招全栈工程师，简单来讲就是程序员不该该把某一个语言把本身框死，其实这个是如今在国内不少程序员很可怕的一个想法，你们把语言的level看的过高了，其实把语言做为一个工具，把本身从用这个工具的角色里面跳出来，让本身能够接触拥抱这个行业的变化，让本身在思路上可以却打开更多。

壹佰案例：React背后是Facebook，AngularJs背后是谷歌，彷佛尚未很强的中国力量参与其中。您对中国将来前端发展，包括一些开源的力量，是怎么看的，将来有没有可能有中国的公司去作相似的事情？

陈子舜：没有能拿出一个框架来并非中国的程序员能力不够，而是说是否有足够的管理机制、管理办法鼓励这些程序员，可让他们不断提高，或者说不断投入在这个事情上面。

由于在我看来，国内不少的互联网公司仍是在积极进取开疆扩土的阶段，不管是业务导向或运营导向都会要求程序员要去解决大量的眼前的问题。其实一个好的开源组件不只仅是你作出来了，最重要的是你能不能把社区维护起来，能不能把你们对这个组件的热度维护起来。不可以持续地输出更新、保持迭代，这个是大部分国内的前端的框架和组件遇到的困难。

若是说这个问题能够解决，我相信国内仍是会拿出一些蛮出色框架，让更多人去使用。据我所知，国内不少原来自己在一块儿给公司提供前端标准的团队慢慢也拆散了，我也但愿有一天国内的公司能够作出一些调整，可以专门有一个团队，为了行业去提供和设计这样的一些技术能力。

但国内可能还不如国外有这种技术的氛围。我问过React的团队，我问他为何Facebook愿意鼓励他们作这样的事，他们也讲到了一些点我以为颇有意思：由于开源React能够解决他们招聘的问题。

壹佰案例：经过开源React去解决招聘问题？

陈子舜：React在Facebook内部也酝酿漫长时间，甚至有一度中止更新，后来也是有志的程序员拿出来从新改良后推出。其实经过这个案例咱们就能够看出作开源框架须要长期的投入。你作的React好用，让更多开发者去用，这些开发者确定都懂得React，招聘后也减小人才培养的成本，同时不少人也会慕名而来，你们会抱着这样的想法，原来React是Facebook推出的，那我愿意去加入这个团队和他们一块儿工做。这也造成了必定的人才招聘的氛围。

---

本文转自“壹佰案例”公众号，原文连接