遨遊GMTC大前端大會

Maxpan發表於2018-07-04

主題

信用卡研發體系建設與工程化演進

在眾多工程化分享中,我覺得來自51信用卡的前端架構組負責人的分享比較清晰、實用和可操作。他講了他到51信用卡後,建立了一套從開發到釋出的整個工程化體系方案。從開發階段eslint程式碼規範審查,到程式碼提交到gitlab倉庫後自動觸發Jenkins構建前端專案,到上線前使用自動化指令碼對production環境配置進行比對檢查,最後通過指令碼部署程式碼到伺服器。一套流程下來,很大程度上避免了人為因素導致出現的問題。提高了軟體整體的可靠性。

他們比較有亮點的是他們在上線前會對production環境配置進行檢查,我覺得這個我們可以借鑑。之前也發生過改了production配置而導致的上線失敗,通過這種方式應該能一定程度上避免。會後加了講師微信瞭解了他們配置比對的技術,還是基於字串匹配的,這塊可能有改進的空間。

支付寶後工程化時代

支付寶做了一個視覺化的工具用來給後臺開發人員快速的開發後臺管理系統的前端介面。通過介面退拽和程式碼插入的方式,使得後臺開發人員可以自主開發後臺管理系統。據說在他們現在後臺系統都是有後臺開發工程師自主搭建和開發的,解放了前端開發去寫重複的後臺管理系統。不過我個人感覺這套系統比較形式化,他只是解決了後臺開發不需要寫介面樣式的問題,但是Javascript邏輯還是要寫的。現在很多現成的UI庫都能很快的解決樣式問題,所以個人感覺這個東西的投入產出比不是很高。

另外,他們做了一個視覺化介面幫助運營人員生成H5宣傳頁。這個我們可以借鑑一下,這個能極大的減少開發人員介入開發宣傳性質H5的成本。只需要運營人員根據自己的配置生成H5就可以了。

剖析HTML5遊戲引擎的渲染原理及動畫效能優化

白鷺引擎的架構師講了圖形學及圖形優化相關知識。由於缺乏對圖形學基礎瞭解,所以全程沒有跟上思路。

對我們比較有用的一些知識點是,他列出了瀏覽器實現動畫和遊戲的各種技術方案以及它們的優劣。

DOM - 適合做靜態內容渲染,適合製作放置類靜態遊戲(旅行青蛙) Canvas2d - 效能和瀏覽器相容都不錯 WebGL - 效能很強勁,但是API複雜,入門門檻很高

在白鷺引擎裡面,相容了這三種渲染方式。

提到“效能糟糕”的含義

  • 幀頻很低
  • 裝置發熱
  • 不定期卡頓

他們給出的建議是,在任何情況下,保持穩定的幀頻會給使用者帶來好的體驗。幀頻再高但是不穩定,使用者也會覺得體驗差。

V8、JavaScript的現在與未來

從V8引擎底層的實現來講解為什麼有些程式碼會是低效的。 例舉了幾個常見的程式碼寫法,分析其效能。對我們平時寫程式碼有一定的指導意義。 具體的例子可以看PPT。 總體感覺講的東西還是太少了,淺嘗截止。

WebAssembly在音視訊領域的應用

前半段在介紹WebAssembly的歷史和基礎,感覺有點浪費時間。後半段介紹了他們如何用WebAssembly去優化他們的應用。

這家公司主要做線上遠端教學的,涉及到老師視訊授課的場景。舉個例子,在老師遠端授課的場景中,程式需要判斷老師授課的時候儀態是否端正,會每隔一定時間截獲一個視訊幀去計算,做面部檢測後給出結果。如果這個計算過程放在JavaScript去做的話,可想而知效能不會好到哪裡去,所以他們嘗試使用WebAssembly去做計算。實際的效果是,使用WebAssembly方案後,視訊的流暢度有明顯的提高。

PWA專題

目前的瀏覽器市場對PWA的支援已經越來越好了,可以開始規模化的使用PWA技術去提升網頁應用的載入效能。

主要優化點如下:

使用serviceworker去快取靜態資源, 使得應用在弱網、離線環境下可用。 使用骨架屏,在靜態資源未載入完之前,顯示頁面的骨架結構,減少使用者的等待預期,提高體驗。

總結

  • 廣告還是比較少的,畢竟門票很貴
  • 乾貨蠻多的,但是技術細節可能由於時間限制沒有講太多。不過很多講師留了微信,可以下來討論
  • 位置嚴重不夠,很多場是站著聽完的

相關文章