懒加载的好处
当我们一次性大批量的加载资源的时候,会占用大量的内存,尤其是在一些低内存的设备上会造成卡顿的现象,所以我们就需要在必要的时候再进行资源的加载。
懒加载就是在真正需要资源才加载资源,这样就可以节省内存,尽可能的减少卡顿现象的出现。
懒加载原理
懒加载的原理就如上图所示,当组件进入可视区域加载子组件,不在可视区域内卸载子组件。懒加载的原理就是这么简单,下面介绍一下懒加载具体的实现方法。
1. 计算子组件是否在可视区域之内
const checkVisible = (component,offset=100,parent) => {
//获取实际的DOM
const node = ReactDOM.findDOMNode(component)
//获取距离顶部的距离
const {top} = node.getBoundingClientRect()
const windowHeight = window.innerHeight || document.documentElement.clientHeight
const {top:parentTop,bottom:parentBottom } = parent.getBoundingClientRect()
//可视区域顶部的位置
const finalTop = Math.max(parentTop,0)
//可视区域底部的位置
const finalBottom = Math.min(parentBottom,windowHeight)
//计算是否在可视区域之内
if(top > finalTop - 100 && top < finalBottom + 100){
return true
}
return false
}
2. 添加滚动事件
首先我们先利用上面的函数检查检查子组件是否在可视区域内,如果是则设置isVisible为true,则显示组件,否则不显示组件。
checkedVisible(parent){
//是否只懒加载一次,once为true 加载之后不再操作dom
const once = this.props.once ;
const offset = this.props.offset
return throttle(()=>{
const visibleState = this.state.isVisible
if(!(once && visibleState)){
const isVisible = checkVisible(this,offset,parent)
this.setState({isVisible})
}
},200)
}
const parent = getScrollParent(node);
const checkedVisibleFn = this.checkedVisible(parent) ;
//添加滚动事件
window.addEventListener("scroll",checkedVisibleFn,false)
为window对象添加滚动事件,为防止滚动事件频繁触发checkedVisible,我们为检查checkVisible函数节流,减少性能开销。此处我们利用的throttle函数,更多关于节流函数和函数去抖的介绍可参考这边博客:JS魔法堂:函数节流(throttle)与函数去抖(debounce)。
3. 获取可滚动的父组件
当前我们只是为考虑了window对象可滚动的情况,如果是DOM对象可滚动我们就需要获取可滚动的父对象,而不只是仅仅window对象。
//获取滚动的父元素
const getScrollParent = (node) => {
if(!node){
return document.documentElement
}
let parent = node ;
//正则
const overflowReg = /(scroll|auto)/
while(parent){
if(!parent.parentNode){
return document.documentElement
}
const {overflow} = window.getComputedStyle(parent)
if(overflowReg.test(overflow)){
return parent
}
parent = parent.parentNode
}
return document.documentElement
}
export default getScrollParent
4. 再次添加滚动事件
如果不仅仅是window可滚动我们在添加滚动事件之前进行一次判断。
const node = ReactDOM.findDOMNode(this) ;
const parent = getScrollParent(node);
const checkedVisibleFn = this.checkedVisible(parent) ;
if(parent === document.documentElement){
window.addEventListener("scroll",checkedVisibleFn,false)
}else{
parent.addEventListener("scroll",checkedVisibleFn,false)
}
总结
以上基本就是react懒加载基本实现的方法,具体的代码以及demo,可以参考源码:https://github.com/volcanoliuc/react-lazyload-demo
此demo仅仅只是简化版的react懒加载,如果是在实际的项目中需要使用推荐使用 react-lazyload。