• 前言
  • 案例集
  • 优秀网站
  • 反面教材
  • 技术资料
  • 掘金前端性能文集
    • 现代浏览器内部揭秘:第一部分
    • 现代浏览器内部揭秘:第二部分
    • 现代浏览器内部揭秘:第三部分
    • 现代浏览器内部揭秘:第四部分
    • 2018 前端性能优化清单 — 第 1 部分
    • 2018 前端性能优化清单 — 第 2 部分
    • 2018 前端性能优化清单 — 第 3 部分
    • 2018 前端性能优化清单 — 第 4 部分
    • 2019 前端性能优化年度总结 — 第一部分
    • 2019 前端性能优化年度总结 — 第二部分
    • 2019 前端性能优化年度总结 — 第三部分
    • 2019 前端性能优化年度总结 — 第四部分
    • 2019 前端性能优化年度总结 — 第五部分
    • 2019 前端性能优化年度总结 — 第六部分
    • JavaScript 是如何工作的:渲染引擎和性能优化技巧
    • JavaScript 是如何工作的:CSS 和 JS 动画背后的原理 + 如何优化性能
    • JavaScript 是如何工作的:深入网络层 + 如何优化性能和安全
    • JavaScript 启动性能探究
    • 通过 Lighthouse 了解 JavaScript 性能
    • 高性能 JavaScript 最佳实践
    • 使用多背景来提高感知性能
    • V8 性能优化杀手
    • 网络现状:性能提升指南
    • 性能指标都是些什么鬼?
    • 找出可能影响性能的代码模式
    • 重建 slack.com:使用 CSS Grid 重新设计,并针对性能和可访问性进行了优化。
    • Chrome DevTools - 性能监控
    • 现代浏览器是如何提升性能的:网络层
    • 保持 webpack 快速运行的诀窍:一本提高构建性能的现场指导手册
    • PWA 实战:Tinder 的性能优化之道
    • v3.1.0:大幅性能提升并支持流媒体服务端渲染
    • 做好准备:新的 V8 即将到来,Node.js 的性能正在改变。
    • 提高 10 倍性能:优化静态网站
    • 开启性能预算
    • Google 工程师提升网页性能的新策略:空闲到紧急
    • Netflix 的 Web 性能案例研究
    • 了解“多态”JSON 数据的性能问题
    • 看我如何把网站性能提升 422%
    • 前端开发 8 大性能分析工具
    • 前端应用的性能指标
    • 对产品经理而言的 Web 性能
    • 在 Node.js 中避免内存泄漏:性能最佳实践
    • 拖放库中 React 性能的优化
    • React 的内联函数和性能
    • React 实现条件渲染的多种方式和性能考量
    • 用 React 的钩子函数和调试工具提升应用性能
    • 如何使用 useRef 修复 React 性能问题
    • React 应用中 “神奇” 的多态—性能隐患
    • 针对 Airbnb 清单页的 React 性能优化
    • React 应用性能调优
    • 高性能 React:3 个新工具加速你的应用
    • Netflix: 使用 React 构建高性能的电视用户界面
    • 使用 React.js 的渐进式 Web 应用程序:第 2 部分 - 页面加载性能
    • React 应用的性能优化之路
    • 较为完整的 React.js / Vue.js 的性能比较 Part 1
    • 较为完整的 React.js / Vue.js 的性能比较 Part 2
  • 快速加载
    • —— 介绍 ——
    • 为什么速度很重要?
    • 速度是什么?
    • 如何测量速度?
    • 如何保持快速?
    • 使用 RAIL 模型衡量性能
    • —— 设置性能预算 ——
    • 性能预算基础
    • 你的第一个性能预算
    • Incorporate performance budgets into your build process
    • 使用 Lighthouse 制定性能预算
    • Using bundlesize with Travis CI
    • 使用 Lighthouse 机器人制定性能预算
    • 用 Lighthouse CI 监视性能
    • —— 优化图片 ——
    • 选择正确的图片格式
    • 选择正确的压缩级别
    • 使用 Imagemin 压缩图像
    • 用视频替换 GIF 动画以加快页面加载
    • 提供响应式图像
    • 提供尺寸正确的图像
    • 使用 WebP 图像
    • 使用图像 CDN 优化图像
    • —— 延迟加载图片和视频 ——
    • 使用延迟加载提高加载速度
    • 延迟加载图像
    • 延迟加载视频
    • 浏览器内置图像延迟加载
    • 使用 lazysizes 延迟加载图像
    • —— 优化 Javascript ——
    • 使用 PRPL 模式实现即时加载
    • 通过代码拆分减少 JavaScript 负载
    • 删除未使用的代码
    • 缩小和压缩网络有效负载
    • 为现代浏览器提供现代代码以加快页面加载速度
    • 发布、传输和安装现代 JavaScript 以实现更快的应用程序
    • CommonJS 如何让您的捆绑包变得更大
    • —— 优化资源交付 ——
    • 内容分发网络 (CDNs)
    • Prioritize resources
    • 预加载关键资产以提高加载速度
    • Establish network connections early to improve perceived page speed
    • Prefetch resources to speed up future navigations
    • 快速播放音频和视频预加载
    • —— 优化 CSS ——
    • 延迟加载非关键 CSS
    • 压缩 CSS
    • 提取关键 CSS (Critical CSS)
    • 使用媒体查询优化 CSS 背景图像
    • —— 优化第三方资源 ——
    • 第三方 JavaScript 性能
    • 识别慢速第三方 JavaScript
    • 高效加载第三方 JavaScript
    • —— 优化网络字体 ——
    • 在字体加载期间避免不可见的文本
    • 优化 WebFont 加载和呈现
    • 减小 WebFont 大小
    • —— 针对网络质量优化 ——
    • Adaptive serving based on network quality
    • —— 对性能进行实测 ——
    • Using the Chrome UX Report to look at performance in the field
    • 在 Data Studio 上使用 CrUX Dashboard
    • Using the Chrome UX Report on PageSpeed Insights
    • Using the Chrome UX Report on BigQuery
    • Using the Chrome UX Report API
    • —— 建立性能文化 ——
    • 速度的价值
    • 性能如何提高转化率?
    • 你应该测量什么来提高性能?
    • 如何报告指标和建立绩效文化
    • 跨功能修复网站速度
    • 关联网站速度和业务指标
  • Lighthouse 性能测评
    • 性能指标
    • 删除阻塞渲染的资源
    • Properly size images
    • Defer offscreen images
    • 压缩 CSS
    • 压缩 JavaScript
    • 删除未使用的 CSS
    • 对图像进行高效编码
    • Serve images in modern formats
    • 启用文本压缩
    • 预连接到所需的源
    • Reduce server response times (TTFB)
    • 避免多个页面重定向
    • Preload key requests
    • Use video formats for animated content
    • Reduce the impact of third-party code
    • 避免非合成动画
    • 使用 Facade (外观)延迟加载第三方资源
    • 避免巨大的网络有效负载
    • Serve static assets with an efficient cache policy
    • 避免 DOM 过大
    • 避免链接关键请求
    • User Timing marks and measures
    • 减少 JavaScript 执行时间
    • 最少化主线程工作
    • 确保字体文件加载时页面文字可见
    • Keep request counts low and transfer sizes small
  • Lighthouse 可访问性测评
  • Lighthouse 安全性测评
  • Lighthouse SEO 测评
  • 本书使用 GitBook 发布

