性能优化之:
1.
//减少了服务器请求次数
防抖: 防止用户在短时间内操作多次(发送多次无意义请求)
验证码 - 通过使用input验证码/滑动验证/选图片等,
验证插件, 实现先验证, 再发送请求!
节流 - 让某个函数在指定时间内, 只调用一次( 肯定会和定时器搭配使用 )
2.
//减少了代码冗余
mixin: 混入, 可以提取vue组件公共代码数据, 减少整体代码冗余
const 混入1 = { ...vue共用代码数据 }
组件
import { 混入1 } from 'xx'
mixins: [混入1, 混入2.....]
3.
//提升首屏加载速度
路由懒加载
component: () => import('动态加载的组件')
4.
//提升首屏加载速度
组件懒加载
components: {
Hello: () => import('动态加载的组件')
}
5.
//提升首屏加载速度
图片懒加载
5.1. 监听滚动高度
window.onscroll = 函数
5.2. 获取当前屏幕滚动的高度(取值有兼容性问题!!!每个浏览器不太一样)
let top = window.scrollTop || body.scrollTop || document.documentElement.scrollTop
5.3. 达到指定高度(看项目需求), 在加载下一页的图片节点
vue: v-for + [].push
js: '<img src='xx'/><img src='xx'/><img src='xx'/>'
容器.innerHTML = imgstr
js-先放图片,动态设置src:
<img data-src="1.jpg" />
<img data-src="2.jpg" />
<img data-src="3.jpg" />
<img data-src="4.jpg" />
<img data-src="5.jpg" />
<img data-src="6.jpg" />
<img data-src="7.jpg" />
<img data-src="8.jpg" />
<img data-src="9.jpg" />
<img data-src="10.jpg" />
let domarr = document.getElementsByTagName('img')
for(let dom of domarr){
dom.src = dom.dataset.src
}
