SegmentFault 专访丨 一文惊人的高工晓思

导读

首届 AC 2015 大会即将于 2015 年 12 月 12 日在深圳腾讯大厦总部举行。这是 AlloyTeam 沉寂一年来首次对外举行的一次技术分享。AlloyTeam 前身是负责 WebQQ、Q+ 互联的腾讯前端团队，最近又历经了兴趣部落、群开外、家校群等一连串 QQ 拳头项目的洗礼，积淀了很多技术知识，但愿借着一年一度的技术分享会对外展现咱们一年以来的技术成果。届时，亦会有神秘 web 游戏项目对外公布。

赖晓思

AC 2015 的讲师之一，2012 年加入腾讯 AlloyTeam，曾参与 QQ 互联、群基础、兴趣部落等项目的开发，目前负责兴趣部落的页面开发。在公司内率先使用跨 webview 预拉取数据的性能优化办法。之因此说一文惊人，是由于他成功解决移动端滚动列表的卡顿问题，提出 InfiniteScroll.js 的解决方案，并将解决滚动列表卡顿的解决方案，包括代码、横向对比的数据分析、渲染分析以及图表及视频的形式发布在内网，得到一致好评。这套方案的结合分析也是他成为高级工程师的一大亮点。他将会在 AC 大会中分享以上优化心得。

关于成长

能介绍一下你本身？

赖晓思：我叫赖晓思，昵称是 Cson，广东工业大学网络工程系毕业。来到 AlloyTeam 以后，因为比较喜欢 HTML5 游戏相关的开发，因此利用业余时间作了 CodeTank 这个编程游戏，但愿让开发者在玩游戏的同时也可以进行 JavaScript 的学习。以后和几个小伙伴参加腾讯创意马拉松，开发了另外一个比较有意思的 HTML5 体感游戏「墙来了」。后来在工具方面，开发了面向开发者的交互页编辑器 AEditor，但愿能够经过它解决交互页开发效率的问题。

在你上面提到的几个项目，例如 Codetank、墙来了、AEditor，你最喜欢哪一个项目？这个项目给你带来了怎么样的成长呢？

赖晓思：每一个项目对于我来讲都有不一样的意义，最喜欢的应该是 CodeTank，这也是我投入时间最长的项目。那时刚刚毕业来到 AlloyTeam 实习，可以在作业务项目之余投入到这个项目当中，真的很高兴。在作这个项目的过程中，也学习到很多前端方面的知识，特别是游戏开发中的一些基本原则与技巧，例如对 API 的设计，游戏中动画的运做模式，与玩家的交互以及优化技巧等等，开发CodeTank 的过程感受很是有意思，又颇有挑战性的。

如今做为高级工程师，你能不能分享一下你在技术方面的成长历程，包括你是如何进入腾讯，而后又是经过怎么样的努力快速成为高级工程师？

赖晓思：在学校的时候，刚开始自学 ASP.NET，并在学校作了一些网页项目，练手的同时赚一些了零花钱。后来到了大三，才真正开始接触前端开发，以后以为前端开发比后台开发更有意思，一些本身的想法均可以经过简单的 JavaScript 进行实现，就一直专一在前端开发这个领域上了。

那时在学校没事就用 JS 写一些简单的组件和效果，或者是一些简单的 H5 游戏，而后把遇到的问题与解决方案分享到博客中，我以为 JS 入门的话，仍是应该本身多练练手，以本身的兴趣为导向作一些喜欢的项目，这样一方面能把基础打扎实一点，另外一方面又能锻炼解决问题的能力。我以为腾讯校招主要看重学生的基础与积极性，固然也很重视毕业生的动手能力以及对编程自己的兴趣。

