參加第12屆D2前端技術論壇，你有什麼收穫？

01-06

第十二屆D2前端技術論壇於2017-12-16在阿里巴巴西溪園區舉行，參加這次論壇。大家有什麼收穫和想法呢？

第四年參加 D2，照例先寫點見聞和想法：

第一場的選擇其實有些糾結，本來想去聽一下 IoT 的，IoT 是今年前端的一個新方向，對此一無所知的我想藉此機會去見見世面，但因為對 @月影大大仰慕已久，最終還是選擇了去聽月影關於多元化團隊的分享。他從組織架構、團隊影響力、KPI、人才建設、技術選型等角度進行了闡述，從一個小 P 的角度看是非常靠譜的，奇舞團在前端界的影響力大家也有目共睹，包括thinkjs、奇舞周刊、眾成翻譯以及多本譯書。沒有獲得提問機會很可惜，在分享中提到了關於新技術的選型問題，那麼如何去論證新技術是可行的，是閱讀源碼深入調研還是小型產品實踐？在新技術上，架構同學與業務同學有分歧怎麼辦，業務同學是否可以自行做一些架構方面的事情，架構同學應該如何推動業務同學去落地？

打造高可用高性能的 React 同構方案，在 SPA 時代，同構無疑是能夠很好彌補客戶端渲染不足，提升用戶體驗的方案。但這個分享讓我略感遺憾，beidou 定位於一個企業級同構框架，為何會優於其他開源框架，在技術架構與實現細節上的考慮，沒有細講。同構常見的內存泄漏問題的排查與解決，沒有細講。性能優化部分就是不斷修改代碼，給大家展示性能數據，數據確實很震撼，但能讓我瞬間感知到的是升級 React16 。。。會後讀了一下 React同構與極致的性能優化，其實是有很多乾貨的，可以詳細講一下組件級緩存、智能降級的做法。

@賀師俊賀老的分享始終會基於很小的一個點進行深入挖掘，從不淺嘗輒止。引子很棒，從 Fastify 的 JSON 解析優化，聯繫到性能的基準測試。console.time 由於 JIT 與搶佔式多任務操作系統會造成測量不準，Date.now() 與 new Date().getTime() 則有精度只到 1ms 的問題，而在 Windows XP 下由於 64 Hz，精度只能達到 15ms。對此我是有些體感的，之前大學開發 HDOJ 時就發現程序最小運行時間不是 0MS 就是 15MS，應該也與此有關。

賀老的分享包含了計算機、物理、歷史、數學，涉獵太廣了，最後的解決方案聽得不是很明白，到時結合 hax/my-benchmark 源碼再思考一下。

下午的擁翠山莊實在太擁擠了，幾乎沒有落腳的地方。第一場百度 FEX @潘征妹子的演講站在最後不太能看清 PPT 中的代碼，主要是基於事件驅動與數據驅動兩種思路來構建前端複雜應用，也分別舉例了百度腦圖與百度 H5，兩款產品都偏向於可視化編輯，也提到了很多針對可視編輯時需要考慮和優化的點。事件驅動現在可能比較少見了，之前也做過基於數據驅動的拖拽組件，相比而言，數據驅動顯得更加清晰與易於維護。會上提到的關於現有框架對 SVG 的支持，就 React 而言應該不成問題。

@楊森《把前端監控做到極致》的分享對我而言有著更深的意義。這是我們團隊第一次走上 D2 的舞台，也是我們第一次將近兩年在集團內部前端異常監控平台的實踐總結而成的前端監控方法論對外輸出。看到會場的火爆與大家對於穩定性的關注，讓我們感到興奮與激動。目前我們研發在集團內部使用的平台，採集端、數據層、平台後端、平台前端都是由前端工程師獨立完成的，我們會去大數據平台寫 SQL、寫 Java UDF，也會自己建實時任務、用 node 消費消息隊列數據、實現智能報警演算法。關於是否開源，其實在 D2 之前我就跟楊森說一定會有人問，正因我們身處於阿里數據技術及產品部，打破了前端工程師在 ETL 技術上的壁壘，同時沉澱多年數據產品研發經驗與穩定性思考，背後又有阿里強大成熟的實時離線數據系統的支持，促使了前端監控平台更加快速的成長。所謂成也蕭何，敗也蕭何，對於集團數據系統以及中間件的依賴，導致產品化輸出或是對外開源比較困難，因此在本次分享中連平台名字都沒有提及，是希望大家更關注於前端監控方法本身，前端監控的難點和重點到底在哪裡？是真正讓監控數據能被有效地分析與告警，對業務的穩定性產生影響，楊森在QA中也提到，前端面對各種複雜的環境，大部分報錯對用戶而言是無感知的，往往關鍵的異常問題就會埋沒在茫茫報錯中，就需要極致的前端監控來找到那一絲線索。當然我們也在思考與討論，比如把採集端與產品端開源出來，讓大家自行選擇數據源，對小體量而言，mysql 也是能滿足需求的。沒有到場的朋友可以閱讀文章把前端監控做到極致，相信你會有所收穫。

QQ空間在 HTTP2 的實踐上感覺是業界領先的，HTTP2 帶來了二進位協議分幀、多路復用、頭部壓縮、資源請求優先順序等特性，能帶來性能上的明顯提升的同時，會潛藏一些問題，比如因為 TCP 的隊首阻塞，重發機制，丟包率升高會導致 HTTP2 載入時間不如 HTTP 1.1。QQ空間也對此作出了一些自己的優化策略，比如把 TCP 換為 UDP，預先建立鏈接，在 node 層根據不同的 HTTP 協議，返回不同的 HTML，來解決多協議並存的問題。

