BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

前端每周清单第 42 期:V8 的执行流与优化, Pinterest 的 PWA 实践, Rust 与 WebAssembly 应用

| 作者 王下邀月熊 关注 19 他的粉丝 发布于 2017年12月8日. 估计阅读时间: 13 分钟 | QCon北京2018全面起航:开启与Netflix、微软、ThoughtWorks等公司的技术创新之路!

亲爱的读者:我们最近添加了一些个人消息定制功能,您只需选择感兴趣的技术主题,即可获取重要资讯的邮件和网页通知

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

新闻热点

国内国外,前端最新动态

  • 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 根服务器架设。其中,中国部署了4台,打破了过去没有根服务器的困境。与此同时,下一代互联网国家工程中心正式宣布推出 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 开发基础

  • 来自 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 来优化性能。

前端之巅

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


感谢徐川对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT