10
头图

web_dev_hero_image

如果你喜欢我的文章,希望点赞👍 收藏 📁 评论 💬 三连支持一下,谢谢你,这对我真的很重要!

最近在做 web 性能优化的工作,所以想集中学习了解一下相关的专题内容。这部分内容肯定要学习一手信息,所以找先找了 https://web.dev/,一个 Google 官方推出的一个面向 Web 开发者的网站,里面有非常多的教程和最佳实践,非常适合有性能优化诉求的开发者去浏览和学习。

网站的核心部分分为 4 类:

  • Learn:体系化的教程,例如性能优化和 PWA
  • Measure:就是一个在线版本的 Lighthouse,和 Chrome DevTools 的 Performance 功能一致
  • Case Study:优化案例(商业互吹),内容一般为采用 X 优化带来数据 Y 的提升最终带来 Z 的商业增长
  • Blog:内容较杂,优化教程/API 解读/优化案例等等都有涉及

从上面的结构可以看出,Lean/Measure/CaseStudy 这三个章节内容都是比较体系化的,但是 Blog 内容却没有一个很好的分类。以我的阅读经验,Blog 里有一些非常好的文章,所以我很好奇 Blog 章节里有多少好东西可供挖掘,于是上个月的时候花了一些时间,把所有的 Blog 读了一遍,并以自己的认知对内容做了分析和总结,以便自己后续回顾与搜索。

<!--truncate-->

内容分类:

截止到目前为止(2022-7-7),web.dev 一共发布了 631 篇 blog,从 blog 的内容和发布时间可以很明显的看出 google 官方的发力(营销)方向,比如说前几年在推 PWA,这两年在推 Web Vitals。纵观下来,Blog 的内容可以分为以下几类

  • 性能指标:例如 Web Vitals,FMP,TTI 这些概念和相对应的优化策略
  • 优化策略:例如对网络的优化,对图片/字体/CSS/JS 的优化
  • UI/UX:这部分内容偏向于实战和设计,最终会产出一些 UI Component
  • Web 特性:例如 Web Worker,WebXR,Wasm 等功能的介绍和教程
  • 提案/API:主要是对一些提案的实现和现代浏览器 API 的介绍,内容偏向于文档,对开发者来说距离较远
  • 商业案例:其实就是 Case Study 章节的内容,只不过这部分内容也收录在 Blog 里

1.性能指标

种类篇数时间跨度
性能指标/优化/监控34主要为 2018 - 2022

性能指标绝对是 Google/Chrome 这两年首推的内容了,从 2018 年到 2022,4 年的时间里就推出了 34 篇文章,最近两年的商业案例也基本都是「优化 Web Vitals 指标带来商业收益的」的套路。文章整体的质量都不错,从原因到解决方案到具体用例都有涉及。

2.优化策略

种类篇数时间跨度
网络优化46主要为 2018 - 2022
渲染28主要为 2013 - 2015,2018 做了相关修订
图片优化13主要为 2019
JS/JS 框架15主要为 2020 - 2021
font82020 - 2021

从文章比例上就可以看出,Web 非常关注网络资源的优化,这是 Web 的优点也是 Web 的痛点,JS 运行的再快也扛不住一次网络异常,所以网络优化的内容非常多。

渲染优化的文章主要集中到 13-15 年,最近几年很少说了,这个和历史发展潮流也差不多,13-15 年属于移动互联网高速发展时期,Native 开发还是如日中天,Web 在渲染性能上确实不如 Native,现如今随着内核的发展以及终端机性能的提升,渲染基本上已经不是性能瓶颈了,而且浏览器渲染模块对于 Web 开发者来说也很难去介入,所以内容较少也在情理之中。

JS 优化内容也比较少,一是对于大部分场景来说开发者还没有到优化 JS 解决性能瓶颈,二是很多 JS 优化的内容都搬到 https://v8.dev/blog 了,所以只有几篇早期的文章;JS 框架层的优化最近有一些,例如和 nextjs,react 的合作之类的。

