小册阅读 十六-性能优化
2019-04-11 本文已影响0人
Estarsyang
前端性能的优化，最直接的体现在用户的体验上。当用户打开一个站点时，加载时间在十几秒以上，肯定要疯了。以下是自己的见解加解读小册内容。强烈建议大家去看看这本掘金小册，点击自动跳转
- 自己知道的性能优化。
- 图片处理(svg,icon等）
- 静态资源使用CDN
- 图片/视频懒加载
- 文件按需加载
- 代码/css压缩
...
- 小册介绍性能优化要点
- 图片优化
- DNS预解析
- 节流
- 防抖
- 预加载
- 预渲染
- 懒执行
- 懒加载
- CDN
图片处理
- 修饰类效果不用图片，修饰类的图片可以用CSS去代替，例如 箭头，圆角，三角形等，具体做法可自行google查看以下。
- 一些图标类型的小图片，尽量用font-icon 去表示。
- 使用精灵图/雪碧图(Sprite)，然后利用图片的定位取到对应的图。
- 小图片使用base64转换。这个在目前vue-cli的webpack配置已经自动实现，可以进行在webpack中配置大小。
- 商品的缩略图，尤其是移动端，直接让设计师按照提供相同大小的图片，尽量不要用css去控制图片的大小。
静态资源CDN(内容分发网络 content delivery network)
假设A地部署web应用，但是B地的人要去访问该站点，浏览器根据域名解析再通过DNS找到A地的服务器地址，然后去请求该站点的资源再返回B地，中间会浪费一些时间，尽管超级短。那为什么不在B地使用服务器缓存静态资源呢，这样请求的时间肯定就减少了许多。这就是CDN的一个基本原理，就是尽可能多的在用户的附近部署静态资源服务器，用户访问时就会直接访问到，自然访问速度就上来了。
- 静态资源使用CDN缓存
- CDN域名尽量与主站域名不同，否则会带上cookie，浪费流量
图片懒加载
原理
- 将要显示的图片/视频地址先保存在对应 标签 的任一属性上，标签先给默认你地址，然后该标签在可视区域时，就替换掉默认地址。
注意点
- 滚动防抖
- 判断图片/视频是否显示成功
目前来说，大部分的开发都不会自己去实现一个，由于有很好的插件来实现。vue可以使用 vue-lazyload
路由，文件按需加载(主要依靠webpack)
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
路由按需加载
代码压缩，css预处理器
如果使用脚手架搭建起来的项目，webpack已经帮我们配置好了压缩的方式引入了各种相应的loader，我们直接用就好。
css预处理器 sass less stylus
- 更加方便的使用css
- 定义变量，引用，嵌套，作用域
- 本质上还是css，注意嵌套层级，最好不超过4级。
防抖 节流 操作锁
- 防抖：事件一直触发，停止了才去执行相应代码。(scroll,input,change事件等)
- 节流：事件一直触发，隔一段时间去执行一次。(input事件，change事件等)
- 操作锁: 避免重复执行事件时，可以设置一个锁，直到返回结果才解锁，禁止多次请求。
