网站首页 > 技术文章 正文
1. 前端代理
HTML5 时代的黑科技层出不穷,但最具创新的也许要数 Service Worker,它甚至可以颠覆传统的 B/S 网络架构。
顾名思义,Service 是服务程序,而 Worker 常用于多线程。因此 Service Worker(以下简称 SW)是一种独立于页面、可持续运行的浏览器后台程序。
SW 提供了一组 API,可让网站开发者拦截自己站点下 所有页面 产生的 所有请求,并且能自定义响应结果。(除了一些特殊请求无法拦截)
这,如同在本地开启一个反向代理服务!
有了这么逆天的功能,在前端做负载均衡就非常容易了,甚至还能实现过去不敢想象的效果 —— 实时无缝的切换。
. 实时切换
作为代理,当 SW 加载上游资源失败时,可选择不返回错误结果,而是尝试后备站点再次加载,直到返回正确结果,才响应给下游网页:
在网页看来,这只是一次普通的请求与响应 —— 也许用时更长一些,但结果仍是正常的。SW 中的重试细节,对于业务是完全透明的!
相比 DNS 最少也有数秒的缓存时间,这种通过程序控制的方案,能在极短的时间内切换源站点。这样即使某些节点出现故障,页面甚至都毫无感知!
3. 校验加密
除了能改变 URL 之外,SW 当然还能操作返回的数据。
这意味着,我们可以增加一个校验机制,用以检测资源是否遭到篡改。于是那些插广告、加水印之类的问题,就能很好解决了!
此外,我们还可以对原始数据进行加密,再由 SW 解密。这对于私密性不高的节点,很是有意义。
例如用 Raw Git 作为免费空间,我们所有的文件都能在 GitHub 仓库里找到,任何人都可以轻易查看。但如果对文件进行加密,同时对 SW 中的解密算法进行混淆保护,就能增加查看难度了 —— 至少 GitHub 的搜索功能、以及普通的蜘蛛,是不会抓到明文内容了。
更进一步,我们甚至还可以对文件名进行 Hash 再存储。这样,暴露的只是一堆乱七八糟、没有目录层次的文件!
4. 离线启动
前面我们提到,SW 能拦截页面里的请求。事实上 SW 开启之后,访问页面本身也会经过 SW。
这意味着:用户只要装上 SW,之后所有的请求都可代理到外部节点上,于是可大幅减少自己网站的流量消耗!
这样就算我们的网站挂了,但只要有一个节点可用,用户仍能正常访问!
5. 精简启动
为了能在带宽吃紧的情况下迎接新用户,我们参照之前「迷你启动器」的方案,把安装 SW 所需的资源,精简到最小 —— 最终只需两个极小的文件:html 和 js 文件。(SW 的脚本必须在当前站点下)
用户首次访问时,无论访问哪个 URL,我们都返回这个 html 文件,用以安装 SW 服务;安装完成后,页面自动刷新,这时所有请求都走 SW 代理了!
关于 html 的内容,和之前探讨的一样,所有功能都由外部脚本实现:
<script src=//free-host-n.net/boot.js></script>
而 SW 脚本的内容,同样也可以放置在外部:
copyimportScripts('//free-host-n.net/sw.js')
于是,我们的站点只需承载两个极小的文件,就能获得无尽的带宽!
6. 改造成本
相比之前强缓存的方案,如今使用 SW 无需对前端做任何改造,页面里的资源仍保持原始路径即可。如同使用 VPN 一样,无需对应用程序对任何修改,开启后流量就能自动转发到代理上,用起来非常简单。
这样,任何一个网站都能轻松接入使用!
事实上 SW 可实现的效果远不止这些,我们继续深入挖掘吧。
猜你喜欢
- 2024-10-18 JavaScript 九种跨域方式实现原理
- 2024-10-18 Proxy 来代理 JavaScript 里的类(js中proxy)
- 2024-10-18 octokit.js:2023每个前端都值得学习的通用SDK!
- 2024-10-18 一面 2:JS-Web-API 知识点与高频考题解析
- 2024-10-18 使用reveal.js制作精美的网页版PPT
- 2024-10-18 es6中的代理-Proxy(es proxy)
- 2024-10-18 事件——《JS高级程序设计》(javascript高级程序设计 javascript权威指南)
- 2024-10-18 「JavaScript 从入门到精通」18.WebApi介绍
- 2024-10-18 day7:前端面试题(js)(前端面试题2021及答案js)
- 2024-10-18 前端面试应该注意哪些问题?(前端面试应该注意哪些问题呢)
- 最近发表
- 标签列表
-
- cmd/c (64)
- c++中::是什么意思 (83)
- 标签用于 (65)
- 主键只能有一个吗 (66)
- c#console.writeline不显示 (75)
- pythoncase语句 (81)
- es6includes (73)
- sqlset (64)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- chromepost (65)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- & (66)
- java (73)
- js数组插入 (83)
- linux删除一个文件夹 (65)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)