vue 大屏组件,vue 组件开发 痛点
众所周知，Vue是一个轻量级的框架，源代码只有72.9KB，但是它也有自己的缺点，就是首屏加载会比较慢。本文主要介绍Vue项目首屏性能优化组件的相关信息，有需要的朋友可以参考一下。
目录
Vue首屏性能优化组件
形容
交叉观测器
requestIdleCallback
实现
摘要
Vue首屏性能优化组件
只需实现一个Vue首屏性能优化组件。现代浏览器提供了许多新的界面。在不考虑IE兼容性的情况下，这些接口可以大大减少写代码的工作量，做一些性能优化的事情。当然，为了考虑IE，我们也可以为他们封装组件。本文中的首屏性能优化组件主要使用IntersectionObserver和requestIdleCallback接口。
描述
考虑第一个屏幕场景。当第一个屏幕主要用于显示时，通常会加载更多的资源，如图片。如果我们不想在用户打开时加载所有资源，而是希望用户滚动到相关位置，然后加载组件，那么我们可以选择IntersectionObserver作为界面。当然，我们也可以使用onscroll事件进行监控，但是性能可能会比较差。有一些组件，我们希望它们一定要加载，但是不希望它们在初始化页面的时候同步加载，这样就可以使用异步的方法比如Promise和setTimeout等。但是如果我们想降低加载这个组件的优先级，可以考虑将requestIdleCallback作为一个接口。相关代码在https://github.com/WindrunnerMax/webpack-simple-environment.的Vue-first Vue-first-screen-optimization分支
IntersectionObserver
IntersectionObserver接口从属于IntersectionObserver API，它提供了一种异步观察目标元素与其祖先元素或顶级文档窗口视口的相交状态的方法。祖先元素和窗口视口称为root root，也就是说交集观察者API，可以自动观察一个元素是否可见。因为visible的本质是目标元素和视口产生一个相交区域，所以这个API叫做cross-viewer，兼容https://caniuse.com/?搜索=IntersectionObserver .
const io=new IntersectionObserver(回调，选项)；
//开始观察
io . observe(document . getelementbyid( example ))；
//停止观察
io.unobserve(元素)；
//关闭查看器
io . disconnect()；
参数回调，创建新的IntersectionObserver对象后，当它听到目标元素的可见部分越过了一个或多个阈值时，就会执行指定的回调函数。
参数选项，IntersectionObserver构造函数的第二个参数是一个配置对象，它可以设置以下属性：
threshold属性决定何时触发回调函数。它是一个数组，每个成员都是一个阈值。默认值为[0]，即intersectionRatio达到0时会触发回调函数。用户可以自定义该阵列。例如，[0，0.25，0.5，0.75，1]表示当目标元素为0%，25%，50%，70%时。
根属性指定目标元素所在的容器节点，即根元素。目标元素不仅会随着窗口滚动，还会在容器内部滚动，比如在iframe窗口中，因此需要设置root属性。注意，容器元素必须是目标元素的祖先节点。
rootMargin属性定义根元素的边距，用于扩大或缩小矩形rootBounds的大小，从而影响intersectionRect的大小。它使用CSS定义方法，比如10px 20px 30px 40px，来表示上、右、下、左的值。
属性IntersectionObserver.root是只读的，是被监视对象的具体祖先元素元素。如果没有传入值或者值为null，默认情况下将使用顶层文档的窗口。
属性intersectionobserver . root margin是只读的。它计算穿越时加到根根的包围盒上的矩形偏移量，可以有效地缩小或扩大根的确定范围，以满足计算需要。此属性返回的值可能不同于调用构造函数时指定的值，因此可能需要进行更改以符合内部要求。所有偏移量都可以用像素、px或百分比、%来表示，默认值为0px 0px 0px 0px。
属性交叉观察器。阈值是只读的，它是一个按升序排列的阈值列表。列表中的每个阈值是侦听对象的相交面积与边界面积的比率。当超过监听对象的任何阈值时，将生成通知。如果构造函数没有传入值，则默认值为0。
方法IntersectionObserver . disconnect()使intersection observer对象停止侦听。
方法IntersectionObserver.observe()使IntersectionObserver开始侦听目标元素。
IntersectionObserver entry . takerecords()方法返回所有观察目标的intersection observer对象的数组。
方法IntersectionObserver.unobserve()使IntersectionObserver停止监听特定的目标元素。
此外，在执行回调函数时，将传递一个IntersectionObserverEntry对象参数，该参数提供以下信息。
Time:可见性变化的时间，这是一个以毫秒为单位的高精度时间戳。
目标：观察到的目标元素是一个DOM节点对象。
RootBounds:根元素的矩形区域的信息，是getBoundingClientRect方法的返回值。如果没有根元素，它将直接相对于视口滚动，并返回null。
DingClient:目标元素的矩形区域的信息。
Section indirect:目标元素和视口或根元素的相交区域的信息。
IntersectionRatio:目标元素的可见比率，即intersectionRect与BoundingClient的比率，完全可见时为1，完全不可见时小于等于0。
{
时间：3893.92，
rootBounds: ClientRect {
底部：920，
身高：1024，
左：0，
右：1024，
top: 0，
宽度：920
},
boundingClientRect: ClientRect {
//.
},
intersect rect:client rect {
//.
},
交叉比：0.54，
目标：元素
}
requestIdleCallback
requestIdleCallback方法可以接受一个函数，该函数将在浏览器空闲期间被调用，这使得开发人员可以在主事件循环上执行后台和低优先级的工作，而不会影响关键事件的延迟，例如动画和输入响应。函数通常按照先入先出的顺序执行。如果回调函数指定了执行超时，则有可能为了在超时之前执行函数而打乱执行顺序。兼容性https://caniuse.com/?搜索=requestIdleCallback .
const handle=window . requestidlecallback(callback[，options])；
requestIdleCallback方法返回一个ID，该ID可以传递给window.cancelIdleCallback()方法以结束回调。
参数callback，对事件循环空闲时将调用的函数的引用。该函数将接收一个名为IdleDeadline的参数，该参数可以获取当前的空闲时间以及超时前回调是否已执行的状态。
选项是可选的，包括可选的配置参数，并具有以下属性：
超时：如果指定了超时，并且有一个正值，并且在毫秒级的超时后还没有调用回调，那么回调任务将在事件循环中排队，即使这样做可能会对性能产生负面影响。
实现
实际上编写组件主要是搞清楚如何使用这两个主要的应用程序接口就好，首先关注交叉观测器，因为考虑需要使用动态组件组件/,那么我们向其传值的时候就需要使用异步加载组件()=导入(组件)的形式。监听的时候，可以考虑加载完成之后即销毁监听器，或者离开视觉区域后就将其销毁等，这方面主要是策略问题。在页面销毁的时候就必须将交叉观察者进行断开连接，防止内存泄漏。使用requestIdleCallback就比较简单了，只需要将回调函数执行即可，同样也类似于Promise.resolve().然后这种异步处理的情况。
这里是简单的实现逻辑，通常观察者的使用方案是先使用一个差异等先进行占位，然后在观察者监控其占位的容器，当容器在视区时加载相关的组件，相关的代码在https://github.com/WindrunnerMax/webpack-simple-environment的vue -首屏优化分支，请尽量使用故事进行安装，可以使用纱线锁文件锁住版本，避免依赖问题。使用新公共管理运行开发运行之后可以在安慰中看到这四个懒加载组件创造创建的顺序，其中A的观察者懒加载是需要等其加载页面渲染完成之后，判断在可视区，才进行加载，首屏使能够直接看到的，而D的懒加载则是需要将滚动条滑动到D的外部容器出现在视图之后才会出现，也就是说只要不滚动到底部是不会加载D组件的，另外还可以通过组件参数和组件-事件将属性列表和听众传递到懒加载的组件，类似于$attrs和$听众，至此懒加载组件已简单实现。
！- App.vue -
模板
差异
第一部分/部分
部分
div2/div
惰性负载
:lazy-component=Example
type=observer
:component-params=“{ content:”示例一个“}”
：组件事件={
测试事件：testEvent，
}
/惰性加载
/部分
部分
div3/div
惰性负载
:lazy-component=Example
type=idle
:component-params= { content: Example B }
：组件事件={
测试事件：testEvent，
}
/惰性加载
/部分
部分
div4/div
惰性负载
:lazy-component=Example
类型=懒惰
:component-params="{ content:示例C } "
：组件事件={
测试事件：testEvent，
}
/惰性加载
/部分
部分
div5/div
惰性负载
:lazy-component=Example
type=observer
:component-params="{ content:示例D } "
：组件事件={
测试事件：testEvent，
}
/惰性加载
/部分
/div
/模板
脚本语言
从" vue-属性-装饰"导入{ Component，Vue }；
从导入懒汉./components/惰性加载/惰性加载。vue ；
@组件({
组件：{ LazyLoad }，
})
导出默认类别应用程序扩展Vue {
受保护的示例=()=导入(./组件/示例/示例。vue’)；
受保护的测试事件（内容：字符串){
console.log(内容);
}
}
/脚本
样式lang=scss
@import ./常见/样式。scss’；
正文{
填充：0;
边距：0;
}
部分{
边距：20px 0；
颜色：# fff
高度：500像素
背景：$颜色-蓝色；
}
/风格
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www。阮一峰。com/blog/2016/11/intersection observer _ API。超文本标记语言
https://开发商。Mozilla。org/zh-CN/docs/Web/API/intersect observer
https://开发商。Mozilla。org/zh-CN/docs/Web/API/Window/requestIdleCallback
总结
关于Vue项目第一个屏幕性能优化组件的这篇文章到此为止。有关Vue首屏性能优化组件的更多信息，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。