缩小的单个捆绑包与通过 http/2 的多个文件

2024-03-21

对于 CSS 和 JS 捆绑,一般建议是什么:是将所有内容捆绑到一个文件中更好,还是提供多个文件更好?

我个人认为多个文件更好,尤其是使用 http/2,但是捆绑有很好的理由:当所有内容都在一个文件中时,缩小和 gzip 会产生更好的结果,因为在编写大量代码时通常会出现所有重复情况。在另一端提供多个文件可以改善缓存并允许并行下载,但在可以缩小的文件之间包含相同的代码。

是否有任何好的统计数据可以比较多个文件和捆绑文件的文件大小、压缩大小和下载时间?

Stack Overflow 上已经有几个关于这个问题的主题,但我找不到一个像我希望的那样考虑到 http/2 和 minification/gzip 的主题。


以下是 http/2 的一些功能,它们减轻了串联的好处(来自高性能浏览器网络 https://hpbn.co/optimizing-application-delivery/#minimize-concatenation-and-image-spriting):

将多个资产捆绑到单个响应中是 HTTP/1.x 的一项关键优化,其中有限的并行性和高协议开销通常超过了所有其他问题 - 请参阅串联和分割。然而,对于 HTTP/2,多路复用不再是问题,并且标头压缩极大地减少了每个 HTTP 请求的元数据开销。因此,我们需要根据串联和分割的新优缺点重新考虑其使用:

  • 捆绑的资源可能会导致不必要的数据传输:用户可能不需要特定页面上的所有资源,或者根本不需要。

  • 捆绑的资源可能会导致昂贵的缓存失效:一个组件中的单个更新字节会强制完全获取整个捆绑包。

  • 捆绑的资源可能会延迟执行:在传输整个响应之前,无法处理和应用许多内容类型。

  • 捆绑的资源可能在构建或交付时需要额外的基础设施来生成关联的捆绑包。 如果资源包含相似的内容,则捆绑的资源可以提供更好的压缩。

...

HTTP/2 通过提供对请求和响应复用的支持消除了这种不幸的权衡,这意味着我们现在可以通过提供更细粒度的资源来优化我们的应用程序:每个资源都可以有一个优化的缓存策略(过期时间和重新验证令牌),并且可以单独更新,不会使捆绑包中的其他资源失效。简而言之,HTTP/2 使我们的应用程序能够更好地利用 HTTP 缓存。

我不认为重复会大大减少文件大小。此外,文件大小只是延迟和感知速度的一方面。例如,即使初始加载速度更快,当用户第二次访问时会发生什么?如果一个文件需要失效怎么办?

虽然我没有看到有关您的问题的任何具体数据,但以下是 Google 对 http/1.1 与 SPDY(http/2 的前身)的结果:

最终你的问题的答案将是一个意见,除非有人做一些测试来找出答案。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

缩小的单个捆绑包与通过 http/2 的多个文件 的相关文章

  • 如何在bootstrap中使用垂直对齐

    简单的问题 如何使用 bootstrap 在一个列内垂直对齐一个列 这里的例子 我想垂直对齐child1a和child1b http bootply com 73666 http bootply com 73666 HTML div cla
  • 为什么 Firefox 会忽略弹性项目的下边距?

    它尊重margin bottom只有当有足够的空间时 否则 Firefox 会表现得好像没有margin bottom at all 全面镀铬 铬合金缩小 火狐浏览器缩小了 Flexbox 的行为是否正确 如何修复它 codepen htt
  • 我可以根据基于百分比的宽度设置 div 的高度吗? [复制]

    这个问题在这里已经有答案了 假设我有一个宽度为 body 的 50 的 div 如何使其高度等于该值 这样当浏览器窗口宽度为1000px时 div的高度和宽度均为500px 这实际上可以仅使用 CSS 来完成 但 div 内的内容必须绝对定
  • 图像缩放会导致 Firefox/Internet Explorer 质量较差,但 Chrome 不会

    See http jsfiddle net aJ333 1 http jsfiddle net aJ333 1 在 Chrome 中 然后在 Firefox 或 Internet Explorer 中 图像最初是 120 像素 我缩小到 2
  • 如何使用 CSS 创建菱形内的标题?

    我想创建一种风格处理 类似于 这样的事情如何运作 使用 CSS 变换 您可以使用两个伪元素和 CSS 旋转变换来创建菱形形状 如下面的代码片段所示 这将使文本不受变换的影响 因此定位它会相对容易 The rotateZ 45deg 产生等边
  • 如何在 RESTful Flask 应用程序中将 Pandas DataFrame 与 ProtoBuf/Gzip 进行序列化/反序列化?

    我有一个pandas dataframe作为Flask Response对象在一个flask应用 目前我正在将其转换为JSON Object df df to json return Response df status 200 mimet
  • 具有多个路径的 SVG 剪辑路径的悬停事件

    我有一个 SVG 演示图像 其中包含多个正在剪辑动画 GIF 的圆圈 当用户将鼠标悬停在每个圆圈上时 是否可以观察每个圆圈的悬停事件 例如左上角的圆圈或右中角的圆圈 另外 当这些圆圈悬停时 是否可以操纵这些圆圈上的颜色叠加 EDIT 理想情
  • 为什么 Chart.js 画布不考虑容器元素的填充?

    我将 Chart js 与简单的折线图一起使用 但 Chart js 计算的宽度和高度属性似乎基于父元素的总宽度和高度 忽略填充 var options maintainAspectRatio false responsive true v
  • 具有不同高度块的三列布局

    我有基于 Twitter Bootstrap 的简单 3 列布局 唯一的问题是 每根柱子都是由不同高度的块组装而成 div class container div class row div class span4 div class bl
  • 带有checked和after标签的css表单复选框样式[重复]

    这个问题在这里已经有答案了 我正在尝试在不使用 JavaScript 或 JQuery 的情况下设计一个表单 它包括一系列复选框 这个想法是如果未选中复选框 则在复选框后显示某个 gif 否则 后面不显示任何内容 这是我的代码 input
  • 我可以用 SASS \ Compass 计算和使用元素高度吗

    我在 RoR 项目中使用 sass 和 compass 我需要分配给top元素的 CSS 属性值 即元素高度除以 2 我可以用 SASS Compass 来做吗 你似乎已经得到了XY问题 https meta stackexchange c
  • 删除添加到购物车通知并更改 Woocommerce 中的“添加到购物车”按钮

    How to remove has been added to your cart text from shopping cart page and how to replace quantity and add to cart butto
  • Bootstrap 如何从一个类切换到下一个类?

    我试图理解Bootstrap 3的反应能力 我明白在css如果一个元素有 2 个类 那么第二个类将覆盖第一个类 但是 当您使用以下命令创建响应式设计时Bootstrap 您的元素将如下所示 div class col sm 1 col md
  • 如何在跨度上使用 CSS3 变换? [复制]

    这个问题在这里已经有答案了 我有一个行内元素 a span 嵌套在 h1 标签 我申请了一个转换财产给h1 skew所以它看起来像一个平行四边形 我需要转换 the span 标记以 矫正 它及其文本 但这似乎只适用于 IE Here is
  • 如何使用.clearfix类?

    我想我误解了这个概念 clearfix班级 也许有人可以帮助我 我正在寻找一种使用方法float and clear不会弄乱我的标记 所以我想 那就是那里 clearfix可以用于 在空的 H5BP 项目内部 我的标记如下所示 div di
  • CSS3 过渡缩放但不平移

    我在任何地方都找不到这个问题的答案 可能是因为它不存在 但无论如何 是否可以独立定义平移和缩放的转换 而不是定义 transition property transform 现在我得到了以下定义 logo position absolute
  • 如何在 jQuery 中使用其中心作为参考点来缩小 div?

    我有以下 div div style margin left 0px height 100px width 100px background color red div 我想使用 jQueryanimate 将 div 缩小到其大小的一半
  • 针对较小屏幕的拆分表行

    我有一个固定宽度为 960px 有 5 列的表格 当我在移动设备中查看时 我想制作第 3 4 5 列 看起来就像在下一行 有什么方法可以让 CSS 打断一行 使其看起来像这样 但是 还保留原来的HTML代码吗 您可以使用 FlexBox f
  • -moz-变换 z-index 错误?

    In 这个测试用例 http jsfiddle net MZ7PX 没有 moz transform rotate 31deg 黄色框是可见的 它应该是可见的 但是如果我添加这个 尽管有一个黄色框是不可见的z index of 999 Wh
  • 带有无序列表的 Flexbox

    我正在尝试学习 Flexbox 我真的很喜欢它 我正在尝试 玩动态宽度 当我这样做时div它有效 如果我尝试这样做li 它也不起作用 我的代码已上线codepen http codepen io jrock2004 pen pjvZJd d

随机推荐

  • 收到“Stream 不支持写入。”以下代码中出现异常

    我正在尝试将图像上传到 Amazon S3 但在此之前我正在调整图像大小 为了调整大小 我必须传递流对象 并且在某一时刻 注释为 Error 的行 我收到 Stream 不支持写入 例外 请帮忙 public ActionResult Ad
  • Vim 中可以有特定于文件类型的键绑定吗?

    In my vimrc文件中 我有一个用于注释的键绑定 用于插入双斜杠 在一行的开头 the mappings below are for commenting blocks of text map
  • 扩展 AbstractAnnotationConfigDispatcherServletInitializer 时的 getServletConfigClasses() 与 getRootConfigClasses()

    有什么区别getServletConfigClasses vs getRootConfigClasses 延伸时AbstractAnnotationConfigDispatcherServletInitializer 从今天早上开始我已经阅
  • 管理中自定义 Magento 配置出现 404 错误

    我正在 Magento 1 6 中开发自定义 SMS 模块 我已经设置了system xml文件来管理相关的自定义配置字段 菜单条目显示出来 但当我单击它时 会显示 404 错误页面 而不是预期的配置字段列表 你能看到我的代码中有任何错误吗
  • 如何在 iPhone 应用程序中实现密码恢复?

    我想在我正在开发的 iPhone 应用程序中添加简单的密码保护 我可能会使用 crypt 将密码存储在我的数据库中 该数据库采用 CoreData sqlite 格式 我认为我对如何创建和存储密码有很好的了解 但如果用户忘记密码 我想添加密
  • do-while 循环的目的是什么? [复制]

    这个问题在这里已经有答案了 我知道 do 的作用 以及它如何与 while 循环配合 但是无论 do 是否存在 while 循环代码不会相同吗 考虑以下 while condition myFunction and do myFunctio
  • 在 NodeJS 中,如何将 HTTP 请求包装到 Promise 中?

    NodeJS 6 9 3 我编写了一个简单的 NodeJS 应用程序 它发出如下所示的请求 var http request require request http request method GET uri https search
  • 持续检测互联网连接

    我希望我的应用程序能够自动检测互联网连接丢失 所以我使用以下代码 void applicationDidBecomeActive UIApplication application Reachability networkReachabil
  • 跟踪未登录的用户

    是否可以在不使用会话或 cookie 的情况下跟踪未登录的用户 有没有更靠谱的方法呢 就像www filefactory com或其他类似的下载空间网站一样 他们可以跟踪您是否是免费用户并发送下载请求 在开始下一次下载之前您必须等待x次 我
  • 如何使用R表函数获取比例? [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 我有一个犯罪数据集 其中变量很少 如 ID Year Date Arrest 现在我试图获取特定年份中逮捕的比例 例如多
  • 检查数组中的值

    我需要检查数组以查看用户输入是否已存在 并显示一条消息以确定用户输入是否存在 第一部分正在工作 但我尝试创建一种单词检查方法 我不确定我是否走在正确的道路上 干杯 import java util Scanner public class
  • 如何检测文本文档之间的重复项并返回重复项的相似度?

    我正在编写一个爬虫来从某个网站获取内容 但是内容可以重复 我想要 以避免这种情况 所以我需要一个函数可以在两个文本之间返回相同的百分比来检测两个可能重复的内容示例 文本 1 我正在编写一个爬虫 文本2 我正在编写一些文本爬虫来获取 比较函数
  • 为什么同一类的对象可以访问彼此的私有数据?

    为什么同一类的对象可以访问彼此的私有数据 class TrivialClass public TrivialClass const std string data mData data const std string getData co
  • React Navigator StackNavigator:从同一场景调用两次时 goBack 不起作用

    假设我想实现一个具有目录结构的文件浏览器 我创建了一个 React Native 组件 它列出了特定文件夹的文件和目录 当我单击一个文件夹时 我希望进入新文件夹并列出其文件和文件夹 显然 我希望能够使用相同的 React 组件来渲染不同的文
  • 使用嵌套属性的 Rails 中多对多关系的下拉菜单

    我通过多对多关联有三个表 超市 产品和供应 每个超市可以存放多种产品 每种产品可以在多个超市销售 该关联是通过供应模型建立的 超级市场 class Supermarket lt ActiveRecord Base attr accessib
  • FTP 传入监控(上传时)

    我们有大约 100 个用户通过 FTP 登录并上传文件 我们的在线系统 PHP 应该显示刚刚上传的项目 我不想继续检查所有不同的 FTP 文件夹来检查新文件 在不降低服务器速度的情况下 使用 PHP 检查新文件的最佳方法是什么 所有用户都在
  • iOS6 在非越狱设备上切换 WiFi

    我正在开发一个内部 iOS 应用程序 不适用于苹果商店 所以我很乐意使用私有 API 并且我希望能够以编程方式打开或关闭 wifi 我想要这样做的原因是 对于某些 WiFi 路由器 每当互联网连接中断时 iPad 就无法恢复 WiFi 不过
  • 为什么下面的结果是零? [复制]

    这个问题在这里已经有答案了 下面的每个 print 语句都会产生 0 0 var c Double 0 0 let a Int 1 let b Int 5 print a b Double a b 100 c Double a b 100
  • 为什么 Ruby on Rails 弃用脚手架方法

    我正在学习 Ruby on Rails 所以我相信我迟早会发现这一点 为什么在 Rails 版本 2 中不推荐使用脚手架方法 脚手架方法违背了脚手架的精神 脚手架的目的是为您提供一个起点 您应该在此基础上根据自己的需求进行构建 通过动态生成
  • 缩小的单个捆绑包与通过 http/2 的多个文件

    对于 CSS 和 JS 捆绑 一般建议是什么 是将所有内容捆绑到一个文件中更好 还是提供多个文件更好 我个人认为多个文件更好 尤其是使用 http 2 但是捆绑有很好的理由 当所有内容都在一个文件中时 缩小和 gzip 会产生更好的结果 因