前端性能优化指南[4]--Web 性能优化历史

前端性能优化指南[4]--Web 性能优化历史

技术杂谈小彩虹2021-08-23 6:03:49220A+A-

这是本系列第 4 篇, 下一篇:W3C 与 Web 性能工作组

在互联网发展过程中,积累了很多有关 Web 性能优化的技术和实践。了解性能优化的历史,可以帮助我们理解性能优化技术的发展,关注技术发展趋势,可以更好的掌握最新技术。

在了解这些历史的同时,需要知道,对于每种优化技术,都有其限制条件和适用场景。

性能优化方案


早在 2007 年,雅虎提出了 35 条前端性能优化规则,并基于其中 23 条可测试规则推出性能优化工具 YSlow

2010 年,Facebook 研究科学家 Changhao Jiang 提出 BigPipe 技术,通过让浏览器与服务器并行工作来降低加载时间。

2014 年,谷歌推出了 Web 开发最佳实践手册,其中包含了很多性能优化建议,并推出优化工具 PageSpeed Insights。至今已更新多个版本。

2017 年,Google 为提升移动设备对网站的访问速度正式推出 AMP(Accelerated Mobile Pages)技术,百度也相继推出类似项目 MIP(Mobile Instant Pages) 。这种技术能够为移动页面降低加载时间,有利于移动 SEO。但由于限制了很多编码规则,仅适用于没有复杂交互的静态页面,如新闻网页等。

同年,PWA(Progressive Web App) 被迅速采用。PWA 是 Google 于 2016 年提出的概念, 旨在增强 Web 体验,可显著提高加载速度、可离线工作、可被添加至主屏、全屏执行、推送通知消息等等。这些特性将使得 Web 应用渐进式接近原生 App。使用 Lighthouse 可以对 PWA 应用进行测试。

2018 年 12 月, 谷歌开源 quicklink。其原理是在浏览器空闲时(requestIdleCallback) 获取视口内所有的 a 标签并用 IntersectionObserver 对象观察所有 a 标签,当 a 标签进入视口时,执行回调,在回调中预加载 a 标签的 href 属性指定的资源。

性能标准的发展


在这些性能优化方案被提出实现的过程中, Web 性能标准也在不断发展,很多优化方案和性能衡量标准来源于 Web 性能标准。

因此, 在关注性能优化技术发展的同时,我们还应该关注  Web 性能标准的发展,因为 Web 性能标准为我们定义了浏览器开发商实现的统一的性能度量标准、性能数据采集的 API 以及一些浏览器支持的性能优化方案。

早在 1994 年, World Wide Web Consortium (W3C) 组织成立,是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。

2010 年 8 月,W3C 成立了 Web 性能工作组,由来自 Google 和 Microsoft 的工程师担任主席,目标是制定衡量 Web 应用性能的方法和 API。

随后, Web 性能工作组制定了一系列 Web 性能标准,各大浏览器也开始实现了这些标准。下面我们来看看这些标准的发展进程。


小结

现在我们知道了,人们从 2010 年就开始重视 Web 性能优化这件事了,两次重大更新时间是在 2011 年前后和 2016 年前后。

随着标准的建立和不断完善,在 Web 性能标准发展的历程中,也涌现了很多性能优化的方案和最佳实践。

你可能会发现,在 Web 性能优化领域,Google 一直在致力于提出新的优化方案,建立了 Web 性能度量模型,并建立了完善的性能优化文档,谷歌推出的 Web 开发最佳实践手册 也经常出现在我们的视野中。

其实,这与 Google 的开发人员参与和主导 Web 性能标准的制定有很大关系。你会发现,大部分的 Web 性能标准都由 Google 的开发人员编写,其中 Ilya Grigorik 参与了大部分文档的编写。如果你想关注 Web 性能领域的发展,可以关注这些人的动态。

Ilya Grigorik is a web performance engineer, author of High Performance Browser Networking (O'Reilly), and Director of Developer Relations at Google. Currently on a mission to build a thriving ecosystem of fast, secure, and engaging content on the open web.

正如前面所列举的,Web 性能实践与标准相辅相成,相互推进发展。那么你是否了解过这些 Web 性能标准都定义了什么内容呢?我将在下一章节为您详细介绍。

思考


你知道国内有哪些公司参与了 Web 性能标准的制定吗?欢迎大家在评论区讨论。


系列篇

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们