优化javascript和css请求

Question

我需要优化几个现有网站的加载速度.我遇到的一个问题是每页请求的数量.这些网站有7种或更多不同类型的页面,它们应该加载不同的css和javascripts集合,因为它们包含不同的小部件或功能.目前,每个小部件或功能都有自己的javascript文件.我打算将文件合并和缩小以减少请求.

将每种类型页面上所需的所有javascripts组合并缩小为一个文件(并为css执行相同操作)是否是一个好习惯？例如
- 主页只有一个homepage.js,
- 列表页面刚刚listing.js,
- 细节页面刚刚detail.js,
- 等等
最好只组合那些总是一起使用的文件吗？例如
- jquery.js+ jquery.cookie.js+ common.js,
- list.js+ paging.js+ favorite.js,
- detail.js+ favorite.js,
- 等等
如果所有javascripts都有一个文件应该加载到头部,一个文件应该加载到主体末端的所有javascripts,例如
- init.js去<head>,do.js去<body>.
如果用户具有特定权限,那么如果有一个用于常用功能的文件和一个用于管理功能的文件呢？
有没有什么策略如何在1.,2.,3和4之间取得平衡？
对于页面,建议的javascript和css请求数是多少？

我正在考虑大型网站,即门户网站或社交网络.

(顺便说一句,有一些图书馆要求我无法控制,例如TinyMCE或谷歌地图).

Answer 1

通常您可以使用以下模式:

通过这种做法,您在每个页面上只有2个 JS 请求,并且您在JS中获得了清晰的分离/结构.对于除第一个页面之外的所有页面,它将只是一个请求,因为main.js将被缓存.

您也可以对CSS使用相同的原则.这是有效的,但正如另一个答案所提到的,你实际上可以进一步采取这种做法并将所有内容捆绑在1 js中.它的偏好或风格.我喜欢把它分成2,因为它让我的事情符合逻辑.

确保以下内容:

编辑: 我想我会更新答案,回答你的一些观点.

第2点:仅将那些总是一起使用的文件组合起来更好吗？

答:就个人而言,我不这么认为.如果您正在为所有正在一起使用的文件提供服务,那么它们属于哪个组或者它们如何登陆页面无关紧要.这是因为我们将JS文件组合在一起以减少HTTP请求的数量.

一旦你的JS被组合和缩小并且在PROD中,你就不会期望调试或理解它.因此,将逻辑相关的JS文件绑定在一起是一个有争议的问题.它在您的DEV环境中,您希望将所有这些逻辑相关的代码文件放在一起.

第3点:如果有一个文件应该加载到头部的所有javascripts,一个文件应该加载到主体末端的所有javascripts？

Ans:在某些情况下,你不得不以某种方式强制在HEAD中注入JS .理想情况下,您不应该这样做,因为SCRIPT标签本质上是阻塞的.因此,除非您确实需要,否则将所有JS(1个或多个文件)放在BODY标记的末尾.

第4点:如果用户具有特定权限,那么如果有一个用于常用功能的文件和一个用于管理功能的文件呢？

Ans:这似乎是分割JS代码的合理方法.根据用户权限,您可以分叉JS代码.

第6点:页面的javascript和css请求数量是多少？

答:这是一个非常主观的问题.这取决于你正在建设什么.如果您担心在页面加载时加载过多的JS,您可以随时拆分它并使用按需SCRIPT注入方法来分割负载.