前端性能和 css/js 文件的数量

Front-end performance and number of css/js files

本文关键字：文件 js 性能 css 前端      更新时间：2023-09-26

我试图找到如何提高Web应用程序前端性能的答案。我的问题是说我有多个css/js文件被引用。现在浏览器将为每个css/js文件进行http调用。但我的问题是;

  1. 它是并行发生还是一个接一个地发生？两个 CSS/JS 都一样吗？
  2. 行为（并行或一个接一个）是否特定于浏览器？
  3. 对脚本标记使用异步属性是标准方式还是异步下载的累积方式？
  4. 单个页面可以进行的http调用数量是否有任何限制？它是浏览器专用的吗？
  5. 使用像RequireJS这样的AMD框架可以解决任何问题，还是仅用于单页应用程序开发？

除此之外，对任何其他一般前端性能改进技巧的引用会很棒吗？

  1. 它是并行发生还是一个接一个地发生？两个 CSS/JS 都一样吗？
  2. 行为（并行或一个接一个）是否特定于浏览器？

浏览器使用多个连接并行下载网站内容。这些连接的数量取决于浏览器及其用户设置。如果没记错的话，平均连接数为 4。

  1. 对脚本标记使用异步属性是标准的还是可接受的异步下载方式？

async 属性用于表示脚本要异步执行，它对下载的优先级没有影响

  1. 单个页面可以进行的http调用数量是否有任何限制？它是特定于浏览器的吗？
没有限制，

尽管显然您拥有的越多，由于连接限制，下载页面所需的时间就越长。

  1. 使用像RequireJS这样的AMD框架可以解决任何问题，还是仅用于单页应用程序开发？

这些框架可以在任何网站上使用，具有任何结构。它们的好处是延迟 JS 的下载，直到页面实际需要它。这意味着可以首先下载其他 UI 元素，例如图像和视频，从而使最终用户的页面加载速度更快。

它是并行发生的还是一个接一个地发生？两个 CSS/JS 都一样吗？

答：

当用户第一次访问任何网站时，浏览器会保留您的缓存，例如 JS CSS 和并行请求取决于浏览器到浏览器。 默认情况下，不同的浏览器具有不同的并行请求限制。 对于 js 和 css 也是如此，甚至对于您的 Ajax 请求也是如此。

行为（并行或一个接一个）是否特定于浏览器？

答：是的，它的浏览器特定。

对脚本标记使用异步属性是标准的还是可接受的异步下载方式？

答

没有标准的使用它的方法，而不是使用取决于要求，并且异步属性的使用与异步下载无关。 内容的下载取决于浏览器设置或默认设置。

单个页面可以进行的http调用数量是否有任何限制？它是特定于浏览器的吗？

答：

对服务器的HTTP调用没有限制，但是浏览器将根据默认设置或用户设置以自己的方式发送它。

  1. 如果在索引中链接 css/js 文件.html则请求将是并行的，而不是串行的。
  2. 我不确定这一点，但我想对于所有浏览器来说，它是并行的。除非您在索引中链接一个 css.html然后使用 css 文件中的@import导入另一个 css。
  3. 对于异步下载，您需要使用 require.js 或任何此类包管理器。async 属性仅用于执行，不用于请求。
  4. 页面中的 http 请求没有限制。
  5. 使用 require.js 是一个不错的选择。实际上，对于require.js您可以使用r.js，这将有助于您创建一个构建，这将减少多个css和js文件为单个文件。
相关文章：