1. 聚能聊>
  2. 话题详情

js、css和图片文件合并是真优化还是伪优化?

前端优化中,文件合并及压缩总是会被作为很重要的一条提及。最主要的依据是减少了大量的http请求。那么文件真的能大幅降低服务器压力吗?

通常合并主要有两个目的:

  1. 为了减少http请求数。
  2. 代码安全考虑(文件分得越多,越容易被人看清)。

这种方式就是不管三七二十一,所有js/css/图片文件各自合并成一个大文件,所有页面都引用它,即使某些代码/图片可能不会用到。

虽然这种方式将请求数降低到了3个http请求的超低数,但是同时这种方式也有个很大的缺点。有些页面很简单,只需要很小一部分的js或css,甚至可能没有引用多少图片,却加载了所有的资源。量化一下,就是1%的需求,却加载了100%的资源。显然,这种方式在大幅降低了HTTP请求的同时,也大幅增加了带宽的消耗。

微信页面引用的图片文件(部分内容)
11

除此之外,将多个文件合并成一个超大文件,对文件的内容维护,也增加了非常大的难度。比如你在修改某一个页面的css样式时,很有可能需要在几千行css代码里,ctrl+f来找一行样式。而更新图片更是凄惨。你只需要修改一个小图标文件,却要将整个已经合并可能高达1MB的图片文件重新发布一次。

那么如果不合并又会是怎么样?

如果不合并,需要什么资源,就引用对应的文件资源。在带宽消耗上确保做到了最低。同时,在对引用的资源进行维护时,也非常方便。修改了什么文件,直接发布该文件即可。用户也不需要将合并后的大文件,全部重新下载。
但是,一个网站首页往往会引用多达十几个JS文件,数个CSS文件和几十个图片文件。也就是说,一个首页的http请求会高达上百。

云栖社区抽奖活动页面头部部分引用的js/css文件:
image

so,问题来了。
优化http请求数&优化带宽消耗,你选哪个?为什么?

你有没有即能降低HTTP请求数又不增加带宽消耗,同时还不会增加文件内容维护难度的优化方法?

除了文件合并外,你有没有其他的方法能大幅提升性能的(烧钱的不算)?

参与话题

奖品区域 活动规则 已 结束

  • 奖品一

    阿里云代金券 x 4

  • 奖品二

    王坚新著《在线》 x 2

  • 奖品三

    云栖定制电脑包 x 2

14个回答

0

cjsoldier 已获得云栖定制电脑包 复制链接去分享

优化http请求数&优化带宽消耗,你选哪个?为什么?
优化带宽消耗,因为我们注意到,客户使用10M的网速和100M的网速,浏览网页的速度差不多。问题不是出在客户端。
请求多次有个非常大的好处就是,我可以一点一点的把东西加载出来。如果是一个大文件的话,必须把整个资源下载完毕才能渲染页面,点了半天没反应,这不能忍啊。一点一点地加载,有时候客户只需要等到他关心的那一部分加载出来了即可,不需要等到整个页面全部渲染完。

你有没有即能降低HTTP请求数又不增加带宽消耗,同时还不会增加文件内容维护难度的优化方法?
react的组件化,单页面。
组件化代码复用率高,修改方便,而且是js生成html,不用传输那么多东西。只要js就行了,而且react本身已经压缩的很好了,不用我们操心。
使用react真·前端可以减少客户端http请求。

除了文件合并外,你有没有其他的方法能大幅提升性能的(烧钱的不算)?
就是说服务端渲染不算喽。那没有。

沙漠的热情 回复

react?我不太懂,似乎不是那么好用的吧!好像有一些什么风险?我亦不知,瞎说。

浮生递归 回复

react界面不符合客户需求,需要另外设计怎么办

cjsoldier 回复

挺好用的,比如阿里的ant design,又好用又漂亮。

cjsoldier 回复

我也不太懂

cjsoldier 回复

我也不太懂

cjsoldier 回复

问得好,这是个问题。

沙漠的热情 回复

由于React其专利原因,一些平台比如百度、wordppress放弃了使用React。
... ...
我也不太懂,只是和大家交流。

1337719370658866 回复

看不懂,但是感觉都可以

43747 回复

可否加再加一个讨论,我也是不太懂的@浮生递归

浮生递归 回复
回复@43747:

加哪个讨论

浮生递归 回复

交流着交流着就懂了

沙漠的热情 回复

哈哈 好好 交流交流

评论
1

北方的郎 已获得王坚新著《在线》 复制链接去分享

优化http请求数&优化带宽消耗,你选哪个?为什么?
这个还是要根据具体的情况吧。疆场常用到的图标级的东西,我觉得整合起来还是不错的,因为这些东西整合起来也不大,而且降低了方位次数,还是很划算的。至于较大的文件,就不建议了。你其实看一下微信那张图,就明白这个意思了。

你有没有即能降低HTTP请求数又不增加带宽消耗,同时还不会增加文件内容维护难度的优化方法?
这3个从某种程度来说是一个互相妥协的,一般你要降低两者就要增高另一个。比如用CDN,会降低带宽消耗,增加文件内容维护难度。

