相关资源

网址

按理说这个是付费课，但在B站上看到了录播，所以大家可以直接看。

• 第一天。https://www.bilibili.com/video/BV18V411U76C
• 第二天。https://www.bilibili.com/video/BV1Nh411o7HK
• 第三天。https://www.bilibili.com/video/BV1Qi4y1g7eE
• 代码仓库。https://github.com/kkbjs/perf-workshop

视频

第一天：
点击查看【bilibili】
第二天：
点击查看【bilibili】

第三天：
点击查看【bilibili】

随堂笔记1

• 前端性能优化
  • 从输入url到页面展开发生了什么
  • 网络优化
  • 浏览器优化
• 前端性能监控
  • 指标分析
  • 关键性能指标
  • 数据上报
  • 性能分析工具
• 框架性能优化
  • vue react性能优化
  • webpack工程化性能优化
  • 长列表
  • 用户体验优化

输入url到页面渲染发生了什么，没啥意外的。感觉总是不大提及缓存。我有更详细的

如何优化：

• 文件加载的少，常规优化
  • 加速。缓存、cdn
  • 图片各种优化。可以参考 https://www.yuque.com/xinbao37/high_performance/about-images
  • 静态文件
  • 浏览器
  • 雅虎军规
• 代码执行的少
  • 节流防抖
  • 按需执行
  • 回流reflow 重绘。 详见 浏览器渲染页面
  • 框架优化

浏览器如何工作。 可详见 浏览器渲染页面

渲染模式。服务器渲染、spa、同构

常规优化，打基础

随堂笔记2

有点价值，碰到核心了

指标分析。 fp fcp fmp tti 等。详细讲了 fmp

工具中的 lighthouse + chrome devtools 浏览器自带的 lazyLoad

常规的Lighthouse建议。

以后和性能指标有关的，直接看规范 https://www.w3.org/TR/navigation-timing-2/

• performance.getEntriesByType(‘navigation’)[0]

有关 performance 的介绍，详见 漫谈performance

上报也是两种 ： new Image 和 navigator.sendBeacon

随堂笔记3

• fmp统计
• vue
• ract

fcp是一个很有意思的话题，没有统一的计算方式。

• 如果是自己的产品，可以直接给关键元素打点，也叫 hero element
• 还有 MutationObserver，这里不熟悉跳过了
• 趋势计算 dom变化趋势

Google里有关于性能优化的指导文档。 详见 Google教你做web优化

webpack优化这里，也就是 happyPack 多线程打包，加可视化分析，不太深入

感悟

不太系统，但了解了一些知识点，期待下次。