前端性能优化（笔记）

前端优化的手段有哪些？

1. 减少 HTTP 请求次数：将多个文件合并成一个文件，使用 CSS Sprites 和 Icon Fonts 减少图片请求，使用数据缓存等。

2. 压缩文件大小：使用 Gzip 压缩 HTML、CSS、JavaScript 和图片等文件，以减少文件大小，从而提高页面加载速度。

3. 使用 CDN：使用 CDN（内容分发网络）可以将静态资源分布到全球多个节点，从而加速静态资源的加载速度。

4. 使用缓存：使用浏览器缓存和服务器缓存来缓存静态资源和数据，减少网络请求和响应时间。

5. 减少 DOM 操作：减少 DOM 操作的次数和复杂度，使用事件委托等技术，优化页面渲染性能。

6. 减少重绘和回流：减少页面元素的重绘和回流次数，使用 CSS 动画代替 JavaScript 动画，使用 transform 和 opacity 属性代替 position 和 display 属性等，以减少页面渲染时间和提高响应速度。

7. 使用异步加载：使用异步加载技术，例如使用 defer 或 async 属性加载 JavaScript 文件，使用动态加载技术，例如 AJAX 和 JSONP 等，以提高页面加载速度和响应速度。

8. 优化图片：使用合适的图片格式，例如 JPEG、PNG、WebP 等，以减少图片大小和加载时间，使用懒加载和预加载技术，以提高图片加载速度。

9. 优化代码：优化 JavaScript 代码，例如使用合适的数据结构和算法，避免不必要的计算和操作，优化 CSS 代码，例如使用最小化 CSS 和避免使用不必要的样式等，以提高代码性能和执行效率。

10. 避免阻塞：避免使用同步 JavaScript 代码和样式文件，避免 JavaScript 和 CSS 阻塞页面渲染，避免阻塞 JavaScript 代码和 DOM 操作等，以提高页面加载速度和响应速度。

11、节流、防抖、分包、路由懒加载等。