前端性能优化（图片优化）

从输入URL到页面加载完成的过程：首先通过DNS（域名解析）把URL解析为对应的IP地址，然后与该IP地址确定的服务器建立起TCP网络连接。随后向服务器发送HTTP请求，服务器处理完HTTP请求后把目标数据放在HTTP响应里面呈现给客户端，拿到目标数据的浏览器开始渲染把页面呈现给用户，并且时时等待响应用户的操作。

 归纳为：1、DNS解析2、TCP连接3、HTTP请求4、服务端处理，HTTP响应返回5、拿到目标数据，解析数据并渲染结果，向用户展示结果

还有浏览器端的性能优化，涉及到资源加载优化、服务端渲染、浏览器缓存机制的利用、DOM的构建，网页排版和渲染过程、回流和重绘、DOM合理操作规避。

其中DNS解析和TCP网络连接，前端能做的非常有限。所以HTTP请求优化就成为我们优化的核心了。

前端优化主要有：

      1、webpack性能调优与Gzip原理优化2、浏览器的缓存机制和缓存策略3、图片优化——质量和性能的平衡点4、本地存储——Cookie、Web Storage、IndexDB5、CDN的缓存和回源机制6、服务端渲染7、浏览器运行机制8、DOM优化原理与实践9、Event Loop与异步更新策略10、回流和重绘11、首屏优化

图片优化

针对图片优化，与其说是优化不如说是在‘权衡’。我们平常图片优化都是压缩图片或是选择体积较小的图片格式，这个压缩过程是以牺牲图片质量为代价的，就会导致页面显示时图片失真。因此我们应该尽量寻找一个在质量和性能之间的平衡点。

不同业务场景下的图片选择方案

使用较为广泛的web图片格式有：JPEG/JPG、PNG、WEBP、Base64、SVG。

在计算中，像素是采用二进制数来表示，不同的图片格式像素与二进制数的对应关系不同。像素对应的二进制位数越多，则表示的颜色种类越多，成像的效果越细腻，但是文件体积也越大。一个二进制表示两种颜色（0|1对应黑白），一种图片格式对应的二进制位数有N个，那就可以呈现2的N次方种颜色。

JPEG/JPG：特点是有损压缩，体积小，加载快，不支持透明。

使用场景：JPG适合用于呈现热菜丰富的图片，在日常的开发中，JPG图片经常作为大的背景图、轮播图或是Banner图。比如两大电商网站对大图片的处理，就是对JPG图片应用场景的最佳写照。用JPG来呈现大图片，既可以保留图片的质量，又不会担心图片的体积，是一种比较广泛使用的方案。

缺点：在处理一些矢量图形和logo等这些线条感很强、颜色对比强烈的图片时，认为压缩就导致图片模糊非常明显。另外，JPG图像不知此透明度处理，透明图片只能用PNG来呈现了。

PNG-8和PNG-24：无损压缩、质量高、体积大、支持透明

优点：无损压缩的高保真图片格式。8和24都是二进制数的位数，8位的PNG支持256中颜色，24位的PNG可以支持1600万种颜色。在不考虑文件大小只在乎最佳的显示效果时，推荐使用PNG-24。但是在适合使用PNG时会优先选择PNG-8

应用场景：主要用PNG来呈现小的LOGO、颜色简单对比强烈的图片或是背景。

SVG：文本文件，体积小，不失真，兼容性好。

SVG是一种基于XML语法的图像格式。SVG对图像的处理不是基于像素，而是基于对图像的形状描述。
和JPG、PNG相比较，SVG文件体积更小，可压缩性更强。SVG作为矢量图最大的优点在于图片可以无限放大还不失真，一张SVG图片可以适配多种分辨率。另外SVG是文本文件，可以像写代码一样定义SVG，放在HTML中称为DOM的一部分。也可以把对图像的描述写入以.svg为后缀的文件中，在img标签中引入即可。

把SVG直接写入HTMl中

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><svg xmlns="http://www.w3.org/2000/svg"   width="200" height="200"><circle cx="50" cy="50" r="50" /></svg></body></html>

把SVG写入独立文件再引入HTML中：

 <img src="文件名.svg" alt="">

base64：文本文件、依赖编码、小图标解决方案

