HTML5 本地存储作为缓存和单个资产请求

HTML5 LocalStorage as cache and single asset request

本文关键字：单个资 请求 缓存 存储 HTML5      更新时间：2023-09-26

我想知道以下概念的限制和缺点是什么：

要求：

  1. 支持本地存储的浏览器。
  2. 服务器端异步非阻塞 I/O 技术。

让我们想象一下以下请求流：

  1. 客户端 GET/请求 -> 服务器 。我们称这个阶段为"问候"，这是一个有趣的阶段，因为客户端现在发送（当然也是槽头）：

    • 知识产权
    • 浏览器
    • 浏览器版本
    • 语言
    • 字符集

  2. 服务器 -> 客户端 （200 OK）

  3. 客户端 -> 如果正常 ->与服务器建立网络套接字

一旦建立了WebSocket，我们就进入了"资产流"阶段。

  1. 服务器 -> 查找特定于 语言、浏览器、分辨率特定资产的匹配资产（样式表、图像、JavaScript 文件、字体等），并通过 websocket 对它们进行流式处理。

  2. 服务器 -> 请求 （WebSocket、资产的异步流）

好处 1. 没有通过线路的多个请求，避免了DNS查找等。

好处 2. 将这些资产缓存在本地存储中，这是下一个阶段。

  1. request ->放入本地存储缓存中。
  2. 请求 ->呈现网站。

我想知道得到一些意见，什么可能是个好主意，什么可能不是等等。

我的第一个想法是：

  • 此体系结构不支持 CDN
  • 我们需要一个请求来获取javascript/html来启动WebSocket等。

我希望我的问题很清楚。

有趣的方法，绝对值得思考。让我成为你的魔鬼代言人：

好处 1.没有通过线路的多个请求，避免了 DNS 查找 等。

这是真的，尽管这只是您第一次访问页面/网站时的问题。通过现代浏览器实现的预取，它也得到了一定程度的缓解。重要的是要记住，浏览器将并行下载多个资源，这可能比批量下载整个有效负载更快，而且响应速度更快。

使用今天的技术，就Web客户端而言，您已经可以使用只有少量资源来提供完整的页面和应用程序（所有这些都可以gziped！

  1. .HTML
  2. 合并和缩小的 CSS 文件作为一个资源
  3. 与 JS 相同
  4. 图像精灵

好处 2.在本地存储中缓存这些资产...

浏览器已经缓存了这些资产！此外，还有一些经过验证的智能技术可以使这些缓存失效（这是软件开发中的第二大挑战）。

其他需要考虑的事项：

  1. 不要小看 CDN。当涉及到时，他们是救命稻草延迟。您的方法在第一次对延迟不友好请求。
  2. AJAX 和渐进式增强方法可以优化 Web 应用程序体验让它感觉像一个桌面应用程序。
  3. 您需要重新发明或修改FireBug等工具才能工作。一个流包含所有资源。没有网络开发可以想象现在没有这些工具。
  4. 如果浏览器本身不支持此方法，那么您将仍然有一段地狱般的时间编程并让浏览器知道您的流包含什么以及如何处理它。当你处理流并触发所有必要的事件（在最佳情况下序列！您可能不会获得您希望的那么多好处。

祝你好运！

相关文章：