SegmentFault 專訪丨一文驚人的高工曉思

時間 2020-05-12

標籤 segmentfault 專訪一文驚人高工简体版

原文原文鏈接

導讀

首屆 AC 2015 大會即將於 2015 年 12 月 12 日在深圳騰訊大廈總部舉行。這是 AlloyTeam 沉寂一年來首次對外舉行的一次技術分享。AlloyTeam 前身是負責 WebQQ、Q+ 互聯的騰訊前端團隊，最近又歷經了興趣部落、羣開外、家校羣等一連串 QQ 拳頭項目的洗禮，積澱了很多技術知識，但願藉着一年一度的技術分享會對外展現咱們一年以來的技術成果。屆時，亦會有神祕 web 遊戲項目對外公佈。前端

賴曉思git

AC 2015 的講師之一，2012 年加入騰訊 AlloyTeam，曾參與 QQ 互聯、羣基礎、興趣部落等項目的開發，目前負責興趣部落的頁面開發。在公司內率先使用跨 webview 預拉取數據的性能優化辦法。之因此說一文驚人，是由於他成功解決移動端滾動列表的卡頓問題，提出 InfiniteScroll.js 的解決方案，並將解決滾動列表卡頓的解決方案，包括代碼、橫向對比的數據分析、渲染分析以及圖表及視頻的形式發佈在內網，得到一致好評。這套方案的結合分析也是他成爲高級工程師的一大亮點。他將會在 AC 大會中分享以上優化心得。github

關於成長

能介紹一下你本身？web

賴曉思：我叫賴曉思，暱稱是 Cson，廣東工業大學網絡工程系畢業。來到 AlloyTeam 以後，因爲比較喜歡 HTML5 遊戲相關的開發，因此利用業餘時間作了 CodeTank 這個編程遊戲，但願讓開發者在玩遊戲的同時也可以進行 JavaScript 的學習。以後和幾個小夥伴參加騰訊創意馬拉松，開發了另外一個比較有意思的 HTML5 體感遊戲「牆來了」。後來在工具方面，開發了面向開發者的交互頁編輯器 AEditor，但願能夠經過它解決交互頁開發效率的問題。編程

在你上面提到的幾個項目，例如 Codetank、牆來了、AEditor，你最喜歡哪一個項目？這個項目給你帶來了怎麼樣的成長呢？性能優化

賴曉思：每一個項目對於我來講都有不一樣的意義，最喜歡的應該是 CodeTank，這也是我投入時間最長的項目。那時剛剛畢業來到 AlloyTeam 實習，可以在作業務項目之餘投入到這個項目當中，真的很高興。在作這個項目的過程中，也學習到很多前端方面的知識，特別是遊戲開發中的一些基本原則與技巧，例如對 API 的設計，遊戲中動畫的運做模式，與玩家的交互以及優化技巧等等，開發CodeTank 的過程感受很是有意思，又頗有挑戰性的。網絡

如今做爲高級工程師，你能不能分享一下你在技術方面的成長曆程，包括你是如何進入騰訊，而後又是經過怎麼樣的努力快速成爲高級工程師？dom

賴曉思：在學校的時候，剛開始自學 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 前端技術在中國的發展！