前端性能优化（图片与样式篇）

文章目录

前端能够做哪些图片优化?
- 1、减小图片体积
- 2、图片缓存
- - 服务工作线程 (Service Workers)缓存
  - IndexDB缓存图片
  - LocalStorage缓存
- 3、图片懒加载
- - 使用 loading="lazy" 属性
- 4、不同分辨率下使用不同的图片
- 5、使用webp格式的图片
- 6、配置图片CDN
- 7、减少图片和动图的使用
css样式如何优化？
- 1、关键css优先，非关键css等页面加载完成再加载或引入
- 2、使用 CSS 预处理器和后处理器
- 3、利用 CSS 变量
- 4、减少和优化选择器的复杂性
- 5、删除无用的 CSS
- 6、利用缓存
- 7、编写代码时尽量减少重排和重绘

前端能够做哪些图片优化?

1、减小图片体积

压缩图片可以减小文件大小，提升页面加载速度。可以使用工具如 TinyPNG 或 ImageOptim 来优化图片。

2、图片缓存

浏览器缓存是最基础的前端缓存方式。通过设置HTTP响应头，指定缓存策略，可以控制浏览器对图片资源的缓存行为。

Cache-Control: 设置图片的缓存时长。例如，Cache-Control: max-age=31536000表示缓存一年。
Expires: 指定缓存过期日期，配合Cache-Control使用。
ETag 和 Last-Modified: 标记资源的版本号或最后修改时间，当浏览器再次请求该资源时，通过对比判断是否需要重新下载。

这些头信息可以在服务器端配置，常用于CDN或静态资源服务器。

服务工作线程 (Service Workers)缓存

Service Workers是一种更高级的缓存方式，通过注册Service Worker脚本，可以拦截图片请求并从缓存中返回内容。可以在应用初始化时加载图片资源并存储在Service Worker的缓存中，后续请求可以直接读取缓存内容。

// 安装阶段（Install Event），当 Service Worker 安装时触发
self.addEventListener('install', event => {
    // 使用 event.waitUntil 确保安装过程完成后才继续执行后续的步骤
    event.waitUntil(
        // 打开一个名为 'image-cache' 的缓存存储
        caches.open('image-cache').then(cache => {
            // 将图片资源添加到缓存中
            return cache.addAll([
                '/images/photo1.jpg', // 图片1
                '/images/photo2.jpg', // 图片2
                // 更多图片资源可以添加在这里...
            ]);
        })
    );
});

// 激活阶段，拦截网络请求并返回缓存数据（Fetch Event）
self.addEventListener('fetch', event => {
    // 判断请求是否是图片资源
    if (event.request.destination === 'image') {
        // event.respondWith 接受一个 Promise，返回响应数据
        event.respondWith(
            // 尝试从缓存中匹配请求
            caches.match(event.request).then(response => {
                // 如果缓存中存在图片，直接返回缓存的响应
                return response || 
                    // 如果缓存中没有对应的图片，则执行网络请求
                    fetch(event.request).then(fetchResponse => {
                        // 一旦网络请求返回图片数据，就将其缓存
                        return caches.open('image-cache').then(cache => {
                            // 将网络获取的图片存入缓存
                            cache.put(event.request, fetchResponse.clone());
                            // 返回从网络获取的图片响应
                            return fetchResponse;
                        });
                    });
            })
        );
    }
});

IndexDB缓存图片

IndexedDB一个适合存储较大数据（如图片二进制数据）的浏览器数据库。要存储图片，我们通常将图片文件转换为 Blob（二进制大对象），并存入 IndexedDB。这样，在后续需要加载缓存图片时，可以从 IndexedDB 中检索 Blob，然后将其转化为 URL 以加载到页面中。

初始化 IndexedDB 数据库和对象存储

