前端的那些骚操作

五小六

本帖最后由 五小六 于 2024-1-22 21:51 编辑

本帖最后由 五小六 于 2024-1-22 21:47 编辑

SingleFileZ浏览器插件生成离线html的原理

背景

之前发布《制作一个属于自己的epub格式电子书》的评论区里有讨论如何更好的保存静态的网页来应对404，朱焱伟推荐SingleFile浏览器插件确实很好用，后面又推荐了一个离线保存体积更小的插件SingleFileZ，很好奇这个插件是怎么实现的，话说这个插件真的是很好用，五星推荐，浏览器的商店或者GitHub都搜得到。

原理

插件下载html时会移除里面绝大多数script标签并保存图片和字体等资源，采取的应该是base64编码文本，静态html也不需要什么javascript交互只要能很好的展示内容就行。
看看SingleFileZ的简介是怎么描述：

将页面保存到自解压式 HTML/ZIP 混合文件中

离线html源码如下图

离线html的源码格式大致如下图

展示出的元素的树结构是这样的

简单来说就是将一些资源文件压缩为zip并将zip的内容以注释的方式放进html中，在浏览器打开html时先运行script标签的脚本获取到注释中zip内容并自解压，解压后的内容大概是html的文本和其他资源，然后通过赋值给innerHTML刷新网页。总之，达到了离线保存网页同时也压缩了文件的体积，还很好的运用的浏览器的算力解压并展示了网页。

疑问

如上图4.1中所说URL: blob:null/1bbda249-d0ba-4415-bfbd-e5d9a67ac58a 这种应该只是读取了本地的二进制数据，但不明白为什么后台确实有本地的网络请求和成功的状态码。如下图示，确实有很多xhr和fetch请求

感叹

这里真是要感叹作者对html得熟练应用，很巧妙的应用注释标签的功能将一些不符合规则的文件存入html中。

王一之

使用 URL.createObjectURL 就可以创建出 blob 的url，至于为什么这样做，难道是为了模拟请求？

五小六

王一之 发表于 2024-1-23 09:47
使用 URL.createObjectURL 就可以创建出 blob 的url，至于为什么这样做，难道是为了模拟请求？ ...

经过你这么一说我查看了一下展示的元素，是href和src里面直接这么写的。
<link rel="stylesheet" href="blob:null/acc4ed48-a79b-4eba-a874-426cbccabdc2" reportloaderror="">
<img class="rich_pages wxw-img" data-type="png" data-w="36" data-width="100%" style="display:block;vertical-align:inherit;visibility:visible!important;width:100%!important;height:auto!important" data-index="1" src="blob:null/87a6df07-ee56-463c-bc8f-642c6dde1d95" _width="100%" crossorigin="anonymous" alt="图片" data-fail="0">
前端里面的知识点实在太多了，一直都在路上，还是要多讨论，不然我可能就不会往下挖了。

五小六

王一之 发表于 2024-1-23 09:47
使用 URL.createObjectURL 就可以创建出 blob 的url，至于为什么这样做，难道是为了模拟请求？ ...

刚根据`href="blob:null`搜到一篇文章，虽然没有读懂但是标题说得很清楚。[前端利用Blob对象创建指定文件并下载](https://segmentfault.com/a/1190000015026760) 在离线html的源代码中也找到了`n.content = URL.createObjectURL(new Blob([e],{type: t})),`代码，那就应该是利用Blob对象创建图片和字体等文件，这个下载估计就是href或src的请求了。
ggnb

五小六

阅读开发文档是一个很好的习惯，刚发现这些内容作者的文档里都有提及 开发文档的部分节选