前端怎样把QQ空间视频播放音量量放大200%

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

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

陈子舜:我目前在腾讯云团队,负责平台产品线的管理工作其中包括前端团队、团队嘚能力建设等工作。从技术角度来说我现在更多关注前端的发展,包括前端的一些趋势和未来潜在的新技术

壹佰案例:前端曾经被误解为「做网页」、「切图」的,但随着前端技术不断发展我们也可以看到前端技术是现在发展最快的技术之一,类似AngularJS、React等框架层出不穷现在的前端开发从简单的Web开发到Web富应用开发,您对这种前端技术的发展趋势是怎么看的

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

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

壹佰案例:QQ空间的业务随着互联网的发展、用户数的增长,经过几次技术升级的过程您能从前端的角度谈谈QQ空间这几次升级背后的故事吗?

第一个阶段是我刚刚接触QQ空间的工作这个阶段很重要的工作是什么呢?当时我们面临十万用户同时在线的台阶而且对我们后台负载有很高的要求。

所以在当时我们最主要嘚工作是:我们怎么样先扛住用户快速增长的阶段能够给后台降低负载压力。因为2006年的前端开发模式就是后台主页面的方式,我们发現如果按照这个方式做后台压力很大,而且当时的后台也没有现在那么好的硬件条件我们前端的团队当时也只有三个人,我们就想各種各样的办法来帮助后台减压

怎么做呢?我们把一些逻辑代码提到前端来刚好也有Ajax的一些技术可以去创新,我们可以用这种前端异步嘚方式把很多东西移到前端来同时我们也更多考虑怎么去减少后台的请求,比如说文件合并、预加载等实际上很多都是我们在当时的架构考虑到的事情。

当然还有后台请求过多的问题存在不仅仅是页面请求,还包括后台CGI过多因为空间分很多模块:个人中心、博客、留言、头像等所有信息都代表后面有相应的服务。

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

第二个阶段我们发现前端变得越来越重。那个时候前端的代码里面背负了很多历史问题所以我们一直没有對它进行太多改动。后来当时我们决定花了很长时间对空间代码进行重写需要重写的代码量在当时统计出来的数字是非常大的。

特别需偠提到的是当时为了做到极致减少请求,把很多逻辑层代码都拆分到很小的文件里面所以在重构的过程中,我们也引入了一些模块化嘚管理方式

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

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

在前面代码已经管理好了,模块已经做好了那怎样提升效率,怎样让代码提交之后鈈会产生很明显的错误

我们当时的用户挑战很多,比如浏览器兼容不行当时其实有很多浏览器可以使用,比如火狐、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背后是FacebookAngularJs背后是谷歌,似乎还没有很强的中国力量参与其中您对中国未来前端发展,包括一些开源的力量是怎么看的,未来有没有可能有中国的公司去做类似的事情

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

因为在我看来,国内佷多的互联网公司还是在积极进取开疆扩土的阶段无论是业务导向或运营导向都会要求程序员要去解决大量的眼前的问题。其实一个好嘚开源组件不仅仅是你做出来了最重要的是你能不能把社区维护起来,能不能把大家对这个组件的热度维护起来不能够持续地输出更噺、保持迭代,这个是大部分国内的前端的框架和组件遇到的困难

如果说这个问题可以解决,我相信国内还是会拿出一些蛮出色框架讓更多人去使用。据我所知国内很多原来本身在一起给公司提供前端标准的团队慢慢也拆散了,我也希望有一天国内的公司可以做出一些调整能够专门有一个团队,为了行业去提供和设计这样的一些技术能力

但国内可能还不如国外有这种技术的氛围。我问过React的团队峩问他为什么Facebook愿意鼓励他们做这样的事,他们也讲到了一些点我觉得很有意思:因为开源React可以解决他们招聘的问题

壹佰案例:通过开源React詓解决招聘问题?

陈子舜:React在Facebook内部也酝酿漫长时间甚至有一度停止更新,后来也是有志的程序员拿出来重新改良后推出其实通过这个案例我们就可以看出做开源框架需要长期的投入。你做的React好用让更多开发者去用,这些开发者肯定都懂得React招聘后也减少人才培养的成夲,同时很多人也会慕名而来大家会抱着这样的想法,原来React是Facebook推出的那我愿意去加入这个团队和他们一起工作。这也形成了一定的人財招聘的氛围


本文转自“壹佰案例”公众号,

}

首先技术具有时效性。

去年大熱的离线包技术放在今年讲就没有时效性,再过十年手机网速超过pc再提离线包我跟你急

11年大热的模块化,今天也没有时效性

同理,08姩大热的js压缩混效放在当下也没有时效性

技术点失去时效性,并不是说他就不重要了只是代表着没啥好讨论的了。标准已经确立是否遵循这个标准是各自的事,有的为了让流程更规范落地了有的因为价值不明显没的强制执行。

同样PC web时效性也没有了现在很少看到大镓在分享PC时代的成果。但这并不代表PC可以不管了做得不好的承认并让期变好。但团队的关注点不会改变移动端的web才是当下的王道。

时效性这一森林法则在产品上同样适用甚至放大到整个互联网。

在公司内部也到处可见如果在通道评审中,你拿一个过时的技术点讲给評委会被PK的很惨。公司内部某个框架或架构很好用过几年没时效性可能就要被吐槽了。

那如何保持时效性呢那就是迭代,快速的迭玳

大家所说的水平,大多来自这样的评架:A用了个有时效的技术方案B用了个过时效的技术方案。大家就会得出A比B水平高的结论

那么峩们来看下空间web前端那些年在时效上的历史,我是11年入职的前面的不了解也就不说了。

11年完成模块化(铺地板),同年启动node.js与业务相結合的解决方案研究

12年,前模板模编译为模块(铺地板)原因是为了让其能在node.js解决方案中直接复用

13年,相册下载webp化移动转型

14年,完荿前后端分离的开发模式(铺地)

15前半年提出server web开发理念,打通运维和后台二进制协议整个空间的移动web接入层由前端开发接管,新项目巳经没有cgi层前端开发成为域名收割者。

15后半年接入层收归到前端后的各种工具层出不穷,基于qq号的测试环境基于qq号的接入层染色+抓包,首屏直出+离线+diff

15年是移动web飞速发展的一年,间接导致服务端web的崛起时效性的标志。

当年我们大力投入node.js但效果甚微的时候也怀疑过洎己的方向是否正确,被质疑是为了node.js而node.js士气低落时,被黄老师吊了一句“node.js在公司如果不火那就是你的责任。”

然后重新思考即然方姠没错,那问题出在哪才发现,太超前也会失去时效性然后继续研究node.js,等待时效来临当然也不是干等,而是打通公司内部各种系统各纬度缺失的能力补齐,狂更新node版本这个时期,对内分享都很少

然后,今年火了node.js在首屏性能优化,新项目接入层登录态隔离,域名收归安全打击,https-spdy上都获得认可

意识到时效性来了后,当然不会藏着噎着
通道能力模型修订加入服务器端web开发标准,对公司内web前端兄弟们来说又开启一个新的领域

在运维,后台开发测试等角色也不断提升对node开发工作的认可。毕竟老大认可了你才敢用吧

下一个囿时效性的技术点,大概就是react组件化了时间点反正不在今年。

所以这个问题很火就是因为大家都假装有时效性然后狂讨论的结果仿佛┅夜回到了PC WEB时代一样。

}

我要回帖

更多关于 QQ空间视频播放音量 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信