合并css和javascript的意义和方法

45次阅读
2024年08月07日 09:55:49

共计 1224 个字符,预计需要花费 4 分钟才能阅读完成。

对刚从事SEO或者Web前端的朋友来讲,web性能优化或许有些遥远,但是不得不提的是,真正的竞争力就来源于知识体系的错位运用能力,脱颖而出才能与其他人拉开差距,当然性能优化大多时候需要经验的积累,但是重要性可能还远远大于基础之处,而对于合并css和javascript的意义和方法是什么呢?

一、为什么要合并CSS/JS,合并css和javascript有什么意义?

合并JS和css是为了减少http请求,但是当浏览器第一次访问该网站后,就会将JS和CSS缓存起来,那么合并js和css的意义大吗?耗费的资源和时间,是否值得?

动态加载的基于时间的缓存,除非客户清除缓存,否则不会访问服务器。

如果是基于时间的缓存,在过期之前刷新会请求服务器。

如果是基于ETag的缓存,每次都会请求服务器。

为什么要压缩?不同于大部分放在服务端的后台代码,前端所有的文件程序代码都是要通过浏览器下载下来运行使用,这就牵扯到网络和请求延时,所以前端文件的精简和压缩决定了前端性能的第一步。

JS合并的必要性分析

效率因素

一般来说,在一个WEB工程中,需要使用大量的JS,这些JS可能来自许多提供者。

而在页面访问时,每次访问资源都要发起一个http请求,因此,即使文件已经缓冲,也需要发出一次http请求来确认文件是否被改变过。如果js个数比较少,那么没有什么问题,但是当JS文件数目比较多的时候,就会导致页面访问效率下降。如果能把所有的js都合并为一个文件,那么就可以节省几百毫秒,甚至几秒的时间,视网络状况而定。如果不需要做任何人为处理,就节省下来这些时间,无疑是相当有意义的。

JS引入顺序问题

如果说,效率问题还只是用户体验的问题,而JS引入顺序问题,就会导致页面是否可以执行的问题。我们知道,如果JS如果有依赖其它JS库,则被依赖的JS库就要放在依赖的JS库的前面,否则就会发生js错误。当引用的JS库比较小的时候,问题当然不大,但是做企业应用的时候,要用到的JS非常多,甚至在开发后期或维护期还会增加新的JS,这时稍有不慎,就会出现JS引入顺序问题。

二、合并、压缩的常用方法

html的压缩

HTML代码压缩就是压缩这些在文本文件中有意义,但是在HTML中不显示的字符,包括空格,制表符,换行符等,还有一些其它意义的字符,如HTML注释也可以被压缩。

JS的压缩和混乱

主要对js做以下四件事情:无效字符的删除(空格,回车),剔除注释,代码语义的缩减和优化(将一些变量的长度进行缩短等),代码保护(js代码是可以在客户端看到的,将js代码混乱后就变的不容易看懂,对代码进行了一定的保护作用)。

CSS压缩

去掉回车和空格,还做了无效代码删除(注释,无效的字符),css语义合并。

文件合并方法挺多,合并方式和工具也是五花八门,当然也不是每个文件都需要合并,具体情况具体对待,实际项目过程中取舍无处不在,更需要考虑后期维护的便利性,最后才是最终的执行方案。下面是优化网站性能的14条规则。

合并css和javascript的意义和方法
正文完
 0
鹿泽
版权声明:本站原创文章,本文由 鹿泽 于 2024年8月7日 09:55:49 发表,共计 1224 字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
本站所有文章,如无特殊说明或标注,均为本站原创发布。任何在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。
如若本站内容侵犯了原著者的合法权益,可联系我们邮箱:526009505@qq.com进行处理。
最新文章
网站优化seo推广服务如何做好内链?

网站优化seo推广服务如何做好内链?

在一个网站刚刚建设的初期,网站内链的建设工作尤为重要,可以说网站内链做得好SEO就成功了一半。今天就来讲讲网站...
WordPress博客主题二次元风-lolimeow主题更新10.1版,重构样式

WordPress博客主题二次元风-lolimeow主题更新10.1版,重构样式

一个WordPress博客主题二次元风主题,本站之前启用过,后面更换了,不过很好看,适合大家选择使用: 202...
专业优化公司seo是怎么做好404页面的?

专业优化公司seo是怎么做好404页面的?

404页面的目的是:告诉浏览者其所请求的页面不存在或链接错误,同时引导用户使用网站其它页面而不是关闭窗口离开。...
网站搜索优化seo如何做好内部链接优化?

网站搜索优化seo如何做好内部链接优化?

网站内部链接的布局很多做SEO的朋友都知道,非常重要。网站想做的越大,就要更加重视内部链接的布局。因为良好的内...
影响关键词优化根本的排序因素

影响关键词优化根本的排序因素

对于像百度搜索来说,并没有排序这一说法,搜索引擎认为排序是在特定的关键词下网站内容的位置,而关键词是由用户搜索...