前端每週清單第 31 期: iOS 11 Viewport 解析，Preact PWA 性能優化案例，JS 內存泄露分析

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（ID：frontshow），及時獲取前端每週清單。

新聞熱點

國內國外，前端最新動態

• Mastodon 1.6 發佈：Mastodon 是免費、開源的去中心化的社會網絡聯盟，其已經覆蓋了超過 2000 個節點，擁有超過 800000 名用戶。Mastodon 1.6 版本是首個徹底實踐 ActivityPub 協議的版本；ActivityPub 是由 W3C 提出的新的聯邦式通訊協議，容許多個節點之間平等通訊，交換數據。

• Node.js 8.5.0 發佈：今日發佈的 Node.js 8.5.0 版本中引入了一系列的新特性與錯誤修復，其中值得注意的是 V8 從新支持 Snapshots、引入了 console.group()、新增了 fs.copyFile 與 fs.copyFileSync 以更高效地複製文件等特性；詳細的特性變動列表請查看原文。

• Vue 登錄 OpenCollective 接受捐贈：隨着 Vue.js 社區的不斷增加，愈來愈多的貢獻者也參與到了項目的開發與維護工做中；Evan 也決定正式在 OpenCollective 上開始面向 Vue.js 的社區募捐，以更好地維護社區的平常工做。不一樣於面向我的的 Patreon，OpenCollective 會更加透明，歡迎積極支持 Vue.js。

• Apollo Client 2.0 新特性介紹：Apollo Client 2.0 版本在保障 API 的兼容性的同時帶來了更加高效、靈活地使用體驗；該版本添加了可修改的請求鏈、容許自定義生產環境下默認數據的存儲等特性，詳細地特性與接口變動能夠查看原文。

開發教程

步步爲營，掌握基礎技能

• 基於 Vue.js 構建電影主頁：不少人都習慣使用 Netflix 這樣的在線流服務來觀看視頻或者電影，而本文即按部就班地介紹如何利用 Vue.js 2.0 來實現簡單的美觀大方的電影主頁。本文依次介紹了相關的數據結構定義與模擬數據建立、構建基於指令的組件、路由劃分、數據綁定與狀態管理等內容；更多 Vue.js 相關資料參考這裏。

• 實戰中學習 Flexbox：本文是針對 Flexbox 的實戰提升，不過對於那些即便對 Flexbox 一無所知的開發者，本文也提供了一系列的學習教程。本文依次介紹瞭如何使用 Flexbox 構建畫廊、卡片、網格、常見的網頁佈局、富媒體呈現、表單、移動應用佈局等內容；更多 CSS/SCSS 相關資料參考這裏。

• 深刻淺出 CSS Transforms：經過 transform 屬性，咱們可以移動、渲染、縮放或者提高任何頁面元素；本文便是從最基礎的 transform 語法開始講起，介紹生動的案例來讓讀者體驗 CSS Transforms 各類不凡的用法。本文首先介紹了 translate、scale、rotate、skew 等常見的變換函數的用法，而後介紹瞭如何綜合利用這些屬性來實現複雜的動畫，最後還介紹了 CSS 中 animation 的用法；更多 CSS/SCSS 相關資料參考這裏。

• Angular 4 中使用 Redux 進行狀態管理：SPA 很是適合於構建複雜的現代 Web 應用，而狀態管理每每是開發中常見的痛點之一。像 Angular 這樣基於組件的應用劃分與開發方式可以更好地架構項目，提高代碼的可複用性；而本文便是介紹如何綜合使用 Angular 4 與 Redux 來開發現代應用。本文首先介紹了 Redux 中 Store、Actions、Reducers 這些基本的概念組成，而後用 Angular CLI 建立簡單的 Angular 項目，而且引入 Redux；接下來本文詳細地介紹瞭如何使用 TypeScript 編寫 Redux 中的各個組件，從 Store 到 Action Types 等，最後將這些與組件結合爲完整的 TodoList 應用。更多 Angular 相關資料參考這裏。

• 快速構建基於 React 的 CMS 系統：CMS 內容管理系統是現代常見的 Web 應用形式之一，本文則是介紹利用 Firebase 與 React 快速開發簡單的 CMS 系統；Firebase 是雲端的實時 NoSQL 數據庫，其提供了方便的數據操做接口，免去了開發者自行搭建服務器的煩惱。本文首先介紹了 CMS 中界面組件的劃分與純組件的實現，而後介紹了 CMS 中須要的接口邏輯以及如何用 Firebase 實現這些接口；更多 React 相關資料參考這裏。

工程實踐

立足實踐，提示實際水平

• 來自 Treebo 的 React 與 Preact PWA 性能分析：本文是 Addy Osmani 大神參與編寫的，印度 Treebo 公司使用的 Preact PWA 性能優化案例；相較於舊版本的網站，新版本在首屏渲染上提升了 70%，初始交互等待時間減小了 31%，大部分的訪客在 3G 環境下只須要 4s 便可以瀏覽完整內容。本文以 React 單頁應用爲例，討論了服務端渲染帶來的首屏渲染的性能提高；而後討論了基於路由的代碼分割與懶加載，接下來還討論了 PRPL 模式、HTML Streaming、關鍵路徑 CSS、離線靜態資源緩存、從 React 切換到 Preact 等內容。更多 PWA 相關資料參考這裏。

