高质量编程与性能调优实战笔记高质量编程与性能调优实战笔记一、引言性能对于一个项目至关重要，无论是用户体验还是系统资源

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

性能对于一个项目至关重要，无论是用户体验还是系统资源的有效利用。本次学习聚焦于图片优化、前端资源优化和数据请求优化等关键方面，并通过实战和测试来分析和优化项目中的性能问题。

使用工具
可以利用在线工具（如 TinyPNG）或本地的图像编辑软件（如 Photoshop）的 “存储为 web 所用格式” 功能。这些方法可以在不显著降低图片质量的前提下减小图片文件大小。
选择合适的格式
对于简单的图标和线条图形，SVG 格式是最佳选择，因为它是矢量图形，文件大小小且可无限缩放。对于照片和色彩丰富的图像，JPEG 在适当压缩质量下能平衡质量和大小。而 PNG 则适用于需要透明背景的图像。

在网页中，当页面较长且包含大量图片时，使用懒加载技术。例如，通过 JavaScript 的 Intersection Observer API 实现。当图片进入浏览器的可视区域时才加载，这样可以减少页面初始加载时间和资源占用，提高页面渲染速度。

根据不同的设备屏幕尺寸和分辨率提供不同尺寸的图片。使用 HTML 的<picture>元素和srcset属性，浏览器可以根据设备特性自动选择最合适的图片版本，避免在小屏幕设备上加载过大的图片资源。

压缩
利用工具（如 UglifyJS 压缩 JavaScript、CSSNano 压缩 CSS）去除代码中的空格、注释和不必要的字符。这可以大大减少文件大小，加快下载速度。
合并
将多个小的 CSS 和 JavaScript 文件合并成一个文件。减少浏览器对文件的请求次数，因为每次请求都有一定的开销（如建立连接时间等）。

对于不是页面初始渲染必需的 JavaScript 脚本，可以使用async或defer属性。async属性使得脚本在下载完成后立即执行，不会阻塞页面解析，但执行顺序不确定。defer属性则保证脚本在文档解析完成后按顺序执行，这样可以避免脚本阻塞页面渲染，提高页面加载速度。

通过合理设置 HTTP 缓存头（如Cache - Control和Expires），让浏览器缓存静态资源。当用户再次访问页面时，浏览器可以直接从缓存中获取资源，而无需重新下载，从而减少加载时间。对于经常更新的资源，可以使用版本号或哈希值来更新文件名，使浏览器重新获取新的资源。

批量请求
如果有多个相关的数据请求，可以将它们合并成一个批量请求。例如，在后端提供一个接口，接收多个参数，一次性获取所需的所有数据，而不是多次单独请求。
数据预取和缓存
对于一些常用的数据或者用户可能接下来要访问的数据，可以在后台提前获取并缓存起来。例如，在用户浏览商品列表时，可以预取商品详情页的数据，当用户点击进入详情页时，可以更快地展示内容。

对于有依赖关系的请求，合理安排请求顺序。例如，先请求页面布局所需的基本数据，再请求依赖于这些数据的其他数据。可以使用 Promise 或 async/await 等异步编程技术来更好地控制请求顺序。

对于大量数据的传输，选择合适的格式很重要。如 JSON 比 XML 更轻量，解析速度更快。对于特定类型的数据，也可以考虑使用二进制格式（如 Protocol Buffers），它可以进一步减小数据传输大小和提高解析效率。

选择一个现有的有性能问题的项目，比如一个加载缓慢的网页应用。这个应用可能包含大量图片、复杂的前端脚本和频繁的数据请求。

浏览器开发者工具
利用 Chrome 或 Firefox 等浏览器自带的开发者工具。在 Network 面板中可以查看资源加载时间、请求次数等信息。Performance 面板可以记录页面的性能指标，如首次绘制时间（FP）、首次内容绘制时间（FCP）、可交互时间（TTI）等。
第三方工具
如 Lighthouse 可以对网页进行全面的性能、可访问性、最佳实践等方面的评估，并给出详细的报告和改进建议。

根据测试工具得到的数据，分析出性能瓶颈所在。例如，如果发现图片加载时间过长，可能是没有进行压缩或懒加载；如果前端脚本加载导致页面阻塞，可能是没有异步加载或文件没有压缩合并；如果数据请求缓慢，可能是请求次数过多或者没有优化请求顺序。

按照前面提到的优化方法，对项目进行逐步优化。每实施一项优化后，重新进行性能测试，观察性能指标的变化，确保优化措施有效且没有引入新的问题。

在完成所有优化后，对比优化前后的性能数据。总结优化过程中的经验教训，记录哪些优化措施对性能提升最显著，哪些可能需要根据项目特点进一步调整。同时，将这些优化方法和经验应用到其他类似的项目中，以提高项目的整体质量和性能。