优化javascript和css请求

前端之家收集整理的这篇文章主要介绍了优化javascript和css请求前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要优化几个现有网站的加载速度.我有一个问题是每页的请求量.网站有7个或更多不同类型的页面,因为它们包含不同的小部件或功能,因此应该加载不同的css和 javascript集.目前,每个小部件或功能都有自己的javascript文件.我打算将文件合并和缩小,以减少请求.

>将每种类型的页面上所需的所有javascript都组合成一个文件(并为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和一个文件的所有javascript应该加载在正文的末尾,例如

> init.js转到< head>而do.js则转到< body>.

>如果用户具有特定的权限,那么如果有一个文件用于常用的功能和一个用于管理功能文件呢?
>是否有任何策略如何平衡1.,2.,3.和4.?
>对页面JavaScript和css请求的建议量是多少?

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

(BTW,有些图书馆要求我无法控制,例如TinyMCE或谷歌地图).

解决方法

通常可以使用以下模式:

> main.js – 将这些由几个页面使用的所有脚本捆绑在一起
在网站上
> page.js – 页面特有的所有js.这意味着捆绑
在一起的所有小部件的js
页.

通过这种做法,您只需在每个页面上为您的JS提供2个请求,并在JS中获得明确的分离/结构.对于除第一个以外的所有页面,只需要一个请求,因为main.js将被缓存.

您也可以使用与CSS相同的原则.这是有效的,但如另一个答案所提到的,您可以进一步了解并捆绑1 js中的所有内容.它的偏好或风格.我喜欢把它分解成2,因为它保持了我的逻辑.

确保以下内容

>命名空间你的JS其他你可能最终会出现错误,当你把它们捆绑在一起.
>您的页面有所帮助,并将其推到页面底部.

编辑:
我以为我会更新答案来回答你的一些观点.

第2点:最好只合并那些始终使用的文件

答:我个人不这么认为.如果您正在为所有正在使用的文件提供服务,那么他们所属的组或者他们如何在页面上放置并不重要.这是因为我们结合了JS文件来减少HTTP请求的数量.

一旦你的JS组合了精简&在PROD中,您不期望调试或有意义.所以绑定在一起逻辑上相关的JS文件是一个模糊点.它在您的DEV环境中,您希望将所有这些逻辑相关的代码文件放在一起.

点3:如果有一个文件应该加载在头部的所有javascripts和一个文件的所有javascript应该加载在身体的结尾?

答:在某些情况下,你们被迫在HEAD中注入JS.理想情况下,您不应该像SCRIPT标签在本质上被阻止.所以除非你真的需要,把你所有的JS(1或多个文件)放在BODY标签的末尾.

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

答:这似乎是一个合理的方法来拆分你的JS代码.根据用户权限,您可以分支您的JS代码.

第6点:什么是推荐量的JavaScript和css请求页面

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

猜你在找的JavaScript相关文章