当前位置:首页 > 技术分析 > 正文内容

blob 协议是什么

ruisui884周前 (05-21)技术分析12

我在看 b 站视频播放的时候就发现他们视频是用的 blob 协议。

上面的视频播放就是这种链接,src 的值是 blob:https://www.bili这种。

而不是我们以为的 https://www.bili这种。

他用的就是这种 blob URL。如果直接复制这个链接在浏览器地址栏是打不开的。

什么是blob URL

blob URL 也叫对象URL,这个是与 Blob 与 file 对象一起使用。

Blob URL 只能由浏览器在内部生成。

是使用 URL.createObjectURL()将创建一个对 Blob 或者 File 对象的特殊引用。

URL.revokeObjectURL()释放该引用。这些URL只能在浏览器的单个实例和同一会话中本地使用。也就是这个页面的生命周期。

为什么要使用他

Blob URL/Object URL 是一种伪协议,允许 BlobheFile 对象用作图形,二进制数据的下载链接等内容的 URL 源。

例如,你不能将 image 对象的原始字节数据交给他,因为他不知道如何梳理他。例如,他需要通过 URL 加载图像,也就是二进制数据,这适用于任何需要URL 作为源的内容。

与其上传二进制数据,然后通过URL 返回他。不如使用额外的本地步骤,以便能够直接访问数据,而不需要通过服务器。

比 data URL

它是一个 data URI 的一个更好的替代方案,后者是编码为 base64 的字符串。Data URI 的问题实在 JavaScript 中每个字符占用两个字节。

最重要的是,由于 base-64 编码,增加了 33%。Blobs 是纯二进制字节数据,不像 data-URI 那样有任何显著开销,这使得他们处理起来更快,更小。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/4171.html

标签: blob协议
分享给朋友:

“blob 协议是什么” 的相关文章

Vue3 如何实现父子组件传值?

在Vue 3中,要实现父子组件传值效果主要通过props和emit两种机制来实现,下面我们就来详细介绍一下这两种机制。父组件向子组件传值propsprops是Vue组件的一种机制,主要的作用就是实现从父组件向子组件传递数据值,在父组件上通过在子组件标签上定义属性来实现数据属性值的传递,在子组件中通过...

编码 10000 个小时后,开发者悟了:“不要急于发布!”

【CSDN 编者按】在软件开发的道路上,时间是最好的老师。根据“一万小时定律”,要成为某个领域的专家,通常需要大约一万小时的刻意练习。本文作者身为一名程序员,也经历了一万小时的编程,最终悟出了一个道理:慢即是快,重视架构设计和代码质量,确保每一行代码都经得起时间的考验。作者 | Sotiris Ko...

JS数组过滤元素的方法

引言JavaScript 作为前端开发的核心技术之一,在现代 Web 开发中扮演着举足轻重的角色。随着 Web 应用越来越复杂,高效处理数据集合的需求日益凸显。本文旨在介绍 JavaScript 中数组过滤的基础知识及其在实际项目中的应用技巧。技术概述定义数组过滤是 JavaScript 提供的一种...

数组、去重、排序、合并、过滤、删除

ES6数字去重 Array.from(new Set([1,2,3,3,4,4])) //[1,2,3,4] [...new Set([1,2,3,3,4,4])] //[1,2,3,4]2、ES6数字排序 [1,2,3,4].sort(); // [1, 2,3,4],默认是升序...

Ruoyi-vue第五十二章:Uniapp小程序配置tabbar底部导航栏

一、功能实现效果如下图底部的tabbar二、uniapp的tabBar如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页。在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在App和小程序端提升性...

同步和异步的区别是什么,同步和异步的代码

同步和异步的区别在于程序执行操作时是否需要等待操作完成。同步操作意味着程序在执行一个操作时会一直等待操作完成才继续执行下一个操作,而异步操作则是指程序执行一个操作时,不会等待操作完成,而是立即返回,继续执行后面的操作。以下是同步和异步的代码示例:同步代码示例:console.log("sta...