base64不是图片格式，是一种编码方式，和雪碧图一样。
雪碧图（CSS Sprites）：把小图标和背景图像合并到一张图片上，再使用css定位来显示其中的每一部分，就是把多个小图标合成一个图像文件，相对于一个图标一个图像文件来说，单独的一张图片需要的HTTP请求次数更少。如下图：

而base64是为了减少加载网页图片时对服务器的请求次数，提升网页性能。base64是一种用于传输8Bit字节的编码方式，通过对图片进行Base64编码，可以直接把编码结果写入HTML中或者是CSS中，减少HTTP请求次数。如：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOMAAADdCAYAAABJ/sWRAAAgAElEQVR4nO29B7gkVZk3/na8cXIehhlmiAIyIChBJauLiN+j64ooouhnWFddZdcVd10X9VnTKgpmV/8oBoy7EvyviwoiBlBAsqSJMIEJ987Nnes7v7fq7XvumVPVVdXVfe8d+jdPT3ffrjp10nvOe96YGhsbc…

这样浏览器直接把这段字符串解码为一张图片，就不用发送HTTP请求了。但是Base64编码后，图片文件体积变为原来的4/3，文件体积变大，浏览器解析Base64的时间开销。这些因素在使用Base64时必须考虑的。所以在一张图片满足以下条件时可以大胆的使用Base64编码：
1、图片实际尺寸很小
2、图片无法像雪碧图一样和其他小图标结合（雪碧图是主要的减少HTTP请求途径）
3、图片更新频率低（不需要重复编码和修改文件内容，维护成本很低）

WEBP：2010年被提出，是Google专为WEB开发的一种旨在加快图片加载速度的图片格式，支持有损压缩和无损压缩。
WEBP受到最大的限制就是浏览器的兼容性。

前端性能优化（图片优化）相关推荐

web性能优化---图片优化
先来看一道易错题 ``` let a = {a: 1} let b = a // 相当于把b的地址指向a的内容 a.x = a = {n: 2} //由于a.x = a把a的地址指向了a.x 然而 ...
前端性能优化——图片优化
一.图片优化措施优化图片是 Web 前端优化的重要一环,因为图片是 Web 页面中最耗费带宽和加载时间的资源之一.以下是一些通过优化图片来优化 Web 前端的方法: 压缩图片:压缩图片可以减少图片的 ...
H5前端性能测试点及优化方法
1.背景随着H5的普及和运用,它深深影响着我们各个业务的发展和用户体验,影响H5性能因素有多种:网络带宽.DNS解析时间.服务器处理能力.服务器和客户端的软硬件配置.网页内容.数据库操作.引用其他网 ...
web前端性能以及SEO优化
引子为什么要做性能优化? 提高用户体验,加速页面的相应速度提高用户交互性,操作体验更好为搜索引擎服务常用的技术 css精灵图片压缩图片大小合并css js文件减少http请求的次数合理 ...
iOS包体积优化-图片优化
文中提到的优化措施,编写了python自动化脚本,适用于iOS项目. 地址:GitHub - dongzhixuanyuan/imagesOptimize: Optimize images to de ...
前端性能优化的重要方案：图片懒加载
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的前端性能优化的重要方案:图片懒加载,主要包括其原理,我们常用的一些插件,及编写源码实现图片懒加载功能等,图片懒加载是项目比较常见的 ...
前端如何实现音乐盒胶盘的转动_郑州Web前端入门教程之如何实现图片优化？
统计数据显示,图片内容已经占据互联网内容总量的62%,因此想要优化网站性能,图片绝对是优化的热点和重点.图片优化是Web前端工程师必须要掌握的知识点,在接下来的郑州Web前端入门教程就给大家讲解一下如 ...
一零四、前端性能优化详解
1 前端性能优化介绍页面性能优化浏览器浏览器的主要作用浏览器的组成结构浏览器是多进程的浏览器的渲染机制重排reflow与重绘repaint 页面加载缓慢的原因浏览器部分代码部分优 ...
前端性能优化的一些技巧(90% chatGpt生成)
终于弄好了chatGpt的账号,赶紧来体验一波. 先来一波结论,这篇文章的主要内容来源,90%是用chatGpt生成的. 先上chatGpt的生成的结果: 作为一名懒惰的程序员,chatGpt会帮助我 ...

前端性能优化（图片优化）

前端性能优化（图片优化）相关推荐

最新文章

热门文章