缩小的单个捆绑包与通过 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 的多个文件 的相关文章

  • 如何隐藏按钮元素的值?

    如何隐藏按钮的值 同时仍然显示按钮 我使用的颜色 透明 但这行不通 我想隐藏按钮的值 但不是所有按钮的值 我需要将 value 属性保留在按钮中 我只是不想让它被看见 如果您只想显示按钮而不显示任何文本 请将值设置为空字符串 然后手动设置按
  • rgb() 和 rgba() 不透明度有什么区别?

    我发现另一个关于 rgb 与 rgba 的问题非常相似 但它缺少关于使用的答案RGB 不透明度 我知道两者之间的区别 rgba 只是 rgb 但带有 alpha 不透明度 问题是 我使用带有不透明度值的 RGB 已经有几个月甚至几年了 它一
  • jQuery / CSS3 动画阴影效果

    所以这个问题可能会被否决 但我认为有人可能会提供帮助 我正在寻找的效果是蓝色块像气球一样上下盘旋 当块上 下移动时 阴影在其下方不断增大和缩小 关于如何编程的任何想法 或者有人知道可以完成的教程 插件吗 你可以使用 jQuery 来完成 或
  • 带有图像垂直对齐的内联框:与父框居中

    请运行演示 margin 0 padding 0 body font family Microsoft Yahei font size 16px background color lightblue height 200px width 2
  • IE jquery click 仅适用于 li 中的文本,不适用于整个框

    我创建了一系列作为 li 的按钮 我希望用户能够单击它们 ul class item list li class item button style color 4bb2c5 1 li li class item button style
  • 如何像facebook和twitter一样显示帖子更新时间?

    我正在制作一个通知平台 而不是显示通知到来的时间 我想显示自通知到达以来经过的时间 就像在 Twitter 和 Facebook 上发生的那样 他们显示 32m 1 小时前等 我想用JavaScript Java来实现这段代码 任何帮助将非
  • 何时使用
    换行符 vs CSS 定位?

    我经常想知道如何正确使用 br 越线 似乎它们经常被错误地用于定位或清除应该使用 CSS 的内容 W3schoools org 说使用 br 适用于空白行 但不适用于创造或分离 http www w3schools com tags tag
  • Bootstrap:下拉菜单无法通过 jQuery 单击打开

    我正在创建一个包含多行的表 所有行都有一个 选项 按钮 该按钮应该显示下拉上下文菜单 为了使代码更短 我使用了一个div以便将其重用为上下文菜单的通用标记 我正在使用 Bootstrap 5 1 3 和 jQuery 3 6 0 以下是我的
  • 如何排除CSS伪类选择器中的最后一个子元素

    我想为从 4 到 n 1 的子 div 应用特定样式 我能够从 4 到 n 执行此操作 但无法排除最后一个 div 这是 jsfiddlehttp jsfiddle net 8WLXX http jsfiddle net 8WLXX con
  • 如何使用 HTML CSS JS 创建滑块/切换来更改屏幕上的字体大小 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 is there any way I can make this gt 所以我想制作一个滑块 切换器 用户可以拖动 滑动它来改变不同的
  • CSS 计数器输出不匹配

    有人可以解释一下为什么吗section计数器值总共打印 0h2 tags 这是源代码
  • 带有旋转文本的垂直导航

    我正在尝试实现一个包含链接的垂直导航菜单 并且我已使用 css3 将链接文本旋转到 270 度 我旋转了它 因为我希望文本从下到上 问题是当我添加顶部填充时 间距不一致 你可以看到我的代码here http jsbin com ravudu
  • 悬停在“除了”之外的所有内容上,即“聚光灯”效果:如何进行平滑且轻松的悬停过渡?

    Chris Coyier 曾在 CSS Tricks 网站上发表过一篇文章介绍如何实现这种效果 ul hover li not hover opacity 5 但我还试图实现平滑且轻松的悬停过渡 我只是不确定如何或在哪里插入代码的 平滑悬停
  • 动态检测屏幕高度和屏幕宽度,以精简图像的高度和宽度

    我以前可以display a div标签仅在portrait使用下面提到的代码corrl https stackoverflow com users 15388872 corrl in this https stackoverflow co
  • jQuery - 拖动div css背景

    我希望能够在 div 内按住鼠标并移动它的背景 在谷歌上搜索了很多 没有找到我想要的 这是目标 显示的地图是要拖动的对象 http pontografico net pvt gamemap http pontografico net pvt
  • css:将div制作成圆角并在其3/4处添加边框

    我有这样的代码 div class circle div and css circle border left 1px solid red border bottom 1px solid red border radius 200px wi
  • 如何使用javascript隐藏div

    我想使用 Javascript 隐藏一个 div 下面是我的div div class ui dialog titlebar ui widget header ui corner all ui helper clearfix span cl
  • 如何中和 CSS 定义而不覆盖

    有没有一种方法可以中和元素的 CSS 规则而不覆盖所有内容 例如 我正在使用 Twitter Bootstrap 它有许多预定义的 CSS 定义table 在某些地方 我不想要它们 对某些table元素 我想知道我是否可以做这样的事情 ta
  • iframe 位置居中

    所以我找到了这段用于将内容放在中心的代码 但我的问题是它是为容器制作的 你知道如何为 iframe 制作它吗 或者你知道另一个代码吗 代码 center margin auto width 60 border 3px solid 73AD2
  • 如何更改 div 悬停时的跨度颜色

    我正在尝试更改 div 悬停时跨度的颜色 如何使红色汉堡按钮 即跨度 在 div 悬停时将颜色更改为黑色 PS 现在它在跨度的悬停上执行此操作 JSFiddle https jsfiddle net bjjbqct8 https jsfid

随机推荐

  • 收到“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 会产生更好的结果 因