前端资源合并与压缩

这是我参与更文挑战的第1天，活动详情查看：查看挑战

资源合并与压缩

资源合并

在前端编码的时候将css、js等静态资源文件合并压缩之外，我们还可以在页面中将多个css、js的请求合并为一个请求。文件的合并带来的是http请求数的减少，尤其是在移动端，每一个http请求带来的是慢启动，三次握手，连接建立，所以资源的合并是由为重要的，合并和不合并对比：

意思就是合并多个请求, 像雪碧图一样!

html的压缩

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

CSS和JavaScript文件的压缩

JavaScript压缩，主要是去除多余的换行和空格等等，对于语法来说，JavaScript可以选择混淆压缩和非混淆压缩，无论哪种压缩都是为了减少JavaScript的文件大小，当然出于前端代码保护来看，混淆压缩会大大破坏原有的阅读逻辑，增加压缩比，从而给代码添加一层保护。 CSS压缩，同理是去除多余的换行和空格等等，由于CSS文件的特殊性暂时无法实现混淆压缩，压缩主要是将大量的换行去除，可以减少不少的文件大小。

图片的压缩

对于常见的前端项目，关于图片的使用，主要有以下两种： • 固定图标，背景，按钮icon等等，这些图片有一个特点就是固定和用户无关，一般是放在源码包里面，由前端代码直接引入。 • 人物头像，文章配图，内容图片等等，这些非固定图片一般由用户上传，有很强的用户性，这些图片一般放在CDN上，前端通过链接请求。

1. 对于固定图片，推荐tinypng.com

2. 采用CSS雪碧图：把你的网站用到的一些图片整合到一张单独的图片中：

   优点：减少HTTP请求的数量(通过backgroundPosition定位所需图片)。

   缺点：整合图片比较大时，加载比较慢(如果这张图片没有加载成功，整个页面会失去图片信息)。

3. 对于非固定图片，常见的优化压缩主要有以下几种原则：

   优先使用压缩率高的jpeg类型图片，缺点是不支持透明。

   有条件的话使用webP(一种Google开发的新类型)类型图片是最佳选择，相比于jpeg，有更小的文件尺寸和更高的图像质量。

懒加载与预加载

懒加载对于移动web端，尤其是最常见的滚动加载场景是一项非常重要的优化措施。而预加载则常常应用于多tab场景的页面，让用户更快的看到打开的下一个页面。

懒加载

• 图片进入可视区域之后请求图片资源。
• 对于电商等图片很多，页面很长的业务场景适用。
• 减少无效资源的加载。
• 并发加载的资源过多会会阻塞js的加载，影响网站的正常使用。

img src被设置之后，webkit解析到之后才去请求这个资源。所以我们希望图片到达可视区域之后，img src才会被设置进来，没有到达可视区域前并不现实真正的src，而是类似一个1px的占位符。

预加载

• 图片等静态资源在使用之前的提前请求。
• 资源使用到时能从缓存中加载，提升用户体验。
• 点击操作前预先加载下一屏数据。