Linux 之父出席、干货分享、圆桌讨论,精彩尽在 OpenCloudOS 社区开放日,报名戳 了解详情
写点什么

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

  • 2017 年 12 月 07 日
  • 本文字数:3738 字

    阅读完需:约 12 分钟

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

2017 年 12 月 07 日 18:002140
用户头像

发布了 60 篇内容, 共 14.8 次阅读, 收获喜欢 8 次。

关注

评论

发布
暂无评论
发现更多内容

挖矿区块链_什么是挖矿 带你详细了解挖矿基础知识

v16629866266

持续进步的不二法宝-PDCA

Ian哥

28天写作

时间约束帮助我写作

Justin

方法论 创意 习惯养成 28天写作

安卓开发交流!一线互联网移动架构师筑基必备技能之Java篇,Android岗

欢喜学安卓

android 程序员 面试 移动开发

第三章: 产品解决方案作业

让时间说真话

产品经理 产品经理训练营

第三章:产品解决方案作业

让时间说真话

产品经理

前端面试必备ES6全方位总结

我是哪吒

程序员 面试 大前端 ES6 2月春节不断更

第五周作业

oooh-la

Python 中 sorted 如何自定义比较逻辑

zikcheng

Python sorted cmp

第十周 模块分解作业

简简单单

【WOW.js】Animate.css的黄金搭档

德育处主任

CSS 动画 js 28天写作 2月春节不断更

Elasticsearch 写一致性原理

escray

七日更 28天写作 死磕Elasticsearch 60天通过Elastic认证考试 2月春节不断更

第十周 学习总结

简简单单

厚积薄发!华为云7篇论文被AAAI收录,2021年AI行业技术风向标看这里!

华为云开发者联盟

人工智能 卷积网络 远程监督 域泛化 油气储集层收集

不要在nodejs中阻塞event loop

程序那些事

node.js Event 事件循环 程序那些事 nodejs event

大背景 (28天写作 Day25/28)

mtfelix

28天写作 新能源汽车 新能源革命 碳中和

安卓开发软件有哪些?分析Android未来几年的发展前景,吐血整理

欢喜学安卓

android 程序员 面试 移动开发

OpenAI将k8s扩展至7500个节点以支持机器学习;Graph Diffusion Network提升交通流量预测精度

京东科技开发者

区块链 开源

就算知道了答案,真的会改变吗?「幻想短篇 25/28」

道伟

28天写作

ModelArts AI Gallery与HiLens Kit联合开发丨行人社交距离风险提示Demo

华为云开发者联盟

华为云 modelarts hilens 行人 社交距离

史上最清晰的Tarjan算法详解

华为云开发者联盟

算法 静态分析 语法树 Tarjan 数据流

挖矿系统APP源码搭建

luluhulian

话题讨论|过年回家你带电脑吗?

熊斌

话题讨论 28天写作

云原生动态周报 | Google推出VM Manager

华为云原生团队

Docker 开源 云原生 华为云

日记 2021年2月2日(周二)

Changing Lin

个人感悟 2月春节不断更

华为云FusionInsight助力宇宙行打造金融数据湖新标杆

华为云开发者联盟

数据湖 云原生 存储 FusionInsight 华为云

产品经理训练营第0期-第三次作业

孙行者

第0期 产品经理训练营 问题

高性能缓存 Caffeine 原理及实战

vivo互联网技术

Java Caffeine 本地缓存

用RabbitMQ了好几年之后,我总结出来5点RabbitMQ的使用心得

四猿外

MQ RabbitMQ 消息队列

产品训练营 第三次作业

Wangyunnfei

说说常常被研发忽略的原型模式

后台技术汇

28天写作 2月春节不断更

面向体验的视频云-火山引擎增长沙龙

面向体验的视频云-火山引擎增长沙龙

前端每周清单第 42 期:V8 的执行流与优化, Pinterest 的 PWA 实践, Rust 与 WebAssembly 应用_语言 & 开发_王下邀月熊_InfoQ精选文章