最後一場是基於 UC 內核的極致 Web 體驗，本周谷歌開發者大會上的新浪微博 PWA，除了能在 chrome mobile 上運行，也可以支持運行在 UC 上，正是因為 UC4 2.0 內核。其基於 chrome 內核進行優化同時對 service worker 的支持也更加出色。才疏學淺，對於這部分內容確實不夠了解，後續有時間還要好好消化，尤其是第一部分講到 v8 的優化時，略感懵逼。後面的優化策略是可以借鑒的，比如首屏 0 網路載入、注意動態 css 重排版、非首屏邏輯延後執行、監控開發性能流程、避免 JS 大文件、重視容器端性能問題以及關注內核初始化成本問題。

不知大家對於今年的 D2 有什麼感想或是收穫？對於大會，一方面我希望在我所熟知的領域看看業內其他團隊/同學是怎麼做的，一方面希望看到更多新的東西，因為前端的變化真的很快，另一方面也希望能和業界的同學多交流交流，彼此看看當前在做什麼關注什麼。看了大家的回答，發現還有很多不錯的分享，回頭補上。

最後還是要打一波廣告的，阿里數據技術及產品部新能源前端團隊持續招人，如果想我們一起開發企業級智能數據平台，一起開發極致的前端異常監控平台，歡迎私信簡歷或投遞到 dancang.hj@alibaba-inc.com

整體一如既往的好，尤其是主題叫匠心（降薪），winter is coming。

沒抽到票，在家看了半天直播。簡單說幾句。

D2 內容中我比較感興趣圖形圖像方面，我預感這塊是未來一大方向。看到有三個相關主題，有兩個時間是重的就選了二個全場，正好在一個會場（bilibili，gcanvas）。其實，圖形圖像方面的主題不太好講，這方面的知識較為專精，聽過近年的 slide show 主要以 demo 吸引眼球，實質啟發性的內容不多。

bilibili 同學本人的技能相當全面，但講得內容有些散，講了幾個 case，但我找不到要表達的技術重點。最後的一些總結還是不錯，有點是很認同的是未來前端，web 交互的方式會越來越像『遊戲』一樣。我理解 web 從靜態到動態是中斷到連續的體驗進步，所謂像遊戲就是從連續到沉浸式的體驗。過去，這類技術主要是在 cs 端，非常依賴於 GPU 發展，到今天技術標準和能力的進步，已經是從 cs 這邊移植了很多能力到 web 上了。

二同的 gcanvas 引子描述的挺好，gcanvas 場景主要是在 cordva 和 weex。實現原理也是比較清晰，因為 webview 中實現 canvas 渲染的路徑需要從 graphics lib 到合成，最後到界面。因為這本身是 webview 要做的事，既然用了像 weex 這樣的框架，就可以選擇繞過 webview 直接調底層 api，這也是這類框架優化的思路之一，實現還是有技術難度的，我沒理解錯的話等於拿著底層 api 來實現一遍 webview 要做的事。

三個半場聽得就零零碎碎了。雙揚的前端監控是很好的內容，我經常講到大數據需要在前端運用這是重要的一塊內容。這是去年到今年一直是大數據前端團隊在做的沉澱，內容太熟悉了主要聽了最後一些問題。發現對這塊感興趣的真不少。我自己在考慮的從前端技術監控到產品界面監控的轉變，先在內部先討論再看了。

賀老那場聽了一半乾貨不少，比較可惜後半場有事走開了。聽下來真是對每一個小點的原理都不放棄，刨根問底，相當長知識。國內做技術分享很缺少這樣的主題，叔叔每次講的內容也有這種感覺。大多講者都是做了一些好東西，講的時候免不了講『面』或『局』。純粹的技術探究都沒了。

還有一個半場是月影的後半場。自己也算做了幾年管理，學習下奇舞團建團隊的思路。大部分還是非常認同的。就有一點比較好奇，奇舞團選擇選型和技術方案的自主選擇，這點是很不利於統一規劃，並容易留下非常多的歷史包袱。我的思路基本上是會控制大部分的技術路線。不知道那種自由的方式是怎麼運作的，不在現場也沒法提問了。

總結下，D2 規模越來越大，內容也越來越泛化了，有延伸到客戶端，數據，瀏覽器內核，硬體，圖像，後端，語言和所處的位置不是關鍵，是我們要打造的生態方式是講述的關鍵，遺憾的是幾乎看不到視覺、交互的連接。

頭天掃了一眼水單子，看分會場有場演講的題目是前端複雜應用，激動啊，我就想聽聽大家是怎麼做前端複雜界面，怎麼玩 document+view 的，結果轉天到了現場再一看，原來是講前端複雜應用的構建技術……

看了別人的介紹發現我誤會了，此「構建」非彼「構建」，那場演講就是講如何開發複雜前端應用的，沒聽還是比較可惜。
聽說講到了數據驅動問題。關於事件驅動還是數據驅動，我個人的想法是，對於一個考慮到需渲染數據可能會比較複雜的應用，還是要考慮技術選型。如果頂層的渲染庫有可靠的 diff 機制，做應用就會比較爽，像react一樣，直接拿數據往渲染器里丟就好。如果渲染庫沒有那麼強，我們就面臨兩種選擇：
要麼，自己寫一個數據diff加增量更新的中間層，要麼，按照事件驅動的模式上手寫。
如果能保證事件類型是收斂的，其實第二種方案是可以接受的。

