【聚能聊有奖话题】js、css和图片文件合并是真优化还是伪优化?

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

本话题地址,参与即可获得礼品:
https://yq.aliyun.com/roundtable/65388

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

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

为了减少http请求数。
代码安全考虑(文件分得越多,越容易被人看清)。
这种方式就是不管三七二十一,所有js/css/图片文件各自合并成一个大文件,所有页面都引用它,即使某些代码/图片可能不会用到。

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

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

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

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

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

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

相关文章
|
9天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
13 0
|
1月前
|
前端开发 计算机视觉 开发者
利用CSS改变图片颜色的100种方法!
利用CSS改变图片颜色的100种方法!
33 1
|
2天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
9 0
|
27天前
css3鼠标悬停图片特效源码
css3鼠标悬停图片特效,图片悬停效果源码,可以在网页上面作为自己的动态加载名片,放到侧边栏或者网站合适的位置即可
13 0
css3鼠标悬停图片特效源码
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
|
1月前
|
JavaScript 前端开发
在JavaScript中,如何优化原型链的性能?
在JavaScript中,如何优化原型链的性能?
14 2
|
1月前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
26 0
|
1月前
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
27 0
|
1月前
|
缓存 自然语言处理 前端开发
JS/CSS体积减少了67%,我们是如何做到的?
JS/CSS体积减少了67%,我们是如何做到的?
18 1
|
Web App开发 JavaScript 前端开发
JavaScript 图片3D展示空间(3DRoom)
一般的平面效果,通过改变水平和垂直坐标就能实现,再加上深度,就能在视觉上的产生3D(三维)的效果。 程序就是模拟这样一个三维空间,里面的图片会根据三维坐标显示在这个空间。 很久以前就看过一个3DRoom效果,是用复杂的计算实现的。
1214 0