前端性能优化（一）

主要看了慕课网的《让你页面速度飞起来》，做一下简要的总结。

第一个点就是资源的压缩

• html压缩，这个压缩其实就是去除一些为了提高代码可读性的东西，比如空格换行，对实际的大小影响很小，但是对于大型的网站还是有不小的作用的。
• css压缩，css压缩要做的就是同html，删除那些可读性的东西，然后再一个就是语义合并，比如

margin: 0;

等价于

margin-top: 0;
margin-bottom: 0;
....

另一个就是无效代码的删除，最常见的就是后面的代码覆盖了前面的代码，这样会产生一些无效代码。css代码的压缩效果是比较明显的。

• js压缩，第一个就是无效代码的删除，比如后面覆盖前面的，和css类似，第二个就是删除注释，代码语义的缩减，这个就比如一个方法的参数name，id用a，b来替换，这样做不仅减少了体积，还有另一个优点就是保护我们的js代码（因为我们的js代码对于浏览器是透明的），js的压缩和css的压缩效果是最明显的。
• 文件合并，这一个主要是为了减少http请求的数量，虽然可以并发请求，但是并发的数量是有限的，当然也有一些缺点首屏加载问题，文件包很大，尤其是webapp首页加载会比较慢，另一个缺点就是缓存很容易失效，我们的js在编译后一般都有一个md5的后缀，每一次有变动都会更新一次，然后我们的浏览器会利用缓存判断md5，很容易造成前一发动全身的尴尬局面。所以一般会对公共的库进行一个合并。
• 然后上面这些操作，可以利用在线网站进行完成，只是这个效率不高 ，一般也没多少人喜欢做，然后另一个就是构建工具，比如gulp，还有我比较熟悉的webpack，fis3（视屏中推荐的是这款，操作比较容易，但是感觉功能不及webpack）

第二个点是图片

[email protected]

上图是图片的一个解析过程，之后主要讲解各种图片的区别

• JPG， JPEG， 这种格式的图片压缩度是比较高的，是有损压缩，不支持透明
• PNG，这种格式一般用来做透明图片，体积比较大，然后分为png8，png24，png32，png8和32可以支持透明，然后png8颜色少点是256色，png32的话24位代表颜色，8位代表透明度
• WEBP，一种谷歌提出的格式，压缩度很高，适用于移动端，但是对苹果不友好，安卓首选，手淘很多地方都在用。
• SVG，矢量图，体积很小，代码绘制，适合图标，著名的iconfont

接下去说下图片的压缩

• 在线网站的压缩，比较low
• 使用构建工具
• 用base64行内，这个适合体积小的，大的不划算
• 雪碧图，这个就是减少请求数量，但是增加体积，有得有失，facebook在用，雪碧图处理得当还是很实用的。
• svg的绘制，这个没什么兴趣掌握。