// 初始化 IndexedDB
function openDatabase() {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open('imageCacheDB', 1);

        // 创建或更新数据库时触发
        request.onupgradeneeded = function(event) {
            const db = event.target.result;
            if (!db.objectStoreNames.contains('images')) {
                db.createObjectStore('images'); // 创建名为 "images" 的对象存储
            }
        };

        request.onsuccess = function(event) {
            resolve(event.target.result); // 成功打开数据库
        };

        request.onerror = function(event) {
            reject(event.target.error); // 打开数据库失败
        };
    });
}

将图片存储到 IndexedDB 中

// 将图片 Blob 存入 IndexedDB
function cacheImage(url, blob) {
    openDatabase().then(db => {
        const transaction = db.transaction('images', 'readwrite');
        const store = transaction.objectStore('images');
        store.put(blob, url); // 使用图片 URL 作为键
        transaction.oncomplete = () => {
            console.log('Image cached in IndexedDB');
        };
    }).catch(error => {
        console.error('Failed to cache image:', error);
    });
}

// 获取图片并缓存
function fetchAndCacheImage(url) {
    fetch(url)
        .then(response => response.blob())
        .then(blob => {
            cacheImage(url, blob); // 缓存图片
        })
        .catch(error => {
            console.error('Failed to fetch image:', error);
        });
}

从 IndexedDB 中读取图片并显示
当需要显示图片时，可以从 IndexedDB 读取 Blob 数据并生成一个 URL 给标签使用

// 从 IndexedDB 中获取图片 Blob
function getCachedImage(url) {
    return new Promise((resolve, reject) => {
        openDatabase().then(db => {
            const transaction = db.transaction('images', 'readonly');
            const store = transaction.objectStore('images');
            const request = store.get(url);

            request.onsuccess = function(event) {
                if (event.target.result) {
                    resolve(event.target.result); // 返回图片 Blob
                } else {
                    reject('Image not found in cache');
                }
            };

            request.onerror = function() {
                reject('Failed to retrieve image from IndexedDB');
            };
        });
    });
}

// 使用缓存图片显示到页面
function displayImageFromCache(url, imgElementId) {
    getCachedImage(url)
        .then(blob => {
            const imgURL = URL.createObjectURL(blob);
            document.getElementById(imgElementId).src = imgURL;
        })
        .catch(error => {
            console.error('Error displaying cached image:', error);
        });
}

// 示例调用
const imageUrl = 'https://example.com/image.jpg';
fetchAndCacheImage(imageUrl); // 首次获取并缓存
displayImageFromCache(imageUrl, 'myImage'); // 从缓存中显示图片

LocalStorage缓存

// 保存图片到 localStorage
function cacheImage(url) {
    fetch(url)
        .then(response => response.blob())
        .then(blob => {
            const reader = new FileReader();
            reader.onload = function () {
                localStorage.setItem('cachedImage', reader.result); // 将Base64数据存入localStorage
            };
            reader.readAsDataURL(blob);
        });
}

3、图片懒加载

懒加载和占位图也是提升前端图片加载性能的技巧，虽然不算是严格意义的缓存。懒加载会等到图片在视窗中出现时才开始加载，减少初始页面加载的资源量，占位图则在图片未加载完成前提供一个小尺寸、模糊的占位图，让页面看起来更平滑。

假设你有多个图片，添加 data-src 属性存储图片的实际 URL，src 属性设置为占位符（比如一张模糊的小图或空白图片），这样只有当图片进入视口时，才会加载实际的图片。

<img class="lazy" data-src="https://example.com/photo1.jpg" src="placeholder.jpg" alt="Image 1" />
<img class="lazy" data-src="https://example.com/photo2.jpg" src="placeholder.jpg" alt="Image 2" />
<img class="lazy" data-src="https://example.com/photo3.jpg" src="placeholder.jpg" alt="Image 3" />
<!-- 更多图片 -->

使用 IntersectionObserver 来监视图片是否进入视口，如果进入视口，就把 data-src 的值赋给 src，从而触发图片加载。

// 创建一个 IntersectionObserver 实例，监视图片是否进入视口
const lazyLoadImages = document.querySelectorAll('img.lazy');

const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        // 如果图片进入视口
        if (entry.isIntersecting) {
            const image = entry.target;
            // 将 data-src 的真实图片 URL 赋值给 src 属性
            image.src = image.dataset.src;
            // 一旦图片加载完毕，停止观察该图片
            image.onload = () => {
                image.classList.remove('lazy'); // 可选：移除懒加载样式
            };
            observer.unobserve(image); // 停止观察已加载的图片
        }
    });
}, {
    rootMargin: '0px', // 可选：在视口边缘触发加载（当图片接近视口时开始加载）
    threshold: 0.1  // 可选：当图片至少 10% 显示时开始加载
});

// 观察所有懒加载图片
lazyLoadImages.forEach(image => {
    imageObserver.observe(image);
});

代码解释
IntersectionObserver:
创建 IntersectionObserver 实例来观察图片元素是否进入视口。IntersectionObserver 会异步监测指定元素与视口的交集变化。
entries 是一个包含所有监测元素的数组，entry.target 是当前进入视口的图片元素。
isIntersecting 属性表示图片是否已经进入视口（或者与视口重叠）。当该属性为 true 时，图片就进入了视口。
rootMargin：

rootMargin 是视口的扩展区域。当图片距离视口边缘一定距离时就触发加载。可以使用类似 CSS 的值（如 10px 0px）。
threshold：

threshold 定义了当多少比例的图片进入视口时触发懒加载，0.1 表示图片至少 10% 进入视口时触发加载。
image.onload：

一旦图片加载完毕，可以执行一些操作，比如移除懒加载样式（如 lazy 类），表示图片已成功加载。
observer.unobserve(image)：

加载完图片后，停止观察该图片，优化性能。

使用 loading=“lazy” 属性

使用 loading=“lazy” 属性可以非常简单地实现图片的懒加载。浏览器就会在图片进入视口时自动加载它。这是原生浏览器对懒加载的支持，无需额外的 JavaScript 代码。这个属性已经被大多数现代浏览器支持。

<img src="image1.jpg" alt="Image 1" loading="lazy" />
<img src="image2.jpg" alt="Image 2" loading="lazy" />
<img src="image3.jpg" alt="Image 3" loading="lazy" />

4、不同分辨率下使用不同的图片

<picture>
  <source media="(max-width: 600px)" srcset="image-small.jpg">
  <source media="(max-width: 1200px)" srcset="image-medium.jpg">
  <img src="image-large.jpg" alt="Responsive Image">
</picture>

或者

<img src="image-small.jpg" 
     srcset="image-small.jpg 500w, 
             image-medium.jpg 1000w, 
             image-large.jpg 2000w" 
     sizes="(max-width: 600px) 100vw, 
            (max-width: 1200px) 50vw, 
            33vw" 
     alt="Responsive Image">

5、使用webp格式的图片

使用 WebP 格式（如果浏览器支持）可以显著减小图片文件大小，从而提高加载速度。
可以通过元素来根据浏览器支持选择图片格式。

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Responsive Image">
</picture>

6、配置图片CDN

选择和设置 CDN 服务提供商
首先，选择一个合适的 CDN 服务提供商。常见的 CDN 提供商包括：

Cloudflare
AWS CloudFront
Fastly
KeyCDN
Alibaba Cloud CDN
Tencent Cloud CDN

上传图片到 CDN
选择图片存储方式：

存储在对象存储服务中：你可以使用云服务提供商的对象存储（如 Amazon S3、Alibaba OSS、腾讯云 COS）来存储图片文件，并通过 CDN 进行分发。通过这种方式，你可以确保文件安全，并允许 CDN 节点从这些存储服务获取资源。

直接通过 CDN 上传：有些 CDN 服务商允许直接将图片资源上传到其 CDN 网络。

上传图片：将图片上传到选定的存储服务（如 S3），并记录图片的 URL。

配置 CDN
创建 CDN 加速域名：

