【聚能聊有奖话题】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

相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
2月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
41 0
|
26天前
|
Web App开发 前端开发 JavaScript
如何检测 CSS 性能瓶颈并进行优化?
【10月更文挑战第28天】通过使用上述性能检测工具,结合对常见CSS性能瓶颈的分析和相应的优化方法,可以有效地提高CSS的性能,提升网页的加载速度和渲染效率,为用户提供更流畅、快速的浏览体验。
|
26天前
|
编解码 前端开发 JavaScript
如何根据性能检测结果进行 CSS 优化?
【10月更文挑战第28天】根据性能检测结果进行CSS优化需要综合考虑多个方面的因素,针对不同的问题采取相应的优化措施,不断调整和改进CSS代码,以提高页面的性能和用户体验。同时,在优化过程中要注意保持CSS代码的可读性和可维护性,确保优化后的代码仍然易于理解和修改。
|
26天前
|
前端开发 UED 异构计算
CSS优化技巧
【10月更文挑战第28天】通过应用这些CSS优化技巧,可以提高CSS代码的质量和性能,使页面加载更快、更流畅,同时也更易于维护和扩展,提升整个Web项目的开发效率和用户体验。
|
16天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
16天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
71 1
|
17天前
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
36 1
|
21天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
35 3
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
95 6