为什么要进行前端性能优化？

提升用户体验：网页加载速度快、响应迅速可以使用户更加愿意停留在您的网站上。快速的用户界面可以提高用户满意度，使他们更容易完成所需的操作。
提高页面的可访问性：优化性能通常也意味着减少了页面的加载时间，这有助于在网络连接较慢或设备性能较差的情况下仍然为用户提供良好的访问体验。
增加网站流量和搜索排名：搜索引擎对网页加载速度有所重视，快速的网站通常在搜索结果中排名更高。此外，用户更喜欢加载速度快的网站，这也有助于提高页面的转化率。
减少资源浪费：优化前端性能通常意味着减少了不必要的HTTP请求、压缩和缓存静态资源等，这可以减少服务器和网络资源的使用，从而降低运营成本。

在上篇文章中我们讲了前端性能优化的四个点，今天我们来继续分享

5. 使用精灵图 (雪碧图) --- 有效减少http请求

什么是精灵图呢？为什么我们使用精灵图可以有效减少http请求?我们先来看一个例子。

精灵图（雪碧图，Sprite Sheet）是一种将多个小图片（通常是图标或小图像）合并到一个单一的图像文件中的技术。它最初是为了提高网页或游戏的性能而设计的，因为加载一个大图像比加载多个小图像要快。

精灵图的优点：

减少HTTP请求：合并多个图像到一个文件中，可以减少HTTP请求的次数，从而提高页面加载速度。
提高渲染效率：当需要使用精灵图上的图像时，只需设置背景位置和大小，而不是单独加载和渲染每个图像，这可以减少浏览器的渲染时间。

我们打开豆瓣的官网：

来看看豆瓣的一个列表，我们通过检查可以发现，这里的每一项都是一张图片，而通过手段去设置背景位置和大小，将每一项的文本显示出来，这就是精灵图的一个经典应用。这达到了减少请求的作用，如果这里并不是一张大图，而是八张小图，那么我们就需要进行八次http请求，而使用精灵图只需要进行一次。

6. 压缩文件

1. 图片压缩：

图片通常是网页中占用大量空间的文件类型，因此图片压缩是非常关键的一步。

无损压缩 ：使用工具如ImageOptim、TinyPNG、Squoosh等，这些工具可以在几乎不损失图片质量的情况下大幅减少文件大小。
有损压缩 ：对于需要的图片，可以考虑使用有损压缩工具如JPEG Optimizer（用于JPEG图像）或ImageMagick（用于多种格式）。

2. CSS和JS压缩：

压缩工具 ：使用工具如UglifyJS或Terser对JavaScript进行压缩，使用CSSNano或CleanCSS对CSS进行压缩。
CSS预处理器和模块化 ：使用Less、Sass等预处理器，并结合工具如Autoprefixer来自动添加浏览器前缀，然后再进行压缩。

3. HTML压缩：

HTML压缩工具 ：使用工具如HTMLMinifier来压缩HTML文件，去除空格、注释、删除不必要的属性等。

4. 字体优化：

字体子集化 ：使用工具如Font Squirrel或Font Subsetter，仅包含需要的字符，以减少字体文件大小。
字体格式选择：选择合适的字体格式（如WOFF、WOFF2），以便在不同的设备和浏览器中提供最佳的兼容性和性能。

5. 文件合并：

资源合并：将多个小文件合并为一个大文件（如CSS和JS文件），减少HTTP请求次数。但要注意，合并文件的过程需要考虑文件的依赖关系，以避免潜在的问题。

7. 使用webp格式的图片 (更优秀的图像压缩算法)

使用 WebP 格式的图片是前端优化中非常有效的方式，因为它提供了比 JPEG 和 PNG 更优秀的图像压缩算法，可以显著减少图片的文件大小，同时保持高质量的图像输出。

8. if-else vs switch-case

js 复制代码

let color = 'pink'
if (color = 'red') {
    
} else if (color = 'blue') {
    
} else if (color = 'green') {
    
} else if (color = 'yellow') {
    
} else if (color = 'pink') {
    
} else {
    
}

switch (color) {
    case 'red':
        
        break
    case 'blue':
        
        break
    case 'green':
        
        break
    case 'yellow':
        
        break
    case 'pink':
        
        break
    default:
}

如这段代码，我们使用哪一个语句造成的性能消耗更多呢？

我们先来看看if-else语句，这里我们的color为pink，if-else语句开始执行时，从上往下，直到找到color='pink'为止，如果当判断的语句够多时，多执行一些没有必要的代码是十分浪费时间的。

如果是 switch-case语句的话，当我们将pink传进去时，switch语句会直接去找到 case的值为pink，而不必从上往下查找，去执行多余的代码。

9.css 选择器复杂性

我们使用选择器的复杂性应该越低越好，我来举一个例子：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app .text p{
            
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="text">
            <p>hello</p>
        </div>
    </div>
</body>
</html>

如果我们通过这种选择器的方式去拿到<p>hello</p>,那么会造成十分不必要的性能消耗，先会去查询所有的p标签，然后再去查询在.text下的p标签，最后再去查询写在#app下的。

与其通过这种方式去添加样式，我们不如直接给这个p标签去设置一个类名，这样就能减少资源消耗。

10. 图片懒加载

图片懒加载是一种特定的懒加载技术，主要用于延迟加载网页中的图片，只有当图片即将进入用户的视野或用户即将浏览到它们时才进行加载。这种技术对于提高页面加载速度和减少带宽消耗特别有用。

图片懒加载的优势：

提高页面加载速度：
- 减少了初始加载时所需的图片数量和大小，加快了页面加载速度。
节省带宽：
- 只加载用户即将浏览的图片，减少了不必要的带宽消耗。
改善用户体验：
- 用户可以更快地看到页面的核心内容，提高了页面的响应性和用户满意度。
降低服务器负载：
- 减少了不必要的图片请求，降低了服务器的负载和成本。

前端性能优化（二）