登录你的 CDN 提供商控制台，创建一个加速域名（例如 cdn.yoursite.com）。
配置源站点（通常是你存储图片的服务器或对象存储服务）。源站点是 CDN 获取图片资源的地方。
设置缓存策略：

配置缓存时间（TTL，生存时间），指示 CDN 节点在没有更新时缓存图片的时间。一般情况下，静态资源（如图片）可以设置较长的缓存时间，如一周或一月。
启用图片优化功能（如果支持），以便根据设备类型和网络状况自动调整图片的大小和质量。
4. 修改图片 URL
在网页中引用 CDN 提供的图片 URL。假设你的 CDN 域名是 cdn.yoursite.com，你可以像这样引用图片：

<img src="https://cdn.yoursite.com/images/photo1.jpg" alt="Image 1" />
<img src="https://cdn.yoursite.com/images/photo2.jpg" alt="Image 2" />

将原本直接指向服务器的图片 URL 替换为指向 CDN 的图片 URL。

7、减少图片和动图的使用

这可能需要有较强的canvas功底，和较多的开发时间。但的确是能大幅度优化图片的方案。
能用css实现的简单动画，就别用动态图片。能用css实现的样式，就别用图片。

css样式如何优化？

1、关键css优先，非关键css等页面加载完成再加载或引入

在优化 CSS 加载时，遵循“先加载关键 CSS，再懒加载非关键 CSS”的策略，可以显著提升页面加载速度。

1、提取关键css
这就要分析一个页面的功能样式，是否可以分离为进入页面就要展示的css和等用户操作后才展示的css

<style>
  /* 关键 CSS */
  body { margin: 0; font-family: Arial, sans-serif; }
  header { background-color: #333; color: white; padding: 10px; }
  /* 添加更多关键样式 */
</style>

2、懒加载非关键 CSS
如果页面有复杂特效（如动画、hover 状态、特定 JavaScript 动画等），可以将这些 CSS 动效代码延迟到页面加载完成后再应用，从而加快页面初始渲染速度。通过在标签中添加 media=“print” 和 onload 事件来实现非阻塞加载。

<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

3、使用 rel=“preload” 优化 CSS 加载
对于需要优先加载的非关键 CSS，可以用 preload 指令提前加载，提高资源加载效率。

<link rel="preload" href="important.css" as="style" onload="this.οnlοad=null; this.rel='stylesheet'">

除了上述处理非关键css，还可以使用js直接引入

window.addEventListener('load', function() {
  let link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'additional-styles.css';
  document.head.appendChild(link);
});

2、使用 CSS 预处理器和后处理器

预处理器如 SCSS、LESS 可以更简洁地编写和管理 CSS。
后处理器如 PostCSS 可以根据浏览器的兼容性要求，自动添加前缀、压缩代码、处理变量等。

3、利用 CSS 变量

使用 CSS 变量可以减少重复代码，便于动态调整样式。比如色彩、尺寸等样式都可以用 CSS 变量来定义，从而减少代码量并优化可维护性。

:root {
  --main-color: #4CAF50;
  --padding: 10px;
}

body {
  color: var(--main-color);
  padding: var(--padding);
}

4、减少和优化选择器的复杂性

尽量使用简单的选择器，避免使用深层嵌套或复杂选择器。深层嵌套和通配符（如 *）会增加浏览器的解析成本。

5、删除无用的 CSS

使用工具如 PurgeCSS 或 UnCSS 来移除未使用的 CSS 代码。这样可以极大地减少 CSS 文件体积，提高加载速度。

6、利用缓存

为 CSS 文件设置长缓存时间。通过配置缓存策略，浏览器可以在多次访问时直接加载缓存中的 CSS 文件，避免重新请求（前端的缓存策略，无非就是 Localstorage，service work）

7、编写代码时尽量减少重排和重绘

尽量避免频繁修改布局属性（如 width、height、padding），减少重绘和重排。可以使用 transform、opacity 等性能友好的属性，进行页面更新。
transform 调用的GPU来实现渲染，减少使用translate