摘要：前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。背后的故事本文是對于年之間世界發(fā)生的大事件的詳細介紹，闡述了從提出到角力到流產(chǎn)的前世今生。

前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于半年來發(fā)布的前端每周清單中的 JavaScript 相關(guān)的教程實踐與開源項目的盤點，可以查看這里獲得往期清單或者其他盤點篇。

《2017 前端開發(fā)手冊》：Front-End Developer Handbook 2017 由 Cody Lindley 編寫，面向每一個希望學習前端的開發(fā)者。該手冊概括地討論了前端工程化的相關(guān)實踐：在 2017 年中我們應該使用哪些前端工具以及如何學習去使用這些數(shù)據(jù)。該手冊的內(nèi)容包含了 Web 技術(shù)的基礎(chǔ)：HTML、CSS、DOM 以及 JavaScript，以及基于這些技術(shù)構(gòu)建的優(yōu)秀開源項目。

《現(xiàn)代 JavaScript 概念縱覽》：現(xiàn)代 JavaScript 開發(fā)在過去幾年中經(jīng)歷了迅猛的變遷，并且這種變化的勢頭毫無停滯的預兆。對于很多前端開發(fā)者而言可能還不是很熟悉那些 JS 博客或者文檔中提及的時興的概念。此文討論了很多起到媒介作用以及高級的概念，和這些概念是如何被適用于現(xiàn)代 JavaScript 開發(fā)中的。本文我們會討論 Statefulness 與 Statelessness、Immutability 與 Mutability、Imperative 與 Declarative Programming、Higher-order Functions、Observables、以及 FP、RP、FPR 編程范式。

《JavaScript 啟動性能瓶頸分析與解決方案》：隨著現(xiàn)代 Web 技術(shù)的發(fā)展與用戶交互復雜度的增加，我們的網(wǎng)站變得日益臃腫，也要求著我們不斷地優(yōu)化網(wǎng)站性能以保證友好的用戶體驗。本文作者則著眼于 JavaScript 啟動階段優(yōu)化，首先以大量的數(shù)據(jù)分析闡述了語法分析、編譯等步驟耗時占比過多是很多網(wǎng)站的性能瓶頸之一。然后作者提供了一系列用于在現(xiàn)代瀏覽器中進行性能評測的工具，還分別從開發(fā)者工程實踐與 JavaScript 引擎內(nèi)部實現(xiàn)的角度闡述了應當如何提高解析與編譯速度。

《GraphicsJS:輕量級繪圖庫》：目前 Web 開發(fā)中最常用的創(chuàng)建交互式圖片的技術(shù)選型當屬 SVG 與 Canvas，傳統(tǒng)的 Flash 與 Silverlight 已經(jīng)慢慢淡出歷史的舞臺。而對于 SVG 與 Canvas 的對比也顯示，如果是想創(chuàng)建與操作簡單的交互性圖片，那么 SVG 當屬首選。SVG 本身是基于 XML 的向量圖，任何通過svg標簽載入的圖片都會成為 SVG DOM 中可操作的對象。而 GraphicsJS 正是基于 SVG 的簡單易用的 JavaScript 繪圖庫。

《理解 JavaScript 中的作用域》：JavaScript 中的作用域、閉包以及上下文綁定一直是令人凌亂的知識，此文作者詳細地從函數(shù)作用域、塊作用域、詞法作用域、閉包等進行詳細闡述，值得一讀做個梳理。