另外，通過實踐我發現其實還有一種更簡單的方案。就是如果你能把渲染次數優化到一個可以接受的水平，就可以在一段時間之內（比如一次消息循環）很傻瓜地把會造成界面更新的事件緩存起來，到了該渲染的時候，不考慮具體事件是什麼，直接全量更新。
是的，我就是這麼猥瑣。

下午分會場的 @楊森的前端監控分享非常干，可謂是「前端監控從入門到精通」，聽完你就可以擼袖子開搞的那種。我比較欣賞的是後半部分關於統計學（正態分布）的應用。這一塊抽象地說是一個如何把技術數據和商業數據分析（BI）結合的問題，其實還有很大潛力可挖。這也是我最近比較感興趣的內容。

最後，今年拿到的書是《企業遷雲實戰》，但我實在是沒得實戰啊……誰有興趣可以跟我換換。

順便 po 幾張圖吧。

分會場，講前端人生哲學的。

主會場， @賀師俊老師講micro benchmark，沒聽完，聽說後來都講到 bios 裡面去了？真乃演講良心。

pandora的易拉寶，怎麼有種椰子汁的感覺？

宜搭，企業應用快速搭建系統。

datav，做數據可視化的平台，去年的分享話題之一。

演講水單，猜猜我是哪個：p

前排占樓。

現在人在阿里西溪園區的D2現場，來參會的小夥伴一如既往的多。

今年的主題是【匠心】，技術分享的範圍有團隊建設、IOT、性能優化、node同構等等，值得期待。

該賀老上場，主題是《Microbenchmark for JavaScript》。

實時直播下這場:

賀老開場很幽默，頗具知乎style.
以fastify為例，講到作者從json schema入手帶來的序列化優化效率的新思路。大家可以看這個問題下的回答新近發布輕量級的 Node.js 服務端框架Fastify怎麼樣？
開始整體microBenchMark主內容，分兩塊開講。 micro + benchMark

大型應用測性能受到的影響因素太多==&> 分塊成micro ==&> console.time測速

然而speed = f(compiler(JIT?, 運行次數，時間)，operatingSystem(taskNum)) ？，這塊講得比較細，看看賀老會不會講計算性能影響因素的權重或者其他更合理的方案。

時間精度Date.now(): win XP 64HZ引起可能的15ms誤差計算,BIOS系統 programmable interval timer相關的一些引申。講到NTSC[National Television Standards Committee]，信號轉換，開始講到物理相關的知識。。。

兼容性 + 標準化組件，js時鐘頻率限制？

言歸正傳，繼續記。

為了控制誤差，擴大樣本數。

比如100ms如果有1%的浮動誤差，可能需要1s內做10個sample來合理化誤差。

using performance.now()，看看這塊怎麼展開。

前端瀏覽器環境

從navigationStart開始，遞增函數，精度達到5us,因此相比Date.now()可以將1s的sample數提升至200;

精度precision的一些應用==&> 比如指紋演算法跑時檢測，算是個簡單的引申，見例知意即可。

出了寫accident,調下網路===pending state=====

關於node.js環境

1. node.js比較好的精度api=&> process.hrTime() [seconds, nanoseconds], 由於js標識number的精度偏差。

直播掛了？=== 悲劇== 回來了繼續

基本思路總結

delta誤差相關 ==&> sampling =&>==&> 減少誤差

統計學相關，方差，均值，置信區間等等。這塊數理背景的同學應該比較熟悉。

介紹一個實用的工具 benchmark.js【更適合node.js,前端暫未引入performance.now()】

boilerplate經評論區指出，用樣板代碼解釋比較合適，比如react-boilerplate,vue-boilerpalte等等。

引入控制變數法，最小值誤差應該收斂，最大值可能不可控。

一個賀老自己試驗下的現象: 將測試環境置換為async，利用【microTask】帶來更高的精度。

廣告時間，賀老自己的hax/my-benchmark。是不是我要象徵性收點廣告費？

12.16 上午結束。

如有記錄上的理解偏誤，請及時指出

======= 下午 ====

主會場支付寶加里的分享記錄下

快速定位及效率工具

域名及https，內網dns快速匹配+ 本地http證書。
調試工具體驗: 搭建ios模擬器環境(前端與native同學快速聯動) `xcRun`
真機不插線調試，讓真機環境不再黑盒。 hybrid inspector

理念: 拒絕模擬，盡量真實環境

