Code Monkey home page Code Monkey logo

decent-cdn's Introduction

网站 CDN 去中心化尝试

最新方案

查看:https://github.com/EtherDream/freecdn


演示

https://fanhtml5.github.io/

原理

将网站资源上传到外部站点,例如图床、相册、免费空间等(本案例使用 IPFS),并记录下原路径与新 URL。

网站前端通过 Service Worker 拦截所有资源加载,将原始路径代理到相应的外部 URL 上,这样就能大幅降低网站带宽消耗,并且能根据用户端上的实际网络情况,动态选择最优节点。

部署

网站只需部署 2 个文件,一个 html 用于 404 展示,另一个 js 用于 SW 脚本。

当用户首次访问时,请求站点任意路径(上述 JS 除外)就能触发 404 页面,通过该页面即可实现 SW 的安装。然后页面自动刷新,之后所有的流量都走 SW 了。

安全性

为了防止外部站点篡改资源内容,我们还得记录资源 Hash 值。但这面临一个问题:我们必须等整个资源下载完成,才能对数据进行校验,这将导致资源无法渐进展示。例如,大图片在加载过程中始终处于白屏,最后才一次性展示,而无法边加载边展示。

为此,这里使用分块 Hash。我们将资源数据分成若干块(B1, B2, ..., Bn),然后使用链式 Hash:

H1 = hash(B1 + H2)
H2 = hash(B2 + H3)
H3 = hash(B3 + H4)
...
Hn-1 = hash(Bn-1 + Hn)
Hn = hash(Bn)

然后将 B1, H2, B2, H3, B3, ..., Hn, Bn 合并成新文件。在资源目录里,只需记录 H1 即可。

这样就能做到边校验边展示的效果了。具体实现可参考 tool/pack.js

文件头

为了让文件更有通用性,我们将其打包成图片格式,使得可以在更多的站点上传。

出于演示,目前只在头部放置了一个 1x1 的 GIF 文件(这里称之 stub)。更好的方式,则是将数据放置于像素,以防网站修改文件信息。

更新中...

HTTP 206、错误重试、负载均衡、多线程加速、自动上传工具

参考:https://yq.aliyun.com/articles/236582

decent-cdn's People

Contributors

etherdream avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

decent-cdn's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.