草庐IT

javascript - 在将所有 Javascript 文件发送到客户端之前将其连接成一个有什么好处？

coder 2024-07-21 原文

例如，如果你有

<body>
    <script src="someLibrary.js"></script>
    <script src="someLibrary2.js"></script>
    <script src="someLibrary3.js"></script>
    <script src="someLibrary4.js"></script>
    <script src="myApp"></script>
</body>

除了 html 中的漂亮之外，让所有这些在以以下形式发送给客户端之前通过运行的任务(Grunt/Gulp)连接和缩小还有什么好处？
<body>
    <script src="allTheJavascripts.js"></script>
</body>

最佳答案

将多个 JS 文件合并为一个文件有以下好处:

  • 与下载多个较小的文件相比，浏览器可以更高效、更快速地下载单个文件。一个 http 连接下载文件通常比许多 http 连接下载较小的文件要快。
  • 浏览器对同一域的同时连接数有限制，如果达到该限制，则某些连接必须等待其他连接完成。这会导致下载延迟。下载较少的文件使其不太可能达到此限制。此限制适用于域的所有连接(JS 文件下载、CSS 文件下载、框架下载、ajax 调用等)。
  • 服务器可扩展性可以提高，因为每个页面下载需要更少的 http 连接来提供内容。
  • 在某些情况下，版本控制以及版本升级和浏览 JS 文件缓存之间的交互可以通过一个更大的 JS 文件变得更简单。当您所有的 JS 文件都连接起来后，您可以为该组合的 JS 文件分配一个单一的版本号(就像 jQuery 对其版本所做的那样)。然后，任何地方对 JS 的任何更改都会导致主组合文件的版本号增加。由于给定的浏览器全部或不获取整个组合文件，因此浏览器永远不会意外地从服务器中获取一个文件的一个版本，而从过时的浏览器缓存中获取另一个文件的另一个版本。此外，维护一个主版本号比对许多较小的文件进行版本控制要简单得多。

    • 缩小 JS 文件可以使下载和解析更小，从而提高下载性能。

    如果您同时合并多个文件并进行缩小，则缩小会更有效。分别缩小多个小文件时，您不能缩小不同文件之间共享的变量名称 - 它们必须保留其原始名称。但是，如果您组合所有 JS 文件然后缩小，您可以缩小在不同 JS 文件之间共享的所有符号(只要它们不在外部共享)。

    显然，这里有一些限制，如果全世界都将他们的 JS 放在一个文件中，事情不会变得任意好转。在决定将哪些内容打包成一个文件时需要考虑的一些事项:
  • 您不希望大量页面解析和执行他们不会使用的大量代码。这显然是一种权衡，因为如果代码被有效缓存，那么它就不是下载问题，而只是运行时效率问题。每次使用都必须决定如何绘制该折衷线。
  • 您可能不希望将经常修改的代码与几乎不会更改的代码打包在一起，因为如果大型组合 JS 总是在更改，这会降低浏览器缓存的效率。
  • 在具有多个项目共享代码的团队环境中，考虑将事物打包成组合和缩小的块以适用于共享代码的最大数量的项目是非常重要的。您通常希望针对更广泛的需求优化包装，而不仅仅是针对单个项目。
  • 移动访问通常具有较小的缓存、较慢的 CPU 和较慢的连接，因此在打包内容时考虑最常访问的移动页面的需求也很重要。


    • 以及组合和最小化的一些缺点:
  • 直接调试最小化的站点可能非常困难，因为许多符号已经失去了它们有意义的名称。我发现出于调试/故障排除的原因，通常需要有一种方法来提供站点的未最小化版本(或至少某些文件)。
  • 浏览器中的错误消息将引用组合/最小化的文件，而不是实际的源文件，因此可能更难以追踪导致报告的给定浏览器错误的代码。
  • 必须对合并和最小化的站点进行测试，以确保这些额外步骤不会导致任何问题。

    • 关于javascript - 在将所有 Javascript 文件发送到客户端之前将其连接成一个有什么好处？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29657345/

    javascriptscript的sectionhttpoptimization

    有关javascript - 在将所有 Javascript 文件发送到客户端之前将其连接成一个有什么好处？的更多相关文章

    1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

      类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

    2. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

      我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

    3. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

      我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

    4. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

      我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

    5. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

      使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

    6. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

      我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

    7. ruby-on-rails - 渲染另一个 Controller 的 View - 2

      我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

    8. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2

      为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

    9. ruby - ruby 中的 TOPLEVEL_BINDING 是什么？ - 2

      它不等于主线程的binding，这个toplevel作用域是什么？此作用域与主线程中的binding有何不同？>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是，TOPLEVEL_BINDING始终引用Binding的预定义全局实例，而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层，它们都包含相同的绑定(bind)，但它们不是同一个对象，您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput

    10. ruby - Infinity 和 NaN 的类型是什么？ - 2

      我可以得到Infinity和NaNn=9.0/0#=>Infinityn.class#=>Floatm=0/0.0#=>NaNm.class#=>Float但是当我想直接访问Infinity或NaN时:Infinity#=>uninitializedconstantInfinity(NameError)NaN#=>uninitializedconstantNaN(NameError)什么是Infinity和NaN？它们是对象、关键字还是其他东西？ 最佳答案 您看到打印为Infinity和NaN的只是Float类的两个特殊实例的字符串

    随机推荐