Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/69.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
javascript文件的数量会使项目变慢或产生任何影响吗?_Javascript_Html_Client Side - Fatal编程技术网

javascript文件的数量会使项目变慢或产生任何影响吗?

javascript文件的数量会使项目变慢或产生任何影响吗?,javascript,html,client-side,Javascript,Html,Client Side,我正在做一个使用HTML和JavaScript的项目。我在我的项目中使用了许多JavaScript文件。我想知道一个web项目中JavaScript文件的数量是否会产生任何副作用?(在效率或速度方面) 我想知道在一个web项目中没有JavaScript文件会有什么影响吗?在效率或速度方面 如果您的意思是,将所有JavaScript嵌入HTML中的内联script标记是否会带来速度成本,那么可能,可能不会;这取决于有多少JavaScript 这是一种权衡: 如果您将所有JavaScript放在H

我正在做一个使用HTML和JavaScript的项目。我在我的项目中使用了许多JavaScript文件。我想知道一个web项目中JavaScript文件的数量是否会产生任何副作用?(在效率或速度方面)

我想知道在一个web项目中没有JavaScript文件会有什么影响吗?在效率或速度方面

如果您的意思是,将所有JavaScript嵌入HTML中的内联
script
标记是否会带来速度成本,那么可能,可能不会;这取决于有多少JavaScript

这是一种权衡:

  • 如果您将所有JavaScript放在HTML文件中,这意味着您必须在每个HTML文件中复制它,使每个文件变大。如果脚本太多,那么每个HTML文件都会变重,这意味着当您更改内容(而不是代码)时,您会强制用户重新下载所有代码

  • 如果将JavaScript放在单独的文件中,则在加载页面时会有一个额外的HTTP请求,但前提是JavaScript文件不在缓存中,并且所有HTML文件都要小得多

因此,在大多数情况下,如果有大量代码,最好使用单独的JavaScript文件并正确设置缓存头,这样浏览器就不需要每次发送单独的HTTP请求。例如,将您的服务器配置为告诉浏览器JavaScript文件在很长一段时间内是好的,这样它甚至不会执行
(如果在
HTTP请求之后进行了修改)。然后,如果需要更新JavaScript,请更改文件名并在HTML中引用新文件


这只是缓存控制的一种方法,这是一个重要而非繁琐的主题。但你明白了。将其分离可以提供这样的选项,初始成本相当低(一个额外的HTTP请求将其加载到缓存中)。但是,对于相当少量的代码来说,这可能是一种过度的杀伤力。

在执行方面,我认为根据您拥有的JavaScript文件的数量,应该没有太大的差异。但是,大量JavaScript文件在加载页面时需要大量请求,这肯定会影响加载页面所需的时间

至少有两种方法可以解决这个问题,使用哪种方法取决于当前的情况

将所有文件捆绑到一个文件中:

对服务器的每个请求都会增加加载页面所需的时间。由于这一点,通常认为将JavaScript文件捆绑并缩小为一个文件(包含所有脚本)是一种良好的做法,因此只需一个请求即可加载所有JavaScript

然而,在某些情况下,例如,如果您有很多JavaScript,那么单个文件可能会变得相当大,即使您只加载单个文件,加载该文件也可能需要一些时间,从而降低页面加载速度。在这种情况下,可能值得考虑选择二

根据需要加载模块:


在其他情况下,例如,如果站点有很多JavaScript,但每个页面上只使用了所有代码的几个模块,那么使用条件加载可能会提高性能。在这种情况下,您将代码保存在单独的模块中,并将每个模块保存在单独的文件中。然后,您只能在每个页面上加载所需的模块。

这将完全取决于您将包含的javascript文件。当然,当包含javascript文件时,它必须由浏览器加载。这项工作的繁重程度取决于文件的大小。一般来说,通过将所有代码合并到一个文件中来最大限度地减少脚本文件的单独请求数量是有利的。大量的JavaScript文件可能会导致页面加载速度变慢,但如果所有内容都正确缓存,则不会出现任何问题。从缓存中请求大量文件的浏览器在渲染之前会稍微慢一点,但我们谈论的是0.001秒

在Crowders post中,如果缓存正确,则必须更改文件名并引用它,但如果您在webproject中实现了一个很好的缓存机制,则使用以下查询字符串引用JavaScript会更容易:

scripts/foo.js?version=1
我们使用软件版本号,因此每次新版本我们都会更改查询字符串,所有客户端都会获得新的脚本文件


每次发布时,最好将所有JavaScript捆绑在一起,但这对于小型项目并没有多大用处

根据用例的不同,预先加载所有JavaScript也会产生非常负面的影响。它完全取决于用例是使用单个打包文件还是在需要时加载单个模块。最小化确实非常有用,但在大多数情况下,逻辑上划分为模块是很有意义的。@TorstenWalter我同意,在某些情况下,根据需要加载模块可能会更好。我会稍微澄清一下我的答案。@TorstenWalter它确实取决于用例。很好的论点和技巧。