高质量编程与性能调优实战：包括图片优化、前端资源优化、数据请求优化等，通过实战和测试，分析和优化任意项目中存在的性能问题
1. 图片优化
1.1 动态裁剪与响应式加载
使用 HTML 的 srcset 和 sizes 属性动态加载不同分辨率的图片。
html
复制代码
<img
src="default.jpg"
srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 1920w"
sizes="(max-width: 480px) 480px,
(max-width: 1024px) 1024px,
1920px"
alt="Responsive Image">
1.2 使用现代格式 (WebP/AVIF)
javascript
复制代码
function supportsWebP() {
const canvas = document.createElement('canvas');
return canvas.getContext && canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0;
}
if (supportsWebP()) {
document.querySelector('img').src = 'image.webp';
} else {
document.querySelector('img').src = 'image.jpg';
}
1.3 图片压缩工具
使用 sharp 压缩图片：
javascript
复制代码
const sharp = require('sharp');
sharp('input.jpg')
.resize(800) // 调整宽度为 800 像素
.toFormat('webp')
.toFile('output.webp', (err, info) => {
if (err) console.error(err);
else console.log('Image optimized:', info);
});
2. 前端资源优化
2.1 代码分割与按需加载
使用 Webpack 的动态导入实现按需加载模块：
// 主代码
import(/* webpackChunkName: "dashboard" */ './dashboard').then(module => {
const dashboard = module.default;
dashboard.init();
});
2.2 启用 Brotli 压缩
在服务器配置 Brotli 压缩以减少静态资源体积。例如，Nginx 配置：
gzip on;
gzip_proxied any;
gzip_types text/plain text/css application/json application/javascript;
gzip_vary on;
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/json application/javascript;
2.3 使用 Service Worker 缓存资源
通过 Service Worker 实现缓存：
self.addEventListener('install', event => {
event.waitUntil(
caches.open('static-v1').then(cache => {
return cache.addAll([
'/',
'/styles.css',
'/script.js',
'/image.jpg'
]);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
3. 数据请求优化
3.1 GraphQL 示例
通过 GraphQL 合并请求，只发送一次 API 调用获取所有需要的数据：
query GetProducts {
products {
id
name
price
}
categories {
id
name
}
}
在前端调用：
fetch('/graphql', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query: `
query {
products { id name price }
categories { id name }
}
` })
})
.then(response => response.json())
.then(data => console.log(data));
3.2 延迟加载与分页
实现滚动分页加载：
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
loadMoreData();
}
});
function loadMoreData() {
fetch('/api/products?page=2')
.then(res => res.json())
.then(data => {
data.forEach(product => {
const item = document.createElement('div');
item.textContent = product.name;
document.body.appendChild(item);
});
});
}
4. 实战案例
4.1 电商首页性能优化
原始问题：
- 首页加载时间超过 5 秒。
- 图片体积过大，JS 文件超过 1 MB。
优化步骤：
- 图片优化：使用
srcset和 WebP 格式压缩图片，减少 70% 的图片大小。 - 代码拆分：将首页拆成首屏模块和非首屏模块，使用动态加载非首屏代码。
- 浏览器缓存：设置
Cache-Control缓存策略，减少重复请求。
location ~* .(js|css|png|jpg|jpeg|gif|ico|woff|woff2|ttf|svg|eot|webp)$ {
expires 1y;
access_log off;
}
4.2 数据可视化性能优化
原始问题：
- 数据量 100,000 条，图表加载时间超过 10 秒。
- 用户交互卡顿严重。
优化步骤：
- 数据分页：每次只加载当前视图需要的数据。
- 分离计算线程：使用 Web Worker 将数据计算与 UI 渲染分开。
- 启用 WebGL：对图表渲染改用 WebGL 提升渲染速度。
使用 Web Worker：
const worker = new Worker('worker.js');
worker.postMessage(largeData);
worker.onmessage = event => {
renderChart(event.data);
};
// worker.js
self.onmessage = event => {
const processedData = processData(event.data);
self.postMessage(processedData);
};
5. 测试优化效果
5.1 使用 Lighthouse
运行 Lighthouse，分析以下关键指标：
- LCP（最大内容渲染时间） ：目标小于 2.5 秒。
- CLS（累积布局偏移） ：目标小于 0.1。
5.2 WebPageTest 示例
在 WebPageTest 上监控关键路径的文件加载时间，确定优化是否生效。
通过结合图片优化、资源压缩、数据请求优化和实际案例的调整，项目性能可以显著提升，并在多种环境中达到最佳效果。希望这些内容对实际开发有帮助！
