前端每週清單第 40 期: JS 的 Core 與 Cost，Node 記憶體溢位除錯，Software 2.0

作者：王下邀月熊 編輯：徐川

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

新聞熱點

國內國外，前端最新動態

• Atom 釋出程式碼協同工具 Teletype: 本週，Atom 釋出了遠端協同工具 Teletype，其允許開發者以 P2P 的方式進行結對程式設計；儘管 Beta 版本尚存在很多的 Bug，還是拭目以待未來更方便的團隊協同工具。同時，VS Code 也釋出了所謂的 Live Share 規劃，其同樣允許開發者使用 Visual Studio 2017 或者 VS Code 來實時協同編輯程式碼。

• Firefox 57.0 釋出: Firefox Fast Again! 本週 Firefox 57.0 版本正式釋出，給使用者帶來了一個全新的 Firefox，暢快地使用體驗。該版本中最大的變化，即是引入面向現代裝置的瀏覽器引擎：Quantum；同時該版本還重新設計了使用者介面，為使用者提供清新爽朗，且觸控式螢幕友好的介面。更多詳細內容可以檢視原文或者下文介紹的 Quantum 揭祕一文。

• Github 釋出安全告警功能: 上個月 Github 引入了 Dependency Graph，允許以視覺化地方式呈現 JavaScript 與 Ruby 倉庫的依賴圖譜。在此基礎上，Github 釋出了倉庫的安全告警功能，在使用者開啟 Dependency Graph 的情況下，其能夠自動地檢測依賴專案是否存在安全漏洞；一旦發現了存在漏洞的依賴，其會及時地給予開發者反饋。

• Expo SDK 23.0.0 釋出: 本週 Expo SDK 23.0.0 正式釋出，其基於 React Native 0.50；在該版本中也正式引入了 React 16.0.0，從而可使用新版本的 React 中的各項特性。該版本還嘗試引入了 Release Channels 功能，允許開發者更方便地釋出與更新自己的應用；並且開始支援 iOS OTA 更新的後臺抓取功能。除此之外，該版本還更新了 Android 中的 JavaScriptCore、更新了 Snack 以及多個 API 的表現。

開發教程

步步為營，掌握基礎技能

• Angular 初學者完備指南: 本文是一篇非常完備的 Angular 初學者指南，不僅循序漸進地引導開發者搭建簡單的 Angular 專案，還囊括了 Angular 中諸多基礎概念。本文首先介紹了 Angular 的概念與定位，包括了 SPA、Angular 框架與整個平臺的構成、Angular 各個版本之間的關係等內容；接下來本文介紹了 Angular CLI 以及如何使用它搭建簡單的專案，並且討論了 Angular CLI 中常見引數的作用。然後本文在簡單專案的基礎上，分析了 Angular 專案的目錄結構與檔案含義；最後從 Angular 元件的語法開始，依次介紹了服務、模組等關鍵部分的語法與介面。更多 Angular 相關資料參考這裡。

• 你需要了解的有關 React 的一切: 很多人已熟悉或使用著 React，不過其也在不斷地變化，本文便是一篇不錯的入門介紹文章，也能夠梳理下 React 的關鍵知識點。本文以構建簡單的 React 音樂播放器為例，循序漸進地介紹什麼是 React 元件、ReactDOM 渲染、類元件與函式式元件、JSX、State、事件處理、非同步 setState、Props、Refs 等內容；更多 React 教程參考 React 與前端工程化實踐。

• 函數語言程式設計實踐教程: 本文是作者在 LinkedIn 演講的總結，旨在解釋函數語言程式設計及其組合的思想如何能幫助開發者編寫更好的程式碼；而不是著眼於某個語言或者執著於討論 Monads 這些名詞。作者從四十年前 Fortran 的作者 John Backus 對於函數語言程式設計的引入談起，討論了組合（Composition）在電腦科學中的意義；然後分別以 Java 與 JavaScript 等常用語言為例，討論瞭如何通過組合將複雜的問題分解，並且將函式式的、細節的方案有機組合為整體的解決方案。更多函數語言程式設計相關資料參考這裡。

工程實踐

立足實踐，提示實際水平

• JavaScript 的代價與優化: 本文是 Addy Osmani 大神的又一力作，著眼於討論如何在移動裝置上快速地提升站點載入速度與使用者互動地響應效能。本文依次從如何減少包體尺寸與傳輸資料量、優化 JavaScript 程式碼的解析、編譯、執行，如何實踐 PRPL 模式等方面進行闡述；更多效能優化相關資料參考這裡。

• 擴充套件 React 服務端渲染的實踐: 作者在本文中分享了，其在近期擴充套件 React 服務端渲染過程中的實踐經驗；雖然文中很多的討論點都是 React 相關，但是面臨的通用擴充套件挑戰，或者解決的問題都是值得重複借鑑的。本文並沒有直接討論 React 服務端優化，而是從常見的負載均衡談起，介紹了常見負載均衡的演算法與策略；然後討論了客戶端渲染的兜底方案，即當流量過大導致服務端無法及時響應的情況下，如何給使用者合適的反饋。接下來本文還討論了分級解除安裝、元件快取、依賴處理、同構渲染等內容；更多 React 教程參考 React 與前端工程化實踐。