• Electron：那些使人煩惱的部分：絕大部分的跨平臺編程語言或者框架都有其優點與缺陷，可能更多的開發者瞭解到的是 Electron 優秀的方面，本文則換個思路來聊聊 Electron 中那些使人煩惱的部分。本文依次討論了應用安裝、持續集成與多平臺構建、應用體積、局部更新、安全性、代碼混淆與保護等內容；

• 小米直達服務探祕：如何保證移動 Web 體驗？：小米直達服務是小米推出的 App 混合開發框架，它能夠實現秒開，同時能夠在瀏覽器、短信、微信等地方打開。本文便是小米直達服務 Web 體驗保障方面的實踐分享，討論了目前移動 Web 體驗的瓶頸、小米直達服務的機制與核心關鍵等內容。更多 Web 性能優化相關資料參考這裏。

• 理解 iOS 11 中 WebView 的 Viewport：iOS 11 爲咱們帶來了新的狀態欄，其劉海造型可能對於像 Apache Cordova 或者 Ionic 這樣的混合式開發者形成必定的影響；特別是對於那些使用了 fixed 來佈局頂部欄的 Web 應用，本文便是對於 iOS 11 自帶的 WebView 的 Viewport 屬性進行詳細解析。本文首先討論了 iOS 11 ，包括 iPhone X 帶來的改變，而後介紹瞭如何利用 constant 或者 calc 函數來優化頂部欄的顯示效果。

深度閱讀

深度思考，昇華開發智慧

• 全棧 Web 學習路徑：本文是針對全棧 JavaScript 開發學習與進階的指南，涵蓋了從基礎語法到 React、Node.js 等多方面的學習路徑與資料推薦。本文涵蓋了課程、項目、書籍等多種資源形式，介紹了語法基礎、React 應用開發、Node.js 服務端應用程序開發等多個領域的內容；更多 Web 開發相關資料參考這裏。

• 現代 JavaScript 指南：本書覆蓋了從語法基礎到 OOP 等複雜概念的各方面的 JavaScript 相關的知識教程，包括了簡介、語法基礎、代碼質量保障、Object、數據類型、函數與函數式編程、類與集成、異常處理、瀏覽器對象等多方面的內容；更多 JavaScript 相關參考這裏。

• JavaScript 工做原理：內存管理與常見內存泄露分析：本系列文章皆着眼於深度解析 JavaScript 內部運行原理，而本文則重點討論編程語言中常見的內存管理問題；而且還提出了對於處理常見的內存泄露的建議。本文首先介紹了變量內存的生命週期、內存的定義、如何分配內存、垃圾回收的機制、內存泄露的定義以及常見的四種內存泄露的形式與應對手段；更多 V8 相關資料參考這裏。

• 對於 CSS-in-JS 的缺陷分析：本文做者從本身的角度闡述了對於 CSS-in-JS 的見解，將其形容爲：就像用壞掉的螺絲刀替換你最愛的工具；閱讀的時候也能夠看下評論區的回覆，辨證地來看待做者的觀點。隨着 React 等現代 Web 框架的興起，CSS-in-JS 也受到了不少的關注，人們指望用它來解決傳統 CSS 中全局做用域、代碼難以管理的問題。不過本文做者確認爲 CSS-in-JS 自己就是反模式，他從代碼的組織結構、耦合方式，CSS-in-JS 帶來的界面一致性地破壞、代碼可複用性地下降等角度來闡述本身的觀點，最後提出了仍是應該使用 OOCSS 這樣標準的 CSS 工程實踐來解決 CSS 自身的問題。更多 CSS/SCSS 相關資料參考這裏。

開源項目

樂於分享，共推前端發展

• src2png：src2png 可以將源代碼轉化爲語法高亮、 閱讀性高的圖片；其會首先啓動包含熱加載、Webpack、Babel 等多重特性的 POI 開發服務器，而後加載 Puppeteer 並在 Headless Chrome 中將代碼渲染截圖。

• best-resume-ever：best-resume-ever 是基於 Vue.js 開發的，簡單、易用、美觀的我的簡歷製做模板，其使用 LESS 來定義樣式，而且容許導出爲 pdf 等格式。

• Nulis：Nuils 是受到 Gingko 啓發，很是有意思的開源樹狀結構編輯器，其容許開發者將任何的想法表示爲樹狀結構：從最抽象的想法開始，逐步添加包含更多細節的嵌套描述卡片。這種格式會很是有助於編寫故事、文章、大綱、GTD 等等。

• hiproxy: hiproxy 是一個基於 Node.js 開發的輕量級網絡代理工具，主要目的是爲了解決多個開發者在開發過程當中遇到的 hosts 管理和反向代理的問題。使得在開發時，再也不須要修改系統 hosts 和啓動一個 Nginx 服務。hiproxy 擴展了 hosts 的語法，支持端口號。此外，hiproxy 還支持經過相似於 nginx 配置文件的語法來配置代理。

巔峯人生

• 重新手村到史詩英雄，程序員的打怪升級之路：本文是 EGO 會員，餓了麼北京研發中心總經理史海峯對於程序員成長之路的分享總結。文字依次討論了大廠職級職等背後的神祕規律、新手村後的快速成長、如何看待跳槽，面試、專職怎麼選等內容。

前端之巔

「前端之巔」是 InfoQ 旗下關注前端技術的垂直社羣，加入前端之巔學習羣請關注「前端之巔」公衆號後回覆「加羣」。投稿請發郵件到e ditors@cn.infoq.com，註明「前端之巔投稿」；或者能夠閱讀往期文章。

前端之巔微信底圖－5.jpg