掘金 AMA：听 better-scroll 作者 -- 黄轶 聊前端规划、性能优化和前端开发

第二十五期 AMA 掘金团队请来了 better-scroll 的作者 -- 黄轶 做了为期三天的 Ask Me Anything (AMA) 活动（活动已结束）。 我们在此精选了一些来自用户的提问及黄轶的回答。

黄轶，Zoom 公司前端架构师，曾就职于滴滴和百度，毕业于北京科技大学，开源库 better-scroll 的作者，慕课网老师

本文的提问目录

社区小伙伴精选提问

对技术的看法

大佬对flutter怎么看？ -@爱学习

大佬对flutter怎么看

flutter 现在风头正盛，但仍然不够完善，还需要经历业务的考验吧~ 可以关注一些主做移动端的公司，比如滴滴、阿里、腾讯、头条等大厂在这方面的应用实践吧。

前端会向哪个方向重点发展呢？目前前端部分还有什么痛点需要解决呢？ -@程简

黄老，这几年的前端趋势是mvvm、组件化、工程化以及typescript，您觉得接下来的近几年前端会向哪个方向重点发展呢？目前前端部分还有什么痛点需要解决呢？期待您的解答，感谢！

前端往深入做通常是几个方向，复杂应用（比如 web doc 这种规模的）、数据可视化（2D、3D）、前端工程化、架构。

痛点如目前非常火的多端框架，本身是值得探索的一个方向，但是由于各个端的标准和实现不一致，导致目前的状态是调试困难，坑多。

另外，感兴趣的话也可以把视野放更广一些，比如可以关注 AI，入门机器学习等等。

老师怎么看待未来桌面应用例如electron的发展前景？ -@zoomdong

老师怎么看待未来桌面应用例如electron的发展前景？

electron 让前端工程师开发桌面应用更加容易，但它本身还是桌面应用，需要安装，大部分企业还是会更倾向于 web 的方式吧。另外，我觉得 PWA 可以多关注喔。

如何对现有的传统项目进行前后端分离？ -@大志_前端

你好，请问下如何对现有的传统项目进行前后端分离？前后端分离的一个开发流程是怎么样的会比较好？

举个例子吧（由于一些敏感信息，就不举 Zoom 的实际例子了，部分类似） 首先列举一下传统项目的痛点：

1. 技术老旧（ES5、jQuery、没有模块化、组件化、没有使用 MVVM 框架、没有成熟的构建方案）
2. 项目复杂（有上百个页面，所有页面集成在一个大的 web 工程里，前后端耦合） 3.不能独立部署，发布效率低

再列举一下前后端分离重构的技术挑战： 1.在现有项目下难以引入先进的前端开发方式（纯 Vue 开发、webpack构建） 2.不可能一次性重构所有页面，成本高、风险大

接下来分析一下老项目的特点，结合一张图来看（图片在最下方）：

1. 多页，点击左侧的导航都 会跳转到一个新的页面
2. 服务端渲染，基于模板渲染，并且左侧、头部和底部是公用模板。
3. 右侧业务独立，每个页面右侧业务都不一样，渲染不同的模板。

最后说一下重构的设计思路：

1. 按页面粒度重构
2. 页面的右侧红框部分提供一个占位符节点，这个节点用 Vue 渲染，实际上就是执行一段 JS 代码。 （这里拿 Vue 举例，其它框架类似）。
3. 执行的 JS 代码放到单独的仓库中维护 ，这样可以拥有最先进的开发方式和体验（TS/ES6、Webpack、模块化、组件化、任意MVVM 框架）。
4. 上线只需要去构建执行 JS 的仓库，打包后的 JS、CSS 等代码可以独立发布到静态资源服务器，同时更新配置文件 。
5. 主框架对应的模板会通过配置文件读取它应该加载的静态资源

以上只是针对这类场景的重构方案，作为架构师就需要能够分析当前项目的痛点、特点，结合场景提出合理的解决方案。

前后端分离是目前比较主流的开发方式，它从物理上把一个项目的开发拆为前端和后端，前端和后端可以并行开发项目，通过约定异步 API 接口完成数据的交互。

请问在前端性能优化这一块有何建议？ -@Gerry0808

