掘金 AMA：聽 better-scroll 做者 -- 黃軼聊前端規劃、性能優化和前端開發

時間 2019-11-06

標籤 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教程很贊👍