今日完成的事

复习了下vue

明日计划的事

继续调试接口

收获

  vue懒加载

路由懒加载

当路由被访问的时候才加载对应组件

结合了 Vue 的异步组件和 Webpack 的代码分割功能，先将异步组件定义为返回一个 Promise 的工厂函数，使用动态 import语法来定义代码分块点

图片懒加载

当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好。

使用vue的 vue-lazyload 插件

在入口文件引入后把img 标签里面的 :src 属性 改成 v-lazy

vue什么时候情况用set

由于Vue 不能检测到对象属性的添加或删除，想给data对象中定义的数组或者对象，添加一些属性，就用Vue.set。

NextTick

this.nextick与settimeout20毫秒的区别?

this.$nextTick 会比 setTimeout 20 更快执行

什么时候用this.nextick，什么情况用setTimeout 20?

比如你更新了数据，会触发 DOM 重新渲染，又想获取重新渲染后的 DOM，就可以用 $nextTick，setTimeout 20 现在基本上不需要用了

重绘与回流

重绘(Repaint)是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘

回流(Reflow)是布局或者几何属性需要改变就称为回流。

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。

如何减少重绘与回流

使用 transform 替代 top

使用 visibility 替换 display: none (前者只会引起重绘，后者会引发回流)

不要把节点的属性值放在一个循环里当成循环里的变量

不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局

动画实现的速度的选择，动画速度越快，回流次数越多，可以选择使用 requestAnimationFrame

CSS 选择符从右往左匹配查找，避免节点层级过多

将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点。比如对于 video 标签来说，浏览器会自动将该节点变为图层; 以下常用属性可以生成新图层:

will-change

video、iframe 标签

offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别?

offsetWidth/offsetHeight返回值包含content + padding + border

clientWidth/clientHeight返回值只包含content + padding

scrollWidth/scrollHeight返回值包含content+ padding + 溢出内容的尺寸