大佬您好，本人坐标合肥，最近在用vue重构之前AngularJS 1.x项目。新项目表单表格等都是基于配置，随之而来会带来首页响应时间较长，请问在前端性能优化这一块有何建议？(ps：系统偏业务数据处理，且用户高度可配置，目前首屏7s左右，后续可能还要增加)

性能优化还是需要先分析性能瓶颈的，通常可以配合 chrome 开发者工具去定位。通常首屏可能会造成性能的问题，如果是 ssr，可能服务端压力大，关注请求到服务端响应的时间。如果非 ssr，要看首屏加载的静态资源大小，通常可以考虑用按需加载来减少加载的体积，另外如果页面靠接口数据渲染，也需要去关注接口的响应时长。另外还有一个预渲染的方案，就是类似骨架屏的思想，先在 html 中输出一些占位符（如base64图片），让页面加载后立刻渲染出东西，让用户有一个等待预期，然后在 JS 渲染页面后移除占位符。

对非技术问题的看法

没有牛逼的项目，怎么走上前端架构之路？ -@1号小白

小公司没有什么大公司背景，没有牛逼的项目，怎么走上前端架构之路

首先，你需要能快速响应公司的业务需求，成为一名熟练工。然后可以思考开发过程中有没有什么痛点，能不能通过技术的手段，比如开发一些工具和插件来提升开发效率，在这个过程中，你可以去调研业内有没有成熟的轮子，轮子能不能满不满足你的需求，可以对轮子做研究甚至去做贡献，这个过程你会接触到学习到很多不曾接触到的知识，积累沉淀下来。另外，你也需要多花业余时间去学习，学习的方向是你工作相关的技术栈，学精学通。

等自己有一定能力了，不妨去投简历到心仪的大公司，刚提到的这些经历可以成为简历的亮点。进入大公司后，你会遇到更多的挑战，业务规模、开发效率、性能、稳定性等等都会有更高的要求，在你不断去面对挑战，解决问题的过程中，你自然就会慢慢成长了。当然，进入大公司后你可能一开始也可能是一颗螺丝钉，但是你自己是可以多花时间，对自己接触到的工具链做研究，主动承担一些有挑战的任务，如果你的能力得到了认可，你就会有机会接触到更多有挑战的任务。能够分析出问题的痛点，提出一些适合场景且合理的解决方案，就是前端架构师通常做的事情。

我以上说的，会有很多时候都需要跳出自己的舒适圈，并且需要付出更多的时间和努力，勤思考，多总结。所以，想成为前端架构师并不容易，加油吧~

在成长期是如何提升技术的？ -@小宣同学

最近就准备用您的better scroll了，主要想咨询一下您关于个人成长的问题。我目前的工作只是做一些套皮的webapp，或者一些爬虫类的应用，对比朋友，总感觉做的东西上不了台面，拿不出手。而且个人技术上，在性能优化，bug数量上也有了瓶颈。我就想问大佬你是如何突破瓶颈的。第二，如何平衡理想和现实的差距。第三，能否分享一下您在成长期是如何提升技术的，我总感觉我找不到方向，什么名词都知道，但什么都不会

1.突破瓶颈通过就需要跳出舒适圈，做一些需要解决，但你目前并不擅长的问题，需要你跳一下才能搞定。

2.放平心态，多和自己比较，而不是和他人比较。

3.可以看图 2 (黄老师的自我介绍图)的具体介绍，我主要是兴趣驱动，对某个正在使用的技术会钻研的比较深入，喜欢研究它的实现原理，彻底搞懂它。在钻研的过程中会也学习到很多知识，积累沉淀下来。

如何做职业生涯规划呢 -@王子林

你认为如何做职业生涯规划呢？从前前端几年了，感觉处于瓶颈期，目前比较迷茫，目标不明确。

通常做技术往上 2 条路。1.纯技术路线：架构师技术专家 2. 技术+管理路线。

先找准你的方向，如果对技术感兴趣，建议走 1 路线，否则就走 2。

对于管理，我不是很擅长，我的经验就是首先你自己的技术要过硬，让底下人认可你，其次就是思考怎么发挥团队的最大价值，为团队小伙伴谋福利，关注他们的成长等。但是无论哪条路线，你的技术一定要好，而且我是不太建议工作个 5，6 年就转纯管理，时间太短，即使做了也不要落下技术。

