蒲公英 · 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技術周刊貢獻指南