前端每周清单第 43 期：2017 JavaScript 回顾、Rust 与 WebAssembly 开发游戏、Node.js 架构模式

前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID ： frontshow），及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

• Angular 5.1 发布: 本文介绍了 Angular 5.1.0, Angular CLI 1.6 以及 Angular Material 的首个稳定版本的特性变化。Angular 5.1.0 中包含了多个小的特性变化与错误修复，此次系列更新主要包括了 Angular Material & CDK 稳定版发布、CLI 工具支持 Service Worker、对于 Universal 以及 AppShell 支持的提升、装饰器错误信息优化、支持 TypeScript 2.5 等等。

• Ant Design 3.0 发布: Ant Design 是面向企业级桌面应用的设计方案与实现，在 2.0 版本发布的 14 个月之后，3.0 版本正式发布，包含了来自 200 多位贡献者的超过 4000 次提交。Ant Design 3.0 版本中引入了新的色彩系统，其受到天空的启发，包含了薄暮、日出、拂晓蓝等一系列优美的色彩搭配；该版本还引入了新的组件设计，包括了对于大量组件的复写，完全支持 React 16 与 ES Module，并且优化了对于 TypeScript 的支持。

• Font Awesome 5 发布: 本周，Font Awesome 5.0.0 正式发布，为我们带来了全新的主页，包含了九百多个免费图标与一千多的商业图标。5.0 中提供了多种整合方式，最为推荐的是利用 JavaScript 与 SVG 图标协同使用，以替代原有的字体图标，从而提升性能与易用性。

• TensorFlow Lite 支持 Core ML : TensorFlow Lite 是面向移动设备与嵌入式设备的轻量级 TensorFlow 版本，近日其宣布开始支持 Core ML，通过工具能够将 TensorFlow 模型转化为 .mlmode 这样的 Core ML 模型格式。Core ML 是 iOS 内置的机器学习框架，这意味着 iOS 开发者能够在 Core ML 上部署 TensorFlow 模块，也是 TensorFlow Lite 在跨平台支持上的重要一步；另一方面，Apple 也开源了自定义机器学习模型框架 Turi Create ，来帮助开发者快速开发机器学习模块并且集成到 iOS 应用中。

开发教程

步步为营，掌握基础技能

• 使用 Rust 开发基于 WebAssembly 的游戏: 数周前，Alex Crichton 的 PR 使得 Rust 能够直接被编译为 WebAssembly 格式，本文作者也尝试将基于 Rust 与 Piston 编写的桌面游戏 Rocket ， 转化为能够在浏览器中运行的 WebAssembly 格式的应用。作者使用 JavaScript 来处理用户的输入输出，并且进行界面渲染，使用 Rust 来处理游戏逻辑；作者依次介绍了自己在迁移过程中碰到的多个 Link 错误以及处理方案，然后讨论了 Rust 与 JavaScript 如何相互调用，以进行画面渲染与接收用户输入输出等内容。更多 WebAssembly 相关资料参考这里。

• <img> 的变迁：非 GIF 的动图实现: 图片是现代网页应用中不可或缺的部分，GIFs 是动图实现的选择之一，但其质量与性能一直差强人意；如果直接使用 video 标签，又是无法发挥 preloaded 的作用，还必须分段请求。在 Safari Technology Preview 中，允许开发者使用 <img src=".mp4"> 的形式来实现简单的动图需求，相较于原本的 GIF 的解决方案能带来将近二十倍的性能提升，并且支持 CSS 方式背景播放，其体积也有大幅度的降低。更多的图片处理与性能优化资料参考这里。

• 使用 Electron 与 React 创建 Markdown 应用: 本文循序渐进地介绍了如何使用 Electron 与 React 构建简单的 MarkDown 应用，作者将其命名为 Mook 。本文依次介绍了技术栈的选择与考量，开发环境、构建流程与模板应用搭建，主功能开发等内容；更多 Electron 学习资料参考这里。

工程实践

立足实践，提示实际水平

• Airbnb 列表页的 React 性能问题浅析: Airbnb 已经使用 React Router 与 Hypernova 将核心订购流程转化为了服务端渲染的单页应用，本文则是介绍其如何将列表详情页进行单页应用话改造，并且综合提高其性能。本文首先讨论了如何进行性能评测，这篇文章也介绍了如何使用 Chrome DevTools 来调试 React 的性能问题；然后介绍了其在初始化渲染、滚动优化、点击反馈、输入输出方面的优化技巧。更多 React 相关教程参阅 React 与前端工程化实践。

• Node.js 的可扩展应用模式：CQRS, ES, Onion : 本文介绍如何使用 CQRS 与 Event Sourcing 模式来开发 Node.js 应用，使用 Onion 架构来组织这些模式，并且使用 TypeScript 来进行静态类型校验。本文首先讨论了何谓灵活架构：业务逻辑与实现分离、独立于数据库，框架，服务等等；然后介绍了 Event Sourcing 与 CQRS 的含义，以及它们是如何组织在洋葱圈模型中的，最后以典型的认证逻辑为例讨论了如何实现 CQRS 模式。更多 Node.js 的知识可以阅读深入浅出 Node.js 全栈架构。