图片视频字体的优化都属于资源优化,内容也不错,可以一起看看单项突破。

3.UI/UX

种类篇数时间跨度
CSS新特性/新属性27主要为 2019 - 2020
UI 组件/设计12主要为 2021
交互152019 - 2021

CSS 主要介绍的是一些 CSS新特性新属性,还有一些关于 CSS 的使用/优化文章。

UI 是最近有些 blog 写了些 UI 组件,感觉内容也可以学习一下。UX 内容就比较杂了,涉及到交互效果,可访问性等内容,相对来说这个分类里跨学科内容多一些。

4.Web 特性

种类篇数时间跨度
Web Worker/Service Worker22主要为 2020
PWA16主要为 2019 - 2020
浏览器182018-2021
安全10主要为 2020 - 2021
WebGL/WebGPU62012
WebXR102017、2020
Wasm82018 - 2021
Web Component132016、2017

PWA 在前几年 Google 一直在推,但在国内其实一直不温不火的,大公司都有自己的 Hybrid H5 方案,小公司基本都去做小程序开发了;国外看似好一些,但做的最好的 twitter PWA,但我深度体验一年后,发现和 Native 应用比差距还是很大,这已经算全世界做的最好的 PWA APP 了,由此可见 PWA 推广道路之艰辛。不过 PWA 还是有很多值得学习参考的知识点的,还是有必要学习一下的。

Web Worker/Service Worker 加起来也有 22 篇文章,Web Worker 主要用来分散主线程的计算任务,Service Worker 主要起 Web Network 拦截器的作用(从效果上其实也可以归类到网络性能优化里),内容也是值得学习的。

浏览器分类主要是一些我不知道怎么分类的浏览器特性,比如说 BFCache,Web 存储方案介绍等等,内容相对较杂。

剩下的内容其实都比较散:

  • WebGL/WebGPU 的内容不多,而且成文时间也很早,而且 Web 3D 虽然依托于浏览器平台,但实际上和传统的 Web 开发完全是两回事,所以内容少也可以理解
  • WebXR 内容也很少,主要还是功能介绍
  • Wasm 内容也较少,主要是入门教程
  • 安全领域主要是对一些安全特性/安全 API 做的介绍
  • Web Component 有几篇很不错的系列教程可以当入门文章看

其实这些功能都属于叫好不叫座的状态,它们都大大提高了 Web 的上限,但是现实是没有几家公司需要突破传统 Web 的上限,大家其实都遵循一个原则——能跑就行

5.提案/API

种类篇数时间跨度
提案/实验性功能/新 API42主要为 2019-2022

这部分内容对于普通开发者来说其实不是很必要。一是提案/实验性功能/新 API都比较新,有兼容性问题,一般很难在项目中落地;二是在现实场景里,基本上很少有需求需要用到 Web 的 File API/Bluetooth API 等功能,一般这些场景都是遇到再看,所以这部分内容其实只要知道有就可以,要用到再看细节也不迟。

Blog 链接

这部分内容是整理出的 Blog 内容,我对其标注了发布时间和文件标题,并对一些内容做了简评,方便后续搜索和查看。

Web Vitals

网络

渲染

下面的文章其实都是 15 年写的,18 年修订的:https://web.dev/authors/paull...

图片

字体

JS/框架

CSS

UI

交互

Web Worker/Service Worker

PWA

安全

浏览器

WebGL/WebGPU

WebXR

WebAssembly

Web Component

提案/实验性功能/新 API


如果你喜欢我的文章,希望点赞👍 收藏 📁 评论 💬 三连支持一下,谢谢你,这对我真的很重要!

欢迎大家关注我的微信公众号:卤蛋实验室,目前专注前端技术,对图形学也有一些微小研究。

原文链接 👉 web-dev-blog:更新更及时,阅读体验更佳


卤代烃
1.6k 声望5.9k 粉丝