12.1
前端每周清单第42 期：V8 的执行流与优化，Pinterest 的PWA 实践，Rust 与WebAssembly 应用
作者：王下邀月熊 编辑：徐川
前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点，开发教程，工程实践，深度阅读，开源项目，巅峰人生等栏目。欢迎关注【前端之巅】微信公众号
新闻热点
国内国外，前端最新动态
-
Rust 默认可以编译为WebAssembly : 随着 Pull Request 46115: “rustbuild: Enable WebAssembly backend by default” 被合入master 分支，Rust 现在可以不依赖于其他工具而直接将代码编译为WebAssembly 格式；而Browserify 也支持在JavaScript 代码中直接插入Rust 代码，我们在前一期的清单中也介绍过使用Rust 开发Node.js 原生模块，拭目以待未来JavaScript 与Rust 能够更好地协同构建强大的应用。 -
Kotlin 1.2 发布: 本周Kotlin 1.2 正式发布，继续了Kotlin 走向跨平台现代应用开发的步伐。Kotlin 1.1 加入了对JavaScript 的支持，可以将Kotlin 代码编译为JavaScript 并且在浏览器中运行。而该版本中，Kotlin 提供了在JVM 与JavaScript 之间复用代码的能力，允许开发者编写一次业务代码，然后运行在从服务端，到浏览器，到Android 等跨平台的应用服务中。 -
React 16.2.0 发布: React 16.2 提升了对于Fragments 的支持，即允许在某个组件的render 方法中返回多个子元素。在React 16 中允许开发者以数组方式返回多个子元素，但是这种写法却与标准的JSX 产生轻微混淆；而Fragment 可以看做对于数组的透明封装，同时其也支持传入key 属性，以在重渲染时进行判断。除此之外，该版本还为React.Children 工具函数添加了实验性的Call/Return 类型，修复了React DOM,React Test Render 中的一系列问题。 -
IPV6 要来啦：新华社北京11 月26 日电：近日，中共中央办公厅，国务院办公厅印发了《推进互联网协议第六版(IPv6 ) 规模部署行动计划》 ，并发出通知，要求各地区各部门结合实际认真贯彻落实。下一代互联网国家工程中心也宣布由该中心牵头发起的 “ 雪人计划 ” 已在全球完成25 台IPV6 根服务器架设。其中，中国部署了４台，打破了过去没有根服务器的困境。与此同时，下一代互联网国家工程中心正式宣布推出IPv6 公共DNS ：240c::6666。通过免费提供性能优异的公共DNS 服务，为广大IPv6 互联网用户打造安全, 稳定, 高速, 智能的上网体验，助力《推进互联网协议第六版( IPv6 ) 规模部署行动计划》全面落实。
开发教程
步步为营，掌握基础技能
-
使用
Node.js 构建区块链: 本教程将会从零开始介绍如何构建BrewChain ，一个简单的Node.js 区块链实现。本文首先会介绍Block 与Blockchain 的概念，然后讨论如何构建运行在成员机器上的单结点程序，其会监听创建新块的广播消息，并且将其继续广播给其他结点，从而更新整个区块链网络。BrewChain 还会包含用于管理与监控的HTTP 服务器，用于与Brew 事件交互，查看日志日期等内容。 -
重思：最佳的请求策略，就是没有请求
: 鉴于浏览器的并发请求数与网络带宽的限制，Web 性能优化的一条策略就是尽量减少请求的数目；我们习惯将资源文件打包到少数的包体中。不过随着HTTP/2 的普及，其多路复用的特性允许我们能够更高效地传递文件，本文就着重讨论了在HTTP/2 的背景之下是否还应该一味地减少请求数目。本文首先讨论了HTTP/2 的特性，然后讨论了HTTP/1.1 中的打包压缩，缓存策略等在HTTP/2 中的实践技巧变更；更多Web 性能优化相关资料参考这里。 -
Web 应用中的常见安全问题: 上期清单中笔者推荐了多篇网站应用渗透相关的文章，而本系列文章则是对于常见的Web 应用安全问题进行介绍与分析。本文首先讨论了密码哈希存放的问题，作者认为应该使用BCrypt 来替代MD5 或者SHA512 等传统哈希算法；然后介绍了XSS 的基本概念与防御手段，最后讨论了Session 存放于安全相关的问题。更多Web 安全资料索引参考这里。
工程实践
立足实践，提示实际水平
-
V8 引擎中的推测优化(Speculative Optimization ) : 本文是对于V8 的优化编译器TurboFan 的底层原理的介绍，希望能够帮助开发者了解V8 是如何通过信息搜集与Speculative Optimization ，来将JavaScript 转化为高优化的机器码。本文首先介绍了V8 引擎的整体架构，以及其执行管道流中的语法树解析, 机器码生成等步骤，然后讨论了何谓Speculative Optimization ，及其具体的优化过程；更多V8 相关讲解可以阅读《JavaScript-Notes》 。 -
来自
Pinterest 的PWA 性能案例: 本文是Addy Osmani 大神分享的，Pinterest 将其移动Web 客户端进行PWA 改造的案例；本文主要涵盖了如何减少JavaScript 包体尺寸以提高加载速度，与使用Service Worker 进行网络弹性恢复等内容。本文 首先对比了改造前后Pinterest 移动端网站关键指标，以及与原生应用的性能对比；然后介绍了Pinterest 的代码构成, 使用的Webpack 异步分割与优化插件等内容。接下来讨论了React 应用的潜在性能痛点与动画优化，最后讨论了如何用Service Workers 添加缓存功能与离线支持；更多PWA 的使用案例参考这里。 -
Service Worker 与页面刷新: PWA 的目标是为用户提供接近原生的体验，但是这也带来了某个使用场景的不一致性考量：当用户点击浏览器的刷新按钮时，网页自带的Service Worker 可能未更新，以至于用户仍旧浏览旧版的网页。作者在首篇文章中以案例展示了Service Workers 是如何 “ 破坏 ” 浏览器刷新按钮的功能，在第二篇文章中则讨论了如何避免这种不一致性。更多PWA 实践可以阅读Web 应用架构与性能调优。
深度阅读
深度思考，升华开发智慧
-
Rust, Stylo, Servo 与Firefox 的重生: 数周前Firefox Quantum 正式发布，其搭载的Servo 浏览器渲染引擎极大地提升了渲染速度与用户体验，本文即是对于Firefox Quantum 开发过程中的技术选型进行分享。本文首先分析了现代大型项目开发中的技术考量，C/C++ 因其设计与历史原因不可避免地会造成潜在的内存问题；而Rust 则是现代软件工业的集成者，它借鉴了Apple C++ 编译器后端，参考了数以百计的研究资料，包含了unsafe 等关键字，还提供了便捷的包管理器。笔者接下来还分享了Stylo 与Servo 的预研开发过程；更多Rust 相关资料参考这里。 -
2017 ThoughtWorks 技术雷达VOL.17 : 技术雷达是ThoughtWorks 技术顾问委员会(TAB ) ，基于Thoughtwork s 的全球技术战略以及对行业有重大影响的技术趋势总结而来。本期技术雷达的精彩集锦关注了崛起的中国开源软件市场, 容器编排首选Kubernetes, 成为新常态的云技术以及各方对区块链的信任稳步增强；而在前端相关领域，本期技术雷达还讨论了Headless Chrome, Cypress, Flow, Lighthouse, Rendertron, Yarn, CSS Grid Layout,CSS Modules, Jest,Kotlin, CSS-in-JS, Weex 等内容。 -
WebAssembly 的应用场景: 本文是How JavaScript Works 系列文章的第六篇，着眼于介绍WebAssembly 相关的内容，分析了其相较于JavaScript 在加载时间, 执行速度, 垃圾回收, 内存使用, 调试, 多线程, 可移植性等方面的优势。本文首先介绍了V8 引擎的JavaScript 解析与执行，以及TurboFan 优化的流程，讨论了引入WebAssembly 的结合点；然后分析了WebAssembly 内存模型等内容，最后以SessionStack 中具体的使用案例分析了WebAssembly 合适替代现有JavaScript 的情景。更多WebAssembly 的学习资料参考这里。
开源项目
乐于分享，共推前端发展
-
stacks-cli
: Wappalyzer 已经是非常不错的用于分析网站技术构成的Chrome 插件，不过对于那些喜欢使用命令行程序的开发者，stacks-cli 是个不错的选择；stacks-cli 能够识别反馈CDN,Web 服务器, 第三方插件, 界面框架等内容。 -
Sampling Heap Profiler
: Sampling Heap Profiler 目前还是实验性的工具，其能够对于V8 的堆存储进行随机抽样，来帮助开发者发现到底是什么对象占据了大量的内存。它同样会追踪栈上某个指定对象的内容，从而了解对象的存活性与对应的依赖路径。 -
Joplin
: Joplin 是免费, 开源的笔记与待办事项类应用，其提供了Windows,macOS, Linux,Android 以及iOS 等不同平台的客户端，从界面应用程序到命令行程序皆有涉及。Joplin 使用了React Native 开发移动端应用，使用了Electron 开发桌面端应用，其源代码还是很值得借鉴阅读；其使用了MIT 协议，也方便进行二次开发。 -
Reactopt
: Reactopt 是用于检测React 应用中，不必要的重渲染的命令行工具，其可以看做react-addons-perf 的替代工具。在启动Reactopt 之后，脚本会自动地在浏览器中打开应用；开发者可以通过输入done来结束检测，Reactopt 会反馈那些触发不必要的重渲染的事件，并且提示哪些组件能够通过shouldComponentUpdate 来优化性能。
前端之巅
前端之巅是