• 基于 Intersection Observer 与 SQIP 的渐进式图片加载: 当我们浏览 Facebook、Pinterest 、 Medium 等内容类网站时，会发现图片是渐进式加载，即首先出现低质量的、模糊的图片，然后再出现真正的图片，本文即是介绍如何使用 Intersection Observer 与 SQIP 实现渐进式加载。之前的清单中我们有介绍过 SQIP 这种图片替代（Image PlaceHolder ）的生成方式，其能够生成不足 1KB 的 SVG 格式的低质量图片；而 Intersection Observer 则能够判断某个图片元素是否在视口内，从而实现按需加载。更多的图片处理与性能优化资料参考这里。

深度阅读

深度思考，升华开发智慧

• Orinoco: V8 中的年轻代垃圾回收: V8 引擎中的 JavaScript 对象被分配在了堆上，并且由 V8 的垃圾回收器进行生命周期的管理；本文即是介绍 Parallel Scavenger，Orinoco 的最新特性之一，是如何针对年轻代进行垃圾回收的。本文首先介绍了分代垃圾回收模型，然后讨论了单线程的 Cheney’s Semispace Copy 算法，最后讨论了 Parallel Mark-Evacuate 以及 Parallel Scavenge 回收器的设计；更多 V8 相关资料索引参考这里。

• 2017 JavaScript 发展回顾: 在 2017 年 JS 状态调查结果出炉之前，Sacha Greif 先和几位专家聊了聊他们对于 2017 年 JavaScript 发展的看法与回顾，并整理成了这篇文章。本文从测试工具、构建工具、状态管理、全栈架构等几个不同的方面进行了讨论，对 2017 年中令人印象深刻的技术进行了分享；除此之外， A recap of front-end development in 2017 也是一篇不错的总结，更多 JavaScript 相关资料参考这里。

• Web 内容可用性提升指南: World Wide Web Consortium (W3C) 发布的 Web Content Accessibility Guidelines 2.0 是网页内容可用性的绝佳指南，能够帮助设计者与开发者来提升网页的整体可用性；本文则是对这份指南的简要总结，以帮助那些没有时间阅读原指南的开发者快速了解网页可用性方面的知识。本文依次讨论了如何判断用户能否有效地接受网页内信息、如何判断用户能否有效地使用网页中的控制按钮与跳转链接、用户是否能够理解网页内容、是否针对复杂的用户环境进行了适配等内容；更多 Web 开发相关内容阅读现代 Web 开发工程化实践。

• 卡通图解 JavaScript 引擎: 本系列文章着眼于从运行机制的角度来介绍 JavaScript，首篇文章介绍了 Callback Queue、Event Loop 等异步执行相关的概念，本文则是从引擎的角度，以漫画的方式来介绍 JavaScript 的编译、解析与执行的过程。上周的清单中我们推荐了 V8 引擎的推测优化，本文则是提纲挈领地介绍 JIT 编译器的原理，给读者一个宏观的概念展示；更多 JavaScript 引擎相关资料参考这里。

开源项目

乐于分享，共推前端发展

• Parcel : Parcel 是高速、零配置的 Web 应用打包工具；其面向现代操作系统设计，能够进行多核并发编译，并且提供了文件系统的缓存以优化重构建或者增量构建的性能。Parcel 还提供了开箱即用的 JS, CSS, HTML, 资源文件等支持，能够自动地使用 Babel, PostCSS,PostHTML 来进行代码转换，同时内建支持 import() 动态导入与热替换。

• electron-toolkit : electron-toolkit 是轻量级的、强大的 Electron 应用的启动辅助工具，它能够以 NPM 脚本的方式启动，为开发者提供一系列开发过程中需要的辅助工具。这些工具包括了图标生成、截图工具、安装器、二进制文件生成、网站生成、实时更新等等。

• Muuri : Muuri 是强大的 JavaScript 布局引擎，吸纳了来自 Packery, Masonry, Isotope, 以及 Sortable 的优秀特性，辅助开发者快速构建响应式、可排序、可过滤、可拖拽、可动画控制的可扩展表格系统。

• Vuetron : Vuetron 是基于 Electron 开发的，帮助 Vue.js 项目测试以及错误检测的工具，同时支持 Vuex 以及 Vue-Router。类似于 Developer Tools，Vuetron 能够查看事件、应用状态以及进行时间回溯的调试；同时还能够实现监听指定状态变量的变化，查看 API 请求与响应，可视化查看组件结构树等等功能。

巅峰人生

• 从黑客到创业，他说技术创业该这么做！: 本文是知道创宇 CTO & COO 杨冀龙在极客 Live 中分享的创业感悟和踩过的那些坑。杨冀龙是安全焦点民间白帽黑客组织核心成员，被《浪潮之巅》评为中国新一代黑客领军人物之一；他在本文中依次分享了对于黑客的定义、如何从黑客成为一名安全创业者、技术创业踩过的坑、给技术创业者建议等内容。

前端之巅

「前端之巅」是 InfoQ 旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复 “ 加群 ”。投稿请发邮件到 editors@cn.infoq.com，注明 “ 前端之巅投稿 ”。

感谢徐川对本文的审校。

给 InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ， @丁晓昀），微信（微信号： InfoQChina ）关注我们。