wordpress商务版,青海网站建设优化,wordpress最好的博客主题,黄南网站建设前言#xff1a; 最近在公司做项目的时候#xff0c;有一个业务场景就是同一张图片#xff0c;在不同的位置上展示的效果是不一致的#xff0c;其实理解起来也很简单#xff0c;就以大家熟悉的微信头像而言#xff0c;我们在正常使用的情况下#xff0c;一个微信头像的大…前言 最近在公司做项目的时候有一个业务场景就是同一张图片在不同的位置上展示的效果是不一致的其实理解起来也很简单就以大家熟悉的微信头像而言我们在正常使用的情况下一个微信头像的大小假设为80 * 80 格式而我们在点击头像弹出的头像图片的格式肯定是大于80 * 80的呀那么对于这种同一张图片渲染为不同规格的需求我们一开始是直接将该图片丢给前端让前端进行加工渲染但是这就导致一个很可怕的现象每次页面渲染前端都要对各个图像都进行一个加工处理这怎么看都不合理呀那该怎么搞呢 疑惑 一番冲浪后我发现了一个针对于图片的处理库——Thumbnailator可以实现图片的加水印呀或者说设置指定大小呀或者压缩缩放等等然后现在我的业务这边的话就涉及了这种对图片的处理但是目前我们都是交给前端来处理这个东西那如果说我在传输给前端之前就对这个图片进行了一个处理会不会在传输的过程之中就能优化他的效率就是说现在对于图片的加工我们现在是用前端来做的就后端不对图片进行加工然后我想如果说我在后端就已经加工好了那我以一个更小的体积传给前端。直接进行渲染会不会效率更高呢不然的话不经过加工的话他的体积肯定是更大的呀那在传输过程之中占用的资源也会更多既然他们结果都是处理成那样子那我在后端处理的话会不会就是说能让我传输的更加顺畅呢但是。我觉得事情没有想象的那么理想但我又想不出这样子做会有什么坏处 对于该图片的处理库有兴趣的伙伴可以看看下面这篇文章 【Thumbnailator】图片压缩、水印、格式修改一网打尽https://blog.csdn.net/weixin_73077810/article/details/134590545?spm1001.2014.3001.5501 疑惑点1 同一张图片在不同的位置上展示的效果是不一致的业务需求怎么实现才是合理的
疑惑点2什么时候是需要前端来进行加工操作什么时候是需要后端来进行加工操作 大牛解答 我跟技术总监聊了一下我发现这类需求好像有一类比较合理的处理方法
解答疑惑点1 实际上对于图片来说的话他在上传后就已经是把它处理好了再进行存储比如说我上传了一张图片然后这张图片分别要用在两个地方并且这两个地方上他是不同大小的就是说它的尺寸会有所变化那这样子我上传图片的话我在后端接收好我就已经把这两个图片裁剪为两个格式了然后把这两个不同格式的同一张图片以一个跟前端约定好的命名规范比如说A1 A2这样子也就是说我前端上传图片后我在后端已经把他弄成了最终要渲染的格式了前端最后如果想要拿图片的话直接就是通过一个URL拿到那个图片直接就进行渲染就行不需要进行二次加工最终这种方案的话他就实现了一种一张图片我只需要在上传保存的时候加工一次之后的话就不需要再进行二次加工 就拿我们微信头像来说微信头像他不是很小的一个缩略图吗然后我们点开它的话可以让他放大对吧然后我本来以为的是他用的是同一张图片只不过前端对他进行了一个压缩处理呀这样子的二次加工来进行渲染的但实际上他就是两张图片一大一小的然后当我们正常展示的时候前端访问的是小的图片当我们要点击放大的时候前端就直接就换了一个URL来获取大的图片 然后对于这种同一类不同规格的图片我们采用一个类型差不多的有规律的命名方式然后前端只需要把那一个有所变动的路径位置把他们作为一个变量如果说我要访问一个东西的话我只需要在变量上操作就行不需要直接改动我的那个URL了因为他的变动只是小位置的变动而不是整个URL的变动 解答疑惑点2 对于这种图片类的话实际上基本上都是用后端来进行压缩呀加水印或者什么什么的前端的话仅仅只是做一些基础的校验比如说对图片大小啊以及它的那个它的格式啊如说是那个JPG啊或者是PNG这些的校验。还有一种就是说比如说我们的一些APP头像不是圆形的吗然后我们上传的是方形的图片那我们是不是要进行一个手动的选择裁剪这种的话就是前端来做的然后的话那些对于缩略图啊以及一些那个大小尺寸的压缩这些的话就是用后端来做。 重点看需求不盲目进行优化
上面这种方案看似比较ok但是并没有一个方案是完美的没有最好的方案只有最合适的方案
上述方案主要是靠后端来实现一些图片业务优化的操作而实际上前端也会有很多方案可以进行优化比如
页面图标的渲染——精灵图一张图包含了所有的图标前端只需要定位图标位置展示即可这样子就可以减少网络io的次数
对于资源的渲染——懒加载和预渲染 懒加载——指在页面加载时只加载可视区域内的图片而延迟加载其他区域的图片。其原理是通过监听滚动事件或者计算图片与可视区域的相对位置当图片进入可视区域时再进行加载。懒加载可以减少初始页面加载时的网络请求和资源消耗提高页面加载速度和用户体验。 预渲染——指在页面加载时提前加载未被用户请求的图片资源。其原理是在页面加载完成后通过异步请求或者动态创建link relpreload标签预先加载将要用到的图片资源。预渲染可以减少用户在浏览过程中的等待时间提高图片的加载速度和用户体验。 我们也许能实现一个需求的功能就好像一只飞翔的鸟儿我们能让它飞起来但是我们要追求的应该是怎么才能让它飞的更加自由更加轻松
