騰訊Web前端大會 TFC2017 會議 現場紀實(上午)

1.前言

之前很早的時候就聽說騰訊要開Web 前端大會了，但是苦於囊腫羞澀，沒辦法參加。但是那句話怎麼說來著？天（傻）無（人）絕（有）人（傻）之（福）路，掘金送了一張門票給我。於是本喵就想著，直接把整個會議記錄一下，回頭也能夠讓更多小夥伴們看到這次大會的內容，於是整理過後，就有了這篇文章。

宣告：

本文是由 李鵬（MR_LP）全程手打，請勿轉載，違者必究！

本文首發自 微信公眾平臺（李曉鵬：MR_LIXP），如果可以請關注我一下。

本文中若引用內容發生了侵權，請及時聯絡作者刪除。
鑑於本人某些知識水平有限，如果在文章中出現某些錯誤，請不要激動，留言給我就好。
本文中有很多內容是自己根據自己的理解去跟大家分享的，所以保留不同觀點，可以留言給我。

2.大會基礎介紹

• 大會全稱：< 騰訊Web前端大會 TFC 2017 />

• 時間：2017年6月24日

• 大會地點：中國·深圳福田區 CBD大中華廣場 喜來登酒店 六樓會議廳

• 分享內容：涵蓋Web新技術、Node.js、框架、工程化、 圖形處理等前端前沿內容 ，還包含極致的效能優化、海量使用者運營等具有騰訊前端特色的寶貴經驗。

3.大會流程及演講內容

上午

時間	主體內容	上臺人員	介紹
8:00 - 9:00	入場、音樂會、開場舞蹈	BOSSA NOVA、SOS女子組合	BOSSA NOVA音樂會，騰訊專屬舞團 SOS女子組合舞蹈表演。
9:10 - 9:30	開場致詞	stonehuang（黃希彤）	騰訊雲技術總監，2005年加入騰訊，騰訊第一個web前端領域T4專家，W3C顧問委員會代表。負責過QQ空間多年的web前端開發和網路效能優化工作，負責過騰訊產品資訊無障礙化和騰訊資訊無障礙標準制定。中國資訊無障礙產品聯盟的聯合發起人。近幾年在技術圈致力於推廣資訊無障礙設計理念和技術公益理念。
9:30 - 10:15	the Future of Writing JavaScript（ 編寫JavaScript的未來）	Nicolas Bevacqua（ 尼古拉斯·貝萬奎）	JavaScript 專家，開源推動者，書籍《JavaScript Web 應用開發》作者。Nicolas Bevacqua將介紹 TC39（ECMA技術委員會） 正在審議的一些提案，如 object spread, async iterators, async generators, import等。在此基礎上，深入探討如何利用當前流行工具如 Babel, ESLint, Prettier, Prepack等來高效流暢地書寫 JavaScript 程式碼。
10:15- 11:00	初創公司前端工程體系建設	張雲龍	2010年畢業於廣州中山大學計算專業。歷任百度資深研發工程師，阿里移動事業群主任工程師，全民直播CTO，國內前端工程領域先驅。本次演講主題圍繞過去一年多在直播領域的創業歷程，介紹適合初創型公司的前端工程體系建設方案。
11:00 - 11:45	面向前端開發者的V8效能優化	justjavac（迷渡）	線上回聲公司前端技術專家，Flaurm 中文社群創始人。多次在 GDG、SF、稀土掘金等各大開發者社群進行前端技術分享，並組織翻譯“JavaScript Quirks”、“React Router v4”。目前正在出版《程式碼之謎》。
11:45 - 12:00	集贊活動開獎
12:00 - 14:00	午餐、主題分展臺

下午：分會場1 - Web前沿技術

時間	主體內容	上臺人員	介紹
14:00 - 14:45	WebGL新的篇章	BruceWan ( 萬波 )騰訊 前端高階工程師	虛擬現實(VR)和擴增實境（AR）是近年來出現的高新技術。它通過電腦技術，將虛擬的資訊應用到真實世界。此次分享BruceWan將由淺入深介紹WebGL，並以three.js為主介紹相關類庫和原理，以及3D互動、WebVR、WebAR的實際專案應用。
14:50 - 15:35	前端和機器學習結合	鄧鋆美登科技 前端架構師	用機器學習來提升線上使用者體驗，包括：根據使用者特點調整介面佈局方案和字型尺寸、對使用者可能想操作的物件進行智慧推薦、感知使用者正在尋找某個功能並進行操作提示等。本次會議將基於資料採集、預處理、訓練、和植入前端的架構設計等方面的實踐進行分享。
16:10 - 16:55	企鵝電競PWA實戰	HongweiQu ( 渠巨集偉 )騰訊 前端高階工程師	Progressive Web App(PWA) 是由谷歌提出推廣的在網頁應用中實現和原生應用相近的使用者體驗的技術方案。想要實現頁面秒開、離線訪問、類原生體驗，有了PWA的技術的幫助，H5頁面也能做到! HongweiQu給大家分享企鵝電競業務漸進式Web應用PWA實踐經驗。
17:00 - 17:45	QQ空間AMP實戰	loviselu( 盧嘉輝 )騰訊 前端高階工程師	AMP是谷歌最新提出的一個開源專案，這項技術可以限制HTML，CSS和JavaScript等一些影響網頁效能的程式碼。谷歌表示，這項技術可以幫助一些網站提升85%的載入速度。本次分享將結合AMP技術在QQ空間內的應用，介紹其使用場景並深入剖析AMP的核心加速原理，幫助你將web專案打造成接近原生體驗的Web應用。