4. 可擴展的代理伺服器AnyProxy。(http://anyProxy.io)

階段性總結如下:

走產品化道路: 技術特色、性能體驗、穩定性、行為分析 etc

個人價值: 程序員的需求

緊貼業務: 提高生產效率，不盲目追求開源。

歡迎大家掃碼加群

手機打字，隨便扯點

第二次參加D2，從上海過來

主題上感覺比去年要好很多，去年D2我至少睡了三四個主題，今年全程聽了下來

說說幾個映像很深的主題

主會場上午第二場，React同構：

形式挺好，如何把一個3000多節點的應用優化，從300+毫秒的平均響應優化到5ms。

一步一步對比，映像很深，以至於到最後降到5ms時會場響起了掌聲

其中不少步驟都是值得React應用開發者去嘗試的，並且演講者在最後拋出了方法論，我覺得很棒

會後我們想想，如果把升級到React16放到第一步，可能這個速度會直接從300多降到100以下……

白馬會場下午第一場前端對視覺和交互的探索

其實那場我想去隔壁擁翠會場的，可惜人爆滿，門都打不開了

然後很多人對這場的映像估計是主講人全程秀恩愛以及主講人女朋友的補刀

其實主題是挺有意思的，講到了B站在很多項目裡面對交互的探索

擁翠會場下午第二場前端監控做到極致

是一場一直都想聽的分享

主講人開場那頁ppt把我嚇到了，因為那個監控其實我之前就看過，就是一個window.onError加上構造一個404請求把東西傳過去……

到這種做法顯然談不上什麼做到極致

但後面演講提出了很多理念，從數據收集到傳輸到分析等等過程…或者說這對些分享對於實現一個真正合適自己產品的監控系統有著指導性質的意義

這也是我認為我參加的七場裡面我收益最大的一場

主會場最後一場支付寶的無線效率工具

這裡面分享了幾個他們在開發過程中解決很多重複性過程而造的工具

不得不說這些工具對於日常開發有些相當不錯的影響

@Saviio 在聽到第一個工具之後拍案而起，表示也要在他們公司搞一個

另外這一場重點吐槽五花肉，一個梗玩一次就可以了，再玩一次就沒什麼意思了…

最後，問卷裡面說，如果收費是否願意？

我的回答是，如果我的付費能夠換來更好的分享更好的內容，我願意

以上

賀老講的內容還是還是一以貫之，在一個完全不實用的問題上刨根究底。但這種對純粹技術的追求是每個程序員的夢想。某種程度上倒非常符合匠心的出題。

第一次參加 D2，並且是以志願者的身份。

10 月下旬的時候在某個內部釘釘群里看到在召集第 12 屆 D2 志願者，想到去年因為團隊 Outing 錯過的我在 10s 內強勢報名。

為了讓參會者感受到家一般的溫暖，11 月初組織者就已經開始籌備各項工作了，包括不限於安排攝影、拍照、列印、簽到、引導、直播、展廳等。

作為業界為數不多的免費技術大會，為了省錢大家也是不容易（純人工塞 1000 多份參會證）。

重點

由於上午在引導各參會者入場，錯過了幾場，只能後面再看看視頻了。

不過還是宣傳一波，使用 Weex （Vue 作為 DSL）的同學可以看看 @Tw93 作為 main contributor 的 Weex Ui。該組件庫是從飛豬內部的 Weex 組件庫中去掉業務屬性後開源出來的，是輕舟的官方組件庫。Weex Ui 在 @tw93 的強勢維護下一直在瘋狂更新。歡迎點贊歡迎關注！

Microbenchmark for JavaScript @Hax

這是第二次見到 Hax，如傳說中一樣，PPT 繼續保持即大又黑的高橋流。從 Fastify 如何讓 JSON 解析比原生更快到時間精度和晶元的關係，一直說到黑白電視機。這種深究原因的精神實在讓人佩服，10 多年過去了，毫不輸當年稱自己寫出了最快的代碼高亮渲染器的風采。

但抱著一顆學習如何寫個 benchmark 心態的我還是在聽完之後有點小失望。

天貓超市體驗優化 @由校

之前在公司就聽過一場這個分享，也看過內網寫的文章，這次又加了一些新的東西。總體來說有兩點讓我印象比較深刻吧：

1. iOS WkWebview 的加成實在是非常給力（有一些坑需要踩但終歸是能踩過去的）

2. 即將利用 UC內核的能力實現底部 TabBar 第二次點擊的時候頁面不刷新（在超市這種複雜的頁面結構下做成一個完全的單頁面應用顯然成本太高，UC內核的這種能力會讓這種多頁面應用的體驗上一個很大的台階）

支付寶的一些工具體驗優化 @加里

不得不說，支付寶的工具建設是非常的強悍。雖然主講人語速快，時間短，但還是給人留下了很大的暢想空間。

1. Web 開發全部使用模擬器或者真機，摒除「Mock 一個線上環境」。相應的一套工具流非常方便，能讓業務開發者幾個回車就無縫切換

2. DNS 解析器直接可以將域名池中的域名指向自己的電腦，同時放在公有雲上解決外網（4G等）環境下的調試問題

前端監控 @雙揚

因為一些原因沒去現場，只是聽說內部前端監控工具 retcode 對外使用了？

其他

參見的這種技術大會不多，整體上還是比較滿意的（雖然有些議題感覺質量不是很高）。

嗯，重點晒圖！

藏在門口迎客的我

早晨 7 點多主會場大屏幕上的視頻。

足夠打消一切壞心情的淘公仔金庸群俠套裝

還有一堆其他亂起八遭的玩意

最後來張工作人員合影

最後

這是我，但我是男的。

很幸運可以來到杭州來參加D2，這次的講師基本上都是阿里的大佬們。不過很開心有兩個女講師，也算得上是程序媛界的標榜了。參加會議的人很多，即使天氣很差，很冷。

言歸正傳，基本上一直在主會場，除了最後一場去了分會場的基於UC內核的極致Web體驗，因為分會場位置太少，基本都擠不進去啊啊啊（想聽女程序員是怎麼carry全場的，結果被堵在門外，看來女講師也是很受歡迎的，哈哈）

上午的主會場App 開發解決方案：輕舟，輕舟是一款讓 web 前端開發者快速開發原生 App 的技術產品,它是基於weex的，講師主要是介紹了一下如何利用輕舟開發app應用並且如何部署在android和ios上，其實這些可以直接去官方文檔（輕舟 | 首頁），由於自身沒有很切身的需求，所以只是大概了解了一下。

放pptl兩張：

第二場是並具有打造高可靠與高性能的 React 同構解決方案，雖然之前有過 react 的開發經驗，但是現在已經基本是忘記了，主要內容是 react 在服務端的性能優化，這個我不太懂，沒有多少研究，就此略過。

第三場是賀老的 Microbenchmark for JavaScript，唯一印象是 ppt 很簡潔，然後內容講得很詳細，對比了 console.time() , performance.now(), process.hrtime()的精確描述，講得很詳細，從原理層（統計學）的角度進行分析，從淺入深地剖析得很詳細。並且將每種情況的精確描述表達得也很清楚，感覺乾貨滿滿（贊一個~），最後賀老推薦了自己寫的仿 benchmark 的一個庫，具體還沒實現，期待~

下午比較想睡，然後去買了一杯咖啡，所以遲到了一點，去聽主會場的從Web渲染到Web計算沒怎麼趕上，所以在此不介紹了（捂臉）

第二場是騰訊的 PWA 帶來極速離線Web，講師是同一級的騰訊小鮮肉，很震驚，氣場還是不錯的，不過內容的話有點像是教科書式的講述，比較詳細了，而且之前由於對 PWA 也有一定的了解，所以這場主要關注點在講師的講述方式上，內容沒怎麼細看

第三場覺得是收穫最多的一個，因為自身在近期一直在做移動端的 web 優化需求，所以對體驗優化方面還是有一些共同的煩惱的。

內容主要是：

技術選型的變遷

早期的Web核心問題（native 化的背景）

滾動代碼凍結
載入慢
頁頭無法定製

可視化高度太小
頁頭和頁面間無法交互

Native 化的問題
多版本化的問題（Android、IOS、Web）
發布周期長
無法熱修復
優化Web
內核切換WKwebview U4 解決滾動凍結的問題
xx
頁頭由H5實現

Web不足努力的方向

不足

實現更加粗糙

視覺還原度不足
動畫效果實現沒有成熟的規範

缺乏可靠性
操作體驗差

卡頓
缺少手勢反饋

設計語言偏網頁

努力的方向

精細化

流程規範：標準設計稿 + 視覺走查流程
基礎方案：沉澱設計還原的基礎方案
工具輔助

操作體驗

急速響應

並行載入數據
loading(&> 100ms 才顯示)
通過組合Promise實現精確的預載入
數據上報響應時間（可視化）

操作體驗

實時反饋
操作流暢

動畫：只使用transform 3D，Opacity，適時使用Will-Change
滾動：必須使用Passive-event-listeners
手勢: 配合使用touchmove和scroll事件。
在線採集流暢度數據

可靠性

基於Service Worker誇端預載入機制，保證頁面一定能打開

統一的異常提示和重試機制
避免誤操作

設計語言APP化

最後一個是基於UC內核的極致Web體驗，因為是UC的，而且自己做的需求經常會投放在 UC 瀏覽器上，所以想聽聽 UC 內核的一些體驗問題。這一場主要是講了在 web中的一些體驗問題分為請求耗時，js 文件太大等這些原因，然後提出了 uc 2.0的一些體驗優化的建議，比如：（1）重視業務邏輯優化（2）js文件越小越好（3）重視業務邏輯優化等。

總的感受：人多，氛圍很濃，有很多還是專門從別的地方趕過來的，其次是講師都偏年輕化，有種後輩人才輩出的感覺。感覺自己要加油了，居然有同一屆的（當然我也認識）來演講。其次，乾貨的話還是很多的，但是感覺可以用上或者離自己想要去鑽的不太多，但是還是很有收穫的。

匆忙中寫的一點感受~

今年D2分為三個主會場，所以沒辦法參加所有的分享，（看直播的同學倒是可以同時開仨屏）。我下面分享下我聽過的：

第一場：APP開發解決方案：輕舟。講師：淘寶-星馳

這差不多是一場產品發布會，介紹了輕舟這個一體化APP開發解決方案，分享這套系統的優點，集成了APP開發所需要的初始化、開發、打包、分發、插件、推送、廣告等等開發流程。

說實話，根據PPT內容來看，我覺得這個還可以！姿勢比DCloud(HBuilder)那一套應用開發方案高很多。比較適合個人開發者、中小企業、還有外包服務商。

第二場：打造高可靠與高性能的React同構解決方案。講師：阿里國際UED-六猴

同構的意思就是：一套代碼，同時支持客戶端與服務端渲染。

這場呢介紹了阿里的React同構框架-北斗。主要是說他們是怎麼一步步提高同構的性能。這位講師非常的有激情，現場也直接show us the code。就是分享中比較尷尬的一點是：提高性能關鍵是靠升級Node跟React的版本...當升級到React16，性能得到飛躍時，現場響起了為React驚嘆的掌聲。

最後講師還講到了，當實在服務端渲染撐不住QPS時，他們會啟動一套很牛逼的降級方案（可以動態的讓一部分請求走客戶端渲染），但是這套方案申請了專利，不能細說，這就略顯遺憾。

不過這個講師非常的熱情、貼心。就在我編寫回答時，還給我們這些加了微信的同學發演講時涉及到的提高同構性能的文章以及分享的PPT。我也貼一下

React同構與極致的性能優化
Node應用內存泄漏分析方法論與實戰
唯快不破，讓nodejs再快一點

第三場：Microbenchmark for JavaScript。講師： @賀師俊

賀佬的演講呢還是一如既往的高橋流，就是高橋流講著講著，感覺開始意識流了。從Fastify講到benchmark，講到console.time，再講到黑白電視機。還好最後話題還是收斂到了Microbenchmark。主要是說了怎麼才能提高基準測試時的時間精度（performance.now()），以及如何提高基準測試的準度，(CPU搶佔式執行的測不準，統計學上的分析)。最後覺得現在的benchmark庫比較老了，於是賀佬自己寫了一個新的，我也貼一下代碼倉庫，就是代碼還沒完全提交。

這場雖然比較意識流，但感覺，對一個問題歸根究底的精神還是很值得學習的。

中場休息，吃個午飯。然後由於下午我跟另外同行的夥伴都想去其他會場聽聽感興趣的，於是下午就是游擊戰式的。

第四場：現代前端對視覺和交互的探索。講師：Bilibili-戴天宇

這場比較有意思，不同於其他講題，這個分享更加的「前端」。不同於一些性能阿、效率阿、多端統一啊之類的話題，這個分享主要介紹了bilibili這一年在更豐富的人機交互的嘗試（具體來說就是搞H5遊戲，酷炫的動效，甚至是VR/AR），以及如何在這些交互上做到極致的體驗。

感覺還是挺好的，因為現在很多前端都越來越往「底層」走（研究更好的構建大型web應用，如何通過Node提高開發效率等等），感覺這些更視覺上的，「更表面」的，一些交互相關的，談及的比較少。

講師最後還分享了下他認為的前端未來在交互上的發展方向（如AR/VR，與藝術結合等）。

最後的最後還秀了波恩愛，猝不及防的狗糧。

第五場：把前端監控做到極致。講師：阿里巴巴-雙揚 @楊森

這場也比較有意思，因為人實在太爆滿了！以至於我們這些從其他會場過來的，都是直接坐地上了。這個講題也非常的好，因為如講師所說，70%的前端項目，都沒有做監控。我個人覺得，可能會更多。。。而如果不做呢，就會變成「起夜家」。

這位講師從四個點介紹了如何做前端監控。

採集：如何捕捉跨域腳本異常、如何不侵入代碼的捕捉異常等。
處理：過濾無效日誌、如何採樣等。
分析：高日活時的考慮，與其他日誌（如後端請求日誌）的合併分析，堆棧信息的查看等。
報警：正態分布等數學分析，周期性波動的處理等。

最後還說到了在嘗試更加智能的、機器學習的前端監控。最後提問環節有同學希望此系統能開源，講師後來在微信群中也因為了大家對監控系統的熱忱表達了會考慮這樣的事情。

最後再補充句：這個分會場（擁翠廳）的女主持人很好看！笑起來很可愛~

第六場：天貓超市Mobile Web的極致體驗優化。講師：天貓-由校

這場呢主要是講師介紹天貓的頁面，從web 到 native 又到 web 的過程。因為web體驗不如native、性能又差，所以要用native，但又因為native難以三端統一維護和版本更新的問題，又在web上去做極致的優化，然後現在回歸到 web。不過其中講到的主要的性能優化手段還是頁面渲染引擎的升級（UC內核），其他多是一些交互上的細節，如把app的導航頭幹掉等。

不過更讓我覺得納悶的是阿里這，螞蟻吧，用RN；手淘吧，用Weex；天貓這吧，又用純Web。這公說公有理婆說婆有理的....其他以阿里為技術標杆的人就很為難。

第七場：支付寶無線效率工具建設。講師：支付寶-加里

這場主要介紹介紹支付寶app開發過程中提高開發效率的一些工具。諸如dns直接將指定開發域名綁定到本機（防止通過代理轉發時https證書等問題），一鍵獲取app資源包，還有更好的網路代理工具AnyProxy等。

這個代理工具我覺得不錯，基於Node開發的，我可以自己去寫中間件去做一個定製化的代理工具。比如跟自己公司的介面管理系統（已開源）做綁定。線上請求走這個開發代理時，能直接根據介面管理系統中的配置，轉發到mock請求，就不需要在項目代碼中維護mock地址，想想就美滋滋啊。

因為我會上也沒記筆記，所以上面這些介紹都比較籠統，大家如果有感興趣的講題的話，可以等D2那邊放出視頻跟PPT了，自己去找對應的看。

正片到這本來應該就結束了，不過今年有幸。天貓前端委員組邀請我跟公司另外一個同事參加了D2結束後的夜場。

但是不幸的是，這個夜場的時間提早了，而我跟同事並未注意到！當時出去吃火鍋了，就沒來得及去趕這場夜場。

但是不幸中的大幸是，這個火鍋是跟掘金聯合創始人 @Glowin 、大搜車的無線架構leader @小芋頭君以及我的同事 @丁香園的前端大佬 @志遙一起吃的，跟這些大佬們一同進餐，聽他們分享人生的經驗，提高了姿勢水平，非常的開心~

最後的最後，希望D2越辦越好，前端越來越屌~

謝謝 @slashhuang 邀請，很可惜這次我沒有參加 D2。

2015 年的 D2 我有參與組織活動，2016 年的 D2 我參會了，今年的主辦方有我之前的同事，所以近水樓台先得月，有邀請我去講一個話題。

但是由於主要最近要錄的課程比較多，沒有時間準備，如果準備得不好怕對不起組織方，所以就沒去。

我這次本來是想去講講 Rails 的，講講 Rails 對前端的啟發：

對程序員幸福感的重視
約定大於配置（現在前端還沒形成行業約定）
框架不是工具的堆積，而是主廚精選（品位要好）

目前我們的平台 XieDaiMaLa.com 就是用的 Rails + Vue + Webpack 組合。好處就是省人力。

我們只用了兩個前端（我和一個經驗不滿一年的 @張新望）就開發完了，而且每周我大部分時間是在上課，所以人力極缺。就是在這樣的條件下，我們用 Rails 和 Vue 做出了一個擁有授課、評閱、直播、錄播和支付功能教學平台，耗時大概兩個月，我兩人每個人每周投入的時間平均不到三天。

伺服器是在阿里雲買的一台，1 核 CPU 4G 內存 3Mb 網路帶寬。

我們用戶量並不大並發也不高，很多對商公司跟我們一樣的，這種情況下用 Rails 實在是太幸福了。

目前我們遇到的瓶頸主要是資料庫層面的，包括查詢優化、緩存策略等，所以我們一直在突破自己，沒有把自己局限於前端。

總而言之，我本來想去讓更多前端知道 Rails 的，由於太忙只好做罷啦。

前端們去了解下 Rails 吧，然後把 Rails 的優點搬運到 Node.js 裡面吧。

自從參加過15年的D2，現在每年年尾都非常期待能夠參加D2前端技術論壇，今年有3000多人的申請，篩選審核通過1000多人，很榮幸能夠在這審核通過的1000多人里，今年的審核機制，現場真的幾乎沒有什麼HR了，同樣的地方，同樣的會場，一如既往的免費公益，還是阿里有大情懷，提供WiFi，但是沒有了餐券，管理的比較嚴了，限制在了訪客中心，所以早飯想去4號樓吃甘其食也沒吃到，還好有costa的麵包，不過終比某confjs有情懷吧。。。

996樂隊這隊名多麼痛的領悟！開場是挺驚艷的，樂隊樂器上的演湊確實有功底，但是演唱上差強人意啊，冒昧問下你們缺不缺前端開發主唱，個人在唱歌方面還有點自信。。。

今年是D2的十周年生日祝D2生日快樂！越辦越好！

上午三個會場的主題可以分為主會場以技術解決方案，白馬會場以團隊建設管理，擁翠則以loT物聯網技術，可以這樣理解吧。

上午一直在主會場待著，其實也比較想去白馬會場聽聽團隊建設管理方面的，還有物聯網，實則分身乏術。。。希望之後有錄播，或者求其他大牛把分會場的重點撿煉出來，在此拜謝！下面是自己的一些理解，如有失誤，萬望指正！

第一場，是一直比較關注的weex框架，不過主題居然是基於weex的跨平台開發原生app的生產打包發布的一系列的整合平台，使整個app從開發生產到打包發布都非常的靈活，快速吧？！原以為阿里都在忙雙11/12，weex最近一直沒有太大的動靜，原來已經搞出了這麼大的一個跨平台開發原生app一站式解決方案，還提供一系列的插件非常的便捷。

第二場，打造高可靠與高性能的React同構解決方案

這兩個高要突出些，其實不是太了解隨便說說吧，主要是講了結合react/node同構應對吞吐量QBS的分客戶端和服務端的渲染解決方案，不過他這個方案庫的名字倒是讓我印象深刻beidou不是北斗定位的兄弟吧？確實是很厲害的解決方案，百倍的性能提升，我等會再細看下，一下子消化不了。。。

第三場， hax的Microbenchmark for JavaScript，主要是讓基準測試更加可靠，更加精確化！賀老還是一如既往的風趣，非常喜歡聽他的演講，比較有幽默性，內容非常充實，講到了從古至今的兼容性問題，包括es5，es3，node獲取時間的api，date.now(),performance.now()精確到5微秒等，具體可以看slashhuang的內容吧。。

下午第一場，主會場聽了從Web渲染到Web計算，關於物體識別的渲染問題解決方案，有canvas、webGL、base64，完全由前端渲染等等而且在不同設備上的流暢性吧，記不清了，主要整個展示demo還是挺炫的，表示比較感興趣吧！講的比較快吧，還沒到時間就講完了，我直接跑去擁翠會場去聽了百度fex前端妹子的演講會場太小了，人多了都擠不下了，看來都是來看妹子的吧，我去的時候只聽到百度H5的解決方案吧主要還是用了angular這麼個技術棧吧，在性能的優化上還是值得思考，其實我是比較支持百度H5的，因為自己一直在用感覺比易啟秀這類的應用做的好吧，主要還是沒有版許可權制，功能也上也不錯。自己在公司內也推薦過。

第二場，關於前端異常錯誤的監控，他這個方案其實是不錯的，不過成本較大，講師說到了mysql的問題，參考sentry的解決方案是用postgreSQL，我覺得可以用sentry去改造成適合自身的前端日誌監控分析報警的這麼個解決方案吧。。。

第三場，天貓超市Mobile Web的極致體驗優化，從跨平台到混合到回歸web，中途在碼字，沒怎麼注意聽，表示膜拜，講師提到阿里內部大多數移動項目都直接上weex了，個人挺看好weex的發展的，誰讓fb非要搞個協議搞得大家都不敢用rn，希望weex文檔越來越完善，框架越來越穩定，生態體系越來越豐富!

第四場，支付寶無線效率工具建設，主要解決的問題是直接在真機真實環境中調試測試應用，解決大家一直在模擬器或Chrome上去調試測試的問題，真機不插線調試應用。具體解決思路我都是沒大能完全理解，這方面的知識有所欠缺，要補上！

今年的主題是匠心，個人理解是程序猿應懷著工匠精神去寫程序，是一種精神態度的體現！讓工匠精神涵養時代氣質！
參與大會目的各有所不同，有人蔘會面基交流，有人蔘會感受氛圍，有人蔘會學習思路，有人蔘會找男女朋友!不管你的目的是什麼。
還是想借用徐飛的話，處於封閉環境的人，應該多出去看看外面的環境是什麼樣的，前端開發需要交流，需要活力，需要跟隨社區的腳步，因為發展很快。

今年本來打算在北方四季如春的暖氣里做一枚安靜的死宅，結果@winter大大不知為何突然問我有沒有興趣來個分享，作為一名佛系程序員，自然很隨緣地答應了。

然後就是克服懶癌末期準備ppt，試講，等等。原本有React相關的內容，然後由於相關產品還沒正式對外，以及並不是該項目主力，怕將來報道出了什麼偏差（懶）等諸多原因，最終還是刪去了這部分內容，分享就成了大家最終看到的那個樣子。

期間還由於最後一天通宵狂趕PPT，被老大@吳多益親切地鄙視了。

後續應該會出一篇更系統的文章來對整個技術嘗試鏈條進行補齊闡述，包含React和協同編輯的部分。

因為自己的分享排在下午，早上主要聽了一號場@月影大大的《自我成長的多元化團隊》，以及主會場的《打造高可靠與高性能的React同構解決方案》、賀老@賀師俊的《Microbenchmark for JavaScript》三場。賀老的分享一如既往地細緻和死理性派，刨根問底的精神很值得吾輩學習。

因為現場大佬眾多，且話題都很高大上，作為小透明的吾輩下午本來是沒指望有多少人來的，結果出乎意料地全場爆滿，很慶幸有認真準備了 PPT 的內容，現場的答疑和會後和聽眾的交流也讓我有不少新的思考。

分享答疑完之後就沒再聽講座，而是各種找老熟人敘舊吐槽了，和許久不見的徐叔、winter老濕、賀老、牛堯、金風、天翔以及慧仙等人約了個飯並暢談各種兒童不宜（霧的話題。

最後和 winter 老師、金風、毛小孩在賓館旁邊的星巴克來了幾場農藥，明顯手氣不順，就贏了一盤，殘念。

周日回北京，明年再見。

不知道明年又長了一歲的各位會不會依舊保持同樣的狀態和精神。

難道沒人吐槽五花肉嗎？

我是五花肉，有一個回答是，要吐槽我，我先佔樓啦，歡迎建議，實名等你來

在各種業務壓力下，這種純粹的技術分享大會越來越少，每次都能見到很多老朋友，很期待很開心

兼容各大小公司的分享，昨天同一時刻，在阿里巴巴西溪園區，百度、騰訊、B站三場同時進行，技術從來都是開放和共贏的，很喜歡

也許我沒那麼懂具體的技術，確實業餘了一些

從純粹自己的角度上，希望大家能有快樂的一天，就像一個節日

很多人說大會就是廣告啦或者學不到什麼，是這樣，學習是系統的，這裡更多的是一些實踐一些探索和一些方向思考，至於深入，還是需要自己慢慢琢磨和沉下心

關於吐槽到的會務部分，茶歇、引導、我的主持，確實不夠好，年底各位都忙的焦頭爛額，我不是為了開脫什麼，只是看他們很辛苦，也純公益在做這些事情，希望多些理解，並且結合問卷會做相應的改善

僅僅代表個人立場，其他兩位主持人很認真，如果我比較隨意或者風格不適合，歡迎私信我

我不理你哼哼

就說三句

第二場的React同構是我們國際UED團隊的，現在還在招人，簡歷私信砸過來吧。
阿里內部廣泛使用的前端監控現在已經對外服務，上阿里雲了，https://arms.console.aliyun.com/retcode#/index ，現在免費
我說完了。

今年的椰汁不一般

提前一天就到了杭州， @winter 老師給約了訪客證到訪客中心轉了轉，體驗了一下「來電」，充手機有點慢，應該是不支持快充。

晚上一起到 @朴靈老師家蹭飯，還見到了 @賀師俊。據說 @潘征睡了一天，不然可以一起農藥了。

-------------------割----------------------

D2才是正題

開場後就去聽了 @月影的分享，感覺大公司真好，有精力搞訓練營，小公司招人好難。翻譯這事確實是能夠雙向輸出，對外和自身都能有提升，對畢業不久的程序員來說確實是一個不錯的經歷。然後對上管理和技術選型不干預這事，對團隊的leader有挺高要求的，1是需要能抗壓力，2是要能hold住大家踩的坑。總體來說執行起來還是有難度的。

第二場聽的React性能優化，最感興趣的是專利部分，就是部分渲染，還有壓力高的時候不做SSR，自動通過前端渲染，可惜這部分沒細講。

第三場 @賀師俊的microbenchmark for js，據說周四晚上賀老同樣的主題是完全不同的講法，乾貨不少，特別是時間精度講到時鐘頻率，還有timing attack的手段，NTSC等等，都很有意思。

下午第一場當然是聽 @潘征演講啦，大致是百度腦圖和H5編輯器，良心ppt，寫了好多頁，印象最深的就是頁面操作的保存優化。

第二場聽了前端監控，各個框架里有自己的error handler機制，然後跨站要加上crossorigin才能有爭取報錯堆棧這個之前確實沒注意過。採集上說到了抽樣的問題，其實沒太大必要，直接入庫就完了，萬一要差錯的那個被入庫概率給過濾了呢，現在的存儲還是很便宜的，查詢分析方案很多了。

然後就在主會場外看到一群熟人，winter、風馳老闆、雷老闆、berg等等……反正都有一個統一的特點，iphone 齊劉海。

其他沒聽的之後再補看ppt吧……

晚上 @民工精髓叔叔組了飯局，出場人物見方哥的樓，吃完又組團到星巴克農藥4黑匹配， @winter 老師很穩。等星巴克關門後又到 @天翔Skyline 的房間差不多把D2的主題又擼了一遍。

收穫還是很多的，比如選型weex和 @winter 聊了後，我主張的用法符合weex的設計初衷

不解釋，看我如何在同一時段聽三個分會場的分享~