《ECMAScript 4 背后的故事》: 本文是對于 1999 ~ 2008 年之間 JavaScript 世界發(fā)生的大事件的詳細介紹，闡述了 ECMAScript 4 從提出到角力到流產(chǎn)的前世今生。 ( http://suo.im/phBiE )

《深入了解 JavaScript 中錯誤對象與堆棧跟蹤》：JavaScript 中 Error 對象的堆棧跟蹤信息包含了從異常拋出點到構(gòu)造函數(shù)的所有棧幀信息，而手動地去捕獲與操作堆棧跟蹤信息有助于我們在開發(fā)測試或者異常處理相關(guān)的框架時有更好地實踐。( http://suo.im/MiMWd )

《對比探秘 WebAssembly 性能優(yōu)越之謎》: 本系列文章通過有趣的漫畫介紹了 WebAssembly 的前世今生，并且與 JavaScript 就加載、解析、編譯、執(zhí)行等瀏覽進行了詳細對比，從而介紹 WebAssembly 的性能緣何相較于 JavaScript 會好上很多。同時作者也強調(diào)，WebAssembly 與 JavaScript 各有所長，未來并不會存在太多的競爭，更多的是相輔相成，各司其職。( http://suo.im/3jsTUH )

《槽糕的 JavaScript 框架們》：此文作者 Matt Burgess 嚴肅地吐槽批評了幾乎所有的現(xiàn)今流行的 JavaScript 框架，與他上一篇文章偉大的 JavaScript 框架一起閱讀效果更佳。當然，作者并不是想讓大家回到茹毛飲血的歲月，而是希望能以辯證地態(tài)度去認識與使用框架。( http://6me.us/e9R )

《JavaScript 圖片處理庫盤點》：圖片處理一直是客戶端開發(fā)中的常見問題，本文則是對基于 JavaScript 的常見的進行圖片濾鏡、裁剪等操作的庫進行了盤點；本文橫向比較了 CamanJS、glfx.js、grafi.js、Jimp 以及 Filtr2 這幾個常用的圖片處理庫，并且給出了不同業(yè)務(wù)場景下的選用建議。( http://6me.us/ylUyM )

《Slack 是如何減少其客戶端內(nèi)存占用的》：本文是 Slack 在其桌面應用的開發(fā)過程中探索出的如何減少應用內(nèi)存開銷的經(jīng)驗介紹。Slack 最初為用戶的每個登錄團隊都啟動了相同的處理進程，而后根據(jù)調(diào)研發(fā)現(xiàn)僅有部分用戶會同時使用多個團隊；因此 Slack 從卸載后臺團隊的 DOM 樹、分拆 JavaScript 代碼進行優(yōu)雅降級、重構(gòu) JavaScript 代碼庫等多個方式來優(yōu)化桌面應用的內(nèi)存占用。( http://6me.us/z0XSh3 )

《流行網(wǎng)站上陳舊的 JavaScript 庫留存調(diào)研》：本文是 Tobias Laudinger 及其合作者對于客戶端 JavaScript 庫的使用現(xiàn)狀的調(diào)研報告；基于對于超過 133K 個網(wǎng)站的調(diào)查結(jié)果，它們發(fā)現(xiàn)大約 37% 的站點仍然使用了某些存在已知漏洞的 JavaScript 客戶端腳本，它們建議我們一定要慎重思量網(wǎng)站中引入的外部依賴，特別是對于那些已經(jīng)運行了很久的站點。( http://6me.us/csu2da )

《編寫 JavaScript 框架：客戶端路由》：本文是編寫 JavaScript 框架系列的最后一篇，主要著眼于討論如何實現(xiàn) JavaScript 客戶端路由及其與服務(wù)端路由的區(qū)別。( https://parg.co/bOL )

《面向“遠古” Web 開發(fā)者的現(xiàn)代 JavaScript 教程》：本文主要是面向那些從 PHP、JSP、Rails 占據(jù)統(tǒng)治地位時開始進行 Web 技術(shù)的開發(fā)者進行常見的現(xiàn)代 JavaScript 基礎(chǔ)概念的介紹。( https://parg.co/bsF )

《解密 JavaScript 異步編程》：JavaScript 中異步編程歷經(jīng)了多個大的迭代，從回調(diào)到 Promise 到生成器以及現(xiàn)在的 Async/Await；本文作者則是高屋建瓴地介紹了 JavaScript 異步編程的變遷歷史以及簡要的內(nèi)部實現(xiàn)原理。( https://parg.co/bsz )

《ES7 Async/Await 常見誤區(qū)》：ECMAScript 6 引入的 Promise 大大簡化了 JavaScript 中異步編程語法，而 ES7 引入的 Async 則使其更為優(yōu)雅；本文作者對于實踐中常見的對于 Async/Await 的語法誤用案例進行了解析。( https://parg.co/bsW )

《Composing Software》：本系列文章由 Eric Elliott 大神發(fā)布，著眼于介紹 JavaScript 函數(shù)式編程與大型軟件項目中的可組織性技術(shù)的介紹，包括了函數(shù)式編程導論、高階函數(shù)、Reduce、Functors & Categories 等幾個部分，還在持續(xù)更新中。( https://parg.co/bQY )

《12 個精妙的 JavaScript 代碼片》：本文作者分享了十二個非常不錯的 JavaScript代碼片，這些代碼片能夠幫你優(yōu)化現(xiàn)有代碼，讓代碼更加地賞心悅目。（ https://parg.co/bhH ）

《JavaScript 中構(gòu)建響應式引擎》：本系列文章介紹了如何在 JavaScript 中構(gòu)建高性能的響應式引擎，對于有興趣了解 MobX 底層原理的同學來說也是個不錯的教程，目前包含了對于可觀測對象的構(gòu)造解釋、屬性推導與依賴追蹤等內(nèi)容（ https://parg.co/bhR ）

《深入淺出構(gòu)建簡單的 Chess AI》：本文作者介紹了如何基于 JavaScript 構(gòu)建一個國際象棋的 AI，雖然不屬于前端開發(fā)范疇，不過還是蠻有意思的一篇文章。本文主要包括移動生成、棋盤可視化、位置評估、基于 Minimax 算法的搜索樹、Alpha-beta 修剪等等。( https://parg.co/bCw )

《使用 JavaScript 打造智能咖啡機》：這幾年智能家居與 IOT 的概念非?；馃幔髡咭舶l(fā)揮極客精神改造了一下辦公室的咖啡機。文中作者借助了 Tessel 與 Johnny-Five 智能硬件平臺，自定義了超文本咖啡機控制協(xié)議 HTCPCP，將咖啡機改造為了能夠提供類 REST 服務(wù)的終端，能夠遠程控制與實時監(jiān)控。

《使用 Chrome devtools 檢視代碼覆蓋》：近日 Chrome Canary 版本中新增了執(zhí)行代碼覆蓋率檢查的特性，其能夠反映你的 Web 應用中的每個 JavaScript/CSS 文件中的代碼覆蓋率以及所有的未被執(zhí)行的行。

《JavaScript 模塊演化史》：當初 Brendan Eich 草創(chuàng) JavaScript 之際估計想不到它會在之后的二十年內(nèi)起到如此重要的作用，本文則是深度回顧了缺乏模塊化帶來的困難以及這二十年間從命名空間、依賴注入、CommonJS、AMD、UMD 到 ES2015 Modules 等等十余種不同的模塊解決方案。( https://parg.co/bhn )

《使用 Inline Cache 優(yōu)化動態(tài) JavaScript 代碼》：本文是作者在開發(fā) JSIL 開源庫時使用的一系列優(yōu)化手段的總結(jié)，主要關(guān)于如何使用多態(tài)在線緩存（Polymorphic Inline Cache）來優(yōu)化代碼執(zhí)行速度，不過這種方式也有可能造成意外的變化。作者介紹了何謂 Inline Cache 及其優(yōu)化原理和帶來的性能提升評測等內(nèi)容。( https://parg.co/b4a )

《基于 JavaScript 構(gòu)建數(shù)據(jù)表達式分詞器》：本文是一篇挺有意思的文章，介紹如何利用 JavaScript 解構(gòu)常見數(shù)學表達式并且從中提取出相關(guān)實體。本文涉及到的內(nèi)容包括對于分詞器的簡單介紹、對于抽象語法樹 AST 的介紹以及最終如何使用代碼來實現(xiàn)分詞算法。( https://parg.co/bRO )

《TypeScript 在 Slack 的實踐分享》：維護大型的跨平臺的 JavaScript 代碼庫是一件非常具有挑戰(zhàn)性的工作，無論是從 Chrome 的 JavaScript 中傳遞對象給 Objective-C 或者單純的接受來自 Node.js 中的回調(diào)結(jié)果，你都需要保證不同的代碼對于通訊對象的期望之間的一致性。而本文即是在開發(fā)跨平臺多終端的應用中，Slack 使用 TypeScript 來約束類型，從而避免意外的類型不一致導致的崩潰的實踐經(jīng)驗分享。( https://parg.co/bRR )

《2017 里 JavaScript 帶給我的感動》：本文作者縱覽了在 2017 年中 JavaScript 生態(tài)圈可能迎來的一系列巨大變革。他首先對比了 JavaScript 與 Reason，淺述了二者的優(yōu)劣對比。然后介紹了 WebAssembly 以及另一個新興語言 Rust 未來可能在 JavaScript 生態(tài)圈中占據(jù)的一席之地。最后，作者還介紹了 Docker、Now.sh 以及 Github Pages 等一系列優(yōu)秀的輔助開發(fā)工具，并且暢想了去中心化浪潮下 Web 的未來發(fā)展。( https://parg.co/bRh )

《JavaScript 中處理 undefined 的 7 個技巧》：不同于 Python 或者 Java 中僅有 null 或 nil 來表示空值，JavaScript 為我們提供了 undefined 與 null。本文則是深度分析了 undefined 與 null 的區(qū)別，討論了實際工程開發(fā)中 undefined 的使用場景，譬如未初始化對象、不存在的對象屬性或者方法、越界訪問、無返回值的函數(shù)等；作者最后還給出了一些對于 undefined 的注意點，譬如提高內(nèi)聚性降低耦合性等。( https://rainsoft.io/7-tips-to... )

《2017 年 JavaScript 測試技術(shù)概述》：本文涵蓋了 2017 年中 JavaScript 領(lǐng)域流行的測試理念、名詞與概念、工具以及測試的方法論。本文介紹了基本的測試類型的劃分、常用測試工具的劃分、以及 Jest、Mocha、Nightwatch 這樣的常用測試工具的選項與實踐技巧。( https://parg.co/bf3 )

《Microsoft Edge 中的 JavaScript 性能、WebAssembly 以及 Shared Memory》：JavaScript 的性能表現(xiàn)是 Web 開發(fā)中永恒的話題，而 Microsoft Edge 團隊也在實時接收用戶反饋以提升 Chakra JavaScript 引擎的性能表現(xiàn)。本文首先介紹了 Chakra 中的新特性，包括了一系列提升 JavaScript 性能表現(xiàn)的技巧；然后還討論了 WebAssembly、Shared Memory 與 Atomics 等新特性在 Edge 中的具體實現(xiàn)。( https://parg.co/bfk )

《8 小時內(nèi)學習 Node.js》：Node.js 是基于 Google Chrome V8 引擎的 JavaScript 框架，其能夠用于開發(fā)類似于視頻直播、單頁應用等 IO 密集型的 Web 項目。而本文則是提供了完整的從零到一的 Node.js 學習路線圖，包含了基礎(chǔ)的環(huán)境構(gòu)建、Console 使用、核心模塊使用、基本的 Web 服務(wù)器搭建等等內(nèi)容。( https://parg.co/bNy )

《CSS-in-JavaScript：基于組件的樣式組織》：通過使用內(nèi)聯(lián)樣式，我們能夠利用 JavaScript 帶來的可編程性的便利來組織樣式代碼。它能夠為我們提供類似于 CSS 預處理器、命名空間等多方面的輔助。本文則是介紹了幾個常見的適用于 CSS-in-JS 技術(shù)的場景，譬如排版、空格等。( https://parg.co/bNe )

《從零開始基于 JavaScript 構(gòu)建簡單神經(jīng)網(wǎng)絡(luò)》：本文不是純粹的前端開發(fā)文章，對于聽說過人工智能與神經(jīng)網(wǎng)絡(luò)并且有興趣的開發(fā)者不妨一讀。而本文則是漸進地介紹神經(jīng)網(wǎng)絡(luò)與深度學習理論基礎(chǔ)、如何使用 JavaScript 實現(xiàn)簡單的數(shù)學公式、如何實現(xiàn)簡單的神經(jīng)網(wǎng)絡(luò)等內(nèi)容。( https://parg.co/bNa )

《在 Web 開發(fā)中謹慎使用 CSS in JavaScript》：CSS 是有缺陷的，不過很多項目在選擇使用 CSS-in-JavaScript 來組織樣式的時候，卻是對于 CSS 與 CSS-in-JS 很多的誤解。本文以 Styled-Component 為例，列舉出了常見的 9 個誤解，譬如使用 CSS-in-JS 才能解決命名空間沖突、保證樣式的可擴展性、帶來了性能提升與樣式文件的可組織性等等。( https://parg.co/bNR )

《d3.express：集成交互式編碼環(huán)境》：本文介紹了尚在開發(fā)中的 d3.express，一個類似于 Python Juypter Notebook 的交互式編碼環(huán)境。d3.express 允許開發(fā)者使用大量 d3 內(nèi)置的功能函數(shù)，譬如加載遠程的 CSV 文件；并且允許開發(fā)者交互地實時預覽 SVG、Canvas 等繪制結(jié)果，有人認為 d3.express 會是一種基于 JavaScript 的更好的數(shù)據(jù)可視化解決方案。( https://parg.co/bNi )

《V8 不再使用基準測試引擎 Octane》：JavaScript基準測試引擎是一段不斷進化的歷史。隨著網(wǎng)頁從原始靜態(tài)頁面到現(xiàn)在富客戶端應用，都需要基準測試引擎能夠與時俱進。SunSpider是其中比較早的基準測試引擎，它為快速優(yōu)化JavaScript提供了基礎(chǔ)。但是，隨著虛擬機開發(fā)者意識到微基準測試的局限性，基準測試引擎隨之更新，針對SunSpider的短板進行優(yōu)化，同時瀏覽器社區(qū)也將SunSpider從推薦基準測試引擎中剔除。Octane基準測試套件最早發(fā)布于2012年，旨在減輕早期微基準測試引擎的一些缺陷。它源于V8的早期簡單測試用例，最終成為通用網(wǎng)頁性能的基準測試。Octane包含17個不同的測試集，以覆蓋各種不同的工作場景。Octane的內(nèi)容代表它創(chuàng)建時度量JavaScript性能的主流方式。( https://parg.co/bN9 )

《JavaScript 代碼風格要素》：本文是 Eric Elliott 編寫的 JavaScript 代碼風格要素指南與建議，其借鑒了 1920 年的面向英文語言的 “The Elements of Style” 一文。本文介紹的關(guān)鍵要素包括：使用函數(shù)最為組合的原子單元并且保證函數(shù)的單一職責性、移除不需要的代碼、使用更直觀具有自解釋性的變量命名、根據(jù)特性進行代碼劃分等等。( https://parg.co/bMn )

《簡短的 WebAssembly 卡通指南》：現(xiàn)在有很多關(guān)于 WebAssembly 與 JavaScript 生態(tài)圈的討論，人們往往關(guān)注于 WebAssembly 帶來的巨大的性能提升以及它會如何顛覆現(xiàn)代 Web 開發(fā)。不過很多的介紹中并沒有詳細闡述隱藏在速度提升之后的具體細節(jié)，本文則是從整個 JavaScript 的演化史來介紹 WebAssembly 巨大性能提升的原因。( https://parg.co/bVa )

《基于 JavaScript 的異步依賴加載》：在 Web 應用開發(fā)中我們經(jīng)常會將一些首屏不需要的腳本或者樣式文件以異步方式加載；而本文則是介紹了多種異步加載網(wǎng)頁中依賴資源的方式，作者還將常用的方法整合為了 fetchInject 這個開源庫，方便使用者快速進行腳本地異步加載。( https://parg.co/bkG )

《基于 Electron 構(gòu)建 Github Desktop Beta》：Electron 是著名的利用 HTML、CSS、JavaScript 等 Web 技術(shù)構(gòu)建桌面應用的輔助工具；本文則是介紹了四個僅有原生應用開發(fā)背景的工程師如何利用 Electron 逐步構(gòu)建 Github Desktop Beta 的經(jīng)驗。( https://parg.co/bkK )

《編寫現(xiàn)代 JavaScript 代碼》：JavaScript 被僅用來更新頁面元素狀態(tài)的日子一去不返，我們也需要編寫更加現(xiàn)代的 JavaScript 代碼。本文則是介紹了如何利用 Linter 來格式化代碼、如何使用 ES2015+ 特性、如何使用函數(shù)式編程等建議來提升 JavaScript 的代碼質(zhì)量。( https://dev.to/scastiel/writi... )

《重構(gòu) Airbnb 前端架構(gòu)》：本文是近日 Airbnb 開發(fā)團隊在思索重構(gòu)代碼庫中 JavaScript 部分的經(jīng)驗總結(jié)，主要著眼于產(chǎn)品驅(qū)動開發(fā)以及技術(shù)沉淀、從傳統(tǒng)的 Rails 架構(gòu)中積攢的經(jīng)驗以及新的技術(shù)棧的某些特性等方面。本文首先介紹了從 Rails 遷移過程中的一些經(jīng)驗，譬如將原本完全的服務(wù)端渲染界面所需要的數(shù)據(jù)切分為了 API 與 Non-API 兩大類，并且使用 Hypernova 來進行 React 服務(wù)端渲染。然后介紹了如何在應用前端通過引入懶加載與異步加載等方式提升前端性能與用戶體驗。( https://parg.co/bkA )

《最終，JavaScript 成為了一流語言》：2003年，保羅·格雷厄姆（Paul Graham）在文中提到，他的公司決定使用Lisp（一門編程語言），并且指出自己公司相比競爭對手的優(yōu)勢在于Lisp。如果Lisp像法語，那么現(xiàn)如今的JavaScript就像英語一般。盡管二者的語法不一致，但英語是世界上最廣泛使用的語言，JavaScript是最廣泛應用的計算語言。然而，JavaScript仍未得到與其他語言同等的尊重。盡管它的使用率在創(chuàng)業(yè)公司和大型公司中持續(xù)增長，但若非必要，人們不會認為它是一門有用的語言。大公司的高級工程師聲稱它不是一門“真正的”編程語言，許多人并不知道除了操作像素外它還能被用于何處。。( https://parg.co/bkb )

《理解 WebAssembly 的文件格式》：為了保證 WebAssembly 能夠被人們閱讀與理解，需要提供對于 wasm 二進制格式的文本表示。該特性著眼于能夠在文本編輯器、瀏覽器開發(fā)者工具等開發(fā)工具中瀏覽 WebAssembly 文件，而本文則介紹了這種文件格式的規(guī)范與工作原理，以及底層的字節(jié)碼與上層的 JavaScript 對象之間的關(guān)聯(lián)關(guān)系。( https://parg.co/bk6 )

《JavaScript 單元測試框架大亂斗：Jasmine、Mocha、AVA、Tape 以及 Jest》：在開始新的前端項目時，我們常常會考慮應該使用哪一個單元測試框架，或者考慮應該為哪些代碼添加單元測試。而本文則對于常用的 Web 開發(fā)中的單元測試框架 Jasmie、Mocha、AVA、Tape 以及 Jest 進行了橫向?qū)Ρ?，并且基于自己的?jīng)驗給出了不同應用場景與需求下不同的單元測試框架選項建議。( https://parg.co/bJ5 )

《Web 前端開發(fā)的未來》：本文作者從自己的實踐出發(fā)暢想了未來 Web 前端開發(fā)的可能方向；主要包括 JavaScript 新特性的增強以及對于狀態(tài)管理的深入、從簡單界面逐漸過渡到完整系統(tǒng)、原生與 Web 之間的邊界逐步消失、CSS 會逐步模塊化并且預處理器會逐步退出歷史舞臺、性能仍然是關(guān)鍵瓶頸以及 URL 會變得愈發(fā)重要等多個方面。( https://parg.co/bJr )

《面向 Web 設(shè)計師與開發(fā)者的免費電子書合集》：本文介紹了十數(shù)本優(yōu)秀的面向 Web 設(shè)計師與開發(fā)者的免費的電子書，涵蓋了 CSS&HTML 基礎(chǔ)、現(xiàn)代 JavaScript 開發(fā)、Git、PHP 等多個領(lǐng)域。( https://parg.co/bis )

《hyperapp》：hyperapp 是僅 1KB 大小的用于構(gòu)建前端應用的 JavaScript 庫，它基于 Elm 架構(gòu)，支持聲明式界面編程與函數(shù)式編程，允許使用 JSX 聲明界面并且靈活地分割與合并自定義的標簽。hyperapp 實現(xiàn)的簡潔明了，是不錯的可以閱讀源碼的輕量級框架。( https://github.com/hyperapp/h... )

《這 WebAssembly，是 Mozilla 贏了》：Mozilla 提出1 asm.js 與 Google Chrome 提出的 PNaCI 是都是致力于在瀏覽器中運行原生代碼的技術(shù)方案。不過 PNaCI 卻存在著自絕于 JavaScript 以及 HTML 等問題，并且其他的瀏覽器廠商很難去支持 PNaCI 標準。而 asm.js 則以輕量級的對于標準 Web 平臺擴展的方式實現(xiàn)了這一目標，也就導致了最終 WebAssembly 決定靠近 asm.js 而不是 PNaCI。( http://robert.ocallahan.org/2... )

《JavaScript 模塊現(xiàn)狀》：近日隨著各大瀏覽器紛紛開始支持 ESM（ECMAScript Moduls），Node.js 中也計劃引入 *.mjs 作為 ESM 的文件擴展名，關(guān)于 JavaScript 模塊化的未來發(fā)展也在社區(qū)引發(fā)了熱切討論。本文則是首先介紹了 ESM 在瀏覽器、Webpack 等構(gòu)件工具以及 Node.js 中未來的實現(xiàn)，然后討論了個人對于 ESM 未來發(fā)展以及對于程序開發(fā)本身的潛在影響。( https://parg.co/bi0 )

《WebAssembly 初體驗：重構(gòu)簡單游戲引擎》：WebAssembly 為我們提供了構(gòu)建高性能的前端應用的途徑，而本文則從零開始介紹如何使用 C 來覆寫簡單的 JavaScript 游戲引擎并且將其編譯為 WebAssembly。本文依次介紹了如何搭建基礎(chǔ)的 Emscription 工具鏈、使用 JavaScript 引入 wasm 模塊、覆寫并且優(yōu)化某個小型游戲引擎、兩個引擎的性能評測等等部分。( http://blog.openbloc.fr/webas... )

《CSS 局部作用域變量詳解》：CSS 自定義屬性或者所謂的 CSS 變量，為我們帶來了真正的、不同于 SASS 等預處理框架中使用的類占位符的動態(tài)變量。本文介紹了 CSS 變量的基本定義語法與使用，以及如何使用 JavaScript 來動態(tài)修改 CSS 變量值從而動態(tài)地進行界面重渲染，最后闡述了目前瀏覽器對于 CSS 變量的支持情況以及可以使用的兼容方式。( https://parg.co/bLS )

《Flow 與 TypeScript》：本文主要對比了 Flow 與 TypeScript 這兩個常用的 JavaScript 靜態(tài)類型檢測工具，首先介紹了在簡單項目中如何使用 TypeScript 與 Flow。然后對比了二者在類型覆蓋率上的漸進對比，會發(fā)現(xiàn)使用 Flow 之后因為其較為嚴格的類型要求會相對較快地實現(xiàn)高覆蓋，而 TypeScript 則相對較為松弛。( http://thejameskyle.com/adopt... )

《JavaScript 中類的私有域定義》：目前對于類中的私有域定義已經(jīng)達到了 Stage 2，本文即是詳細介紹 #private 語法的使用以及設(shè)計理念。顧名思義，我們可以使用 #privateFieldName 方式來定義類中的私有域，該私有域僅允許該類的方法訪問（包括靜態(tài)方法）。本文還介紹了使用這種 HashTag 方式而不是其他語言中常見的 private 關(guān)鍵字來定義的考量。( http://thejameskyle.com/javas... )

《CSS 的現(xiàn)狀》：毫無疑問我們正在見證著 JavaScript 社區(qū)與生態(tài)的極速變化，而與此同時可能很多人沒有關(guān)注到 CSS 社區(qū)的進展，本文作者則是對于 CSS 的現(xiàn)狀進行了綜述并且提出了個人的觀點。本文作者主要提出了五個論點：我們可以使用 CSS Module 來替代原有的 BEM 等命名方案、使用 Flexbox 來替代 float、使用 CSS Grid 來替代第三方網(wǎng)格庫、使用 CSS 內(nèi)置的變量、計算函數(shù)等特性來替代 SASS 等預處理庫，乃至于最終我們完全可以使用 CSS-in-JS 來替代 CSS。本文具有極強的主觀色彩，請批判性閱讀。( https://parg.co/bLZ )

《billboard.js》：基于 D3 v4+ 的輕量級可重用的 JavaScript 圖表庫，支持 IE 9 以上瀏覽器。billboard.js 為我們提供了常見的柱狀圖、時序圖、餅圖等等多種圖表類型。( https://github.com/naver/bill... )

《如何用好 JavaScript console》：JavaScript 中最主要的的調(diào)試工具之一即是 console.log，而 console 對象還包含著其他幾個常用的調(diào)試方法。本文則是介紹了 console 對象，以及如何使用它進行簡單的時間消耗評測、優(yōu)化數(shù)組或者對象輸出格式、通過 CSS 優(yōu)化輸入等等。( https://parg.co/b9o )

《現(xiàn)代 Web 開發(fā)魔法書》：本書是對現(xiàn)代 JavaScript Web 開發(fā)中涉及知識的分類與介紹，來源于作者日常工作中發(fā)送給全棧 Web 團隊新人的資源；目前已經(jīng)納入了超過兩千的涵蓋了項目、工具、插件、服務(wù)、文章、數(shù)據(jù)、站點等多方面的鏈接。本書包含了 Web 平臺概述、HTML5，CSS，JS 特性介紹、常用的 GUI 框架與架構(gòu)介紹、應用開發(fā)流程中使用的工具介紹等等欄目。( https://parg.co/bv9 )

《基于 JavaScript 的機器學習》：人工智能與機器學習的浪潮洶涌而來，JavaScript 也并非旁觀者；可能有很多人認為 JavaScript 過于緩慢、缺乏大量的科學計算庫、僅適用于 Web 開發(fā)，而本文以及系列文章則深入淺出地介紹了如何利用 JavaScript 進行常見的深度學習操作。本文即以簡單的回歸擬合為例，從最基礎(chǔ)的庫安裝、數(shù)據(jù)導入、數(shù)據(jù)預處理到模型訓練、模型預測 介紹了如何使用 JavaScript 進行簡單的機器學習任務(wù)。( https://parg.co/b9K )

《JavaScript 內(nèi)存管理速成》：本系列文章以漫畫的方式生動有趣地介紹了 JavaScript 中內(nèi)存管理的相關(guān)知識，首先介紹了 JavaScript 與 C 這兩個風格迥異的語言是如何進行內(nèi)存管理的，然后討論了 ArrayBuffers 與 ShardArrayBuffurs 存在的意義以及可能引起的臨界情況，最后討論了在未來 WebAssembly 開發(fā)中應該如何使用 Atomics 來處理并發(fā)情況下的臨界情況。( https://parg.co/b9p )

Rust、WebAssembly 與 Webpack：WebAssembly 是新的運行于 Web 平臺的二進制格式，我們能夠?qū)?C、C++、Rust 這些語言編譯到 .wasm 文件格式中然后在瀏覽器環(huán)境下運行他們；通常這些編譯后的代碼在包體體積與運行速度上都會比 JavaScript 有明顯提升。而本文則著眼于介紹如何在瀏覽器中執(zhí)行底層的 Rust 代碼，也可以參考這篇文章( https://parg.co/by4 )來了解更多的關(guān)于 WebAssembly 快速實踐的知識。( https://parg.co/byh )

JavaScript 在嵌入式設(shè)備與物聯(lián)網(wǎng)中的應用現(xiàn)狀：隨著近年來 Web 的發(fā)展與 JavaScript 的崛起，JavaScript 被應用到了許多原本不曾想象到的場景中，從服務(wù)端、工作站、數(shù)據(jù)庫、桌面環(huán)境到物聯(lián)網(wǎng)設(shè)備中，都可以見到 JavaScript 的身影。而本文則概括了 JavaScript 在不同的嵌入式微型設(shè)備中的應用現(xiàn)狀，并且選擇了具有代表性的設(shè)備介紹了具體的使用場景與實踐方法。( https://parg.co/byr )

基于 JavaScript 的機器學習：深入監(jiān)督學習算法：本文是基于 JavaScript 的機器學習系列的第二部分，主要介紹監(jiān)督學習算法 kNN。kNN 算法通常被用于分類或者回歸問題，本文首先介紹了 kNN 算法的基礎(chǔ)原理，然后介紹了如何利用 ml-knn、csvyojson、prompt 等庫對 Iris 數(shù)據(jù)集中的數(shù)據(jù)進行訓練與預測。( https://parg.co/byR )

JavaScript 中存在純函數(shù)嗎？：隨著函數(shù)式編程在前端界面開發(fā)中的流行，純函數(shù)的概念相信很多人都很熟悉，不過文本作者認為 JavaScript 中是否存在真正意義上的純函數(shù)還值得商榷。本文首先介紹了純函數(shù)的基本定義，然后給出了我們熟知的 JavaScript 中常見的純函數(shù)定義范式。不過作者認為函數(shù)是 JavaScript 中的一等公民，函數(shù)變量或者某個 Object 的屬性方法都有可能被重新賦值，因此 JavaScript 中無法構(gòu)建真正嚴格的純函數(shù)。( https://parg.co/by6 )

基于 Headless Chrome 的自動化測試：本文介紹了如何在 Headless Chrome 環(huán)境中使用 Karma 作為測試驅(qū)動運行基于 Mocha 與 Chai 的自動化測試用例。Headless Chrome 允許我們在無界面環(huán)境下，使用特性完備的 Chrome 來執(zhí)行 JavaScript 腳本并且渲染網(wǎng)頁。本文首先介紹了使用 karma-chrome-launcher 來搭建本地啟動 Chrome 環(huán)境，然后介紹了使用 Mocha 與 Chai 來編寫基礎(chǔ)測試用例，最后還討論了如何自定義 Headless Chrome 啟動器并且集成到 Travis CI 環(huán)境下。( https://parg.co/beo )

Webpack 中的作用域提升簡介：近日發(fā)布的 Webpack 3 中引入了所謂的 Scope Hoisting 新特性，從社區(qū)的反饋來看該特性已經(jīng)在很多項目中成功地幫助開發(fā)者減少包體大小，提高首屏加載效率；本文則是簡要地介紹了 Webpack 3 中作用域提升的基礎(chǔ)原理。本文假設(shè)你對于 JavaScript 中閉包與模塊語法有所了解，首先介紹了在老版本 Webpack 中采用的作用域分割機制及其存在的額外的性能損耗，然后對比呈現(xiàn)了在引入作用域提升機制之后，打包而成的文件的形式，與其帶來的性能提升原理。( https://parg.co/beE )

為什么我們選擇 TypeScript：本文是 Reddit 工程師 Niranjan Ramadas 記述在前端技術(shù)選型時選用 TypeScript 的考慮過程。作者認為任何語言都有其優(yōu)缺點，不過合適的語言應該具備如下特點：強類型、完備的工具鏈支持、能夠用于生產(chǎn)環(huán)境等。作者還特地比較了 TypeScript 與 Flow，TypeScript 是能夠編譯到 JavaScript 的超集語言，而 Flow 則是提供了一系列額外的注解來實現(xiàn)類型系統(tǒng)。Flow 能夠保證較好的類型覆蓋，但是其對于多態(tài)性的支持并不是很好，并且 TypeScript 的社區(qū)也相對活躍。( https://parg.co/beb )

TC39，ECMAScript 與 JavaScript 的未來：本文是 Nicolás Bevacqua 在騰訊前端大會上發(fā)表的同名演講的總結(jié)，介紹了 TC39 與 ECMAScript 的含義，概述了 ECMAScript 中提案的步驟以及部分代表性提案，同時還暢談了JavaScript 的未來發(fā)展方向。作者介紹了 Stage 0、Stage 1、Stage 2、Stage 3 這四個提案處理進度的具體含義與要求，并且列舉了 Array#includes、Named Captures 等具體的例子來闡述 JavaScript 不斷衍化的語法特性；作者還介紹了未來社區(qū)會持續(xù)關(guān)注的代碼轉(zhuǎn)譯與適配、代碼質(zhì)量保證、代碼打包與發(fā)布等多個領(lǐng)域。( https://parg.co/bXD )

JavaScript 中的函數(shù)式編程就是反模式（*本文僅代表原作者個人意見）：作者在本文中對比討論了 JavaScript 與 Clojure，并且介紹了 ClojureScript 的基礎(chǔ)用法與優(yōu)勢所在。作者首先討論了他認為的函數(shù)式腳本語言應該包含的特性，包括充分的 API、內(nèi)建的不可變數(shù)據(jù)結(jié)構(gòu)等；然后闡述了 lodash、fp、Rambda 這樣的單個庫存在的不足，譬如 ImmutableJS 雖然能較好地解決部分問題，但是卻會割裂使用者的開發(fā)體驗。最后筆者介紹了 ClojureScripe 的特性與優(yōu)點，包括能夠在編輯器中單行運行、內(nèi)建的大量轉(zhuǎn)化函數(shù)、較好地性能與代碼可讀性保證等等。( https://parg.co/beH )

JavaScript 項目開發(fā)樣式指南：開啟新的項目就好像在綠地上肆意撒歡，此時的開發(fā)者擁有極大的自由；不過如果缺乏良好的基石，未來的項目維護可能會成為你的夢魘。本文即搜集了來自 Hive 研發(fā)團隊的 JavaScript 項目開發(fā)指南，涵蓋了 Git、文檔規(guī)范、環(huán)境變量控制、依賴管理、測試、文件結(jié)構(gòu)與命名、代碼樣式、日志、API 設(shè)計等多個方面；更多 JavaScript 工程實踐資料參考 https://parg.co/bIO 。( https://github.com/wearehive/... )

前端 JavaScript 面試問題總結(jié)：本文作者發(fā)現(xiàn)目前并沒有太多令人滿意的前端 JavaScript 面試問題列表，因此他基于自己的面試經(jīng)歷與實踐總結(jié)出了本文。本文主要包含以下部分，首先是基礎(chǔ)概念的認知，譬如對于閉包、EventLoop、REST 等概念的介紹；然后是對于編碼能力的考量，譬如對于常見的數(shù)據(jù)結(jié)構(gòu)與算法的實現(xiàn)、代碼調(diào)試能力與錯誤定位的評測等等；最后是對于整體系統(tǒng)設(shè)計能力的考量，譬如如何設(shè)計全棧的 Twitter 實現(xiàn)架構(gòu)等等。( https://parg.co/bIL )

JavaScript 開發(fā)中常用的十大數(shù)據(jù)結(jié)構(gòu)詳解：數(shù)據(jù)結(jié)構(gòu)是軟件開發(fā)的重要組成部分之一，也是求職面試中常見的主題之一；本文將回顧介紹 JavaScript 中常用的十大數(shù)據(jù)結(jié)構(gòu)，并且給出詳細的教程與在線實踐鏈接。本文涉及到的數(shù)據(jù)結(jié)構(gòu)包括鏈表、棧、隊列、集合、映射、哈希表、二叉搜索樹、Trie 樹、二叉堆、圖等；更多數(shù)據(jù)結(jié)構(gòu)與算法相關(guān)資料參考 https://parg.co/bIt 。( https://parg.co/bIC )

代碼風格約定與標準：本倉庫提供了一系列的各個語言的常用代碼風格約定與標準，與 JavaScript 相關(guān)的包含了來自 Google、Airbnb 等多個公司或者社區(qū)的樣式規(guī)范，還有包括 HTML、CSS、SCSS 等一系列 Web 相關(guān)的規(guī)范。

ES6 中的 JavaScript 工廠函數(shù)實現(xiàn)：本文歸屬于 Eric Elliott 發(fā)布的 Composing Software 系列，介紹在 JavaScript ES6 語法背景下如何實現(xiàn)工廠函數(shù)。所謂工廠函數(shù)即是非類或者構(gòu)造函數(shù)的，能干會某個新創(chuàng)建對象的函數(shù)；工廠函數(shù)能夠簡化我們創(chuàng)建新對象的過程，本文即是詳細地介紹了如何實現(xiàn)工廠函數(shù)，也是一篇不錯的 ES6 函數(shù)語法講解；更多 JavaScript 相關(guān)資料參考 https://parg.co/bMI 。

基于 JavaScript 的 Web 應用的端到端測試工具對比：本文回顧了常見的基于 JavaScript 的，用于對 Web 應用進行端到端測試的工具，并且對它們進行了簡單對比。本文首先探討了項目中應用端到端測試的意義，然后列舉了當前可用的基于 JavaScript 的界面自動化測試框架，然后比較了不同的端到端測試框架的流行程度與基本的代碼片風格；更多 Web 測試相關(guān)資料參考 https://parg.co/bWd 。

JavaScript Binary AST 提案：隨著 Web 應用體積的不斷增加，頁面啟動時間逐漸成為了應用性能的主要瓶頸之一；我們可以通過多種方式來緩存代碼，但是對于大型代碼庫的解析卻難以直觀解決。譬如在現(xiàn)代的筆記本上，Chrome 在加載 Facebook.com 的時候需要花費 10% 到 15% 的時間來解析 JavaScript 代碼。本文介紹了由多位工程師提出的旨在提升 JavaScript 解析速度的 Binary AST 方案，本文介紹了當前解析中的瓶頸所在，并且給出了相應的解決建議。

自定義基于 JavaScript 的 16 位虛擬機：本文介紹了如何利用 JavaScript 自定義 16 位虛擬機，主要包括如何設(shè)計某個簡單的匯編語言、如何構(gòu)建某個編譯器能夠?qū)?*.asm 文件編譯為可執(zhí)行格式、如何構(gòu)建某個能夠模擬內(nèi)存、CPU 以及部分 I/O 操作的虛擬機。文章內(nèi)容依次介紹了虛擬硬件的基礎(chǔ)、限制、匯編語言、編譯器、調(diào)試器、編碼與解碼等內(nèi)容；更多 JavaScript 相關(guān)資料參考 https://parg.co/bMI 。

JavaScript 設(shè)計模式學習：本書是 Addy Osmani 著作的開源書籍，主要介紹面向 JavaScript 語言的經(jīng)典與現(xiàn)代的常用設(shè)計模式。所謂設(shè)計模式即是軟件設(shè)計中常見問題的可復用解決方案，對于任何一門編程語言都是非常值得探索的話題。本文首先概述了設(shè)計模式的基礎(chǔ)理論，然后介紹了 JavaScript 中常見的十余種類與對象的設(shè)計模式，接下來介紹了 JavaScript 界面設(shè)計相關(guān)的 MV* 設(shè)計模式，然后還介紹了 JavaScript 模塊化設(shè)計以及 jQuery 中的設(shè)計模式等內(nèi)容；更多 JavaScript 設(shè)計模式相關(guān)參考 https://parg.co/bIO 。

V8 新的 Turbofan JIT 編譯器帶來的性能特性概述：V8 JavaScript 引擎最早是 Google 為 Chrome 瀏覽器開發(fā)的 JavaScript 虛擬機，其設(shè)計的初衷就是為了讓 JavaScript 能夠高速運行；而這種性能優(yōu)化的保障就是所謂 JIT 編譯器。本文著眼于介紹 V8 新的 Turbofan JIT 編譯器提供的新的性能特性能夠為應用帶來的優(yōu)化；本文依次介紹了使用 delete 操作符與設(shè)置為 undefined 這兩種不同的去除對象屬性的方式在新的編譯器下的表現(xiàn)差異、對于 Arguments 參數(shù)不同操作的對比、柯里函數(shù)與 bind 操作符的優(yōu)化，以及對象遍歷、對象創(chuàng)建和對于新舊引擎中對于常見的 Winston 等日志框架的性能對比等內(nèi)容。更多 JavaScript 引擎相關(guān)知識參考 https://parg.co/bgp

JavaScript 之路：本書希望為任何對 JavaScript 有興趣的開發(fā)者提供 JavaScript 的多領(lǐng)域知識，其兼具了入門簡單、對初學者友好、使用 ES2015 語法以及規(guī)范的樣式指南等特點。本書主要包含以下章節(jié)：JavaScript 語法基礎(chǔ)、利用 DOM 接口創(chuàng)建交互性的網(wǎng)頁、構(gòu)建完整的 Web 應用等內(nèi)容；更多 JavaScript 相關(guān)資料參考 https://parg.co/bMI 。

2017 Web 開發(fā)趨勢：Web 開發(fā)在 2016 年里得到了長足的發(fā)展與進步，而本文則高屋建瓴地分析了 2017 年中 Web 開發(fā)可能面臨的機遇與挑戰(zhàn)。作者首先討論了人工智能的前景以及 Web 與之相結(jié)合的案例，然后討論了物聯(lián)網(wǎng)行業(yè)中 Web 相關(guān)的開發(fā)案例；接下來作者分析了崛起的 JavaScript 以及目前流行的項目，然后又從靜態(tài)網(wǎng)站生成器、虛擬現(xiàn)實、GIFs、Bots 等角度討論其他的發(fā)展方向。

JavaScript 中有趣而又無語的例子：JavaScript 是一門有趣的語言，它有著簡單的語法、龐大的生態(tài)系統(tǒng)與社區(qū)，不過 JavaScript 中也有著很多令人無語的地方。本文即是對 JavaScript 中一些有趣的、出乎意料的用法收集，對于初學者是個不錯的深入教程，而對于資深開發(fā)者也可以拿來作為面試題目。本文中包含的例子譬如 [] == ![]、NaN 的用法注意、try-finally 等等；更多 JavaScript 相關(guān)資料參考 https://parg.co/bMI 。

基于 Proxy 的 PopUnder 庫反混淆：本視頻通過對某個商用的 Chrome 59 中 PopUnder 庫，的執(zhí)行過程解析，來介紹如何利用 ES6 的 Proxy 進行，簡單的 JavaScript 混淆代碼逆向破解。視頻還是挺有意思的，作者首先分析了經(jīng)過混淆的源代碼，發(fā)現(xiàn)無法下手；然后利用 Proxy 監(jiān)聽常見的 Windows 中 createElement 等函數(shù)的調(diào)用來了解該庫的執(zhí)行流程，最后再根據(jù) API 的調(diào)用順序復現(xiàn)出該庫。更多 JavaScript 設(shè)計模式相關(guān)參考 https://parg.co/bIO 。

三周時間打造全棧 JavaScript Web 應用：本文記錄了某個編程初學者如何用三周時間，循序漸進地從零構(gòu)建出，基于 JavaScript 的全棧電子商務(wù)應用。本文從最初的產(chǎn)品設(shè)計與原型圖構(gòu)建開始，然后介紹了如何選擇合適的數(shù)據(jù)結(jié)構(gòu)與數(shù)據(jù)庫。接下來介紹了如何創(chuàng)建 Github 倉庫并且使用敏捷開發(fā)流程，最后介紹了如何利用 Express 與 Firebase 搭建服務(wù)端、使用 React 以及 Victory.js 構(gòu)建前端應用等內(nèi)容；更多 JavaScript 相關(guān)學習參考現(xiàn)代 JavaScript 開發(fā)：語法基礎(chǔ)與實踐技巧。

基于 CSS 與 JavaScript 的幀動畫教程

《開源在線代碼演示網(wǎng)站 Dwitter 發(fā)布 》：Dwitter 是類似于 CodePen 這樣的，不過專注于 JavaScript 代碼片演示的網(wǎng)站，已經(jīng)有很多開發(fā)者在上面貢獻了奇妙的基于 JavaScript 的動畫或者小程序。

《開源在線代碼演示網(wǎng)站 Dwitter 發(fā)布 》：Dwitter 是類似于 CodePen 這樣的，不過專注于 JavaScript 代碼片演示的網(wǎng)站，已經(jīng)有很多開發(fā)者在上面貢獻了奇妙的基于 JavaScript 的動畫或者小程序。

《notie》：這是一個輕量級的、零依賴的面向 JavaScript 的通知、輸入以及選擇套件庫。它允許彈出警示信息、確認輸入框、允許用戶輸入信息、允許用戶進行選擇以及進行日期選擇等。( https://github.com/jaredreich... )

《在瀏覽器中實現(xiàn)自動駕駛汽車》：人工智能與深度學習的浪潮滾滾而來，也給我們帶來了很多有趣的應用。該項目利用 JavaScript 創(chuàng)建了一個完整的自我學習的代理，能夠在一個 2D 環(huán)境下控制某個車輛自動規(guī)避各種障礙 。用戶還可以通過鼠標繪制出新的障礙，而小車可以通過強化學習不斷進行自我更新，值得一試。( http://suo.im/4egERz )

《UnCSS》：UnCSS 能夠幫助你從樣式表中移除 HTML 中未被用到的樣式，它支持多文件以及 JavaScript 樣式定義，并且提供了接口、命令行、構(gòu)建插件、POSTCSS 插件等多種使用方式。( https://github.com/giakki/uncss )

《wasm-loader》：wasm-loader 是能夠用于 Webpack 的 WASM 二進制模塊導入工具，其能夠允許你在 JavaScript 代碼中導入 wasm 格式文件并且將二進制文件打包成為 JS Bundle 的一部分 。( https://github.com/ballercat/... -loader )

《marky》：marky 是基于 performance.mark/measure 封裝的高性能 JavaScript 計時器，其相較于console.time()以及console.timeEnd()具有更好地性能表現(xiàn)，相較于簡單的Date.now()具有更好地準確度。( https://github.com/nolanlawso... )

《Planck.js》：Planck.js 是基于 JavaScript 的 2D 物理引擎，能夠用于創(chuàng)建跨平臺的 HTML 游戲。( http://piqnt.com/planck.js/ )

《Tippy.js》：Tippy.js 是基于純粹的 JavaScript 的輕量級無添加的 ToolTip 庫。( https://atomiks.github.io/tip...

《Fathom》：Fathom 是 Firefox 開源的用于提取網(wǎng)頁中有意義內(nèi)容的 JavaScript 框架，其能夠有效識別頁面中的前進/后退按鈕、地址表單以及主文本內(nèi)容等等。( https://github.com/mozilla/fa... )

《k6》：k6 是基于 Go 與 JavaScript 開發(fā)的現(xiàn)代壓測工具，它提供了非常清晰簡單的 JavaScript 接口；同時它基于 Go 提供了分布式的部署方案，支持云端部署與 REST 接口控制。( https://github.com/loadimpact/k6 )

《Mavo》：Mavo 是純粹的基于 HTML 標記的用來創(chuàng)建富客戶端 Web 應用的框架，它允許開發(fā)者在沒有服務(wù)端或者 JavaScript 腳本的情況下快速創(chuàng)建動態(tài)應用。( https://parg.co/b8n )

《Workbox》：Workbox 是來自 Google Chrome 團隊的快速將現(xiàn)有應用轉(zhuǎn)化為 Progressive Web Apps 的 JavaScript 庫；Workbox 允許我們通過 Webpack 插件、Gulp 插件以及 npm 腳本的方式快速地為當前應用的資源創(chuàng)建對應加載 ServiceWorker。( https://workboxjs.org/ )

《Birdview.js》：Birdview.js 是個非常有趣的 JavaScript 插件，它能將整個頁面以鳥瞰圖的方式呈現(xiàn)給用戶，并且允許用戶直接進入選中的點。( http://achrafkassioui.com/bir... )

decaffeinate：CoffeeScript 在很長一段時間內(nèi)幫我們解決了傳統(tǒng) JavaScript 中存在的痛點，不過隨著 ES6&ES7 的逐步流行，我們還是要從 CoffeeScript 中回歸到 JavaScript；decaffeinate 正是能夠方便地將 CoffeeScript 代碼轉(zhuǎn)化為現(xiàn)代的 JavaScript 代碼。( https://github.com/decaffeina... )

golden-layout：golden-layout 是非常強大的基于 JavaScript 的 Web 布局工具，它支持窗口的拖拽、縮放以及原生式的彈窗，同時 golden-layout 還提供了豐富的接口以方便動態(tài)增刪元素、修改布局或者自定義主題。golden-layout 官網(wǎng)還提供了與 RequireJS、React、Angular 等多種其他流行框架協(xié)同使用的示例。( http://golden-layout.com/ )

icaro：icaro 是輕量、高效地 JavaScript 對象觀察者實現(xiàn)，能夠自動監(jiān)測 JavaScript 中對象的變化并且進行相應地譬如 DOM 更新等操作。icaro 使用了大量的 ES6 的特性，譬如 Proxies、WeakMaps、Maps 以及 Symbols，是非常不錯的可以用來學習利用最新的語言特性實現(xiàn) JavaScript 響應式框架的開源庫。( https://github.com/GianlucaGu... )

Bundle Buddy：Bundle Buddy 能夠通過分析編譯生成的 SourceMap 來尋找 JavaScript 代碼塊之間的源代碼冗余情況。該工具能夠幫助開發(fā)者尋找合適的代碼分割點以降低最終發(fā)布應用的不穩(wěn)定性，同時還能提升頁面加載性能。

gpu.js：在上周的前端每周清單中我們介紹過 GPGPU（General Purpose Computing on GPUs）的概念與基于 WebGL 的實現(xiàn)方式，而 gpu.js 就是提供了瀏覽器中快速實現(xiàn) GPGPU 的單文件 JavaScript 庫。gpu.js 能夠自動地將某些特定的 JavaScript 函數(shù)編譯為中間語言，然后利用 WebGLS API 使其運行在 GPU 中；而在某些無法使用 GPU 的環(huán)境下，仍然會將這些函數(shù)以正常的 JavaScript 執(zhí)行流運行。

Wade：Wade 是輕量級、高性能的 JavaScript 搜索庫，Wade 會在構(gòu)建階段自動地為輸入數(shù)組中的每個字符串的字符構(gòu)建反向索引，然后在搜索時候快速返回用戶輸入關(guān)鍵字對應地下標；Wade 優(yōu)勢在于對于相同的數(shù)據(jù)集進行多次搜索時能夠避免冗余的遍歷。

swagger-decorator：swagger-decorator 是旨在一處注解多處使用的 JavaScript & Node.js 應用中實體類與方法注解庫，其能夠用于實體類生成與校驗、Sequelize ORM 實體類生成、面向 Koa 的路由注解與 Swagger 文檔自動生成的場景。

Nano ID: Nano ID 是輕量級的、支持 URL 的 JavaScript 唯一 ID 生成器，它使用了強力密碼加密的隨機 API，能夠保證生成符號分布的平均性。

React 學習與實踐資料索引

React 與前端工程化實踐

前端每周清單半年盤點之 Vue.js 篇