至于如何快速成长为高级工程师，我觉着就是要重视本身解决问题的能力，腾讯这边对于高级工程师的最重视的也是解决问题的能力。我平时会尝试在解决一个问题的时候思考多种不一样的解决方案，有些方案可能在解决了一个问题以后又会引入其余的问题，所以，咱们会花比较多的时间在不一样方案之间进行对比。在选择方案的时候最好以具体的性能测试数据做为依据，这样才能客观地看待一个方案的优劣。例如对于加载优化，咱们要收集优化前与优化后的加载时间数据做对比，而对于渲染优化则是 FPS 的先后对比。

另外，遇到一些比较难解决的问题能够多想一想可否经过其余捷径来解决，或者参考一下其余在这方面比较有经验的同事的作法，从中获取一些灵感并改善本身的项目。遇到问题并解决以后，最好能作一下总结与分享，这样你们均可以一块儿提升。

AC 技术看点：渲染优化

你说在 AC 大会上你会介绍在处理滚动长列表的渲染优化方案。在渲染优化方面，业界也出现过不少不一样的尝试方案，例如以前的 React Canvas，大家是否进行过相似的尝试，在不一样的方案上又是如何取舍的呢？

赖晓思：不一样的方案可能在不一样的平台或者场景下有不一样的表现，例如咱们这边以前也尝试过使用 Canvas 渲染列表的方式，把长列表放到 Canvas 上进行绘制渲染，可是发如今不一样的Android 机型下，有较大的性能差别，另外还会带来无障碍化上的硬伤。另外，咱们也尝试过把不可见区域的列表元素移除的优化方式，发如今 PC 上运行良好，可是在移动端却会带来较大的性能问题，因为每次在移除/添加列表元素因为触发了整个列表的 layout，致使每次都会带来明显的卡顿。因此有时候咱们可能须要在不一样的环境下采用不一样的方案，或者采用适合大部分环境的通用方案，具体也是须要和业务结合起来进行评判。每一种解决方案的实践和性能对比在这我就很少说了，到时我会在 AC 2015 上给你们细说。

如今纯前端的性能优化方案感受已经开发得差很少，愈来愈多人日后台寻求方案，如 Node 直出、HTTP2.0、SPDY 等等，真的是这样吗？纯前端的优化方案在将来还有哪些方向会有突破点？

赖晓思：基本的纯前端优化方案确实已经开发得差很少了，但一些新的纯前端性能优化方案，如最近比较流行的 React 使用的虚拟 dom 技术、Webpack 带来的打包模式的改变等，确实能够为咱们制定优化方案提供一些新的灵感。

另外在与后台结合方面，后台直出等也确实是前端以外可行的方案，可是当这些通用的方案都使用上以后，可能咱们又会发现很难再找到其余的方案进行优化。因此其实我以为优化方案应该结合具体的业务以及具体的环境去进行实施。举个例子，若是是和客户端结合的业务，那咱们能够利用客户端的能力去为前端作一些格外的优化，就像咱们手 Q 自研的离线包、前端调用客户端能力的 mqq 库等。

另外对于不一样业务场景，也能够在其中去发掘出另一些优化的点，这些可能都不必定是通用的优化方案，但只要适合业务自己就能够了。总的来讲纯前端优化方案可能愈来愈少，跨界结全后台、客户端的方案可能会挖掘到很多的宝藏。

关于 AC 2015 AlloyTeam 前端技术大会

腾讯 AlloyTeam 源于 2008 年成立的腾讯 WebQQ 团队，于 2011 年 10.24 正式对公司外以「腾讯 AlloyTeam」为团队名称进行对外交流，AlloyTeam 的寓意是：像合金同样将各类技术，以及各个成员的聪明才智聚合在一块儿，从而产生更强的合金特性，将来咱们也但愿经过聚合业界的各大前端牛人，来共同推进 Web 前端技术在中国的发展！

附：赖晓思我的项目资料

GitHub：https://github.com/csonlai
墙来了：http://wc.alloyteam.com
codetank：http://codetank.alloyteam.com
AEditor：http://aeditor.alloyteam.com