所以你目前还是需要精进技术，突破瓶颈通过就需要跳出舒适圈，解决一些需要你跳一下才能搞定的问题，最好是能找到你目前工作中的一些痛点，通过技术的手段去解决。我看你在字节跳动，也可以关注一下其他团队做的事情。

我知道头条有一个非常牛逼的大佬-张袁炜，他是我在百度时期的导师，你也可以找他交流下😀

Vue应该如何进阶和提升 -@Wongchisum

老师 我想请问Vue应该如何进阶和提升呢? 总感觉自己处在一个业务仔的技术水平

1. 做复杂的应用，思考不同场景在 Vue 下如何解决，并搞清楚 Vue 的边界职责（即 Vue 能做什么，不能做什么）。
2. 了解一下周边生态工具如 vue-router、vuex 的实现原理，尝试去写一些简单的轮子，比如自定义指令、插件等。
3. 阅读源码，了解 Vue 的核心原理实现。
4. 参与 Vue 或者周边生态工具源码的共建。

初级前端如何进阶 -@軟涙

大佬 初级前端如何进阶 感觉瓶颈了

突破瓶颈通过就需要跳出舒适圈，做一些需要解决，但你目前并不擅长的问题，需要你跳一下才能搞定。比如做一些复杂的应用；去深入研究你工作中使用到的某个技术栈的原理实现；通过技术手段去解决工作中的一些痛点。另外也可以多看一些经典的书籍和一些进阶的视频课程学习。

不过，如果你在一个初阶水平，可以提升的空间还是很大的，应该很难到瓶颈的呀~

忙于业务，还是基于老的框架，如何能提升自身？ -@whj768702

大佬，天天加班严重，忙于业务，还是基于老的框架，如何能提升自身？感觉很困惑

首先需要提升自己的开发效率，思考一下能不能抽象一些通用的模块和组件等，开发过程中有没有痛点，有没有能通过工具而不用人解决的问题，如果你能发现一些问题并通过技术手段解决，那么已经是一个提升了。

其次，老的框架是否需要升级，如需要，如何平滑升级，如何做到升级对现有业务影响最小，如果影响很大，思考一下现有项目的组织方式是否合理。如果把上面这些问题都想清楚，并解决，也是一个提升了。

再次，我每天做的业务，接触到的一些工具链和技术栈，我是否已经对它们的原理深入掌握了，出现 Bug 和坑我能否快速定位和解决，如果现有轮子不能满足需求的时候，我能不能快速造一个出来，做了这些又是一个提升。

最后，如果觉得公司对技术重视程度不够，也可以考虑换一个坑。

你以前刚接触web前端时，每天看几本书？通过啥方式提升？ -@十年磨一剑

你以前刚接触web前端时，每天看几本书？通过啥方式提升？

我看的前端书并不多，也远达不到一天几本，经典的红宝书和犀牛书我有反复的看过，前期基本就是一个编码 - 看书 - 编码 - 看书的节奏。另外，我也比较推荐看一下广度相关的书籍，比如《http 权威指南》、《精通正则表达式》、《Head First 设计模式》《代码整洁之道》 等

想推动vue ssr的方案，有种推不动的无力感，我是否需要通过辞职来改善 -@AppleSun

公司之前还有ftp切图的，现在总算有前后端不分离的做法了，但是老板觉得前端效率太低了， 现在有一个新项目，我想推动vue ssr的方案，做了不少功课，但是 老板的意思好像觉得前端写的太慢了，有种推不动的无力感，我是否需要通过辞职来改善

前后端不分离是一个人把所有活都做了么，你给老板提方案的时候，是否列举了现状的痛点，以及你的方案的优势呢，另外写优势最好有数据支撑，比如效率可以用 ”人/天“ 的单位。然后就看你的老板是不是讲道理了，如果完全的主观认为前端写的慢，那我觉得还是非常不靠谱的。

怎么培养自己的架构思维? -@梦与清河

黄老师，请问应该怎么培养自己的架构思维呢？

这个需要长期的经验积累的，说几个关键词吧，借鉴、思考、总结，交流。 借鉴是站在巨人的肩膀上，比如可以学习张云龙大佬的博客：github.com/fouber/blog

