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

m0_74823715

于 2024-12-20 21:16:18 发布

阅读量1.1k

点赞数 23

CC 4.0 BY-SA版权

文章标签：前端性能优化

本文链接：https://blog.csdn.net/m0_74823715/article/details/144619840

文章目录

前端能够做哪些图片优化?
css样式如何优化？

在这里插入图片描述

前端能够做哪些图片优化

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(