騰訊Web前端大會精彩回顧

最新 06-29

騰訊Web前端大會已經圓滿結束啦。希望大家收穫滿滿乾貨的同時，能夠在現場與大牛們碰撞各種火花。

會前花絮

大會的工作人員，基本都是AlloyTeam的工程師哥哥們，在忙完一天的需求之後，周五晚上紛紛趕赴大會現場籌備，為了準備1000多位參會者的簽到禮物、做設備調試，大家奮戰至深夜。

為了讓旅途疲憊的參會觀眾得到放鬆，我們在開場前準備了一些極具騰訊特色的節目，包括騰訊的SOS舞團舞蹈表演，騰訊樂團的精彩樂隊表演，還邀請了一位模特兒擔任大會寶貝，可以一同合照，不知道大家是否已經跟寶貝拍照或者表白了呢？

主會場

黃老師分享騰訊前端經驗

大會開始後，首先迎來了騰訊雲技術總監黃老師的開場發言，他分享了自己早年在騰訊前端的開發經歷，還有介紹自己在W3C無障礙化的工作。黃老師推動業界無障礙化確實是不遺餘力。

Winter分享阿里前端經驗

淘寶的Winter本來安排在接下來的開場發言，不過由於航班延誤，推遲到了最後。他其中提到的理念，Web與客戶端其實不是競爭，更多是融合合作，蠻有啟發性。

Nicolas Bevacqua分享W3C標準制定

接下來是來自Elastic Search 的 Nicolas Bevacqua 分享 TC39 委員會及其制定W3C標準的流程，內容雖不難，不過其實對許多新手工程師來說，並不知道。

張雲龍分享初創公司的前端工程化

然後是業界工程化先驅，現在在全民直播擔任CTO的張雲龍大神，他毫無保留地將自己在全民直播這樣一家初創公司的前端工程化實踐，介紹給了大家。

迷渡分享面向前端的V8性能優化

分會場一

1.1 騰訊-萬波-WebGL新篇章

首先由來自騰訊的高級前端工程師BruceWan（萬波）分享《WebGL新的篇章》，萬老師通過通俗易懂的語言向大家講解了如何去更好的學習WebGL，分析了WebGL的可行性，介紹了WebGL & ThreeJs的工作原理。通過簡易的例子向大家闡述了一些三維場景的理論知識，並且介紹了三維軟體製作流程。通過演示一些實例展示了WebGL廣闊的應用場景。小編也是被WebGL的應用場景所震撼，直呼驚嘆。

1.2 美登科技-鄧鋆-前端與機器學習結合

接下來是來自美登科技的前端架構師鄧鋆分享《前端與機器學習結合》，以未來前端的新定義為開篇打開了大家的新視野。簡單的介紹了機器學習的基本概念，傳統編程與機器學習的區別。前端如何應用機器學習是大家所關心的，鄧老師以實踐經驗介紹了前端開發與機器學習的結合，數據是機器學習的核心，在採集數據的時候應該注意一些敏感數據以保證用戶安全隱私。

1.3 騰訊-渠宏偉-企鵝電競PWA實戰

接下來是來自騰訊的高級前端工程師HongweiQu（渠宏偉）分享《企鵝電競PWA實戰》，漸進式Web應用簡稱PWA，渠老師講解了PWA一些關鍵特性，並用Demo向大家展示了這些特性，用一些PWA收益例子突出了PWA對於項目的優勢。技術總是大家追捧的，老師細心通俗的講解了PWA的核心技術，並用代碼展示了具體是如何操作實現的。通過實例向大家演示了如何從無到有創建一個PWA應用。最後介紹了PWA的一些限制。

1.4 騰訊-盧嘉輝-QQ空間AMP實戰

最後是來自騰訊的高級前端工程師LoviseLu（盧嘉輝）分享《QQ空間AMP實戰》，加速移動頁簡稱AMP，盧老師對AMP做了簡單的概述，介紹了AMP的技術組成與使用，AMP與非AMP頁面的優勢。通過代碼實例演示了如何去完成線上需求。以QQ空間線上AMP實現為背景，介紹了如何搭建AMP Cache，頁面收錄，緩存更新等，最後介紹了AMP的應用場景。

分會場一圓桌會議

分會場二

2.1 騰訊-凌實-從瀏覽器內核看性能優化

首先帶來分享的是專註精通於瀏覽器內核工作原理，QQ瀏覽器內核架構組負責人凌實。目前除了緩存等一些廣為人知的前端性能優化外，還有什麼更有力的優化方式呢？分享先簡單介紹了下QQ瀏覽器X5內核在載入速度、流暢度上面優化，然後介紹網頁載入的特點和瓶頸，不僅給出了一系列的優化方案，還介紹了兩款極為好用的調試工具。網路之後再轉到了渲染方面，從渲染分層結構上尋求最佳方案；最後展望了一些未來web技術的前景，相信未來web的生態會越來越全，越來越棒。

