合并css和javascript的意义和方法

对刚从事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条规则。