下面列举一些常见的前端性能优化方法：
1. 压缩代码
• JavaScript 代码压缩：去除空格、注释，缩短变量名等，例如使用 UglifyJS 或 Terser 工具。
• CSS 代码压缩：类似 JavaScript 压缩，去除不必要的空格和注释。
2. 图片优化
• 选择合适的图片格式：例如，对于简单的图形或图标使用 SVG 格式，对于照片使用 JPEG 或 WebP 格式。
• 压缩图片：使用工具如 TinyPNG 或 ImageOptim 来减小图片文件大小。
• 懒加载图片：当图片出现在视口内时再加载，提高初始页面加载速度。
示例代码（使用 Intersection Observer 实现图片懒加载）：
function lazyLoadImages() {
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
const images = document.querySelectorAll('img[data-src]');
images.forEach(image => observer.observe(image));
}
3. 缓存策略
• 设置 HTTP 缓存头：通过服务器配置，为静态资源设置合理的缓存时间，如 Cache-Control 和 Expires 头。
• 利用浏览器缓存：使用 Service Workers 实现离线缓存和更新控制。
4. 减少 HTTP 请求
• 合并 CSS 和 JavaScript 文件：减少文件数量。
• 使用 CSS Sprites：将多个小图标合并为一张大图，减少图片请求。
5. 优化页面加载顺序
• 将关键 CSS 内联在 中，以避免页面内容的闪屏。
• 异步加载非关键的 JavaScript 脚本，例如使用 defer 或 async 属性。
6. 前端框架优化
• 如果使用框架，如 Vue 或 React，合理使用虚拟 DOM 的更新机制，避免不必要的重新渲染。
7. 代码分割
• 对于大型应用，将代码分割成多个小块，按需加载，例如使用 Webpack 的代码分割功能。
8. 减少 DOM 操作
• 避免频繁的 DOM 读写操作，尽量批量处理。