• Node.js 中記憶體溢位與記憶體膨脹除錯: 記憶體問題是服務端應用程式的常見痛點之一，本文作者近日就受困於記憶體洩露（Memory Leak）與記憶體膨脹（Memory Bloat），本文即是他的除錯經驗分享。所謂的記憶體洩露是指無用的記憶體卻未被回收釋放，而記憶體膨脹指程式使用了過量的記憶體；作者介紹了使用堆快照以及 Chrome DevTools 來輔助回溯、蒐集、分析與解決這些記憶體問題。如果想要了解 Web 應用中 JavaScript 的記憶體除錯可以參考記憶體分析與記憶體洩漏定位一文。

• 前端測試金字塔：重新思考你的測試: 本文著眼於前端測試方面，從所謂的測試金字塔結構談起，梳理前端測試的關鍵內容與設計理念。作者認為所謂的前端測試金字塔自底向上為單元測試、快照測試、端到端測試，然後以簡單的模態彈窗為例，介紹各個測試模組的設計要點。一般來說，單元測試用於測試程式碼庫中的函式、類等原子物件，而快照測試則能夠記錄元件渲染之後的狀態並且隨時進行比較；端到端測試則是用於黑盒保證產品的最終體驗。更多 Web 測試相關資料參考這裡。

深度閱讀

深度思考，昇華開發智慧

• JavaScript. The Core 第二版: 本文是 JavaScript 核心概述的第二版，主要對於 ECMAScript 語言標準與其執行時的核心元件進行講解。本文依次介紹了 Object、Prototype、Class、Execution Context、Environment、Closure、This、Realm、Job 以及 Agent 的概念；更多 JavaScript 教程參考現代 JavaScript 語法基礎與工程實踐。

• WebAssembly 已被所有主流瀏覽器支援: 在過去幾周蘋果的 Safari 瀏覽器與微軟的 Edge 瀏覽器分別釋出新版本，支援了 WebAssembly，再加上早已支援的 Firefox 和 Chrome，WebAssembly 已得到所有主流瀏覽器支援。在廣泛的瀏覽器支援下，開發者試驗使用 wasm 模組開發的新特性將觸達絕大多數使用者。如此廣泛的支援得益於 asm.js 專案早期的成功，因為它是 JavaScript 的子集，因此可以執行在所有瀏覽器上，如 Facebook 的社交遊戲 Candy Crush Saga 等就使用了它。

• Software 2.0: 本文是特斯拉 AI 主管 Andrej Karpathy 發表的其對於軟體未來發展的看法，見仁見智，大家也可以帶著批判的態度去閱讀。所謂的軟體 1.0 即是程式設計師使用 Python、C++、Java 等編寫程式碼，然後再編譯為機器碼指令或者由直譯器執行，每一行程式碼賦予程式特定的功能。作者認為深度學習即是軟體 2.0，神經網路不僅是一個分類器，更意味著程式設計基礎開始發生變化，而開發者也可以通過神經網路權值進行程式設計。軟體 2.0 擁有著同態計算、更易燒錄、持續執行、常量儲存、運算高效、十分敏捷等特性。

開源專案

樂於分享，共推前端發展

• Datasette: Datasette 為我們提供了面向 SQLite 資料庫的開箱即用的、只讀的 JSON API；同時 Datasette 還提供了用於將資料庫打包為 Docker 容器，並且將其部署到 Zeit Now 等雲端容器的工具。

• SQL Operations Studio: SQL Operations Studio 是由 Microsoft 開源的資料管理工具，其支援 SQL Server，Azure SQL DB 以及 SQL DW 等多種微軟旗下的資料庫；SQL Operation Studio 能夠和 VS Code 深度整合，執行在 Windows、macOS、Linux 等主流作業系統平臺中。SQL Operations Studio 提供了 SQL Server 連線管理、物件查詢、完備的 T-SQL 編輯器、多種格式資料來源匯出、資料備份與回滾、自定義指令碼、歷史任務查詢等等豐富的功能特性。

• Luxon: Luxon 是由 Moment 出品的，用於操作 JavaScript 中時間與日期物件的工具庫；Luxon 可以看做對於 Moment.js 的現代化介面包裹。Luxon 提供了 DateTime、Duration、Interval 等擴充套件型別，支援鏈式函式式風格的介面呼叫，能夠對常見格式的時間字串進行解析與轉換，並且不需要 locale 或者 tz 檔案就可以進行國際化轉換。

巔峰人生

• React 誕生記：Facebook 併購 Instagram 與開源 React.js: 毫無疑問，React 已成為最著名的且最流行的 JavaScript 介面庫之一，它在 Github 上有超過 70K 的 Star，超過 1100 名貢獻者與每月超過六百萬的下載量，並且它已經在數千家公司的技術棧中得到了應用。不過在 React 面世之初，並未有太多的人關心它；本文是對 Stack Stories 訪談節目的記錄總結，是由 React 的最初創造者之一的 Pete Hunt， 來分享 React 誕生前後的故事：為什麼會有 React，它是如何獲得 Facebook 的關注，它又經過了怎樣的流程才進入到公眾的視線，等等。

前端之巔

「前端之巔」是 InfoQ 旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回覆“加群”。投稿請發郵件到 editors@cn.infoq.com，註明“前端之巔投稿”。