除了文件合并外,你有没有其他的方法能大幅提升性能的(烧钱的不算)?
如果加上 “大幅” 又不要“烧钱”。 那么就去优化代码吧。

浮生递归 回复

整合图标文件,维护相当困难。原先只要插入图片即可,现在要去测量需要插入的图片在整合图片上的具体坐标。每张图片都要去测坐标的话,还是挺烦人的。
并且,原来一个图标更新,客户端只需要重新下载该图标文件,整合就要重新下整张,哈哈

北方的郎 回复

的确是这样。可能是因为我主要是搞整体架构和一些后端的东西吧,所以有时候只考虑系统效率不太考虑搞前端哥们的麻烦。哈哈。

浮生递归 回复

有时候前端一个小坑,能让项目出大问题。比如首页设计起来放了几张大图轮播,每张8、9百K,几张就是几MB,然后高峰期几百人同时访问,带宽直接拖死

北方的郎 回复

你别说,类似的事情真的碰过啊。现在系统越来越复杂,人很难事先想全,而且不可能每次修改都搞压测。所以~~

浮生递归 回复

所以年纪大的开发人员就很有优势,凭经验就能预判很多问题

评论
1

妙正灰 已获得云栖定制电脑包 复制链接去分享

优化http请求数&优化带宽消耗,你选哪个?为什么?

在 HTTP/1.1 时代确实需要合并js、css来降低请求数,这在 Tengine 的特性中有所表现。
在 HTTP/2 时代,由于请求可以并发,所以合并js、css就没必要了,还可以减少笔不要的错误。

image

这在一些商业前端工具中,已经不被推荐了

你有没有即能降低HTTP请求数又不增加带宽消耗,同时还不会增加文件内容维护难度的优化方法?

使用 HTTP/2 啊,尽量就是优化 Web 端特性,用 Brotli 代替 Gzip 压缩,HTTPS 使用 TLS1.3 减少握手提升速度。

除了文件合并外,你有没有其他的方法能大幅提升性能的(烧钱的不算)?

js、css压缩啊,没跑的。 我觉得css、js文件也大不到那里去,把中心放到图片的无损压缩上才是重点。js、css压缩合并才省了100kb的样子, 压缩一张高清图片可能就可以省下来500kb。

浮生递归 回复

一个前端框架的JS、CSS文件有1MB多,想想一下,用户打开一个非常简洁的页面,却需要下载1MB多文件时的表情。另外,系统刚上线时,大量用户同时访问,同时下载1MB多的文件,带宽压力也是非常大的。
HTTP/2的多路复用请求虽好,但实际使用中,只出现在HTTPS协议的场景下,局限也比较大。毕竟HTTP协议的基数更大。不过应该会是将来的方向吧

妙正灰 回复

像阿里云cdn这样的产品都是有专门的SSL硬件来处理的,其实服务器反而压力不大,前端考虑用cdn也是妥妥的嘛

浮生递归 回复

要钱,而且不便宜……

评论
1

微wx笑 已获得阿里云代金券 复制链接去分享

优化http请求数&优化带宽消耗,你选哪个?为什么?
优化也可以说是一把双刃剑吧,凡事讲究一个度。
优化http请求数,就意味着文件的合并,那么单文件带宽消耗增加;
利用客户端缓存提高再次请求速度,但现在各种垃圾清理工具,而且大量的页面用户可能这辈子只访问一次;
移动端网络环境还是很不稳定,如果单文件太大又可能导致页面渲染太慢;
所以呢,我觉得是没办法只考虑一方面的。

你有没有即能降低HTTP请求数又不增加带宽消耗,同时还不会增加文件内容维护难度的优化方法?
正如上面说的,鱼与熊掌不能兼得;
但有一项有用的武器就是Log,可以基于对Log的分析,来做对应的优化,进而根据Log做优化验证;

除了文件合并外,你有没有其他的方法能大幅提升性能的(烧钱的不算)?
以前呢,是客户端能力较差,所以为了追求用户体验多主张服务端渲染,
而现在的话,客户端都很强了,就可以更多的考虑客户端渲染;
那大家能想的到就是压缩,那采用通用的压缩方式肯定达不到出众的效果,
而定制压缩的话,又提高了维护的成本,
那服务器省下的钱转移到人工上,
怎么感觉说起来像打太极,像能量守恒定律!orz

微wx笑 回复

可以的话,赏个代金券,谢谢~~

浮生递归 回复
回复@微wx笑:

你收这么多代金券干啥

微wx笑 回复

哈哈,域名续费,搞个几十年的有效期

浮生递归 回复
回复@微wx笑:

万一明年域名只要1块钱一年了怎么办

微wx笑 回复

那正好搞个几百年的

评论
0

alexchen1875 已获得阿里云代金券 复制链接去分享

