阿里云前端周刊 - 第 41 期

推荐

1. Intel CPU 爆重大设计缺陷，浏览器中同样可以越权访问

https://googleprojectzero.blogspot.hk/2018/01/reading-privileged-memory-with-side.html

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

2. 轻量级的打包工具 FuseBox 发布 3.0

https://medium.com/fusebox/fusebox-3-0-faster-than-ever-5fae4254556c

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

3. 前端慌不慌？用深度学习自动生成 HTML 代码

http://mp.weixin.qq.com/s/4b4TPkIRPJ3VBkCOA6kbxw

如何用前端页面原型生成对应的代码一直备受关注的问题，文章作者根据 pix2code 等论文构建了一个强大的前端代码生成模型，并详细解释了如何利用 LSTM 与 CNN 将设计原型编写为 HTML 和 CSS 网站

4. 2018年移动端 UX 设计的 12 个趋势

http://www.woshipm.com/ucd/898110.html

移动端APP的世界真的是瞬息万变，各种设计技法和新鲜趋势你方唱罢我登场，想要维持住产品的热度和关注度，设计师需要不断地学习和调整设计，应对越来越严苛的挑战。本文列举了 2018 年可能会持续发展的 12 个设计趋势，如果你想让你的产品有着更优秀的体验、更突出的竞争力，不妨在这12个趋势上多花点心思。

更多

1. 基于 React、Apollo、以及 GraphQL 构建短链接服务

https://hackernoon.com/building-url-shortener-using-react-apollo-and-graphql-part-i-467aef8c64ce

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

2. 探究 V8 引擎是如何将 JavaScript 转化为机器码

https://medium.freecodecamp.org/understanding-the-core-of-nodejs-the-powerful-chrome-v8-engine-79e7eb8af964

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

3. 来自 Tinder 的 PWA 实践案例

https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0

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

4. 现代浏览器的网络层性能优化之道

https://blog.sessionstack.com/how-modern-web-browsers-accelerate-performance-the-networking-layer-f6efaf7bfcf4

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

5. 健壮的客户端 JavaScript 代码

https://molily.de/robust-javascript/

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