你不知道的前端性能优化 - 静态资源优化 （一）

你不知道的前端性能优化 - 静态资源优化 （一）

前言：所有的优化点都有其适用的条件，所有的优化点都能够量化看到效果，具体项目具体分析，并不是每个项目都能适用这里的每个点，望周知。

目录

1. 资源合并与压缩
2. 图片相关
   1. 使用不同的图片格式
   2. 使用雪碧图和svg
   3. 懒加载和预加载
   4. 小图片使用base64
3. 浏览器加载html - 浏览器输入网址敲击回车之后发生了什么？

静态资源

1. 资源的合并与压缩
   这里主要针对的是 js、css 、html

   • 资源合并
     资源合并是指将多个文件合并到一个文件。主要优化点是减少网页的 http请求，以此来达到优化目的。
     方法有很多，比如我们可以使用构建工具进行合并等。
   • 资源压缩
     资源压缩是指将单个文件进行压缩。主要的优化点是减小文件的大小，以此来达到优化的目的。
     方法同样有很多，比如打包的使用 gzip 或者服务器开启 gzip。

   你可以使用 chrome 的测试查看压缩和未压缩之间的请求读取时间。

2. 图片相关

   • 使用不同的图片格式
     不同的图片格式对应着不同的适用场景，我们可以通过不同格式间的差别来选择不同的图片格式，达到最佳的适用范围。

   jpg	png8	png24	png32	webp
   有损压缩	无损压缩	无损压缩	无损压缩	支持有损压缩和无损压缩
   图片的品质会有变化，压缩品质设置在60-80时肉眼很难鉴别	只能索引256 (2^8)种颜色	能索引近1600万 (2^24)种颜色	能索引（2^32）很多种颜色	Alpha 透明和 24-bit 颜色数
   适合大块颜色相近的图片，颜色较少的图片和写实的图片可以使用	颜色较少的图片情况下可以使用	颜色较多，比较常用的图片格式	颜色很多，适用于需要使用高清的图片场景	现代化浏览器和Android
   	支持Alpha透明和索引色透明	不支持透明（ps导出透明png24时，其实转化成png32）	支持透明和半透明呢	支持透明和半透明
   轮播图、头像等	小图标	背景图	高清海报等

   ​ webp 是由谷歌发展出来的图片的格式，它具有更高的压缩率、同时支持无损和有损压缩、色彩丰富和比 png 更优的解码速度的优点。我估计 webp 在未来可能会替代 png。

   ​ webp 同时也具有兼容性的缺点，只有现代化浏览器和是 Chromium 内核的浏览器天生支持 webp。ios并不原生支持 webp， Safari也不支持webp，并且没有要支持 webp 的消息。在 Android 上从 Android 4.0 开始才原生支持 webp。所以谷歌官方提供了 webp 的解析库 (Android、iOS)。

   • 使用雪碧图和svg
     • 雪碧图
       也有人叫精灵图，都一样，大概意思就是将多张图片合成到一张图片，利用 css 的背景定位来显示需要图片的位置。
       这样做的用处其实也是减少了 http 请求而达到性能优化的目的。推荐常用的雪碧图在线网站，
       toptal ，spritecow
     • svg
       svg可缩放矢量图形（Scalable Vector Graphics）
       
       svg-w3c-advantage
       
       
       w3c-svg
       
       项目中可以使用 svg 来替代我们小的 icon ，配合 webpack 插件 svg-sprite-loader 再依靠 阿里巴巴矢量图标库 就能很快把 svg 用起来。
   • 懒加载和预加载
     • 懒加载
       这是一种常见的前端提升响应速度的一张方式，对于图片数量较多的情况下，只展示可视区域的图片，当一张图片在可视区域内才去请求该图片的真实资源，默认显示一张加载图片。这样可以保证性能的最大化。 常用的懒加载库有基于 jQuery 的lazyload，vue 的vue-lazyload各大框架都有不同的实现库。
     • 预加载(不仅仅针对图片资源)
       预加载也是一种常见的前端，速度优化方式，用于提高页面的响应速度。实现有很多种方式，可以使用：异步请求，html标签和 new Image() 的方式等。可以使用 proload。
   • 小图片使用base64
     • 在项目中，对于一些像 icon 这样的小图标如果它是图片实现的，我们其实可以使用 base64 直接引入。这样做有什么好处呢？它能减少 http 请求，从而达到优化。
     • 大图片并不推荐使用 base64 直接引入，因为图片转换成 base64 后往往存储会变大，比如你本来的图片是 3m 那么你转成 base64 后的编码可能会有 3.9m 的样子。
     • 图片转化这里，如果项目使用了 webpack 打包的话，对 url-loader 的 limit 配置改改就能打包
       的时候实现转化了。

浏览器加载html与执行

是不是听过这样一个问题：浏览器输入网址敲击回车之后发生了什么？

发生了什么呢？

1. 浏览器首先会请求该 url 地址。
2. 获取到 html 后进行 由上至下解析。
3. 解析到 标签请求css,会异步的请求该 css
4. 解析到普通的 dom 的时候，会先在内存中生成对应的 dom tree
5. 请求到相应的 css 的时候会在内存中生成对应的 cssom
6. 当解析到