前端每周清单第 29 期：Web 现状分析与优化策略、Vue 单元测试、Headless Chrome 爬虫_语言 & 开发_王下邀月熊



 写点什么

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

新闻热点

国内国外，前端最新动态

Prettier 1.6.0 发布：本周发布的 Prettier 1.6.0 版本引入了数个期待已久的特性，包括 .prettierrc，.prettierignore 项目配置文件、JSX 显示格式优化、允许 JSON 文件添加自定义注释等；除此之外，该版本还进一步优化了对于 JavaScript、TypeScript、CSS、GraphQL 等格式文件的支持，还提供了更多的命令行特性。
Firefox 引入 Headless 模式：类似于 Chrome 的 Headless 模式，现在 Firefox 也引入了 Headless 模式，其允许开发者利用 Firefox 进行更加方便地自动化测试、动态网页抓取等操作；本文也介绍了如何利用 Selenium 控制 Firefox 进行自动化浏览器操作等内容。
Webpack 4 开发计划：本文讨论了 Webpack 4 相关的规划与目标，在先前发布的 Webpack 3 版本中并未引入什么断层变化，但是 Webpack 4 中会引入些重大的变革。Webpack 4 的主要目标包括 WASM 支持、新的 CSS 工作流、支持 async script 标签、性能提升、继续优化 ESM、更加完善地支持类型系统等。
TypeScript 2.5 版本发布：近日发布的 TypeScript 2.5 版本中引入了许多新的特性，并且能够更好地与 VSCode 协同开发。该版本中提供了函数与方法抽取重构、快速类型修复、JavaScript 文件中的 JSDoc 类型断言支持、可选的 catch 语句等特性，同时还进一步优化了性能与使用体验。

开发教程

步步为营，掌握基础技能

基于 Node.js 的 HTTP2 服务端推送：Node.js 8.4.0 版本中引入了实验性的 HTTP/2 支持，开发者可以通过 --expose-http2 标识位启用 HTTP/2 支持。本文首先介绍了 HTTP/2 服务端推送中重要的知识点，然后从零开始创建简单的 Node.js 应用，来形象阐述如何使用 HTTP/2 以及其特性；更多 HTTP/2 相关资料参考这里。
使用官方 Vue.js 测试工具与 Jest 编写组件的单元测试：Vue.js 以其灵活、高性能、易上手的特性正逐步被应用到更多的 Web 项目中，本系列文章则着眼于介绍 Vue.js 应用开发中的单元测试相关内容。本系列文章依次介绍了编写首个简单的组件单元测试用例、测试递归渲染的 Vue.js 组件、测试组件的样式与结构、测试组件的状态，计算属性与方法、测试属性与自定义事件、测试生命周期回调、测试 Vue.js Slots、利用模块别名配置 Jest 等内容；更多 Vue.js 相关资料参考这里。
利用 Service Worker 离线运行 Angular 应用：本文主要讨论如何通过 Service Worker 为 Angular 应用添加离线运行特性。本文首先介绍了 Service Worker 的概念与原理，然后介绍了 Google 提供的工具集 Workbox，以及如何使用 Workbox 创建简单的 Service Worker，最后以简单的应用说明了如何创建自定义的 Service Worker、选定缓存内容与缓存策略。更多 Angular 相关资料参考这里。
60 分钟内构建 Github 搜索栏：本文是来自 Appbase.io 的工程师分享的，如何快速构建漂亮大方的 Github 应用搜索界面。本文中使用 React 开发前端界面，依次阐述了如何按照组件来切割界面、如何从底向上依次构建各级所需要的组件、如何添加组件事件响应、如何通过 Github API 获取数据并且渲染到界面上等内容；更多 React 相关资料参考这里。

工程实践

立足实践，提示实际水平

基于 Puppeteer 与 Chrome Headless 的网页抓取：Puppeteer 是 Google Chrome 团队发布的 Chrome Headless 官方工具。而随着 Chrome Headless 的发布，包括 PhantomJS、Selenium Firefox 等在内很多的项目都宣布停止开发；Chrome Headless 正逐步成为 Web 应用自动化测试的行业领袖。而本文则是一步一步地介绍了如何利用 Chrome Headless、Puppeteer、Node 以及 Mongodb 来抓取 Github 上的相关内容；更多 Chrome Headless 相关资料参考这里。
V8 中对象属性的快速访问：本文将会介绍 V8 引擎是如何处理 JavaScript 对象中属性的机制；虽然在使用层面上字符型键与数值型键并无差异，但是 V8 处于性能与内存的考虑会使用不同的方式来处理这两种属性。本文则会介绍 V8 提供的快速属性访问机制与动态属性的处理，理解 inline caches 的运行机制等内容；更多 V8 相关资料参考这里。
基于 Webpack 的 Vue.js 应用代码分割：早期利用 Webpack 打包前端应用的一大缺陷在于其会产生较大的包体，而后来引入的代码分割特性则能有效地提升首屏加载速度。本文介绍了 Vue.js 应用开发中，如何利用 Webpack 与 Async components 来进行代码的动态加载；更多 Vue.js 相关资料参考这里
SparkUI：FreeWheel 的 React 开发实践：SparkUI 是由 FreeWheel 根据自身业务特点开发的一套完整且灵活的前端开发解决方案。该方案基于 React，由 Modula 应用状态管理框架、一系列可重用的前端组件、以及构建 SPA 所需的各类支持库组成。该方案重视可重用性、灵活性、可测试性以及开发效率，解决了前端社区常见的一些针对商业前端应用开发的痛点，如复杂状态、Side Effect，组件拆分等，更在工程实践、文档化、本身代码质量等方面达到较高标准，为前后端分离架构下的商业前端应用开发提供了坚实的基础。目前 SparkUI 已成功应用在 FreeWheel 的前端项目中。

