前端性能优化

红烧四喜丸子

已于 2022-08-11 23:12:21 修改

阅读量352

点赞数 2

文章标签：前端性能优化 html

于 2022-07-01 10:59:30 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_56529964/article/details/124399925

版权

1.减少http请求数

1.1 图片处理

1.1.1 合并图片

当图片较多时，可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外，还可以充分利用缓存来提升性能。

1.1.2 雪碧图

雪碧图是根据css sprite音译过来的，就是将很多小图标放在一张图片上就称之为雪碧图，可以减少网站http请求数量，但是当整合图片比较大的时候，一次加载比较慢，随着字体图片、svg图片的流行该技术慢慢退出了舞台

1.1.3 使用字体图标来代替图片

把网站上用到的一些图片整合到一张单独的图片中
减少网站的 http 请求数量
缺点是当图片比较大时，一次加载比较慢

1.1.4 使用矢量图

使用 svg 进行矢量图的绘制
使用 iconfont 解决 icon 问题

1.2 图片优化

1.2.1 尽可能的使用PNG格式的图片，它相对来说体积较小。

1.2.2 图片的延迟加载，也叫做赖加载。

1.2.3 Base64

内嵌图片 base64

将图片的内容以Base64格式内嵌到HTML中，可以减少http请求数量，但是编码之后的大小比图片大了

1.2.3 图片格式

jpg 有损压缩，压缩率高，不支持透明
png 支持透明，浏览器兼容好
webp压缩程度最好，在 iOS webview 有兼容性问题
svg 矢量图，代码内嵌，相对较小，图片样式相对简单的场景

1.2.3.1 png

png8 ---- 256 色支持透明
png24 ---- 2^24 色不支持透明
png32 ---- 2^24 色支持透明

1.2.4 webp

WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。主流浏览器支持webp格式的图片，在高保真的情况下，图片大小只有原来图片的50% - 70% ,所以可以通过转换图片为webp的方式来提示web加载体验

1.2.5 开启gzip

HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来。一般对纯文本内容可压缩到原大小的40%

gzip压缩比率在3到10倍左右，可以大大节省服务器的网络带宽。而在实际应用中，并不是对所有文件进行压缩，通常只是压缩静态文件。

1.2.6 不使用css@import

使用css@import会造成额外的请求

1.2.7 避免使用空的src和href

(1) a标签设置空的href，会重定向到当前页面的地址
)2) form设置空的method，会提交表单到当前页面的地址

1.3 减少重定向

尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载，降低了用户体验

如果一定要使用重定向的话，如http重定向到https，要使用301永久重定向，而不是302临时重定向，因为如果使用302则每一次访问http都会重定向到https页面，而永久重定向在第一次从http重定向到https之后，每次访问http，会直接返回https的页面

1.4 使用缓存

使用cache-control或expires这类强缓存的时候，缓存不过期的情况下不会向服务器发起请求。强缓存过期的时候，会使用last-modified或etag这类协商缓存向服务器发起请求，如果资源没有变化，则服务器返回304响应，浏览器继续从本地缓存加载资源，如果资源更新了，则服务器将更新后的资源发送到浏览器，并返回200

1.4.1 强缓存

强缓存（也称本地缓存，状态码200），本地缓存是最快速的一种缓存方式，只要资源还在缓存有效期内，浏览器就会直接在本地读取，不会请求服务端。只有在地址栏或收藏夹输入网址、通过链接引用资源等情况下，浏览器才会启用强缓存。
强缓存有一个明显的缺点就是，无法知道当前服务器上的资源有没有发生改变。

1.4.2 协商缓存

协商缓存（也称304缓存，状态码304），顾名思义是经过浏览器与服务器之间协商过之后，在决定是否读取本地缓存，如果服务器通知浏览器可以读取本地缓存，会返回304状态码，并且协商过程很简单，只会发送头信息，不会发送响应体。

1.4.3 缓存利用

（1）html文件不做缓存，每次都去获取最新的html资源

（2）通用的js文件（这部分文件通常来自于项目中的node_modules中）做强缓存

（3）业务的js文件（这部分由于业务发展经常会发生变化）做协商缓存

（4）图片，字体文件做强缓存

1.4.4 from memory cache 和 from disk cache的区别

这两者都是强缓存的结果，其中前者表示缓存来自内存，这种缓存会随着浏览器关闭而消失。后者表示缓存来自硬盘，不会随着浏览器的关闭而消失。控制到底是from memory cache还是from disk cache是通过响应头的Etag来实现的。如果有Etag字段，那么浏览器会将本次缓存写入硬盘。

1.4.5 缓存优先级

Service Worker -> Memory Cache -> Disk Cache -> Push Cache

1.4.6 Expires

缓存过期时间，用来指定资源到期的时间，是服务器端的具体时间点
告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求

1.4.7 缓存流程图

2.减少资源大小（压缩）

1.1 html 压缩

压缩在文本文件中有意义但是在HTML中不显示的字符，包括空格、制表符、换行符、注释等
使用在线网站压缩、nodejs提供了html-minifier 工具、后端模板引擎渲染压缩

1.2 css压缩

css压缩包括无效代码删除与css语义合并
使用在线网站压缩、使用 html-minifier 对html 中的 css 进行压缩、使用clean-css 对 css 进行压缩

1.3 js压缩与混乱

js压缩与混乱包括无效字符及注释的删除、代码语义的缩减和优化、降低代码的可读性、实现代码的保护
使用在线网站压缩、使用 html-minifier 对html 中的 js 进行压缩、使用uglifyjs2 对 js 进行压缩

1.4 图片压缩

针对真实图片情况，舍弃一些相对无关紧要的色彩信息
图片压缩网址 TinyPNG – 智能地压缩 WebP、PNG 和 JPEG 图像 /在线图片压缩工具(jpg、jpeg、png、gif)无损压缩90%-压缩图 (yasuotu.com)

3.网络优化

1.1 使用CDN

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术

简单来讲，CDN是用来进行加速的，它可以让用户更快获得所需的数据

1.2 使用DNS预解析

DNS（Domain Name Server，域名服务器）是进行域名(domain name)和与之相对应的IP地址 (IP address)转换的服务器。

当浏览器访问一个域名的时候，需要解析一次DNS，获得对应域名的ip地址。在解析过程中，按照浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存，直到拿到IP地址

1.3 持久连接

使用keep-alive或presistent来建立持久连接，持久连接降低了时延和连接建立的开销，将连接保持在已调谐状态，而且减少了打开连接的潜在数量

1.4 并发连接

由于在HTTP1.1协议下，chrome每个域名的最大并发数是6个。使用多个域名，可以增加并发数

并发连接数是指服务器对其业务信息流的处理能力,是服务器能够同时处理的点对点连接的数目,这个参数的大小直接影响到服务器所能支持的最大连接的数目.
比如并发连接数为10,就表示最多有十个连接同时连接到服务器,如果一个网站只有一个请求的话,就是最多10个人同时去打开这个网站,如果有11个人同时打开这个网站,第11个请求就会等待,直到前面的连接被断开