前端性能优化-资源的合并与压缩

1 资源的合并与压缩

资源合并  => 减少http的请求数量

资源压缩  =>  减少请求资源的大小

2. 压缩

2.1 Html压缩

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

2.2 Css压缩

• 无效代码删除

• Css语义合并

2.3 Js的压缩和混乱

• 无效字符删除，例如回车，空格

• 剔除注释

• 代码语义的缩减和优化，比如一些变量的长度的缩短，对无效代码的优化

• 代码保护，js压缩使代码混乱，不可读

• 删除log

一般来说，css 和 js的压缩的意义比html更有意义

2.4 如何压缩

1. 运用在线网站压缩
2. 利用一些压缩工具，比如node.js提供的html-minifier对html压缩
3. 利用构建工具，例如grunt，glup，webpack等
4. 现在大多都用webpack进行构建压缩

3 文件合并

如上图

不合并的缺陷

1. 文件与文件之间有插入的上行请求，增加了N-1个网络延迟
2. 受丢包问题影响更严重
3. 经过代理服务器时可能会被断开

合并之后存在的问题

1. 首屏渲染的问题 合并后的文件显然会比合并前大，如果渲染依赖 js 的话，如果js 请求慢的话，就会有影响。
2. 缓存失效的问题 几个被合并的js中任一个js有变动，都会导致合并文件有变动，会导致合并 js 失效，前面的可能只会导致a.js失效

如何优化

• 公共库合并一个文件，业务代码的合并，公共库改动不大
• 不同页面的合并，单页应用，当路由到某个页面的时候，才去加载这个页面
• 浏览器同一域名下并发请求数量是有限的，从这方面讲合并是有必要的
• 开启gzip