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

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

关于黄轶

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

本文的提问目录

目录 关于黄轶 社区小伙伴精选提问 对技术的看法 大佬对flutter怎么看？ -@爱学习 前端会向哪个方向重点发展呢？目前前端部分还有什么痛点需要解决呢？ -@程简 老师怎么看待未来桌面应用例如electron的发展前景？ -@zoomdong 如何对现有的传统项目进行前后端分离？ -@大志_前端 请问在前端性能优化这一块有何建议？ -@Gerry0808 对非技术问题的看法 没有牛逼的项目，怎么走上前端架构之路？ -@1号小白 在成长期是如何提升技术的？ -@小宣同学 如何做职业生涯规划呢 -@王子林 Vue应该如何进阶和提升 -@Wongchisum 初级前端如何进阶 -@軟涙 忙于业务，还是基于老的框架，如何能提升自身？ -@whj768702 你以前刚接触web前端时，每天看几本书？通过啥方式提升？ -@十年磨一剑 想推动vue ssr的方案，有种推不动的无力感，我是否需要通过辞职来改善 -@AppleSun 怎么培养自己的架构思维? -@梦与清河 现在多端统一开发框架这么多，有没有学习的建议 -@TheShining 如何完善自己的工作流，这种包括了项目初始化、本地开发、联调、测试、上线等各个环节，是如何探索出来的呢？ -@RandyHo 可以分享一下组建团队的时候 你是怎样考虑自己要选择的队员 ，以及如何对他们的工作进行分配和评估的 -@唐锋 特别篇：better-scroll

社区小伙伴精选提问

对技术的看法

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

大佬对flutter怎么看

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

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

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

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

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

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

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

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

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

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

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

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

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

前后端分离是目前比较主流的开发方式，它从物理上把一个项目的开发拆为前端和后端，前端和后端可以并行开发项目，通过约定异步 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 年就转纯管理，时间太短，即使做了也不要落下技术。

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

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

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没解决啊:smile:。大佬你是不是太忙了。还有你的vue教程很赞:+1:

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

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

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

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