下午：分會場2 - 框架&優化

時間	主體內容	上臺人員	介紹
14:00 - 14:45	從瀏覽器核心看效能優化	rockling ( 凌實 )騰訊 前端高階工程師	QQ瀏覽器核心架構組負責人。 通過QQ瀏覽器X5核心在載入速度、流暢度方面所做的優化工作，帶你瞭解瀏覽器核心的工作原理、展示前端優化的指導性原則、以及更佳的優化方向。並且揭露一些影響瀏覽器效能但不為人知的技術內幕，並對Mobile Web場景下瀏覽器核心後續的優化方向和新特性進行展望。
14:50 - 15:35	基於WebRTC的P2P-CDN流媒體加速	謝庭梨享計算 前端工程師	WebRTC把實時流媒體和P2P等能力帶入了Web前端，開發者只需編寫簡單的JavaScript程式即可開發出豐富的實時多媒體應用。本次大會想跟大家分享我們對WebRTC的一些實踐心得，以及如何利用WebRTC的資料通道來做P2P流媒體。最後介紹我們如何設計一個低延遲、高頻寬利用率的P2P流媒體演算法。
16:10 - 16:55	QQ錢包h5應用開發實踐	lizmlzhou( 周明禮 )騰訊 前端高階工程師	移動網際網路時代，提高網頁效能是每個前端團隊的目標。作為QQ錢包團隊的前端工程師，我們是如何通過自研nodejs服務和利用service worker實現H5頁面秒開？讓我們來探討一下QQ錢包H5應用的開發實踐。
17:00 - 17:45	WePY-小程式框架設計	ChanGong ( 龔澄 )騰訊 前端高階工程師	去年11月初，微信小程式開始公測，小程式是一種新的開放能力，開發者可以一用Web相關技術快速開發小程式。這次分享內容包括：小程式開發基礎內容；WePY框架說明，為什麼要做這個框架以及框架介紹；WePY框架在我們業務開發中的實際應用和經驗分享。

下午：分會場3 - NodeJS&工程化&其他

時間	主體內容	上臺人員	介紹
14:00 - 14:45	Start R & B	賀師俊（Hax）百姓網 前端專家	相信大家對以 CoffeeScript、TypeScript 為代表的編譯到 JavaScript 的語言已經不陌生。本次分享將介紹 JS 平臺語言家族的重要新成員 R & B —— Reason（Facebook 推出的 OCamel 語言的新語法和工具鏈） 和 BuckleScript（Bloomburg 開源的 OCamel 到 JS 的高效能編譯器） 組合 —— 並以程式碼例項來說明 R & B 的特點和優勢。
14:50 - 15:35	微信支付大規模前端外包實戰	rizenguo ( 郭潤增 )騰訊 前端高階工程師	業務高速發展離不開各種配套運營系統的高效建設，微信支付也不例外。在前端人力極其匱乏的條件下我們另闢蹊徑，大規模引入外包團隊協同作業，並且在如何保證效率和質量，控制版本變更風險，保證可持續性等方面做了不少研究實踐，藉此機會跟大家分享交流。
16:10 - 16:55	富途的工程化實踐之路	王運國富途 前端技術專家	團隊與專案的快速擴張，程式碼質量不統一，相同邏輯的程式碼到處散落，難複用，難維護，釋出構建時間長且不可控等問題日益困擾著我們。為解決這些問題，我們一步一步摸索，採用元件化（npm + git）的方案解決程式碼相關的問題，引入 Webpack 與 Jenkins 以解決構建與釋出相關的問題。
17:00 - 17:45	揭祕實時協作文件	許海浩石墨 前端團隊負責人	隨著提高辦公效率的需求與日俱增，傳統的 office 文件與表格的辦公模式，已經無法跟上人們的腳步。於是，多人實時協同辦公的場景應運而生，並且越來越多。藉此機會，我想給大家分享一下，石墨文件是如何做到支援多人同時編輯一篇文件，以及如何保證文件的正確和穩定的。

4.現場紀實-上午

8:00 - 9:00 BOSSA NOVA 音樂會

期間主要是用來跟大家放鬆心情，以及和身旁的朋友們“面基“的，這裡不作為主要內容說明。

門口還有小姐姐陪你拍照，還有掘金帥帥的小夥伴們在發“撕逼勳章”。

9:00 - 9:10 SOS女子組合 開場舞蹈

期間很多小夥伴紛紛表示，不行的，營養跟不上了，畢竟一幫小姐姐們一起熱舞，噗（噴鼻血 ing）。

表示去的時候，已經沒有前排位置了，尷尬。

