web-performance-optimization
web-performance-optimization copied to clipboard
hzuhyb
Web 性能优化
在这里记录了自己做的一些性能优化工作。
:closed_book: 关于性能优化的关键词
性能优化的工具
Chrome DevTool、火焰图、瀑布流、时间轴、Fiddle抓包、Charles、AB 工具、网速设置工具
性能优化的网络优化
DNS-Prefetch、preload、preRender、TTL、TTFB、GZip、307 状态码
页面的优化
资源的压缩、打包、内敛，模块的懒加载、懒执行、懒渲染
代码层面的优化
重绘、回流、FPS、节流、去抖、去定时器、事件代理
:closed_book: 使用第三方网站获取性能测试报告
:closed_book: 学会用Chrome DevTools收集性能指标
- Chrome开发者工具详解系列
- Chrome DevTools — Network
- Chrome DevTools 之 Network
- Chrome DevTools 之 Timeline
- Chrome DevTools 之 Profiles
:closed_book: 了解内存泄漏
- JavaScript闭包与内存泄露
- JavaScript垃圾收集机制
- 搞定JavaScript内存泄漏
- JavaScript常见的内存泄漏原因
- 关于dom清空的内存泄漏问题
- 4类 JavaScript 内存泄漏及如何避免
- 使用 Chrome Timeline 来优化页面性能
- 单页面应用下的JS内存管理
- 单页面应用下的JS内存管理实战
- JS内存泄漏排查方法-Chrome Profiles
- 深入理解Node.js垃圾回收与内存管理
:closed_book: 知道浏览器的工作原理以及渲染过程
:closed_book: 性能优化的网络优化
:closed_book: 首屏优化
- 深入研究Chrome：Preload与Prefetch原理，及其优先级
- 手Q Hybrid App优化之路
- 移动端首屏白屏的解决方案
- 移动Web首屏优化实践
- Web性能优化之 “直出” 理论与实践总结
- 淘宝首页性能优化实践
:closed_book: 代码层面上优化
:book: JS优化
:book: DOM优化
:book: 动画优化
- 说说动画卡顿的解决方案
- CSS3 3D 行星运转动画 + 浏览器渲染原理
- 页面滚动FPS较低的解决方案
hzuhyb