冬天快要來啦，又到了動物們......冬眠的季節了，作為一支有膽有想法，敢做敢搞事的前端團隊，在這個瑟瑟發抖的季節裡搞一搞動靜，仿佛是使命一般支撐着我們秋冬乏的雙眼皮，那我們到底搞了什麼事呢？下面來一波正經的。
前端領域瞬息萬變，不斷發展的同時呢，業務工具和政策也不斷的增多，咱們大轉轉Fe一直非常希望有機會，可以和一些優秀的前端團隊交流經驗，學習借鑒。是以經過雙方Fe小夥伴的努力，這次轉轉Fe有了一個難得的機會，和我們的好鄰居"去哪兒前端團隊"，來進行一個技術沙龍交流分享會~ 接下來讓我們策馬奔騰，走進這場分享會，看看雙方團隊都帶來了哪些幹貨吧！
轉轉前端性能相關基礎設施介紹
該主題是由轉轉Fe大神袁小龍分享，男神現在主要負責轉轉前端性能平台的一些相關研究。前端性能，一直是前端程式員關注的一個重點。從原理到實踐，小龍結合業務場景，詳細的闡述了轉轉目前的前端性能平台，到底do了what。
轉轉的前端性能平台通過
Performance
對象來擷取各項資料衡量名額，首包時間，白屏時間，首屏時間，可操作時間，加載完成時間等，都是性能分析的重點資料。統計目前隻支援相容
performance.timing
的頁面。目前業内前端架構百花齊放，性能平台對轉轉目前前端業務使用的
react
與
vue
架構分别有一套擷取首屏時間的方法，小龍和團隊小夥伴接下來也會努力為性能平台研究開發一款
webpack
插件，針對不同業務架構采用統一的方式來擷取各項資料名額。
性能平台每日從海量資料中對需要條件進行彙總，通過
mongdb+
分析腳本，監控則借助轉轉資料平台，同時為結果資料增加各種緯度，區分ios和安卓，區分首次加載二次加載，區分端内和端外，手機版本号等等，來保證資料更加的直覺與明顯，為業務提供最大價值。然而，目前性能平台也面臨一些問題，如離線資料庫容量有限，個性化統計需求統計成本高，資料去除長尾難度大等，都是接下來優化完善的重點内容。
接下來小龍結合業務場景，詳細介紹了幾個性能平台的優化實踐執行個體：
webview+dns
解析優化，
webpack3
更新優化，資料接口優化與離線包平台政策，并列舉了幾個優化實踐所帶來的效率的提升。
盡管如此，目前轉轉前端性能平台還面臨着許多需要解決和完善的問題，各種前端架構加大了統計難度，不能一個個為其個性化定制擷取資料名額的方法，以及目前業務代碼侵入較大，個性化監控服務缺少，資料緯度的進一步調整等等。統計細化，前端優化，實時監控，異常預警，統計優化，線下工具，
lightHouse
接入性能統計，生成性能功能報告等等，都是性能平台接下來的征服的挑戰，相信在小龍和性能平台小夥伴的一起努力下，轉轉前端性能平台一定會越來越強大，為業務帶來最大價值的資料，為性能帶來質的提升~
推薦測試工具：
- webpagetest
- 百度APM
- lighthouse
PPT：https://ppt.baomitu.com/d/0b747203#/
Hiproxy 基于Node.js開發的輕量級網絡代理工具介紹
為我們帶來這個主題分享的，是去哪兒團隊機票事業部優秀到發光的前端開發工程師——張代應。在前端開發中，前端程式員總是會面
Hosts
切換、反向代理、
Https
證書以及緩存等帶來的一些瑣碎的問題，
Nginx
固然可以解決部分問題，但是具體使用起來，也是有一些不友善，于是乎針對這些痛點，
Hiproxy
應世而生。
Hiproxy
是基于
Node.js
開發的一個輕量級代理工具，核心功能是請求代理，在代理請求的同時，處理了一些開發中的細節問題，比如
Https
證書自動生成、自動配置浏覽器代理等。接下來代應為大家詳細的介紹了
Hiproxy
的特點，使用方法，以及配置檔案規則。
Hiproxy
在去哪兒的使用覆寫率高達92%，基本實作全Case覆寫，結合使用的情況，像是配置檔案修改即時自動重新整理浏覽器，
Hosts／Nginx
配置檔案在git上的統一管理，證書不被信任等都問題都不再是痛點。提高效率直戳痛點，操作簡單維護友善，就是
Hiproxy
了。代應和他優秀的小夥伴還會繼續為
Hiproxy
豐富更多的用例，開發實用的插件，為
Hiproxy
開發App版本，讓
Hiproxy
變得更強大。貼上
Hiproxy
首頁連結，這麼優秀又高效的工具，你，值得擁有~
連結：http://hiproxy.org
PPT：https://ppt.baomitu.com/d/874462b4#/
離線資源包的更新政策
該主題是來自咱們去哪兒團隊的用戶端研發工程師張乃旺分享，大師自帶一身濃郁技術氣息，目前負責
Hybrid
和
ReactNativeAndroid
架構的設計和開發。大神從自身的業務環境就去哪兒APP離線資源包更新所遇到的問題及解決政策進行了詳細的闡述，要點如下：
- 減少故障：開發和測試同學高品質的産出；對權限的把控；提供特定使用者下載下傳功能，主要面向測試同學；灰階控制，先為少部分使用者派發新的包。
-
故障處理：開發同學對故障的快速響應；在可復原的前提下，服務端下線有bug的資源包； Native分别在整個應用啟動的時候，打開每個頁面的時候以及 ios還在 APP背景切到前台的時記錄下線辨別并不再使用；
-
強制更新：發資源包的時候設定為強制更新，服務端把下線辨別在 Native請求時傳回； Native發版時，内置失效版本控制，對架構更新導緻的不相容舊版本，覆寫舊版全部資源包。
-
安全保障：用 Https服務；每次使用之前校驗；下載下傳完成後校驗
-
提高更新率：使用差分下載下傳，因為網速不可控，是以包越小更新率越快，但是總量也不能太大；不用的業務要及時的下線；啟動用戶端時靜默下載下傳 （WIFI）；打開頁面時靜默下載下傳；使用率高的業務先下載下傳；
- 完善服務：分别對離線包版本占比，離線包版本趨勢，離線包下載下傳時間，頁面加載時間等資料進行統計分析，完善政策。
PPT：https://ppt.baomitu.com/d/a9f986b4#/
在最後的技術圓桌交流環節，去哪兒和轉轉的小夥伴對分享内容進行了深入的探讨交流，對分享的内容有了更深的了解和沉澱，去哪兒前端團隊也為轉轉前端接下來的發展傳授了十分寶貴的經驗與建議，技術分享雖然結束，但是友誼的小船正式揚帆！以後轉轉Fe與去哪兒Fe小夥伴會努力争取更多可以坐下來閑話技術家常的機會，為大家帶來更多暖洋洋的幹貨！鼓掌，撒花，期待~
現場照片
——————————————————
長按二維碼，關注大轉轉FE