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

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

关于黄轶

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

本文的提问目录

社区小伙伴精选提问

对技术的见解

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

大佬对flutter怎么看vue

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

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

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

前端往深刻作一般是几个方向，复杂应用（好比 web doc 这种规模的）、数据可视化（2D、3D）、前端工程化、架构。程序员

痛点如目前很是火的多端框架，自己是值得探索的一个方向，可是因为各个端的标准和实现不一致，致使目前的状态是调试困难，坑多。github

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

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

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

electron 让前端工程师开发桌面应用更加容易，但它自己仍是桌面应用，须要安装，大部分企业仍是会更倾向于 web 的方式吧。另外，我以为 PWA 能够多关注喔。正则表达式

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

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

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

技术老旧（ES五、jQuery、没有模块化、组件化、没有使用 MVVM 框架、没有成熟的构建方案）

项目复杂（有上百个页面，全部页面集成在一个大的 web 工程里，先后端耦合） 3.不能独立部署，发布效率低

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

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

多页，点击左侧的导航都会跳转到一个新的页面

服务端渲染，基于模板渲染，而且左侧、头部和底部是公用模板。

右侧业务独立，每一个页面右侧业务都不同，渲染不一样的模板。

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

按页面粒度重构

页面的右侧红框部分提供一个占位符节点，这个节点用 Vue 渲染，实际上就是执行一段 JS 代码。（这里拿 Vue 举例，其它框架相似）。

执行的 JS 代码放到单独的仓库中维护，这样能够拥有最早进的开发方式和体验（TS/ES六、Webpack、模块化、组件化、任意MVVM 框架）。

上线只须要去构建执行 JS 的仓库，打包后的 JS、CSS 等代码能够独立发布到静态资源服务器，同时更新配置文件。

主框架对应的模板会经过配置文件读取它应该加载的静态资源

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

先后端分离是目前比较主流的开发方式，它从物理上把一个项目的开发拆为前端和后端，前端和后端能够并行开发项目，经过约定异步 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应该如何进阶和提高呢? 总感受本身处在一个业务仔的技术水平

作复杂的应用，思考不一样场景在 Vue 下如何解决，并搞清楚 Vue 的边界职责（即 Vue 能作什么，不能作什么）。

了解一下周边生态工具如 vue-router、vuex 的实现原理，尝试去写一些简单的轮子，好比自定义指令、插件等。

阅读源码，了解 Vue 的核心原理实现。

参与 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.cn/post/684490…

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

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