0
点赞
收藏
分享

微信扫一扫

前端学习案例-路由懒加载的工作原理

路由懒加载的工作原理

学习意义(源于2022年歌谣的某面试)

路由懒加载的定义

路由懒加载就是在使用到该页面的时候才会加载这个页面,像vue这种单页面加载的,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,
造成进入首页时,需要加载的内容过多,时间过长,会造成长时间的白屏,即使做了loading也是不利于用户体验,
而运用路由懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。

路由懒加载的书写方式

function load(component) {
return () => import(`views/${geyao}`)
}

路由懒加载的工作原理

Webpack编译打包后,会把每个路由组件的代码分割成一一个js文件,初始化时不会加载这些js文件,只当激活路由组件才会去加载对应的js文件。 在这里先不管Webpack是怎么按路由组件分割代码,只管在Webpack编译后,怎么实现按需加载对应的路由组件js文件。
核心要点 webpack 按需加载路由组件

其他延伸(图片懒加载)

为什么使用图片懒加载?
图片一直是影响网页性能的主要元凶,现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源,
所以,我们需要使用图片懒加载。

实现图片懒加载

HTMl实现图片懒加载

//给img标签增加loading

<img src="xxx.jpg" loading="lazy">

js实现懒加载方法

判断图片是否达到可视化区域,如果达到可视化区域的话就给img设置src属性,然后再进行绑定 window 的 scroll 事件对其进行监听,在页面初始化的时候,图片的src实际上是放在data-src属性上的,当元素处于可视范围内的时候,就把data-src赋值给src属性,完成图片加载。

 <img src="./img/default.png" data-src="./img/1.jpg" />
function lazyload() {
//获取可视区高度
let viewHeight = document.body.clientHeight
let imgs = document.querySelectorAll('img[data-src]')
//遍历当前图片,判读图片是否到达可视化区域
imgs.forEach((item, index) => {
if (item.dataset.src === '') return
// getBoundingClientRect()获取元素相对浏览器的值
let rect = item.getBoundingClientRect()
if (rect.bottom >= 0 && rect.top < viewHeight) {
item.src = item.dataset.src
item.removeAttribute('data-src')
}
})
}

//最后给window绑定onscroll因为 scroll 事件会在很短的时间内触发很多次,严重影响页面性能,为了提高网页性能,我们需要一个节流函数来控制函数的多次触发,在一段时间内(如 200ms,时间自行设置即可)只执行一次回调

function throttle(fn, delay) {
let timer
let prevTime
return function (...args) {
const currTime = Date.now()
const context = this
if (!prevTime) prevTime = currTime
clearTimeout(timer)

if (currTime - prevTime > delay) {
prevTime = currTime
fn.apply(context, args)
clearTimeout(timer)
return
}

timer = setTimeout(function () {
prevTime = Date.now()
timer = null
fn.apply(context, args)
}, delay)
}
}


window.addEventListener('scroll', throttle(lazyload, 200))

IntersectionObserver方法实现,IntersectionObserver是浏览器原生提供的构造函数,接受两个参数:callback 是可见性变化时的回调函数,option 是配置对象(该参数可选)

const imgs = document.querySelectorAll('img[data-src]')
const config = {
rootMargin: '0px',
threshold: 0,
}
let observer = new IntersectionObserver((entries, self) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
let img = entry.target
let src = img.dataset.src
if (src) {
img.src = src
img.removeAttribute('data-src')
}
// 解除观察
self.unobserve(entry.target)
}
})
}, config)

imgs.forEach((image) => {
observer.observe(image)
})

总结

估计图片懒加载问的比较少 重点路由懒加载
备注 个人建议 路由懒加载是项目重点 图片懒加载权当了解

最新更新时间 2022年 7月22日 歌谣



举报

相关推荐

0 条评论