V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
xx19941215
V2EX  ›  问与答

动态返回 gif 是啥技术?

  •  
  •   xx19941215 · 2021-03-23 17:43:17 +08:00 · 2337 次点击
    这是一个创建于 1341 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    这个 response 是如何做到的呢?

    23 条回复    2021-03-24 10:09:11 +08:00
    ho121
        1
    ho121  
       2021-03-23 17:50:39 +08:00 via Android
    缓存在服务器吧,和浏览器缓存没关系
    xx19941215
        2
    xx19941215  
    OP
       2021-03-23 18:12:40 +08:00
    @ho121 不是问缓存哈
    noe132
        3
    noe132  
       2021-03-23 18:25:39 +08:00
    puppeteer 访问一下截个图不是很复杂把。。。
    xx19941215
        4
    xx19941215  
    OP
       2021-03-23 18:35:29 +08:00
    @noe132 重点不是问截图。。您仔细看看这个请求的加载过程,是把一张 gif 返回回来了,但是 gif 的内容是异步实时生产的 我的疑问的点在这里。
    yuzo555
        5
    yuzo555  
       2021-03-23 18:36:00 +08:00   ❤️ 2
    不了解 GIF 的文件结构,不过 GIF 文件总体上可以是由一帧一帧组成的,我不知道相邻帧之间是不是可以只记录变化的内容,但肯定可以是各自独立的完整静态图片,所以就可以实现这个需求了。

    服务端首先设置 Transfer-Encoding: chunked,表示服务端将会慢慢吐内容给客户端,客户端就一段一段接收。
    然后可以先传一个 GIF 文件头(里面要规定好这个 GIF 是不会循环播放的),然后每次有更新就吐一帧的内容给客户端。
    yuzo555
        6
    yuzo555  
       2021-03-23 18:39:52 +08:00
    有点类似于服务端临时生成 zip 文件给客户端下载(例如 github 下载源文件 zip 包),服务端其实还在打包,客户端就可以开始下载了,并不需要打包好才能完整下载。
    CrabAss
        7
    CrabAss  
       2021-03-23 18:41:18 +08:00
    这个截图动态加载确实挺酷的
    noe132
        8
    noe132  
       2021-03-23 19:02:58 +08:00
    gif 并不是一次性生成的,而是边生成边发送。每 1 秒截一次图,然后把图片转换成 gif 帧,发送出去,直到页面加载完毕。
    also24
        9
    also24  
       2021-03-23 19:07:20 +08:00
    iold
        10
    iold  
       2021-03-23 19:07:32 +08:00
    gif? 我用 aria2 下载, 自动命名的" 域名.png"
    kaiki
        11
    kaiki  
       2021-03-23 19:09:10 +08:00
    你去打开一个冷门点的网页,会发现左下角还有 chrome 加载链接的提示,如果页面在加载后有额外的执行,它也会出现
    比如 http://image.thum.io/get/https://xvideo.com?随机字符
    iold
        12
    iold  
       2021-03-23 19:10:45 +08:00
    我觉得是返回慢,然后你的浏览器支持懒加载,就出现了那个效果,你用 ie 打开, 看看不是卡一下,然后一下就出来了.
    66beta
        13
    66beta  
       2021-03-23 19:11:33 +08:00
    为什么我看不到你们说的东西啊,就一张图啊,啥都没有
    kaiki
        14
    kaiki  
       2021-03-23 19:14:22 +08:00
    @66beta 被缓存了,你网址后面加参数他就会重新加载,能看到 thum.io 的加载界面
    superrichman
        16
    superrichman  
       2021-03-23 19:19:18 +08:00 via iPhone
    gif 加载是类似在线视频,可以边下边播。
    你找一张 10mb 的 gif 图,把浏览器网速限制一下就能看出来。
    kaiki
        17
    kaiki  
       2021-03-23 19:21:00 +08:00
    @superrichman http://image.thum.io/get/http://ip.cn
    你看看这个就知道了,他的确是用 chrome 加载然后截图的
    EPr2hh6LADQWqRVH
        18
    EPr2hh6LADQWqRVH  
       2021-03-23 19:21:13 +08:00
    可以的这个东西
    codehz
        19
    codehz  
       2021-03-23 19:21:46 +08:00 via Android   ❤️ 1
    gif 还可以显示当前时间呢
    http://image.thum.io/get/https://hookrace.net/time.gif
    (被缓存了就加一个?随机数
    iold
        20
    iold  
       2021-03-23 19:33:33 +08:00
    @kaiki 试了一下 的确是被缓存了 缓存后标头都是 png
    delectate
        21
    delectate  
       2021-03-23 19:36:52 +08:00
    其实和 hls 差不多,服务端获取+渲染+“分帧”传输。
    也许,可以用来翻墙?
    yukiww233
        22
    yukiww233  
       2021-03-23 19:48:08 +08:00
    用服务器去加载用户输入的网站 太危险了吧
    ZeroDu
        23
    ZeroDu  
       2021-03-24 10:09:11 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1150 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 23:53 · PVG 07:53 · LAX 15:53 · JFK 18:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.