写在前面.这个要从移动端和 pc 端来考虑,为什么要分开,因为两者的下行速度是不一样的,移动端还要考虑用户的 流量问题和首屏响应问题(这个和 PC 不一样,PC 端普遍网速较好,只要不是10M 级的资源加载基本3s 内能处理,移动端就不一样了,还有硬件问题).

优化http请求数&优化带宽消耗,你选哪个?为什么?
视情况而定.没有通用的好的解决办法.
我的做法是,优化 http 请求还是优化带宽取决于业务和用户场景,并适当调整.压缩合并可以根据业务模块来进行分块压缩合并,实现业务模块级别的按需加载.

你有没有即能降低HTTP请求数又不增加带宽消耗,同时还不会增加文件内容维护难度的优化方法?

确实木有.不过这个问题的本质不就是寻找三个方面的平衡么?那么我第一个问题以及回答了.

除了文件合并外,你有没有其他的方法能大幅提升性能的(烧钱的不算)?

木有.
假设一下,如果有一个算法/工具/other能实现在客户端自己生成文件的话........
更新第三个问题,
多域名能绕过浏览器对同一个域名资源加载个数上限限制问题.那么将资源根据类型分布在不同的域名下,也是一个可行的解决办法.
几乎没成本,前提是,该合并的还是要合并...该压缩的还是要压缩.建议是产品环境必须合并压缩.

浮生递归 回复

多域名只是降低单域名压力,并没有降低访问总量。

评论
1

kissjz 已获得阿里云代金券 复制链接去分享

优化http请求数&优化带宽消耗,你选哪个?为什么?
对代码安全要求高的可以考虑优化http请求次数,要求不高的可以考虑优化带宽消耗。

你有没有即能降低HTTP请求数又不增加带宽消耗,同时还不会增加文件内容维护难度的优化方法?
这块知识不了解,留给其他懂的人来说吧。

除了文件合并外,你有没有其他的方法能大幅提升性能的(烧钱的不算)?
因为不太了解,就在网上搜了一下,找到一个多域名下载的方法,原文连接:https://www.cnblogs.com/huangshikun/p/7028339.html

0

aoteman675 已获得阿里云代金券 复制链接去分享

1、优化http请求数&优化带宽消耗,你选哪个?为什么?
如果是一个JS大文件,在低带宽情况下是非常影响用户体验的。如果是按照用户行为选择性加载内容就可以减少Http请求次数的同时减少带宽消耗,不过这就是代码的优化了。优化http请求数和优化带宽消耗取中是不是更好些。单页面应用nowa就是编译成一个js和一个css。
2、你有没有即能降低HTTP请求数又不增加带宽消耗,同时还不会增加文件内容维护难度的优化方法?
看代码了。写得烂一些http增加了,文件也大了。写得好一些的在大文件上面也会做到耦合度降低,按需降低http请求频率。除非带宽不值钱的时候,三个条件就能满足了。
3、除了文件合并外,你有没有其他的方法能大幅提升性能的(烧钱的不算)?
代码写好一点就行了,Ant Design of React就非常好,加上各种react-router,react-form,refast等优化就行了。

0

pwdking 已获得王坚新著《在线》 复制链接去分享

优化http请求数&优化带宽消耗,你选哪个?为什么?
这个需要平衡,业务场景不同

  1. 云栖活动并无可比性,对其的请求量,用不着其研发针对这个去做太多权衡;
  2. 微信的合并和facebook的分离,通过页面即可看出不同选择的原因。

你有没有即能降低HTTP请求数又不增加带宽消耗,同时还不会增加文件内容维护难度的优化方法?
三个要求是相互冲突的,很难同时满足。
实际三个方面都在改进,浏览器对http请求数已有提升,带宽也越来越高了,文件的维护因为有了各种框架及工具,打包,资源按需加载已不是很麻烦

除了文件合并外,你有没有其他的方法能大幅提升性能的(烧钱的不算)?
如上面提到的 facebook 用到了 pipline 技术:https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919/

1

沙漠的热情 复制链接去分享

优化http请求数&优化带宽消耗,你选哪个?为什么?
各有利弊各有优缺,还是在两者之间取个平衡吧。

你有没有即能降低HTTP请求数又不增加带宽消耗,同时还不会增加文件内容维护难度的优化方法?
想不出什么好的办法,似乎加强人的培训提高工程师的水平才最直接有效,代码质量如何?主要还是在人!

除了文件合并外,你有没有其他的方法能大幅提升性能的(烧钱的不算)?
代码优化,CDN算不算烧钱?

浮生递归 回复

代码优化不算烧钱,cdn算。平衡的意思是部分合并?

沙漠的热情 回复

平衡?我的意思是看情况,视具体的情形而定到底用哪个。不一概而论。

评论
0

蕾女心经 复制链接去分享

真优化,减少请求次数缩短时间是对的

0

webx32 复制链接去分享

推荐不合并 ,并把资源分布到不同的域名,然后启用http2.0

0

webx32 复制链接去分享

推荐不合并 ,并把资源分布到不同的域名,然后启用http2.0

0

徐环 复制链接去分享

九九八十一

0

阿二名店 复制链接去分享

真优化