思考是多去想我怎么设计才是最合理，能否解决当前业务的痛点，如何做到开发时对开发者友好，上线时对用户友好。

总结就是每次经验用文字记录下来，积累和沉淀。这个时候也可以多思考思考，有没有哪些地方是不合理的，有没有更好的方案。

交流就是把一些案例分享出去，和大家一起探讨和交流，碰撞一些不一样的思维火花。

现在多端统一开发框架这么多，有没有学习的建议 -@TheShining

现在多端统一开发框架这么多，有没有学习的建议

首先思考一下你的业务是否需要多端框架，比如 App、h5 和小程序需要一样的设计吗，答案是很多情况下是不一样的，从产品设计上来说，App 通常是最完善的功能，h5 保留主要功能，而小程序多半是一个快速入口。

其次目前多端框架多半不成熟，如果是核心业务，务必谨慎使用，很多情况下，大公司也会在一些偏运营展示的简单业务中使用这类多端框架。

最后，一定要做技术选型，那么就从技术栈、框架维护力度，以及社区的活跃度几个方向权衡吧。

如何完善自己的工作流，这种包括了项目初始化、本地开发、联调、测试、上线等各个环节，是如何探索出来的呢？ -@RandyHo

关于前端开发，如何完善自己的工作流呢，目前的工作流十分原始，流程是明确需求-项目开发(开发环境/正式环境)-测试-上线。如果在大厂面试，工作流这块比较吃亏。 像黄老这种包括了项目初始化、本地开发、联调、测试、上线等各个环节，是如何探索出来的呢？

这些都是在大厂训练出来的，其实程序员更多的应该去思考一个需求从产生 - 落地的各个环节，现在大部分人能做到从一个项目的开发-上线各个流程的属性，其实在 Zoom 我们会从产品的设计开始，自己会去设计产品应该如何实现，用户需要什么样的功能，从 owner 的角度去设计和开发，并负责产品的测试和上线，这才是工程师应该有的素质。所以即使在一个有很多产品经理的公司，工程师也可以多参与产品的设计和讨论喔。

可以分享一下组建团队的时候 你是怎样考虑自己要选择的队员 ，以及如何对他们的工作进行分配和评估的 -@唐锋

黄老师 你在滴滴的时候你是你们团队的第一个人 ，团队都是你组建起来的吗， 可以分享一下组建团队的时候 你是怎样考虑自己要选择的队员 ，以及如何对他们的工作进行分配和评估的

是第一人，不过后来没有做 leader，有些事情就不便这里说啦。我可以分享一下我后来做 WebApp 前端架构团队负责人是如何招人的，主要看候选人是不是符合团队的整体气质，比如我们团队是一个爱折腾技术，喜欢分享的团队，如果候选人在这方面突出，肯定是大大的加分项。

工作分配主要是看他们每个人的情况，通常一个人会负责一块业务，同时也有相关的技术方向。会把一些基础的开发工作分配给应届生，因为他们是需要大量做业务的阶段，会把一些有挑战的工作分配给一些有潜力的同学，让他们快速成长。另外我们团队还有很优秀的同学，会主动承担和负责一些技术方向，这些我都非常鼓励的。

特别篇：better-scroll

维护和新版问题

一条没有梦想的咸鱼 提问：最近使用better-scroll，发现一个bug。横向滚动轮播。设置passthrough vertical，竖向滑动会触发元素上的tap事件（如果手指只是竖向画，没有触发横向滚动）。git上还有很多issue没解决啊😄。大佬你是不是太忙了。还有你的vue教程很赞👍

better-scroll 目前主要是我之前滴滴团队的小伙伴在维护，最近主要在搞 2.0 的重构，正式版也快发了吧😀，如果确定是 bs 的 bug 可以按 issue template 去提喔，会处理的~

本期 AMA 社区小伙伴的整理文

感谢「全栈修炼」从开发角度整理了下本期的 AMA，阅读传送门：juejin.im/post/684490…

---

由于篇幅原因，本期只摘录了部分问题，黄老师也回答了超多其他的技术、非技术问题，欢迎去他的 AMA 下面交流技术哟，传送门。

往期 AMA