掘金前端性能文集

  • 现代浏览器内部揭秘:第一部分
  • 现代浏览器内部揭秘:第二部分
  • 现代浏览器内部揭秘:第三部分
  • 现代浏览器内部揭秘:第四部分
  • 2018 前端性能优化清单 — 第 1 部分
  • 2018 前端性能优化清单 — 第 2 部分
  • 2018 前端性能优化清单 — 第 3 部分
  • 2018 前端性能优化清单 — 第 4 部分
  • 2019 前端性能优化年度总结 — 第一部分
  • 2019 前端性能优化年度总结 — 第二部分
  • 2019 前端性能优化年度总结 — 第三部分
  • 2019 前端性能优化年度总结 — 第四部分
  • 2019 前端性能优化年度总结 — 第五部分
  • 2019 前端性能优化年度总结 — 第六部分
  • JavaScript 是如何工作的:渲染引擎和性能优化技巧
  • JavaScript 是如何工作的:CSS 和 JS 动画背后的原理 + 如何优化性能
  • JavaScript 是如何工作的:深入网络层 + 如何优化性能和安全
  • JavaScript 启动性能探究
  • 通过 Lighthouse 了解 JavaScript 性能
  • 高性能 JavaScript 最佳实践
  • 使用多背景来提高感知性能
  • V8 性能优化杀手
  • 网络现状:性能提升指南
  • 性能指标都是些什么鬼?
  • 找出可能影响性能的代码模式
  • 重建 slack.com:使用 CSS Grid 重新设计,并针对性能和可访问性进行了优化。
  • Chrome DevTools - 性能监控
  • 现代浏览器是如何提升性能的:网络层
  • 保持 webpack 快速运行的诀窍:一本提高构建性能的现场指导手册
  • PWA 实战:Tinder 的性能优化之道
  • v3.1.0:大幅性能提升并支持流媒体服务端渲染
  • 做好准备:新的 V8 即将到来,Node.js 的性能正在改变。
  • 提高 10 倍性能:优化静态网站
  • 开启性能预算
  • Google 工程师提升网页性能的新策略:空闲到紧急
  • Netflix 的 Web 性能案例研究
  • 了解“多态”JSON 数据的性能问题
  • 看我如何把网站性能提升 422%
  • 前端开发 8 大性能分析工具
  • 前端应用的性能指标
  • 对产品经理而言的 Web 性能
  • 在 Node.js 中避免内存泄漏:性能最佳实践
  • 拖放库中 React 性能的优化
  • React 的内联函数和性能
  • React 实现条件渲染的多种方式和性能考量
  • 用 React 的钩子函数和调试工具提升应用性能
  • 如何使用 useRef 修复 React 性能问题
  • React 应用中 “神奇” 的多态—性能隐患
  • 针对 Airbnb 清单页的 React 性能优化
  • React 应用性能调优
  • 高性能 React:3 个新工具加速你的应用
  • Netflix: 使用 React 构建高性能的电视用户界面
  • 使用 React.js 的渐进式 Web 应用程序:第 2 部分 - 页面加载性能
  • React 应用的性能优化之路
  • 较为完整的 React.js / Vue.js 的性能比较 Part 1
  • 较为完整的 React.js / Vue.js 的性能比较 Part 2