性能优化 - 基础的性能优化

其实很多性能方面的问题, 很多都是从基础就开始影响. 既然如此我们也从最底层逐步分析, 切入每一点小细节~

图片优化

web早期, 人们有很多想要实现的设计效果出于css或兼容性的限制, 不得不由图片来去实现这种效果. 以现在时代的眼光来说, 无疑是很不优雅的. 撇开图片本身所占用的空间大小外, 本身代码结构就不够语义化. 那么现在这个CSS3都已经普及的年代, 来试着让HTML, CSS属性或SVG用寥寥数行的代码来代替图片来实现效果吧~ 比如一个圆角, 一个渐变的海浪线等.

图片格式

每一种图片格式都有着自己的特点和优势, 下面来了解一下现在常见的图片格式来”对症下药”.

主流的图片格式

jpg 全名是JPEG. JPEG图片以24位颜色存储单个位图.
png 可移植网络图形格式. 使用png格式的图片更多的是看中它有透明图层, 因为它是256色, 每一色都可以作为透明像素. 但相对的代价就是体积较大(这个可想而知嘛, 图片里面的信息装的多了, 体积自然就大了).
GIF 这个稍微有点网络常识的对会知道, 常用于做动画.
SVG 可缩放矢量图形. 它能很好的处理图形大小的改变, 放大缩小都不会失真, 适合静态图片展示，高保真文档查看和打印的应用场景. 如今主流浏览器都对它有着很好兼容性支持.

没有被Web标准采纳的格式, 但还是值得关注图片格式
APNG APNG 是出自 Mozilla 公司下的两位程序员之手, APNG 的出现是为了代替 GIF. 它相较GIF来说有着更好的图片质量, 还支持着透明图层, 同时图片的大小都比 GIF 格式要小.

可惜由于出现的较晚, 没有被Web标准给采纳. 截止到笔者写这篇文章的时间(2018.1), Edge这个不合群的家伙在最新版本 Edge 17 仍然还没有支持这个格式, 而chrome 59才开始支持. 因此兼容性不高, 平时也很少能看到这种格式的出现.

Webp是出自Google之手, WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。

同上面的 APNG 一样, 同样没有被Web标准所采纳. 不过在 caniuse 上能发现, 如今国内大半的用户已经支持了 WebP , 这个未来还是可以小小的期待一下.

正确的使用图片格式

话归正题, 下面针对不同的使用场景, 来选择正确的图片格式.

首先是jpg, 一般不需要透明图层的图片一律使用jpg, 它相对png来说两者的体积之差能有几倍之差.
如果需要比较通用的动画的话, GIF是唯一的选择. 如果是相对简单的GIF动画的话, 也可以考虑使用CSS3来实现.
如果需要清晰显示颜色丰富的图片或者需要用到透明图层的话, png是一个比较好的选择

页面中图片加载方式

细心的你或许会发现, 有时在网络慢的情况下, 能看到图片一点一点从上到下的加载. 或者是先模糊, 再清晰的加载方式.
实际上这是图片的压缩算法呈现的效果, 逐行显示是离散余弦变化. 而模糊到清晰的是小波算法. 浏览器先读取图片的压缩算法, 再根据算法来选择不同的渲染算法. 下面是某图站的一张大的壁纸加载过程(没有找到小波算法的图, 以后留意到了再回来补)

参考资料
APNG 那些事

常见的图片优化方案

CSS-Sprite

在页面中, 我们经常能看到一些icon图标. 这些icon实际上占用并不大, 但奈不住多呀. 100个icon的话就要发送一百个HTTP请求. CSS Sprite(精灵). 利用CSS的background-position和background-image属性, 只需要引用一张图片即可. 这极大的节省了HTTP请求量.

iconfont
iconfont 和上面所提的css-sprite方法类似, 不同的是这个方法是通过引入字体图标的形式. 好处是设置字体图标的颜色或者可以通过设置font-size来改变尺寸, 并且不容易失真.

当然, 现在都是使用自动化工具, 都不需要自己手动去调整

<picture>标签
HTML5新出了一个<picture>标签, 它是一个容器, 用来为其内部特定的<img>提供多样的<source>元素. 浏览器会根据当前页面（即图片所在的盒子的容器）的布局以及当前浏览的设备（比如普通的屏幕和高清屏幕）去从中选择最合适的资源. 也就是所谓的响应式图片. 由于兼容性所限, 因此当下并没有广泛使用.

media属性允许你提供一个用于给用户代理作为选择<source>元素的依据的媒体查询。如果这个媒体查询匹配结果为false，那么这个<source>元素会被跳过, 使用如下.

<picture>
  <source srcset="mdn-logo-smaller.png" media="(max-width: 768px)">
  <source srcset="mdn-logo-big.png" media="(min-width: 1000px)">
  <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

构建自动化工具实现优化
这个一句话说不完, 以后单独拎出来说这东西吧.

视频优化

当下视频播放器分为两大流派, 一个是HTML5新进入的video标签, 使用方式简洁. 也是现在主流播放方案. 另一个是Flash播放器, 也是过去常用的播放方案. 虽然技术成熟, 插件多, 但也是逐步的将被淘汰. chrome浏览器默认禁止Flash播放器的使用, 就连Edge都要手动开启才能使用.

来对比一下两者的优缺点

	优点	缺点
video	不需要下载额外的资源(如插件什么的)	不同浏览器`video`标签的外观都不一样. 如果要统一的话需要自己写UI来实现
Flash	兼容性好, 只需要有 Flash player 播放器插件都可以进行播放	1. 需要下载额外的 swf 播放文件才可以播放, 浏览器必须要有Flash player插件(回想以前网页老是让你下载Flash的场景) 2. Flash player 版本的碎片化 3. UI定制需要 as(带有学习成本)

当下主流的方案
Flash 和 HTML5 两个方案相结合, 组成一个完整的方案. 当下就有几个成熟稳定的库, 如Flowplayer和VideoJs等.

视频优化需要的解决问题

由于各浏览器UI不同, 设计师会要求我们按照设计图做播放器.
在一些视频网站中, 可能产品经理就会让我们实现, 让用户一进来就最先看到视频.
浏览器会将所有的多媒体文件放在最后面加载, 无论标签位置放置在什么位置. 解决的方案就是将<link>代替<script>标签引用.

常用的前端缓存技术

SessionStorage 临时性存储, 数据仅仅在当前的页面生效, 关闭页面后数据就自动清除了. 同时刷新页面不属于”离开页面”的范围, 数据仍然会存在. 现在微信公众号开发常用这种方法来记录用户信息.

Cookie, 兼容性最好的本地存储. 缺点是有大小的限制, 而且每次发送请求时, 请求头会带着Cookie一起发送过去.(这里有个问题, 如果在cookie中存储了1M的数据, 那么在请求的时候, 1M的数据也会跟着请求发送到服务端. 这就很大的影响带宽了) 现在基本大多数登录的合法性验证都是用cookie验证的.

LocalStorage 特点是持久储存, 操作方法和 SessionStorage 乐视, 也都是操作key-value的形式. 几乎所有现代浏览器都已经支持了. 值得注意的是, LocalStorage 虽然可以永久储存, 但是无法跨浏览器的获取数据的, 还需要注意储存上限.

高性能DOM

说到高性能的DOM, 就不得不提回流与重绘这个概念. 为此我又专门的写了一篇回流与重绘. 有兴趣的同学可以去看一下.

总结

上文都只是在基础上的优化. 还有更多项目内工程化的优化就再等咱有时间再更新相关的内容吧~

参考资料
前端性能优化-通用的缓存SDK: https://www.imooc.com/learn/866