前端如何性能优化

最新推荐文章于 2025-03-29 15:23:34 发布

妮在想什么

最新推荐文章于 2025-03-29 15:23:34 发布

阅读量1.9k

点赞数 18

文章标签：前端性能优化

本文链接：https://blog.youkuaiyun.com/BANaanaa/article/details/144378229

版权

前端性能优化是提高网页加载速度和响应速度的重要手段。优化前端性能不仅能提升用户体验，还能提高SEO排名，降低服务器负担，节省带宽等。下面是一些常见的前端性能优化方法：

每个页面资源（如图片、脚本、样式等）都需要一个 HTTP 请求。请求过多会增加加载时间。

合并文件：将多个 CSS 文件、JavaScript 文件合并成一个文件，以减少 HTTP 请求的次数。
使用雪碧图（Sprite）：将多个小图片合并成一张大图，通过 CSS 的 background-position 控制显示不同的区域，减少 HTTP 请求。
使用字体图标：用字体图标代替图片图标，减少请求。

压缩图片：使用图片压缩工具（如 ImageOptim，TinyPNG）减小图片的文件大小，选择合适的图片格式（如使用 WebP 格式代替 PNG/JPG 格式）。
CSS、JS 压缩：压缩 CSS 和 JavaScript 文件，移除多余的空格、注释和换行符。可以使用工具如 UglifyJS、Terser（JS）和 CSSNano（CSS）进行压缩。
启用 Gzip 或 Brotli 压缩：服务器启用 Gzip 或 Brotli 压缩，使 HTML、CSS、JavaScript 文件传输时更小。

异步加载 JavaScript 文件：使用 async 或 defer 属性来异步加载 JavaScript 文件，避免阻塞渲染。

<script src="example.js" async></script> <!-- 异步加载 --> <script src="example.js" defer></script> <!-- 延迟加载，等页面解析完成后再加载 -->

懒加载图片：图片不是立即加载，而是等到它们出现在视口内时才加载，可以使用 IntersectionObserver API 或通过插件（如 lazysizes）实现懒加载。
```
<img data-src="image.jpg" class="lazyload" />
```
懒加载非关键资源：对于一些非核心的资源（如广告、社交分享按钮等），可以在页面加载完成后再异步加载，避免阻塞页面渲染。

浏览器渲染过程中的重排（Reflow）和重绘（Repaint）会严重影响性能，尤其是在复杂的 DOM 操作时。

避免频繁修改 DOM：批量修改 DOM，而不是多次修改，可以使用 documentFragment 或 innerHTML。
避免频繁读取布局属性：如 offsetHeight，clientWidth 等。每次读取这些属性时，浏览器会强制重新计算布局，影响性能。
使用 requestAnimationFrame：对于动画操作，使用 requestAnimationFrame 来确保动画的流畅性，减少不必要的重新绘制。

缓存可以显著减少页面加载时间。

减少 CSS 文件的复杂性：使用简洁、精确的选择器，避免过度嵌套。减少不必要的样式，避免大规模的重绘和重排。
使用 CSS 变量和预处理器：使用 CSS 变量、SASS、LESS 等预处理器来提高 CSS 的复用性，减少重复代码。
避免阻塞渲染的 JavaScript：将 JavaScript 放在页面底部，或者使用 async、defer 来异步加载脚本，避免脚本阻塞页面的渲染。

虽然这是前端优化之外的一部分，但服务器性能对于页面加载至关重要：

CSS Grid 和 Flexbox：避免使用复杂的浮动布局或使用大量嵌套的元素。使用 CSS Grid 和 Flexbox 可以减少 DOM 结构的复杂度，提高布局性能。
Web Workers：将计算密集型的任务放到后台线程，避免阻塞主线程，改善页面响应速度。
WebAssembly：对于一些需要高效计算的任务，使用 WebAssembly 来提高计算性能。

使用系统字体：避免使用过多的 Web 字体，或者可以选择系统字体（例如 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;），可以避免字体下载带来的延迟。
字体懒加载：只加载当前页面使用的字体，而不是一次性加载所有字体。
使用字体显示策略：使用 font-display: swap; 来避免 FOUT（Flash of Unstyled Text）现象。

页面中的 DOM 节点越多，浏览器渲染和操作时的性能开销越大。要尽量减少页面中的 DOM 节点数。

虚拟化长列表：对于大数据量的列表，采用虚拟化技术（如 react-window、react-virtualized）来只渲染可视区域内的项，避免渲染整个列表。

响应式设计对不同屏幕尺寸进行适配时，可能会增加额外的计算和布局，影响性能。

定期评估页面的性能，找出瓶颈：

使用 Chrome DevTools：使用浏览器开发者工具的 Performance 面板来分析页面的性能瓶颈，查看哪些操作花费了最多的时间。
Lighthouse：Google 提供的 Lighthouse 工具，可以评估页面的性能、可访问性、SEO 等，帮助找到优化的机会。
Web Vitals：关注 Core Web Vitals 指标，如 LCP（Largest Contentful Paint）、FID（First Input Delay）、CLS（Cumulative Layout Shift），这些都是影响用户体验的重要指标。