在这里记录了自己做的一些性能优化工作。

📕 关于性能优化的关键词

性能优化的工具

Chrome DevTool、火焰图、瀑布流、时间轴、Fiddle抓包、Charles、AB 工具、网速设置工具

性能优化的网络优化

DNS-Prefetch、preload、preRender、TTL、TTFB、GZip、307 状态码

页面的优化

资源的压缩、打包、内敛，模块的懒加载、懒执行、懒渲染

代码层面的优化

重绘、回流、FPS、节流、去抖、去定时器、事件代理

📕 使用第三方网站获取性能测试报告

• PageSpeed Insights
• GTmetrix
• WebPagetest

📕 学会用Chrome DevTools收集性能指标

• Chrome开发者工具详解系列
• Chrome DevTools — Network
• Chrome DevTools 之 Network
• Chrome DevTools 之 Timeline
• Chrome DevTools 之 Profiles

📕 了解内存泄漏

• JavaScript闭包与内存泄露
• JavaScript垃圾收集机制
• 搞定JavaScript内存泄漏
• JavaScript常见的内存泄漏原因
• 关于dom清空的内存泄漏问题
• 4类 JavaScript 内存泄漏及如何避免
• 使用 Chrome Timeline 来优化页面性能
• 单页面应用下的JS内存管理
• 单页面应用下的JS内存管理实战
• JS内存泄漏排查方法-Chrome Profiles
• 深入理解Node.js垃圾回收与内存管理

📕 知道浏览器的工作原理以及渲染过程

• 浏览器的工作原理：新式网络浏览器幕后揭秘（上）
• 浏览器的工作原理：新式网络浏览器幕后揭秘（中）
• 浏览器的工作原理：新式网络浏览器幕后揭秘（下）
• 深度剖析浏览器渲染性能原理，你到底知道多少？

📕 性能优化的网络优化

• 【前端性能】浅谈域名发散与域名收敛
• 移动Web首屏优化实践

📕 首屏优化

• 深入研究Chrome：Preload与Prefetch原理，及其优先级
• 手Q Hybrid App优化之路
• 移动端首屏白屏的解决方案
• 移动Web首屏优化实践
• Web性能优化之 “直出” 理论与实践总结
• 淘宝首页性能优化实践

📕 代码层面上优化

📖 JS优化

• 【译】编写高性能JavaScript
• 浅谈函数节流
• JavaScript 启动性能探究

📖 DOM优化

• 高频dom操作和页面性能优化探索
• DOM的操作与性能

📖 动画优化

• 说说动画卡顿的解决方案
• CSS3 3D 行星运转动画 + 浏览器渲染原理
• 页面滚动FPS较低的解决方案

📖 滚动优化

• 移动web之滚动篇
• 高性能滚动 scroll 及页面渲染优化
• 手Q Hybrid App优化之路
• 开发眼中的交互优化
• 如何不择手段提升scroll事件的性能

📕 底层上优化

📖 浏览器对代码做的一些优化

• V8引擎深入研究目录贴
• WebRender：让网页渲染如丝顺滑

📖 JS与Native交互时相互通信的成本问题

• ReactNative安卓首屏白屏优化
• React Native Android白屏优化终极方案

📕 自动化的性能监控方案

📕 框架的性能优化（Nuxt.js|Vue.js|React|React Native）

• webpack splitChunks的功能在nuxt2中的应用

📕 泛谈性能优化

• 前端性能优化
• 性能专栏（Performance Column）
• 前端细节优化

📖 H5

• 手Q Hybrid App优化之路
• 移动Web首屏优化实践
• 移动 WEB 通用优化策略介绍
• WebView性能、体验分析与优化

📖 PC

• 如何让博客速度快到哭

📕 优化方案

• AMP，来自 Google 的移动页面优化方案
• MIP

📕 其它

• Google开发者官网-web