5图片加载优化_开发说做了性能优化，到底做了啥

最新推荐文章于 2023-08-10 21:27:18 发布

Vnihc

最新推荐文章于 2023-08-10 21:27:18 发布

阅读量92

点赞数

文章标签： 5图片加载优化

本文链接：https://blog.csdn.net/weixin_42245701/article/details/112662750

版权

我们在谈及一个页面性能如何时，说的是页面的加载速度快不快，页面交互是否顺畅不卡顿。

当你在浏览器输入一个URL并回车时，页面加载的全过程是这样的：

1、URL解析-把URL解析出对应的域名

2、DNS解析-把域名解析成IP地址

3、HTTP连接-浏览器发起http请求，和服务器建立连接通信

4、服务器处理请求-服务端返回数据

5、浏览器接受响应-浏览器根据http返回状态码，作出相应动作

6、浏览器渲染页面-根据规则解析html,css,js并渲染绘制页面

以上的1～5点都是网络请求和处理的过程，第6点是浏览器渲染页面的过程。所以开发做前端web性能优化时，会从网络层面和渲染层面优化。下面讲解下前端常用的性能优化手段～

预加载文件指的是提前加载下一个功能使用到的文件。
举个例子：比如我们以前经常玩的QQ农场，因为QQ农场有大量的图片，如果在进入QQ空间后，在网络空闲时，“偷偷”把QQ农场需要的部分图片下载缓存下来，如果后面用户进入QQ农场时，由于很多图片已经加载好，页面整体的加载速度会提高很多。但是这种策略的缺点是，可能用户后面也不玩这个功能，导致“盗走”了用户部分流量。

图片懒加载

图片懒加载也叫图片延迟加载。通常用于图片比较多，并且页面高度有好几屏的网页。当页面首次加载时，只显示可视区域的图片(只请求可视区域的图片)，当用户滚动页面，下一屏的图片即将进入可视区域时，才加载这部分图片。这么做可减少并发加载图片的个数，提升整个页面的加载速度。

利用缓存

缓存分很多种，有客户端缓存和服务端缓存，客户端缓存主要包括http缓存和h5离线缓存；服务端缓存主要包括redis缓存和CDN缓存。下面讲下常用的http缓存和CDN缓存带来的加载速度优化。

开启http缓存策略，浏览器就会缓存加载过的文件，当网站再次请求相同文件名的文件时，就会优先从浏览器缓存中获取，而不是重新发起向服务端获取，提高了文件加载速度。

使用cdn来存放html、css、js、图片等前端静态资源，也是一种缓存优化方式。

cdn是一个为了使用户就近获取内容，提高资源访问速度的一种内容分发网络，主要由内容分发技术和内容缓存设备组成。

举个例子：假设你的目标用户是国际用户，cdn缓存设备分别在亚洲、欧洲、美洲、澳洲、非洲各有一台，如果你是一个美国用户，当前端请求静态资源时，就会被分配到最近的美洲cdn缓存设备获取资源。

减少并发的http请求数量

由于同时同个域名下的并发http请求数量有限，如果超过一定的数量，剩下的请求会排队等待上一个请求完成后释放出网络链路(tcp连接)，才继续完成请求。如果能减少请求并发数，就能提升整个网页的加载速度。

一般开发会通过合并多张小icon为一张雪碧图、按需动态请求接口数据、合并接口等方式去优化。

防抖节流

将几次频繁操作合并为一次操作进行，叫做防抖。
举个例子：一个搜索输入框，当输入一个字符时就会自动触发内容更改事件，然后向后端发起查询请求。但是一般搜索一个内容，要输入n个字符用户才想要开始搜索，我们应该在手指停止输入后的一段时间后才发起查询(一般是100ms)，这样不仅能减少请求次数，节约流量，还能防止下拉框的抖动。

比如搜索“呼和浩特”，用户其实是希望输入到最后一个字符“特”字时，才发起搜索。

同步改异步

举个例子：批量导入excel数据到数据库，如果数据量较大，合法性查库校验较多，都会导致处理文件数据缓慢，可通过同步改成异步处理的形式，当程序处理完所有数据后，再以站内信的形式通知用户已处理完毕。

优化算法

举个例子：当一个页面功能的操作步骤较多时，可以把核心功能拆解出来，次要功能降级为异步处理。举个例子：2015年春晚的摇一摇红包。我们来看下摇一摇红包里面有几个功能：

摇红包->拆红包->红包实时入账

这个功能一开始时，逻辑是这样的：用户摇一摇，拆完红包后，红包是实时入账的。但是由于参与人数较多，很可能会造成网络拥塞，许多用户可能连摇一摇红包界面都进不去，为了减少请求次数，缓解服务器压力，后来采取了优雅降级的方案，把红包实时入账功能改成异步的形式，红包金额在7天之内入账，这样金额就可以分批入账了。

巧妙地拆解步骤，留下核心功能，降级次要功能，是优化算法的一种有效方式。

---推荐阅读---

在浏览器输入URL回车后发生了什么

解构产品经理的技术思维

开发到底喜欢看怎样的需求文档

---END---