2.2 梨享計算-謝庭-WebRTC加速

接著，來自梨享計算的謝庭給大家帶來了運用WebRTC進行流媒體加速的方案。嘉賓先簡單介紹了WebRTC背景和web通信的發展歷史，然後詳細的講解了建立WebRTC的媒體會話流程以及數據通道相關配置；再接著講解了P2P流媒體的一些演算法以及其優勢特點，最後說了下WebRTC與霧計算的配合，並且和雲計算進行了細緻的對比。這場分享讓大家看到了未來WebRTC豐厚的使用場景與發展潛力。

2.3 騰訊-周明禮-QQ錢包應用開發實踐

下一場是來自騰訊的資深前端工程師周明禮對QQ錢包h5應用開發心得。QQ錢包是一個重量級的H5應用，面臨著一系列的開發挑戰，比如接入層伺服器壓力、網路環境複雜等情況，嘉賓首先針對這些情況進行了細緻的分析，並給出了相關的解決方案。然後指出了傳統的瀏覽器緩存機制的不足，引出基於service worker這種新型的緩存管理方案；接著分享了MoggyCache離線包去大幅度提升性能的方式，不過優化是無止境的！講師給出了一個QQ錢包中最終頁面直出秒開的實踐：NODEJS+SONIC。嘉賓從技術選型到SONIC的優化方案，讓開發者感受到QQ錢包這個H5應用是如何體驗接近於native的。

2.4 騰訊-龔澄-小程序框架設計

要是說起前端最近最火的幾個詞，小程序一定佔據了一席之地。會場2的最後一場分享就是由騰訊資深前端工程師、WebPY作者龔澄帶來的小程序框架設計。嘉賓先從小程序的起源和基礎說起，講解了小程序與傳統web開發之間的異同，然後剖析了小程序的架構，指明小程序的優勢和限制。既然原生小程序有著諸多的痛點與坑點，那開發者該如何快速敏捷的開發呢？此時WePY這個組件化開發框架遍登場啦，WePY出現的願景是讓開發小程序就像是開發傳統H5應用一樣，開發者可以快速上手業務，而不用去先完整學習整個小程序的開發流程。嘉賓緊接著一步一步的指導聽眾如何使用WePY框架，從代碼結構、配套功能還有編譯過程上入手，讓觀眾了解到WePY的優勢；在最後講解了WePY與web之間的聯繫和差異。有了WePY，相信再遇到小程序的需求時，大家一定可以從容面對啦。

分會場二圓桌會議

分會場三

3.1 百姓網-賀師俊-Start R & B

分會場三率先由賀師俊Hax點燃全場。相信大家對以 CoffeeScript、TypeScript 為代表的編譯到 JavaScript 的語言已經不陌生。來自百姓網的前端專家賀師俊（Hax）為我們介紹了 JS 平台語言家族的重要新成員 R & B —— Reason（Facebook 推出的 OCamel 語言的新語法和工具鏈）和 BuckleScript（Bloomburg 開源的 OCamel 到 JS 的高性能編譯器）組合，並通過代碼實例講解了 Reason & BuckleScript 的特點和優勢。

3.2 騰訊-郭潤增-微信支付大規模外包實戰

第二場是由微信支付的郭潤增講述，微信支付在業務高速發展下，在前端人力極其匱乏的條件下大規模引入外包團隊協同作業。引入外包帶來了一些其他的挑戰，來自騰訊的高級前端工程師 rizenguo ( 郭潤增 ) 從如何保證外包的效率和質量，如何控制版本變更風險以及解決可持續問題的角度為我們一一分享了微信支付的研究實踐。

3.3 富途證券-王運國-富途的工程化實踐之路

代碼難以維護？代碼質量堪憂？難復用？難維護？第三場由來自富途的前端技術專家王運國從問題出發，以工程化的角度，分享探索出來的組件化（npm + git）的方案來解決代碼相關的問題，並引入 Webpack 與 Jenkins 以解決構建與發布相關的問題。

3.4 石墨-許海浩-揭秘實時協作文檔

最後一場，石墨前端團隊負責人許海浩分析常用的前端編輯器的方案，並引出一種代碼層級的 Text Model 來表示編輯器里的 HTML 內容，從而滿足多人編輯的場景，最後深入淺出的講解了 Text Model 處理多人改動的原理以及多端同步的設計方案，為我們揭開了多人協作文檔的秘密，保證文檔的正確和穩定。

分會場三圓桌會議