蒲公英 · JELLY技術週刊 Vol.16

近期，谷歌有史以來的第一次線上谷歌 Web 開發者大會，Web Vitals、PWA、DevTools 和 Lighthouse 6.0 等一系列特性或產品帶來的全新體驗，讓人眼花繚亂。這次大會也以線上的形式分享了包括了性能優化、打包構建等非常多幹貨，定會讓你收穫頗豐。

登高遠眺

天高地迥，覺宇宙之無窮

基礎技術

谷歌發佈首個線上 Web 開發者大會

谷歌在本月初完成首次線上 Web 開發者大會 (web.dev/live)，以線上視頻的形式，分享關於優化核心 Web 指標的最佳實踐，Cookie 隱私和安全保護、構建工具與打包優化、Chrome DevTools 改進等技術乾貨。

深入淺出現代 Web 編程

這是芬蘭赫爾辛基大學公開的全棧課程資源，內容包括 React, Redux, Node.js, MongoDB, GraphQL 以及 TypeScript 等，教你利用 ReactJS 搭配 Node.js 開發 REST API，搭建屬於自己的單頁應用程序（SPA：Single Page Application）。

前端框架

在 React 內使用內聯函數的性能損耗究竟有多少？

一直有人教導我們：在 React 裏用形如 onClick={() => { /* xxx */ }} 函數內聯的寫法會降低性能，是不好的。但你想過具體有多大影響嗎？Matthew Gerstman 想知道影響的具體程度，所以他做了驗證。結果發現，儘管內聯函數存在着性能損耗，但這種損耗近乎可以忽略不計。

圖形編程

支付寶 App 3D 動畫和小遊戲背後的故事

3D 動畫和遊戲一直是前端領域的難點，支付寶 App 從 2017 年春節推出 AR 紅包開始，一直在 Web3D 領域進行探索和實踐。本文中介紹了支付寶業務線從 17 年推出 AR 紅包開始，在 Web3D 上的嘗試。通過從0開發 R3 渲染引擎、下至由瀏覽器層面針對 Web3D 進行兼容等等努力，誕生了「星星球」等營銷方案成功的 Web3D 遊戲。在此過程中，團隊也在「技術落地，業務探索，降低成本」方面做了不少嘗試。文末分析了 Web3D 的短板所在，並結合技術趨勢推測出未來的發展前景，值得思考。

華人團隊打造3D手環, 讓VR告別手柄

最近, 康奈爾大學的華人教授帶領國內本科生通過手環獲得手指紅外線成像結合深度神經網絡, 以3D的形式對手指骨骼20多個關節進行了重建，該技術將在 VR、手語翻譯、人機交互等方向有廣泛的應用。

當原生雲遊戲遇上互動直播

7月22日的雲鷺科技雲遊戲互動直播分享會上，雲鷺科技 CEO 溫向東在直播中爲大家分析了目前遊戲開發者們遇到的困境，並針對這些困境提出了「入局雲遊戲」的解決方法。從輕量級遊戲入手，併成立委員會，以對原生雲遊戲進行多方位的支持。

人工智能

可視化卷積神經網絡解釋器

CNN（卷積神經網絡）是學習AI過程中必定會了解到的概念。但瞭解CNN的工作原理需要大量專業知識，小白使用的時候不得不把它當成一個黑箱處理。而佐治亞理工中國博士出品的可視化解釋器，把CNN按步拆解並輔以圖形解釋通過點擊CNN不同模塊就能展示是怎麼識別圖片和物品的。

滄海拾遺

滄海拾遺，積跬步以至千里

Taro H5 - 決戰性能之巔

只有 Web 需求時，你會選擇 Taro H5 麼？或許你有自己的答案，但是在很多場景下， Taro H5 已經爲很多開發者達成了非常多優化去應對，或許不完美，但是在社區很多開發者的貢獻之下，Taro H5 在性能還有諸多方面，都已經成爲了一套完成度很高的方案，來聽聽 Taro H5 的第一作者 xiaoli 怎麼說吧！

京東 PC 首頁 - 電商門戶的迭代之路

提起門戶網站，算是個古早的話題，但是想要做好卻依舊有很多我們需要考慮的問題，電商門戶更是其中非常重要的環節，各類優化和體驗，都需要做到極致。那麼對於京東來說，想要適應當下前端開發的環境，對自家門戶首頁的改版，需要注意那些呢？

「蒲公英」期刊，每週更新，我們專注於挖掘「基礎技術、工程化、跨端框架技術、圖形編程、服務端開發、桌面開發、人工智能、設計哲學、前端框架」等多個大方向的業界熱點，並加以專業的解讀；不僅如此，我們還會推介精選凹凸技術文章，向大家呈現團隊內的研究技術方向。

擡頭仰望，蒲公英的種子會生根發芽，如夏花絢爛；格物致知，我們登高遠眺、滄海拾遺，以求積硅步而至千里。

蒲公英 · JELLY技術週刊貢獻指南

歡迎關注凹凸實驗室博客：aotu.io

或者關注凹凸實驗室公衆號（AOTULabs），不定時推送文章：