飞天发布时刻:2024年 Forrester 公有云平台Wave™评估报告解读 了解详情
写点什么

前端每周清单第 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:002645
用户头像

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

关注

评论

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

架构师书籍推荐:2021年必看的架构师图书

华章IT

架构师

干掉 XML Mapper,新出的 Fluent Mybatis 真香

AI乔治

Java sql 架构 mybatis

能耗能源管控平台开发,能源管理云平台搭建

电微13828808271

React性能优化

CRMEB

springboot连接Nexus私服

小鲍侃java

11月日更

互联网+质量基础设施服务平台,NQI一站式线上平台开发

电微13828808271

12.04 深圳站 | Serverless Developer Meetup 开放报名啦!

阿里巴巴云原生

阿里云 Serverless 云原生 深圳 线下活动

阿里P8手敲出来这份565页凤凰架构分布式手册,惨遭GitHub直接封杀

热爱java的分享家

Java 面试 编程语言 经验分享 凤凰架构

模块四课后作业 - 设计千万级学生管理系统的考试试卷存储方案

渐行渐远

架构实战营

如何使用FL Studio效果器制作镶边音效

懒得勤快

主客体命名法

少个分号

一文解析数据库的三生三世

Zilliz

数据库 oracle 数据库设计 Milvus

修复SecurityException: getDataNetworkTypeForSubscriber问题

Changing Lin

11月日更

关于风险管理,如何将思维从项目升维到项目群?

光环PMO社群

项目管理 项目经验

Python Qt GUI设计:QLineEdit和QTextEdit文本框类(基础篇—13)

不脱发的程序猿

PyQt GUI设计 Python Qt QLineEdit QTextEdit

【语言】Java 日期 API 的使用技巧

恒生LIGHT云社区

Java 编程语言

ICCV 2021口罩人物身份鉴别全球挑战赛冠军方案分享

阿里云CloudImagine

阿里云 计算机视觉 视频云 ICCV2021 ICCV

使用命令模式重构播放器控制条

Tom弹架构

Java 架构 设计模式

使用 Resilience4j 框架实现重试机制

码语者

Java 重试机制 Reslience4j

渗透实战:内网域渗透

网络安全学海

网络安全 信息安全 渗透测试 WEB安全 安全漏洞

云账户是什么意思?有什么用?

行云管家

云计算 公有云 私有云 混合云 云资源

盲盒开发

90后女博士谈反内卷,称科研不应攀比论文数,“唯论文论”何时休?

百度开发者中心

开发者 内卷化

啥是ElasticSearch全流程,看这篇我也懂了

热爱java的分享家

Java 程序人生 编程语言 经验分享 ES

等级保护对象是指什么?是指整个单位吗?

行云管家

云计算 网络安全 等保 等级保护 等保2.0

ArkUI 3.0让多设备开发更简单|HDC2021技术分论坛

HarmonyOS开发者

HarmonyOS

CODING 项目协同 2.0 —— 让协作有条不紊

CODING DevOps

DevOps 研发管理 CODING 项目协同

黄峥、张一鸣、李斌都曾上榜!100个未来独角兽:超越估值看见星辰大海

创业邦

CSS布局(二)之多列布局

Augus

CSS 11月日更

.Net6 miniAPI JWT鉴权授权的多种实现

面向对象的猫

netcore NET6

赋能“数字金融”,CODING 再下数城

CODING DevOps

研发管理 数字化转型 CI/CD 代码管理 可视化软件

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