深度阅读

深度思考，升华开发智慧

为什么我们从 Angular 2 迁移到了 Vue.js（以及为什么不用 React）：本文是来自 Rever 的工程师分享的他们在构建新版本 Web 应用时技术选型的考量。作者主要从易用性、代码运行速度、文档、社区活跃度、移动端的支持、开源协议等多个角度对比分析了 Angular.js、Vue.js 与 React 这三个主流框架。其中 Angular.js 的缺陷在于版本更迭过快、代码执行速度略慢、响应式不足等方面；React 的代码运行速度一般，其最近的证书风波也是令人迟疑，而 Vue.js 目前的主要缺陷在于其社区还不如 React 与 Angular 庞大。更多 Vue.js 相关资料参考这里
Web 的现状：网页性能提升指南：随着因特网的快速发展，至今已有约 46% 的人们可以通过设备接入到网络中；而其中的大多数又是通过移动设备来浏览网页或其他操作。本文即是对目前 Web 发展现状进行概要性描述，并且讨论了当前状态下网页应该关注的性能提升点。本文依次分析了如何优化 JavaScript、CSS 等资源文件、选择合适的图片、优化网页字体、优化 JavaScript 执行、如何正确地追踪性能指标等内容；更多 Web 性能优化相关资料参考这里。
Webkit 中 JavaScript 并发编程提案：随着 SharedArrayBuffer 被引入，JavaScript 也正逐步转向提供并发支持；本文即是 Webkit 开发团队分享的它们对于并发 JavaScript 编程的考虑与设计。本文依次讨论了 Thread 相关的 API、JavaScript 内存模型、如何与 DOM 进行交互、如何进行并发控制以及 WebKit 的实现方案等内容；
澄清对 AMP 的十个误解：AMP 是由 Google 出品的，采用了白名单强约定策略的开源 Web 组件格式和类库；因为 AMP 本身处于性能的考虑限制了网页本身的开发自由，也导致了开发者对 AMP 颇有微词。本文则是对于 AMP 的常见误解进行阐述，包括 AMP 的定位与运行环境、AMP 的适用目标、AMP 与现有网站的集成方式、AMP 与 PWA 之间的关系等内容。

开源项目

乐于分享，共推前端发展

asm-dom : asm-dom 是轻量级的基于 WebAssembly 的 Virtual DOM 框架，其允许开发者使用 C++ 来构建 Web 单页应用。开发者可以仅使用 C++ 来编写 Web 应用，然后通过 Emscripten 来将其转化为 WebAssembly；其能允许开发者直接使用现有的 C++ 标准库代码，从而保证代码复用与性能提升。
Vivify ：Vivify 是轻量级的 CSS 动画库，提供了数十种常见的 CSS 动画实现，包括 ball、blink、driveInBottom、fadeIn、flip、popIn 等；开发者只需要将样式文件引入页面中即可使用。
React Map GL ：React Map GL 是 Uber 出品的基于 React 与 Mapbox GL 的地图库，其提供了 Browserify、Webpack 2、create-react-app 多种集成尝方式；官方也给出了与 Redux 的便捷集成方式。
Push : Push 是 BrowserStack 出品的，快速实现基于 JavaScript 的桌面消息推送工具；Push 能够自动利用 Chrome、Safari、Firefox、IE9+ 这些现代浏览器提供的底层接口，为开发者提供跨平台的统一调用方式。
r2 ：r2 是 request 的作者基于多年的现代开发实践总结出的轻量级、高可用 HTTP 客户端；r2 基于浏览器端的 fetch 实现，使用了 node-fetch 提供了 Node.js 环境下的支持。

巅峰人生

与 Node.js 创立者 Ryan Dahl 的对话：Ryan Dahl 是 Google Brain 团队的软件工程师，也是 Node.js 项目的创立者；而他目前则就职于深度学习项目，着手图片转化等相关的方向。本文则是与 Ryan Dahl 的一次访谈记录，谈论了 Ryan Dahl 的技术生涯发展、工作选择、创立 Node.js 的考量等内容。

前端之巅

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