高质量编程与性能调优实战：课程笔记

高质量编程与性能调优实战：课程笔记

---

一、性能优化的核心目标

性能优化的核心目标是提高系统响应速度、降低资源消耗，并在用户体验与系统可维护性之间找到平衡点。优化通常涵盖以下三个主要方面：

1. 图片优化

   • 减小图片体积以提升页面加载速度。
   • 使用现代图片格式（如 WebP、AVIF）。
   • 实现延迟加载（Lazy Loading）和 CDN 分发。

2. 前端资源优化

   • 减少 HTTP 请求数，提高静态资源的加载速度。
   • 通过代码压缩、合并，减少资源体积。
   • 使用 Tree Shaking 和代码分割（Code Splitting）。

3. 数据请求优化

   • 减少冗余请求，优化接口设计。
   • 缓存策略的合理应用。
   • 引入批量请求（Batch Request）和分页机制（Pagination）。

---

二、优化图片：实践与代码示例

1. 图片格式转换

   • 使用工具（如 imagemin 或 Sharp）将图片转换为高压缩比格式（如 WebP）。

   • 示例代码：

     const sharp = require('sharp');
     sharp('input.jpg')
       .toFormat('webp')
       .toFile('output.webp', (err, info) => {
         if (err) throw err;
         console.log('图片转换完成:', info);
       });
     

2. 图片延迟加载

   • 前端实现图片懒加载（Lazy Loading）。

   • 示例代码（HTML+JS）：

     <img data-src="image.webp" class="lazy-load" alt="example">
     <script>
       document.addEventListener('DOMContentLoaded', () => {
         const images = document.querySelectorAll('.lazy-load');
         images.forEach(img => {
           const observer = new IntersectionObserver(([entry]) => {
             if (entry.isIntersecting) {
               img.src = img.dataset.src;
               observer.unobserve(img);
             }
           });
           observer.observe(img);
         });
       });
     </script>
     

3. 使用 CDN 提供图片

   • 将静态图片资源存储在 CDN 上，实现就近分发。

   • 示例配置（Nginx 配置）：

     location /images/ {
         proxy_pass https://cdn.example.com/images/;
     }
     

---

三、前端资源优化：实战与工具使用

1. 资源压缩与代码分割

   • 使用工具（如 Webpack 或 Vite）压缩代码、分割模块。

   • 示例 Webpack 配置：

     module.exports = {
       optimization: {
         splitChunks: {
           chunks: 'all',
         },
         minimize: true,
       },
     };
     

2. Tree Shaking

   • 删除无用代码，减少最终打包体积。

   • 示例：

     • 导入所需模块，而非整个库：

       // 推荐：按需引入
       import debounce from 'lodash/debounce';
       

3. 静态资源缓存

   • 配置资源文件的缓存策略。

   • 示例配置（Nginx）：

     location ~* .(css|js|png|jpg|jpeg|gif|ico|webp)$ {
         expires 1y;
         add_header Cache-Control "public";
     }
     

---

四、数据请求优化：提升接口效率

1. 接口合并与批量请求

   • 合并多个接口请求，减少 HTTP 请求次数。

   • 示例代码（GraphQL 批量查询）：

     query {
       user {
         name
         email
       }
       posts {
         title
         content
       }
     }
     

2. 应用缓存

   • 使用浏览器缓存和服务器端缓存。

   • 示例（前端缓存数据）：

     const fetchData = async (url) => {
       const cache = sessionStorage.getItem(url);
       if (cache) {
         return JSON.parse(cache);
       }
       const response = await fetch(url);
       const data = await response.json();
       sessionStorage.setItem(url, JSON.stringify(data));
       return data;
     };
     

3. 接口分页与分片处理

   • 后端提供分页或数据分片功能。

   • 示例 SQL 查询：

     SELECT * FROM users LIMIT 10 OFFSET 0;
     

---

五、性能测试与分析

1. 图片优化测试

   • 工具：Lighthouse 或 PageSpeed Insights。
   • 测试指标：图片加载时间、资源体积减少比例。

2. 前端性能测试

   • 工具：Webpack Bundle Analyzer 检查打包文件的大小及模块依赖。

   • 示例运行命令：

     npm run build -- --analyze
     

3. 数据请求性能测试

   • 工具：Postman 或 JMeter。
   • 测试指标：接口响应时间、QPS（每秒查询数）。

---

六、总结与优化效果

通过对图片、前端资源和数据请求的优化，以下是实战后的常见效果：

1. 页面加载速度提升 30%-50%；
2. 静态资源体积减少 20%-70%；
3. 接口响应速度优化 10%-40%。

持续监测和迭代是性能优化的关键，需在项目不同阶段不断分析并改进。