前端性能的优化,最直接的体现在用户的体验上。当用户打开一个站点时,加载时间在十几秒以上,肯定要疯了。以下是自己的见解加解读小册内容。强烈建议大家去看看这本掘金小册,点击自动跳转
- 自己知道的性能优化。
- 图片处理(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事件等)
- 操作锁: 避免重复执行事件时,可以设置一个锁,直到返回结果才解锁,禁止多次请求。
网友评论