From dad97f0843a1c558f552471c1590fd3be2c2a08e Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Tue, 15 Dec 2020 21:34:51 +0800 Subject: [PATCH] =?UTF-8?q?add:=20=E5=9B=BE=E7=89=87=E7=9A=84=E6=80=A7?= =?UTF-8?q?=E8=83=BD=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 13-前端面试/02-性能优化/00-前言.md | 3 +- .../前端性能优化（一）：静态资源优化.md | 263 ++++++++++++++++++ 2 files changed, 265 insertions(+), 1 deletion(-) create mode 100644 13-前端面试/02-性能优化/前端性能优化（一）：静态资源优化.md diff --git a/13-前端面试/02-性能优化/00-前言.md b/13-前端面试/02-性能优化/00-前言.md index c4cef3f..4a7a91a 100644 --- a/13-前端面试/02-性能优化/00-前言.md +++ b/13-前端面试/02-性能优化/00-前言.md @@ -46,9 +46,10 @@ 静态资源优化包括html、css、js、图片等资源的性能优化。包括： +- 图片的应用场景和使用 + - html、css、js的具体优化策略 -- 图片的应用场景和使用 - 资源文件的优化：比如文件压缩合并策略、打包方案、版本号更新方案 diff --git a/13-前端面试/02-性能优化/前端性能优化（一）：静态资源优化.md b/13-前端面试/02-性能优化/前端性能优化（一）：静态资源优化.md new file mode 100644 index 0000000..b290de5 --- /dev/null +++ b/13-前端面试/02-性能优化/前端性能优化（一）：静态资源优化.md @@ -0,0 +1,263 @@ +## 图片格式和应用场景 + +### JPEG 格式 + +JPEG（Joint Photographic Experts Group）是一种针对彩色照片而广泛使用的有损压缩图形格式，属于位图。 + +常用文件扩展名为`.jpg`，也有 `.jpeg`和`.jpe`。JPEG 在互联网上常被应用于存储和传输照片。 + +- 适合：颜色丰富的照片、彩色图大焦点图、通栏 banner 图；结构不规则的图形。 + +- 不适合：线条图形和文字、图标图形，因为它的压缩算法不太这些类型的图形；并且不支持透明度。 + +### PNG 格式 + +PNG（Portable Network Graphics）是一种无损压缩的位图图形格式，支持索引、灰度、RGB 三种颜色方案以及 Alpha 通道等特性。 + +PNG 最初是作为替代 GIF 来设计的，能够显示 256 色，文件比 JPEG 或者 GIF 大，但是 PNG 非常好的保留了图像质量。支持 Alpha 通道的半透明和透明特性。最高支持 24 位彩色图像（PNG-24）和 8 位灰度图像（PNG-8）。 + +- 适合：纯色、**透明**、线条绘图，图标；边缘清晰、有大块相同颜色区域；需要带**半透明**的图片。 + +- 适合：由于是无损存储，所以不太适合体积太大的彩色图像 + + +比如说，如果你需要带透明背景的图片，此时就可以用 png 格式的图。 + +### GIF 格式 + +GIF（Graphics Interchange Format）是一种位图图形格式，以 8 位色（即 256 种颜色）重现真彩色的图像，采用 LZW 压缩算法进行编码。 + +支持 256 色；仅支持完全透明和完全不透明；如果需要带动画效果的图片，GIF 是比较通用的选择。 + +- 适合：动画，图标。 + +- 不适合：每个像素只有 8 比特，不适合存储彩色图片。 + +### Webp 格式 + +Webp 是一种现代图像格式，可为图像提供无损压缩和有损压缩，这使得它非常灵活。由 Google 在购买 On2 Technologies 后发展出来，以 BSD 授权条款发布。 + +Webp的优秀算法能同时保证图像质量和较小体积；可以插入多帧，实现动画效果；可以设置透明度；采用 8 位压缩算法。 + +无损的 Webp 比 PNG 小 26%，有损的 Webp 比 JPEG 小 25-34％，比 GIF 有更好的动画。 + +- 适合：适用于图形和半透明图像。 + + +### 总结 + +- banner图、大图，可以用 jpg、webp格式。 + +- 图标、带透明背景的图，可以用 png 格式。 + +- 带动画效果的图，可以用 gif 格式。 + + +## 图片优化的常见方法 + +### 1、用工具压缩图片 + +**压缩 PNG 图片**： + +- 工具：[node-pngquant-native](https://www.npmjs.com/package/node-pngquant-native) + +- 介绍：跨平台、压缩比特别高，压缩png24非常好。 + +安装方法： + +``` +npm install node-pngquant-native +``` + +**压缩 JPEG 图片**： + +- 工具：[jpegtran](https://www.npmjs.com/package/jpegtran) + +- 官网： + +- 介绍：跨平台，但压缩的比率只有80-90%。 + +安装方法： + +```bash +npm install –g jpegtran +``` + +使用方法： + +```bash +jpegtran -copy none -optimize -outfile output_file.jpg input_file.jpg +``` + +**压缩 GIF 图**： + +- 工具：Gifsicle + +- 官网（含安装方法）： + +- 介绍：Gifsicle 通过改变每帧比例，减小 gif文件大小，同时可以使用透明来达到更小的文件大小，是目前公认的最好的解决方案。 + +使用方法： + +```bash +# 压缩命令。注意，这里是将压缩级别设置为3。如果将压缩级别设置为1或者2，则基本不压缩。 +gifsicle --optimize=3 -o out_file.gif in_file.gif + +# 裁掉透明部分 +gifsicle --optimize=3 --crop-transparency -o out_file.gif in_file.gif +``` + +### 2、将图片尺寸跟随网络环境进行变化 + +**具体方案**：不同网络环境（Wifi/4G/3G）下，加载不同尺寸和像素的图片，通过在图片 URL 中添加参数来改变。 + +图片 url 举例1：（图片的原始url链接） + +``` +https://img12.360buyimg.com/img/s3866x3866_jfs/t1/149913/14/18648/719436/5fd8b9b5Eb697b825/7c23f3028aff8e2b.jpg +``` + +图片 url 举例2：（通过图片的url参数，将这张图的尺寸设置为200px） + +``` +https://img12.360buyimg.com/img/s200x200_jfs/t1/149913/14/18648/719436/5fd8b9b5Eb697b825/7c23f3028aff8e2b.jpg +``` + +### 3、响应式图片 + +**方法1**：通过 JavaScript 绑定事件，检测窗口大小，以此设置图片大小。 + + +**方法2**：CSS媒体查询。 + +代码举例：（在 640px的窗口大小里，设置图片的尺寸为640px） + +```css +@media screen and (max-width:640px) { + my_image{ + width:640px; + } + } +``` + +**方法3**：img标签的 `srcset` 属性。这个是 H5的新特性。 + +代码举例： + +```html + （x 描述符：表示图像的设备像素） +``` + +### 4、逐步加载图像：lazyload、LQIP、LQIP + +**方法1**、使用统一占位符。俗称图片的`懒加载（lazyload）`。 + +**方法2**、使用 **LQIP** 的图片加载方式。也就是说，在大图没有完全加载出来的情况下，先这张图对应的的低质量图片进行占位。 + +LQIP（Low Quality Image Placeholders）：低质量图像占位符。这种技术背后的想法是，在网络环境较差的情况下，你可以尽快向用户展示完全可用的网页，为他们提供更好的体验。即使在更好的网络连接上，这仍然为用户提供了更快的可用页面，并且改善了体验。 + +- 安装 LQIP 工具：`npm install lqip` + +- GitHub源码：https://github.com/zouhir/lqip-loader + +代码举例：（将目标图片转换为 LQIP 形式的图） + +```js +const lqip = require('lqip'); + +//文件路径 +const file = './in.png'; + +//将输入的图片转为base64 +lqip.base64(file).then(res => { + // 色值 + console.log(res); +}); + +lqip.palette(file).then(res => { + //这里输出的是base64的图片地址 + console.log(res); +}); + +``` + +另外，我们还可以使用 **SQIP** 的图片加载方式。 + +SQIP（SVG Quality Image Placeholders）： SVG 格式的图像占位符。 + +- 安装 SQIP 工具：`npm install sqip` + +- GitHub 源码： + +代码举例：（将目标图片转换为 SQIP 形式的图） + +```js +const sqip = require('sqip'); + +const result = sqip({ + filename: './input_file.png', + numberOfPrimitives: 10 //可根据不同应用场景设置大小 +}); + +console.log(result.final_svg); +``` + +### 5、雪碧图（Image spriting） + +雪碧图是比较常见的图片优化方式，也就是把多张小图合并成一张大图。这样的话，就只需做一次网络请求，减少图片的 http 请求次数。 + +读者们可以自行查阅。 + +### 6、有些场景下，并不需要图片文件 + +有些场景下，并不需要图片，我们可以用其他的方式来代替图片。 + +举例： + +- Web Font 代替图片 + +- 使用 Data URI 代替图片。base64就是属于 Data URI的方式。 + +## 图片服务器自动优化 + +### 概念 + +图片服务器自动化优化是可以在图片 URL 链接上增加不同特殊参数，服务器自动化生成。通过这些参数，可以设置图片的不同格式、大小、质量。 + +### 常见处理方式 + +- 图片裁剪：按长边、短边、填充、拉伸等缩放。 + +- 图片格式转换：支持 JPG，GIF，PNG，WebP 等，支持不同的图片压缩率。 + +- 图片处理：添加图片水印、高斯模糊、重心处理、裁剪边框等。 + +- AI 能力：鉴黄、涉政、智能抠图、智能排版、智能配色、智能合成等 AI 功能。 + +### 图片举例 + +原始图片链接： + +``` +https://img12.360buyimg.com/img/s3866x3866_jfs/t1/149913/14/18648/719436/5fd8b9b5Eb697b825/7c23f3028aff8e2b.jpg +``` + +将图片压缩为 200*150： + +``` +https://img12.360buyimg.com/img/s200x200_jfs/t1/149913/14/18648/719436/5fd8b9b5Eb697b825/7c23f3028aff8e2b.jpg +``` + +将图片转换为 webp 格式： + +``` +https://img12.360buyimg.com/img/s200x200_jfs/t1/149913/14/18648/719436/5fd8b9b5Eb697b825/7c23f3028aff8e2b.webp +``` + +将图片质量压缩至10%： + +``` +https://img12.360buyimg.com/img/s3866x3866_jfs/t1/149913/14/18648/719436/5fd8b9b5Eb697b825/7c23f3028aff8e2b.jpg.q10 +``` +