前端每周清单第 29 期：Web 现状分析与优化策略、Vue 单元测试、Headless Chrome 爬虫

前端每周清单第 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旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。投稿请发邮件到[email protected]，注明“前端之巅投稿”。