阿里雲前端週刊 - 第 41 期

推薦

1. Intel CPU 爆重大設計缺陷，瀏覽器中一樣能夠越權訪問

https://googleprojectzero.blogspot.hk/2018/01/reading-privileged-memory-with-side.html

近日 Intel CPU 被爆存在設計缺陷，普通的用戶程序可以識別受保護區域的內核佈局及其中內容；全部能訪問虛擬內存的 CPU，均可能被越權訪問，而該問題的修復方案可能帶來極大的處理器性能降低。同時根據 Mozilla 安全研究人員驗證代表，相同的技術可以用於瀏覽器中讀取不一樣源的隱私內容；各大瀏覽器廠商在致力於規避該問題，譬如限制 performance.now() 的執行間隔，或者默認禁用 SharedArrayBuffer 等。

2. 輕量級的打包工具 FuseBox 發佈 3.0

https://medium.com/fusebox/fusebox-3-0-faster-than-ever-5fae4254556c

近日發佈的 3.0 版本更是提高了約 20% 的性能表現；其只須要 50~100ms 便可以打包大型項目。新版本中支持零配置代碼分割，更新了任務運行器，優化了 TypeScript 包發佈流程，而且大幅提高了速度與穩定性。

3. 前端慌不慌？用深度學習自動生成 HTML 代碼

http://mp.weixin.qq.com/s/4b4TPkIRPJ3VBkCOA6kbxw

如何用前端頁面原型生成對應的代碼一直備受關注的問題，文章做者根據 pix2code 等論文構建了一個強大的前端代碼生成模型，並詳細解釋瞭如何利用 LSTM 與 CNN 將設計原型編寫爲 HTML 和 CSS 網站

4. 2018年移動端 UX 設計的 12 個趨勢

http://www.woshipm.com/ucd/898110.html

移動端APP的世界真的是瞬息萬變，各類設計技法和新鮮趨勢你方唱罷我登場，想要維持住產品的熱度和關注度，設計師須要不斷地學習和調整設計，應對愈來愈嚴苛的挑戰。本文列舉了 2018 年可能會持續發展的 12 個設計趨勢，若是你想讓你的產品有着更優秀的體驗、更突出的競爭力，不妨在這12個趨勢上多花點心思。

更多

1. 基於 React、Apollo、以及 GraphQL 構建短連接服務

https://hackernoon.com/building-url-shortener-using-react-apollo-and-graphql-part-i-467aef8c64ce

本系列文章按部就班地介紹瞭如何使用 React、GraphQL 以及 Node.js 構建完整的短連接服務。首篇文章介紹了使用 GraphQL 與 React 搭建短連接展現界面，第二篇介紹了短連接構造服務，而後討論瞭如何建立用於計算 Hash 的 Serverless Function，接下來分析瞭如何記錄點擊數等統計信息，最後介紹瞭如何添加用戶權限認證。更多 React 教程查閱 React 與前端工程化實踐。

2. 探究 V8 引擎是如何將 JavaScript 轉化爲機器碼

https://medium.freecodecamp.org/understanding-the-core-of-nodejs-the-powerful-chrome-v8-engine-79e7eb8af964

本文以擴展 V8 的原生方法爲例，介紹了 V8 引擎是如何將 JavaScript 轉化爲可被 CPU 執行的機器碼指令。V8 是由 Google 開源的 JavaScript 引擎，其可以將 JavaScript 代碼轉化爲低級別的機器碼；V8 實現了 ECMA-262 標準，其便可以獨立運行，也能夠嵌套在其餘的 C++ 程序中運行。更多 V8 相關資料參考 V8 引擎資料索引。

3. 來自 Tinder 的 PWA 實踐案例

https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0

隨着 Safari 開始支持 ServiceWorker，PWA 的前景也愈發光明；本文則是記述了 Tinder 是如何優化 JavaScript 性能表現、使用 Service Worker 來提供網絡彈性、使用 Push Notification 來提示會話。一樣，本文首先量化對比了改造先後 Tinder 應用在不一樣網絡環境下的性能表現，而後依次討論了基於 Loadable 的代碼分割、資源緩存與預加載、CSS 加載策略、運行時性能優化等內容；

4. 現代瀏覽器的網絡層性能優化之道

https://blog.sessionstack.com/how-modern-web-browsers-accelerate-performance-the-networking-layer-f6efaf7bfcf4

因特網問世已有數十年，本文則是着眼於介紹現代瀏覽器採用了哪些技術，主要是在網絡層上，來自動地進行性能優化。瀏覽器的性能會受到不少因素的影響，其中網絡層每每會是瓶頸，而瀏覽器爲咱們屏蔽了不少底層的實現細節；本文依次介紹了 Socket 管理、網絡安全與沙盒、資源與客戶端狀態緩存、應用接口與協議等內容。更多 Web 性能優化討論參考現代 Web 應用架構與性能調優。

5. 健壯的客戶端 JavaScript 代碼

https://molily.de/robust-javascript/

JavaScript 已然是現代 Web 開發者必需的工具之一，網站也愈來愈多的應用 JavaScript 來提升可交互性。不過隨着客戶端 JavaScript 代碼複雜度的增長，用戶使用過程當中出現錯誤的機率也就越大；本小書即討論什麼是 JavaScript 代碼的健壯性以及如何保證。本書首先討論了 JavaScript 的特性以及健壯性的通用定義，而後列舉了 JavaScript 中可能拋出的異常或者失敗的情景，最後陳述了數十條避免或者抑制錯誤的方法。

閱讀原文http://click.aliyun.com/m/40604/