前端每周清单第 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，注明“前端之巅投稿”。

感谢徐川对本文的审校。

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