AlloyTeam Conf是一個干貨非常集中的前端大會仙辟。就前端的技術境蜕，我分享一下前端大會的內容撑教，談談自己的想法。
面向億萬級用戶的Web同構直出
直出技術也就是傳說中的服務端渲染“SSR”技術偷遗，Web首屏頁面的加載速度能得到極大提升墩瞳。AlloyTeam采用的是React技術棧同構直出，我們采用Vue技術棧的同構直出氏豌。
主講人李強用實戰(zhàn)經歷說明了手Q在高訪問量的直出表現喉酌，他說道，直出其實減輕了瀏覽器的負擔箩溃，但是增加了服務器的負擔，大概是以前的5倍碌嘀。這個在生產環(huán)境實現起來事有難度的涣旨。
實現原理
SSR技術說白了就是在服務端和瀏覽器端各有一個入口，共用一份代碼股冗。服務端會把內容拼接好霹陡，緩存起來，提高首屏效率止状。代碼的差異性需要處理烹棉，例如生命周期不同。
由于沒有動態(tài)更新怯疤，所有的生命周期鉤子函數中浆洗，只有 beforeCreate 和 created 會在服務器端渲染(SSR)過程中被調用。這就是說任何其他生命周期鉤子函數中的代碼（例如 beforeMount 或 mounted）集峦，只會在客戶端執(zhí)行伏社。
所以有些瀏覽器相關的內容要在 mounted 底下寫。簡而言之塔淤，SSR的vue項目需要注意的點和普通項目不同摘昌，遷移會帶來成本。
因為涉及到更多的服務端高蜂，SSR會帶來更大的服務器宕機的風險聪黎。騰訊的做法事監(jiān)測服務器的負載，負載過高的情況有柔錯處理备恤，也就是服務器會指向“Plan B”非SSR的頁面稿饰。這樣锦秒，也就是你一套代碼要打包出兩套頁面（SSR和非SSR）。
大型Web項目可用性提升 - 零腳本錯誤的實戰(zhàn)
腳本錯誤對于前端開發(fā)者一點都不陌生湘纵。測試工程師手上機型有限脂崔，一旦發(fā)生腳本錯誤，輕則影響頁面的一些功能梧喷，重則直接導致頁面白屏砌左。大眾用戶處在不同的網絡情況、不同的瀏覽器铺敌。也有可能是后臺改了數據類型等汇歹，更新數據出錯都有可能反應在前端。
高效的錯誤收集分類是非常重要偿凭，有這么一個平臺可以收集到很多數據产弹，從而進一步優(yōu)化整個頁面，這是一個良性的反饋弯囊。Sentry是有名的錯誤上報平臺痰哨，服務端是python寫的，提供很多款語言的SDK匾嘱，進行定制化的錯誤分類分析斤斧。
同時，他提到在測試環(huán)境做了錯誤定位組件霎烙，也非常有實用價值撬讽。
高效H5動畫設計與性能優(yōu)化
h5的動畫是隨著flash正式退出歷史舞臺，它需要一個重要的蛻變悬垃。它包含了動圖游昼，css3動畫，canvas尝蠕，webgl等烘豌。要讓頁面變得生動活潑起來，絕對不是一件簡單的事情看彼。在那些場景用動圖扇谣，那些場景用css3，那些場景用canvas闲昭，其中的選型變得非常重要罐寨。
css3動畫可以采用GPU加速，“willchange”等能夠挽回一些安卓低端機型的劣勢序矩，但是過分的濫用會同樣會造成資源浪費鸯绿。
后函數式編程
函數式變成離我們產品的需求應該是最遠。函數式編程，帶來的是代碼高維護性和觀察者模式瓶蝴。rx.js毒返，cycle.js應該在項目中可以有可以沒有。在數據同步和響應方面更多可以從需求的復雜程度下手舷手。我另外一個受益點拧簸，即是純函數的編寫，純函數的結果不受外部的變量影響男窟，可以緩存盆赤，可以測試，有助于代碼的編寫歉眷。
Service Worker與PWA展望
相比與其他技術牺六，Service Worker是離我們投入生產環(huán)境最近。隨著很多廠家逐漸兼容PWA技術汗捡，例如安卓微信瀏覽器淑际。PWA技術的優(yōu)勢在于不需要大范圍改代碼，而且輕松兼容舊瀏覽器扇住。
Service Worker更像一個“媒介”“代理”春缕。檢查著靜態(tài)資源的更新情況，優(yōu)先價值離線資源艘蹋，舊的資源將會被更新锄贼，其中包括了html，js簿训，css還有fetch請求等咱娶。整個執(zhí)行會有“安裝”“激活”的過程米间，其實非常簡單强品，完成即可從瀏覽器讀取數據。結合多頁面的Vue框架屈糊，將會是成為我下一年的一個重點工作目標的榛。
總結
我在AlloyTeam Conf的收獲還是特別多，我認為能夠和自己工作能聯系在一起的技術逻锐，才是真正的“好技術”夫晌，繼續(xù)加油。
