从“图片预加载”认识代理设计模式

发布时间：2025-11-05 00:54:39 来源：云智核 作者：IT科技类资讯

本文转载自微信公众号「DYBOY」，从图作者DYBOY。片预转载本文请联系DYBOY公众号。加载

在现代前端优化中，认识图片预加载是代理一种常见的优化方法，预加载的设计背后是设计模式中代理模式的应用。

代理模式是模式为一个对象提供一个代用品或占位符，以便控制对该对象的从图访问。

当我们需要获取某个对象的片预方法或属性的时候，由于权限等限制无法获取，加载然后通过一个有权限的认识代理对象转发我们的获取请求，代理对象可对请求预处理，代理同时在返回结果的设计时候也可以做处理。

生活中的模式例子：代购、网络代理、从图老板秘书等

一、代理模式分类

代理模式细分有：

保护代理的主要用途就是权限控制了，但是在 JavaScript 中并不容易实现保护代理，因为无法判断访问对象的来源。

而在 JavaScript 中常用有虚拟代理和缓存代理。

二、虚拟代理实现图片预加载

在例如一些多图的购物网站(淘宝、京东等)，都使用了图片预加载的技术。如果直接给 img 标签设置 src 的值，由于图片资源过大或者用户网络环境不佳，就会出现一个长时间白屏，以及图片至上而下的分段加载的情况，用户体验不好，因此，常见的做法是服务器租用用一张 Loading 小图占位，等待实际需要加载的图片加载完成后，再将 Loading 小图替换成实际的图片。

比如一个下载图片，并将 img 标签 append 到 HTML 中，同时提供 setSrc(src) 方法用于设置图片资源链接方法的“本体对象”实现如下：

使用：

在弱网环境下的效果：

弱网图片下载体验效果

有个长时间的白屏，用户体验不太友好，为此引入一个 ProxyImage 代理对象，通过该代理对象，在图片真正被加载完成之前，页面中显示一个 loading 动图来提示用户图片正在加载中

使用方法：

效果：

预加载下的体验效果

可以看到我们在没有修改原有的 MyImage 对象，通过代理对象 ProxyImage 给其增加了预加载的能力。

实际上，我们可以不用代理就能实现预加载图片，为什么还要这么做呐?在对象设计的原则中有个“单一职责原则”。如果一个对象承担了多项职责，那么对象就会变得较大，引起它变化的原因就可能有多个，那么职责的耦合度就比较高，会导致脆弱和低内聚的设计，当变化发生时，b2b信息网设计可能会遭到意外的破坏。

单一职责原则值得是，一个类应该仅有一个引起它变化的原因。职责被定义为“引起变化的原因”。

上述的做法，MyImage 仅用于添加设置 img 节点，ProxyImage 赋予了 MyImage 预加载的能力，并且对于 MyImage 对象不会有任何侵入性的修改，符合开放封闭原则。如果有一天网络足够快了，我们只需要改为请求本体而不是代理对象即可。不过要实现这种低成本改造，还得保证“代理和本体接口的一致性”。

保证代理和本地的一致性有如下好处：

三、缓存代理节省计算开销

缓存代理为一些开销大的运算结果提供临时存储，类比于“查表法”。在之前讲《从闭包和高阶函数初探JS设计模式》中有讲到“缓存计算”概念，主要是借助“闭包”来实现临时存储。

首先是一个基本的乘积函数：

我们都知道乘法的计算开销比较大，如果涉及到频繁密集型的计算，那么对于计算机的计算性能要求就比较高，那么思考是否可以用存储换时间?因此想到了将计算过的算式缓存，下次再遇到直接获取值的方式，同样考虑到职责单一设计原则，所以我们可以创建一个缓存代理函数：

这样我们就为乘积函数提供了缓存能力，下次遇到相同算式，就可以不通过计算，类似查表方式拿到计算结果，再一定程度上提升了计算性能。

同理，Ajax 请求是一个耗时的 IO 操作，比如我们获取用户 uid=1 的信息需要 Ajax 请求一次，在一定时间内，当下一次再获取 uid=1 用户的信息的时候，我们没必要再去请求一次，因为用户的基础信息并不是频繁更新的，此时我们可以通过缓存方式拿到上一次获取到的用户信息，节省网络带宽资源，降低网络异常带来出错的可能性。

在一些场景下我们可以尝试自行封装 Ajax 请求，可自行维护缓存策略。

四、总结

代理模式的应用场景像是一种赋能，保证代理和本体接口一致性的情况下，比如给图片加载增加“预加载”能力，给乘法计算增加“缓存”能力。

“青出于蓝而胜于蓝”似乎是一个不错的解释。

相关文章