动态返回 gif 是啥技术？

[xx19941215]

http://image.thum.io/get/https://jingyan.baidu.com/

直接打开会有缓存，直接返回的 png 。。

需要 把 https://jingyan.baidu.com/ 换成你手里任意一个新的网址

后会发现 它立马返回的是一张 gif 然后这张 gif 是实时渲染的了浏览器请求网址的过程。

这个 response 是如何做到的呢？

[ho121]

缓存在服务器吧，和浏览器缓存没关系

[xx19941215]

@ho121 不是问缓存哈

[noe132]

puppeteer 访问一下截个图不是很复杂把。。。

[xx19941215]

@noe132 重点不是问截图。。您仔细看看这个请求的加载过程，是把一张 gif 返回回来了，但是 gif 的内容是异步实时生产的 我的疑问的点在这里。

[yuzo555]

不了解 GIF 的文件结构，不过 GIF 文件总体上可以是由一帧一帧组成的，我不知道相邻帧之间是不是可以只记录变化的内容，但肯定可以是各自独立的完整静态图片，所以就可以实现这个需求了。

服务端首先设置 Transfer-Encoding: chunked，表示服务端将会慢慢吐内容给客户端，客户端就一段一段接收。
然后可以先传一个 GIF 文件头（里面要规定好这个 GIF 是不会循环播放的），然后每次有更新就吐一帧的内容给客户端。

[yuzo555]

有点类似于服务端临时生成 zip 文件给客户端下载（例如 github 下载源文件 zip 包），服务端其实还在打包，客户端就可以开始下载了，并不需要打包好才能完整下载。

[CrabAss]

这个截图动态加载确实挺酷的

[noe132]

gif 并不是一次性生成的，而是边生成边发送。每 1 秒截一次图，然后把图片转换成 gif 帧，发送出去，直到页面加载完毕。

[also24]

https://www.thum.io/

[iold]

gif? 我用 aria2 下载, 自动命名的" 域名.png"

[kaiki]

你去打开一个冷门点的网页，会发现左下角还有 chrome 加载链接的提示，如果页面在加载后有额外的执行，它也会出现
比如 http://image.thum.io/get/https://xvideo.com?随机字符

[iold]

我觉得是返回慢,然后你的浏览器支持懒加载,就出现了那个效果,你用 ie 打开, 看看不是卡一下,然后一下就出来了.

[66beta]

为什么我看不到你们说的东西啊，就一张图啊，啥都没有

[kaiki]

@66beta 被缓存了，你网址后面加参数他就会重新加载，能看到 thum.io 的加载界面

[kaiki]

它真的可以套娃
http://image.thum.io/get/http://image.thum.io/get/http://image.thum.io/get/http://image.thum.io/get/http://image.thum.io/get/http://image.thum.io/get/http://image.thum.io/get/http://image.thum.io/get/http://image.thum.io/

[superrichman]

gif 加载是类似在线视频，可以边下边播。
你找一张 10mb 的 gif 图，把浏览器网速限制一下就能看出来。

[kaiki]

@superrichman http://image.thum.io/get/http://ip.cn
你看看这个就知道了，他的确是用 chrome 加载然后截图的

[EPr2hh6LADQWqRVH]

可以的这个东西

[codehz]

gif 还可以显示当前时间呢
http://image.thum.io/get/https://hookrace.net/time.gif
(被缓存了就加一个?随机数

[iold]

@kaiki 试了一下 的确是被缓存了 缓存后标头都是 png