前端每周清单第 46 期: 2017 Node.js / GraphQL / Vue.js 盘点，前端性能优化与可用性保障

做者：王下邀月熊 编辑：徐川

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

新闻热点

国内国外，前端最新动态

• Intel CPU 爆重大设计缺陷，浏览器中一样能够越权访问: 近日 Intel CPU 被爆存在设计缺陷，普通的用户程序可以识别受保护区域的内核布局及其中内容；全部能访问虚拟内存的 CPU，均可能被越权访问，而该问题的修复方案可能带来极大的处理器性能降低。同时根据 Mozilla 安全研究人员验证代表，相同的技术可以用于浏览器中读取不一样源的隐私内容；各大浏览器厂商在致力于规避该问题，譬如限制 performance.now() 的执行间隔，或者默认禁用 SharedArrayBuffer 等。

• FuseBox 3.0 发布: FuseBox 是轻量级的打包工具，近日发布的 3.0 版本更是提高了约 20% 的性能表现；其只须要 50~100ms 便可以打包大型项目。新版本中支持零配置代码分割，更新了任务运行器，优化了 TypeScript 包发布流程，而且大幅提高了速度与稳定性。

• Storybook 3.3 发布: 新年之际， Storybook 发布了 3.3 版本，带来了对 Angular 的支持。该版本支持在 Angular 4+ 的项目中使用 Storybook，而且容许开发者设置不一样的 Viewport 以模拟不一样分辨率的设备；同时该版本还支持直接在 Storybook 中预览测试结果，更多的特性变化请查看原文。

开发教程

步步为营，掌握基础技能

• 2017 年发布的优秀 Node.js 开源项目盘点: 2017 年里， Node.js 社区也愈发活跃；本文从 4700 多个去年发布的 Node.js 开源项目中，挑选出 25 个优秀的表明。这些项目涵盖了不一样的功能方向，譬如 Headless Chrome Node API Puppeteer, 用于建立模拟数据的 faker.js，用于将 Node.js 项目打包为可执行文件的 Pkg，用于进行图片处理的 Sharp，用于进行 Docker 界面化管理的 Portainer 等等。更多 Node.js 相关资料参考这里。

• 基于 React, Apollo, 以及 GraphQL 构建短连接服务: 本系列文章按部就班地介绍了如何使用 React、GraphQL 以及 Node.js 构建完整的短连接服务。首篇文章介绍了使用 GraphQL 与 React 搭建短连接展现界面，第二篇介绍了短连接构造服务，而后讨论了如何建立用于计算 Hash 的 Serverless Function，接下来分析了如何记录点击数等统计信息，最后介绍了如何添加用户权限认证。更多 React 教程查阅 React 与前端工程化实践。

• 探究 V8 引擎是如何将 JavaScript 转化为机器码: 本文以扩展 V8 的原生方法为例，介绍了 V8 引擎是如何将 JavaScript 转化为可被 CPU 执行的机器码指令。V8 是由 Google 开源的 JavaScript 引擎，其可以将 JavaScript 代码转化为低级别的机器码；V8 实现了 ECMA-262 标准，其便可以独立运行，也能够嵌套在其余的 C++ 程序中运行。更多 V8 相关资料参考 V8 引擎资料索引。

工程实践

立足实践，提示实际水平

• 来自 Tinder 的 PWA 实践案例: 随着 Safari 开始支持 ServiceWorker，PWA 的前景也愈发光明；本文则是记述了 Tinder 是如何优化 JavaScript 性能表现、使用 Service Worker 来提供网络弹性、使用 Push Notification 来提示会话。一样，本文首先量化对比了改造先后 Tinder 应用在不一样网络环境下的性能表现，而后依次讨论了基于 Loadable 的代码分割、资源缓存与预加载、CSS 加载策略、运行时性能优化等内容；更多 PWA 相关资料参考 PWA 学习与实践资料索引。

• 2018 前端性能清单: 性能优化任重道远，随着硬件设备、浏览器以及开发技术的不断演化，优化技巧也在不停地改变，本文便是最新的性能优化总结清单；本文也并不局限于介绍技术自己，还讨论了如何打通优化全流程，构建持续性优化地开发文化。本文依次讨论了调优规划与性能评测、设置合理的目标、构建合适的环境、优化构建流程与图片文本等资源、分发流程优化等内容；更多 Web 性能优化讨论参考现代 Web 应用架构与性能调优。

