静态资源加载

技术文档网 2021-04-15

在模块化开发模式下,静态资源需要程序自己收集,因此为一个单独页面指定特定的静态资源加载的方式已经不能满足了。

针对于单个请求,最优的加载方案是实时收集需要的模块静态资源并输出,不会浪费带宽。但是,一旦需要的模块变动,静态资源也需要变动,造成浏览器缓存失效,反而造成了用户和服务器的带宽浪费。

还有一种方案是静态分析静态资源,将可能使用的静态资源全部输出,显然,这样对缓存友好,但极大浪费了带宽,影响加载体验。

如何能让静态资源加载方案兼顾浏览器缓存与网络带宽?答案是分组。将更新频度分级,同一级的将进行打包,这样会将单个静态资源的增删影响限制在同一级内。

一个页面的静态资源是存在依赖的,我们希望它们总是按照预期的顺序进行加载。设想一个静态资源的拓扑图,正确的输出顺序总是保证被依赖的在前,依赖的在后。通过拓扑排序(?)可以完成这个任务,但是在分组的需求下,如何输出多个满足依赖的顺序?

相关文章

  1. Web服务器缓存

    一、URL映射 对于任何的web服务器,当我们向他发送一个http请求后,它要做的主要工作就是解析URL,然后完成从URL到实际内容或资源的映射。这里所说的映射是一个抽象概念,实际上就是服务器处理请

  2. 静态资源加载

    在模块化开发模式下,静态资源需要程序自己收集,因此为一个单独页面指定特定的静态资源加载的方式已经不能满足了。 针对于单个请求,最优的加载方案是实时收集需要的模块静态资源并输出,不会浪费带宽。但是,一旦

  3. 服务器推技术实现

    ajax定时请求 通过ajax异步请求,并每隔一段时间请求一次如setInterval或客户端循环请求等 setInterval(function() { $.ajax({ u

  4. 移动端滚动穿透问题

    定义:移动端弹出fixed弹窗的话,在弹窗上滑动会导致下层的页面跟着滚动,这个叫 “滚动穿透” 解决方案1 在弹出层的touchstart事件中调用preventDefault 这种方法不可取,至少有

  5. 移动端屏幕尺寸与像素密度

    一、英寸与厘米转换 1 inch = 2.54cm = 25.4mm 二、像素间距 像素(Pixels)是组成数字图像的最小单元,即一个一个彩色的颜色点。 一般人都以为像素是一个个的小圆点,实际上

随机推荐

  1. Web服务器缓存

    一、URL映射 对于任何的web服务器,当我们向他发送一个http请求后,它要做的主要工作就是解析URL,然后完成从URL到实际内容或资源的映射。这里所说的映射是一个抽象概念,实际上就是服务器处理请

  2. 静态资源加载

    在模块化开发模式下,静态资源需要程序自己收集,因此为一个单独页面指定特定的静态资源加载的方式已经不能满足了。 针对于单个请求,最优的加载方案是实时收集需要的模块静态资源并输出,不会浪费带宽。但是,一旦

  3. 服务器推技术实现

    ajax定时请求 通过ajax异步请求,并每隔一段时间请求一次如setInterval或客户端循环请求等 setInterval(function() { $.ajax({ u

  4. 移动端滚动穿透问题

    定义:移动端弹出fixed弹窗的话,在弹窗上滑动会导致下层的页面跟着滚动,这个叫 “滚动穿透” 解决方案1 在弹出层的touchstart事件中调用preventDefault 这种方法不可取,至少有

  5. 移动端屏幕尺寸与像素密度

    一、英寸与厘米转换 1 inch = 2.54cm = 25.4mm 二、像素间距 像素(Pixels)是组成数字图像的最小单元,即一个一个彩色的颜色点。 一般人都以为像素是一个个的小圆点,实际上