前端性能优化

前端性能优化方法：

1. 减少 HTTP 请求：减少页面加载时所需的资源数量，可以合并、压缩和缓存CSS、JavaScript文件，减少图片数量和大小，采用图标字体替代图片等方式来减少HTTP请求。

2. 压缩和缓存静态资源：使用压缩工具对CSS、JavaScript和HTML文件进行压缩，减小文件大小，加快下载速度。同时，利用浏览器缓存机制，设置适当的缓存头信息，使浏览器能够缓存资源，减少重复请求。

3. 使用CDN（内容分发网络）：将静态资源部署到全球各个节点的CDN服务器上，使用户能够从离其较近的节点获取资源，加速资源加载。

4. 延迟加载：延迟加载非关键资源，如图片、广告、社交嵌入等，直到用户滚动到这些元素附近再进行加载，以提高初次页面加载速度。

5. 图片优化：使用合适的图片格式（如JPEG、PNG、WebP）和适当的压缩程度来减小图片大小。可以使用矢量图形（如SVG）替代位图图像，减少文件大小并提高清晰度。

6. DOM 操作优化：减少不必要的 DOM 操作和重绘，避免频繁的查询和修改 DOM 元素，尽量利用批量操作或文档片段来减少性能消耗。

7. 使用合适的 CSS 和 JavaScript 技术：使用CSS Sprites来合并小图片，减少网络请求。合理使用缓存、异步加载、代码分割等技术来提高JavaScript执行效率和页面响应速度。

8. 响应式设计与移动优化：采用响应式布局，使网站能够在不同设备和屏幕尺寸下自适应地展示，并针对移动设备进行优化，例如使用更轻量级的样式和组件，避免不必要的资源加载。

9. 性能检测与监控：使用工具和服务对网站进行性能检测和性能监控，了解网站的加载速度、性能指标和用户体验情况，并根据结果进行优化调整。

10. 资源懒加载与资源预加载:资源延迟加载也称为懒加载，延迟加载资源或符合某些条件时才加载某些资源。资源预加载是提前加载用户所需的资源，保证良好的用户体验。

11. 避免使用空src或者href:空的src和href都会导致多余的HTTP请求，虽然不影响加载时间，但会对服务器产生不必要的流量和压力。浏览器仍然会向服务器发起一个HTTP请求。