• 现代浏览器的网络层性能优化之道: 因特网问世已有数十年，本文则是着眼于介绍现代浏览器采用了哪些技术，主要是在网络层上，来自动地进行性能优化。浏览器的性能会受到不少因素的影响，其中网络层每每会是瓶颈，而浏览器为咱们屏蔽了不少底层的实现细节；本文依次介绍了 Socket 管理、网络安全与沙盒、资源与客户端状态缓存、应用接口与协议等内容。更多 Web 性能优化讨论参考现代 Web 应用架构与性能调优。

深度阅读

深度思考，升华开发智慧

• 健壮的客户端 JavaScript 代码: JavaScript 已然是现代 Web 开发者必需的工具之一，网站也愈来愈多的应用 JavaScript 来提升可交互性。不过随着客户端 JavaScript 代码复杂度的增长，用户使用过程当中出现错误的几率也就越大；本小书即讨论什么是 JavaScript 代码的健壮性以及如何保证。本书首先讨论了 JavaScript 的特性以及健壮性的通用定义，而后列举了 JavaScript 中可能抛出的异常或者失败的情景，最后陈述了数十条避免或者抑制错误的方法。更多 JavaScript 教程参考现代 JavaScript 开发：语法基础与工程实践。

• 2017 Vue.js 盘点: 本文是对于 Vue.js 的年底盘点，总结了 2017 年中 Vue.js 及其社区发生的变化与取得的成就。在过去一年中 Vue.js 得到了四万多 Star，框架自己的性能与易用性、健壮性也都获得了提高；服务端渲染、异常处理等也都获得了优化。而在内部的变化以外，整个技术栈内的框架，譬如 Element, Framework7, Onsen UI, vuetify, vue-material 以及 quasar 都发布了重大的版本更新，相关的资料也获得了扩充。此外，Weex, nativescript-vue 这样的原生集成扩展也取得了长足的发展，Adobe, GitLab, IBM 等大型团队或公司也都在逐步使用 Vue.js。

• 2017 GraphQL 盘点: GraphQL 最先开源于 2015 年，随着 Apollo, graphcool 等一系列优秀框架的出现，GraphQL 在 2017 年蓬勃发展，而且能够预见其在 2018 年会继续蒸蒸日上；本文是对去年 GraphQL 及其社区发生的变化与取得的成就的盘点。本文首先介绍了 IBM, Walmart 等巨头对 GraphQL 的见解，而后列举了去年发生的 GraphQL 大事件，最后展望了 2018 年 GraphQL 的规划；

• 我是如何从网页中窃取信用卡帐户密码的: 本文讲述了某些攻击者是如何用 NPM 向一些普遍使用的开源工具，注入渗透代码并搜集各种信息的故事。

开源项目

乐于分享，共推前端发展

• Majestic: Majestic 是基于 Electron 开发的，界面化查看与控制 Jest 测试用例的应用。Jest CLI 自己已然提供了很是友好的测试体验，不过 Majestic 但愿可以经过界面交互地方式进一步优化开发测试的体验。

• TeaVM: TeaVM 是面向 Java 字节码的 AOT 编译器，其可以将 Java 字节码编译为 JavaScript 与 WebAssembly。不一样于著名的 GWT，TeaVM 并不须要源代码支持，而只须要编译以后的字节码文件；这也意味着 TeaVM 天生支持 Scala 与 Kotlin 这样的 JVM 方言。

• Stimulus: Stimulus 是辅助型的前端框架，它并不介入到具体的 HTML 渲染流程，天然也不会想去接管整个前端应用。它的设计初衷便是在尽量少地介入的状况下来加强当前的 HTML，与 Turbolinks 协同使用的话可以在最小改动的状况下完成对应用的性能改造。

• Uppy: Uppy 是新一代的模块化文件上传控件，其可以无缝集成到任何 Web 应用中，而且提供了易用的接口。Uppy 内建支持从本地磁盘、Google Drive、Dropbox、Instagram、Camera 等多个源中抓取数据，而且提供了良好的预览界面，同时支持对上传过程地审视与控制。更多特性介绍请查看原文。

巅峰人生

• 10 大关键词，10+1 位技术人的整年回顾: 年底的时候，以“记录与时代并行的技术人”为使命的二叉树，问了十位技术人同一个问题：过去一年你经历了什么？有来自百度的 Web 前端高级技术经理，有 Google 开发者平台工程师，有火币网 CTO，他们从不一样的角度谈了谈技术的发展，谈了谈明年的期许。

前端之巅

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