9:10 - 9:15 主持人開場

本次大會主持人員基本都是程式猿，所以今天的主持人也不例外。

只不過我想說，小哥哥好緊張啊（#微笑臉）。

9:15 - 9:25 Stone 致辭

黃希彤做開場演講，主要表達的問題有這麼幾個內容：

• 知識半衰期
  • Stone 表示很多時候，我們掌握知識的速度實際上完全比不上知識的增長速度。也就是說，我們每學習一段時間的內容，其中就有一部分的內容實際上已經過時了，所以我們要保持自己的學習進度。
• 我們的幸福感
  • 放在以前，他們更多的時候是在不停的重啟系統以及除錯中度過的，但是我們現在有非常多工具能夠幫助我們進行內容的控制，所以我們是一個有“幸福感的程式猿”。
• 我們的危機感
  • 當前很多的程式設計師很多時候都有非常強烈的危機感，導致自己很多時候都惴惴不安。那我們該如何去解決我們的這種危機感呢？Stone 給我們提出了一個建議。“不斷成長，才能收穫安全感”，所以，小夥子們，加油幹吧。
• 我們如何衡量一個程式設計師的好壞？
  • Stone 的答案是，一個好的程式設計師，要做到“問題到此為止”。我們不管遇到任何的問題，都需要能夠做到，遇到問題，解決問題，讓這個問題到了我這裡，就直接結束。

9:30 - 10:15 Nicolas Bevacqua 演講關於 “編寫JavaScript的未來”

這一段我表示全程英文，剛開始的時候還能聽懂一點，到後來就直接全部黑人問號了。#絕望臉 ing...

這裡直接附上一下關於Nicolas 的講義吧。

10:15- 11:00 張雲龍 初創公司前端工程體系建設

總結來說，張大大主要講的內容可以劃分為以下幾點：

• 元件開發

  • 分而治之
    • 解決基本開發效率執行效率問題後，前端團隊開始思考維護效率
    • 根據對應的介面來進行劃分
      

      

• 持續整合、交付、部署

  • 團隊協作的重要基礎，盡力打造完善的可自動部署的測試，預釋出，灰度釋出環境，實現持續整合。
  • 基於持續整合，進一步做到持續交付，杜絕臨上線才交付的現象。
    

    

• 前端自動化測試

  • Dolphin 自動化測試系統
  • 最後每次上線前點一下，標出所有 diff 最後由人工 check
    

    

    
    

    

• 看板，視覺化你的進度
  • 通過建立代表工作項的即時貼，並在一個視覺化的工作流白板上跟蹤每個工作項的當前狀態
  • 最終選擇物理看板
    

    

• 創業不是要減少犯錯的次數，而是要減少犯錯的成本

最後附上現場自己記錄的筆記。

11:00 - 11:45 justjavac（迷渡）面向前端開發者的V8效能優化

我表示，聽到這裡的時候，很多東西都沒聽懂，因為自己太菜了。

但是還是給大家貼幾張圖看看吧。

大寫的尷尬，但是還是給大家記錄了一點內容，大家湊合看吧。

這裡不要吐槽我。

另外為了防止自己的記錄有誤，這裡給出 Xat_MassacrE 記錄的關於優化的筆記。

1. 動態語言如何進行快速計算
   V8 中數字的表示
   32位系統使用int30
   64位系統使用int31
   V8 中的資料型別
   Object：
   Array
   Function
   Date
   RegExp
   BooleanObject
   StringObject
   NumberObject
   Primitive：
   Boolean
   String
   Number：
   Integer
   Int32
   Unit32
2. 編譯器優化
   使用 typefeedback 做動態檢查
   一般而言，在編譯階段提前檢查
   檢查之後，使用該型別作為動態型別
   如果檢查失敗，去優化
   去優化之後，可能會使用直譯器執行中間碼
3. 未來方向

• TypedArray
• WebAssembly
• SIMD
  ​

  11：45 - 12：00 Winter 致辭

Winter 在分享中主要分享了這麼幾個方向。

• 全棧：
  ​ 能夠將自己的能力分享給其他人
  ​ 舉個例子：寫出一個簡單易用的東西來幫助其他配合你的同事去使用
• 未來應該會是前端和客戶端相互整合的一個階段
  ​* Winter 舉了一個例子，Weex 中動畫效率很低下，之後他們嘗試分工（3個客戶端和2個前端）將動畫的包由前端交給客戶端來實現，以此他們將動畫效率提升到一個不敢置信的程度。

末尾抽獎

當大家看到抽獎介面的時候，整個人都笑崩了。

​

5.未完待續

突然發現不知不覺已經寫了這麼多內容了。

為了防止本文太長，在此做一個分節。

後續文章會在後續放出。

最後做一個預告：

• 《WebGL 的新篇章》騰訊：萬波
• 《前端和機器學習結合》美登科技：鄧鋆
• 《企鵝電競PWA實戰》騰訊：HongweiQu ( 渠巨集偉 )
• 《揭祕實時協作文件》石墨文件：許海浩

喜歡的朋友請搜尋一下我的公眾號：MR_LIXP，非常感謝。