前端每周清单第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 Learning & Practices Links。

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

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

深度阅读

深度思考，升华开发智慧

• 健壮的客户端JavaScript代码: JavaScript已然是现代Web开发者必需的工具之一，网站也越来越多的应用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，注明 “ 前端之巅投稿 ”。