是写一个大的javascript文件，一次为所有的页面写行为更好呢？还是只加载特定于该页面的javascript？我知道一个大文件更适合缓存，但我认为浏览器可能会在不需要的页面上运行各种不必要的代码（jQuery on“ready”stuff和附加事件）。我也知道HTTP请求越少越好。所以我看到了3种情况：1.整个站点中的一个大文件1.根据需要加载模块1.一个特定于每个页面的组合文件，作为所需模块的组合动态生成。什么是最好的？我有Yii框架，如果有帮助的话。
bpsygsoo1#
你的想法是对的--大文件通常是首选，但这可能会导致执行不需要的Javascript部分。您的目标必须是将通常需要的Javascript文件与仅用于一个页面的部分分开。然后，您可以针对每种情况决定是要将其包含在大文件中还是继续单独加载。试着找出你的大多数用户访问的主要页面--那里需要的文件应该放在主文件中。作为旁注，您可以看一下Require.js，它用于在Javascript中构建模块关系和按需加载。
izkcnapc2#
根据你指定的选项，我会制作一个大的Javascript文件。开始的时候可能会稍微花点时间，但这会让应用程序的使用更快。当然，这取决于每一个特定的情况。我也推荐你使用use Head.JS loader，它非常简单.基本上，他们指出，在第一次加载时并行加载多个文件实际上比加载单个大文件快（至少使用head.js）。这是因为它们是以非阻塞的并行方式加载的。尤其是对于一个接一个地下载脚本的老一代浏览器（如下图取自head.js网站）：
编辑：忘了提一下，加载单个文件还有一个额外的警告--一些设备对缓存有限制，例如，在iPhone 4中的限制是25 kb（相当低）。
dpiehjr43#
当谈到Yii框架时，他们显然希望你只在需要的时候才加载js文件（在需要js文件的页面上），例如：
Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/js/myfile.js', CClientScript::POS_HEAD); Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/js/myfile.js', CClientScript::POS_READY);
这个方法也只在需要的时候加载jQuery。但是我并不完全同意，不是从效率的Angular ，而是从易用性的Angular 。如果你使用了很多javascript，我建议强制Yii直接加载jQuery，使用：
Yii::app()->clientScript->registerCoreScript('jquery');
然后我有一个js文件，其中包含常用函数（我在站点上不止一个地方使用的函数），我也直接加载这些函数。
0qx6xfy64#
好吧，我们有两种竞争力。A）最初加载太多数据。B）加载数据太多次。在这里找到平衡是一门微妙的艺术，需要理解使用模式以获得一些有根据的猜测，然后进行测试和测量，直到达到可接受的响应时间。不要问什么是“最好的”，你应该问自己什么是你的网站可以接受的。在一个典型的宽带连接上，在不到一秒钟的时间内加载首页可以吗？在一个慢速连接上，十秒钟可以吗？然后测量和调整，直到你得到可以接受的速度。关于使用模式，需要考虑的是，你是想优先考虑首页的加载速度，还是子页面的加载速度？如果你把所有的javascript都放到一个大文件中，那么第一个页面的加载速度会受到影响，但其他页面的加载速度会更快。反之亦然。如果你有很多不同的页面，而用户访问的页面不超过几个，你应该考虑为每个页面保留一个js文件。但是不要为每个页面创建很多脚本，文件的数量尽可能的少。一个js文件和多个js文件之间的区别主要在于第一次加载。一旦缓存了一个或多个文件，就不会有太大的区别。多个文件的缺点是当通过网络加载时，每个文件都有延迟。最后一点提醒：确保你的文件被缩小，如果可能的话添加gzip，并确保你的缓存头文件能让浏览器正确地缓存js文件和其他资源。
4条答案
按热度按时间bpsygsoo1#
你的想法是对的--大文件通常是首选，但这可能会导致执行不需要的Javascript部分。您的目标必须是将通常需要的Javascript文件与仅用于一个页面的部分分开。然后，您可以针对每种情况决定是要将其包含在大文件中还是继续单独加载。试着找出你的大多数用户访问的主要页面--那里需要的文件应该放在主文件中。
作为旁注，您可以看一下Require.js，它用于在Javascript中构建模块关系和按需加载。
izkcnapc2#
根据你指定的选项，我会制作一个大的Javascript文件。开始的时候可能会稍微花点时间，但这会让应用程序的使用更快。当然，这取决于每一个特定的情况。
我也推荐你使用use Head.JS loader，它非常简单.基本上，他们指出，在第一次加载时并行加载多个文件实际上比加载单个大文件快（至少使用head.js）。这是因为它们是以非阻塞的并行方式加载的。尤其是对于一个接一个地下载脚本的老一代浏览器（如下图取自head.js网站）：
编辑：忘了提一下，加载单个文件还有一个额外的警告--一些设备对缓存有限制，例如，在iPhone 4中的限制是25 kb（相当低）。
dpiehjr43#
当谈到Yii框架时，他们显然希望你只在需要的时候才加载js文件（在需要js文件的页面上），例如：
这个方法也只在需要的时候加载jQuery。但是我并不完全同意，不是从效率的Angular ，而是从易用性的Angular 。如果你使用了很多javascript，我建议强制Yii直接加载jQuery，使用：
然后我有一个js文件，其中包含常用函数（我在站点上不止一个地方使用的函数），我也直接加载这些函数。
0qx6xfy64#
好吧，我们有两种竞争力。A）最初加载太多数据。B）加载数据太多次。
在这里找到平衡是一门微妙的艺术，需要理解使用模式以获得一些有根据的猜测，然后进行测试和测量，直到达到可接受的响应时间。
不要问什么是“最好的”，你应该问自己什么是你的网站可以接受的。在一个典型的宽带连接上，在不到一秒钟的时间内加载首页可以吗？在一个慢速连接上，十秒钟可以吗？然后测量和调整，直到你得到可以接受的速度。
关于使用模式，需要考虑的是，你是想优先考虑首页的加载速度，还是子页面的加载速度？如果你把所有的javascript都放到一个大文件中，那么第一个页面的加载速度会受到影响，但其他页面的加载速度会更快。反之亦然。
如果你有很多不同的页面，而用户访问的页面不超过几个，你应该考虑为每个页面保留一个js文件。但是不要为每个页面创建很多脚本，文件的数量尽可能的少。
一个js文件和多个js文件之间的区别主要在于第一次加载。一旦缓存了一个或多个文件，就不会有太大的区别。多个文件的缺点是当通过网络加载时，每个文件都有延迟。
最后一点提醒：确保你的文件被缩小，如果可能的话添加gzip，并确保你的缓存头文件能让浏览器正确地缓存js文件和其他资源。