优化pc网站性能的多个方向

优化 PC 网站的性能是关键，因为用户期望页面快速、响应迅速，而搜索引擎也更喜欢性能好的网站。以下是从多个角度来优化 PC 网站性能的指南：

1. 内容优化：

• 压缩图片：使用工具如 TinyPNG 或 ImageOptim。
• 使用矢量图形：例如 SVG，它通常比位图更小，可以缩放而不失清晰度。
• 减少HTTP请求：合并小的图像为雪碧图，合并CSS和JS文件。

2. 代码优化：

• 压缩JS和CSS：使用工具如 UglifyJS 和 CSSNano。
• 删除未使用的代码：PurgeCSS 和 Tree shaking 可以帮助识别和删除未使用的CSS和JS代码。
• 优化CSS：使关键CSS内联，延迟加载其余的CSS。
• 避免长时间的JavaScript运行：使用 requestAnimationFrame 或 Web Workers

3. 网络优化：

• 使用CDN：分发内容更靠近用户。
• 开启HTTP/2：允许多个并行请求。
• 开启压缩：例如 Gzip 。

4. 缓存策略：

• 浏览器缓存：设置长的缓存生命周期对不经常更改的资源，短的生命周期对经常更改的资

5. 渲染优化：

• 避免大的布局更改和重绘：尤其是页面加载时。
• 使用CSS动画代替JavaScript动画：CSS动画通常更高效。
• 懒加载：图片、视频和其他媒体只有在进入视口时才加载。
• 优化关键渲染路径：只加载首屏所需的资源。

6. 监控和测试：

• 使用性能监控工具：例如 Google Lighthouse 和 WebPageTest。

7.字体全用woff2格式。

@font-face {
  font-family: 'MyFont';
  src: url('~@/assets/fonts/output.woff2') format('woff2'),
       url('~@/assets/fonts/input.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

8.图片最好都用webp格式。

ebP 格式的图片相比 PNG 格式的图片可以更好地实现更高的压缩率，因此在相同的质量水平下，WebP 图片通常会更小。

9.Web Worker提高页面性能，避免页面卡顿。

Web Worker 是 HTML5 提供的一种在后台运行的 JavaScript 线程，它可以在主线程之外执行脚本，从而使得一些耗时的计算和处理可以在后台进行，不会阻塞页面的渲染和交互。Web Worker 的好处包括：

1. 提高页面性能：Web Worker 可以在后台执行耗时的计算任务，而不会影响页面的渲染和交互响应速度。这样可以提高页面的性能和用户体验。

2. 避免页面卡顿：通过将耗时的计算任务放在 Web Worker 中执行，可以避免页面出现卡顿和假死的情况，保持页面的流畅性和响应性。

3. 利用多核处理器：现代浏览器通常支持多线程执行 JavaScript，Web Worker 可以利用多核处理器的优势，加速复杂计算和处理。

4. 支持并发处理：Web Worker 可以创建多个实例，并发执行多个任务，从而实现更高效的并发处理和任务分配。

5. 实现复杂的任务：Web Worker 可以执行一些复杂的任务，比如图像处理、数据分析、加密解密等，使得网页应用可以实现更多样化的功能