SmartAgency 图片优化

SmartAgency

图片优化

使用前情况

图片加载量：约100M

加载速度：2-3分钟。

处理策略缓存优化

缓存整个网站对于web应用来说现实之处有三

本地储存，只能以字符串形式存入读取。容量限制为5M，读取存入需要较多时间。

缓存需要更高的设备性能。大大提高了对安卓平板设备的需求。

对于经常需要更新http请求的React框架来说，实时渲染更加不利缓存。

考虑业务确实对缓存有需求，对图片做以下预处理：

设置缓存过期时间为1天之后。

优先加载显示图片。当显示图片正常显示后再行加载。减少首次加载数量。

减少不必要的组件重复渲染。(首次加载时为4次)，调整后为2次。

字体优化

测速提示，网站原文件通常有40-50M的字体文件需要下载。占全部加载量的50-60%；

在充分尊重设计文件的情况下。使用精简字体，使用font-min插件对于“PFCG”优化，10M大小字体减少至3k左右（本地服务器加载时长~300ms），单页面全部字体加载量减少到20M左右。

当前每次跳转页面必须触发字体的读取和加载，实际上是阻碍项目部署上线的瓶颈。

上传图片优化

根据前端实际展示的尺寸 ，以上传图片百分比的最短边设定为较短的规定尺寸。canvas按照百分比计算较长边尺寸。经过前端预处理为jpg之后再行上传。

二次更新时发现，按照第一点的原则处理过的尺寸缩小了图片大小，然而压缩率仍然不满意。为此采用webP作为图片的载体。并设置压缩率为0.5。

以16M的全景图上传（最小尺寸限制为1080*1920）为例：

压缩前 jpeg压缩 webp（0.5质量） webp（0.6质量）

—— —— ——— —————- —————-

压缩前 16M 1053k 392k 455k

压缩后 6M 397k 197k 237k

考虑到尺寸压缩后的全景图片在大屏幕展示要求较高。无论是jpg压缩，还是webp0.5质量压缩，将质量都较为差。因此考虑webp0.6质量作为参照标准。全景图页面最多将加载9个图，全部最大加载量将在4-5m左右。

平稳退化

对于不支持webp的设备，采用jpeg压缩算法。确保兼容。（在实际应用场景中，设备均支持webP）。

其它体验及bug优化经纪人推荐

处理点击经纪人，模态弹框无法关闭。系数据重名问题。

后台上传

因添加数据加载业务而导致上传时间增长。增加上传等待图标，上传完成后。等待图标消失。

之前提到了业务逻辑有这么一条：

根据设计图尺寸，重新定制图片建议上传最小尺寸。

如果图片上传失败，则说明尺寸无法满足，请换用尺寸上传。

解决了因区分租房和售房而导致数据界面无法正常显示的问题。

原因在于业务逻辑改变，原本在后台只全部展示的数据被划分为租房和售房。

前台展示单元数量

前台显示的单元数量由45个上调到200个。

如果全部数据按照框架处理，加载50个数据。图片加载量为2M左右，页面处理速度在13s左右。

推荐逻辑

小手逻辑

点击小手层，20s之后显示。避免了无法从外层跳转回首页频繁出现小手的问题。

小手调整至右侧。

优化后现状

加载量： 低于30M。

本地服务器加载速度：

13-20秒，其中有10秒左右属于fonts（字体）加载。

纯图片在2-6s内基本可以完成。

three.js渲染全景图需要重新转换。需要2-3s的转换时间，系必要等待的时间。

遗留问题

租售房部分调用localStorage，State部分修改后造成全局混乱。故暂时不予修正。

对于线上部署来说，不适宜作特殊字体。