00:00
哈喽,各位小伙伴们大家好。那接下来啊,带着大家呢,去看一下的这样的一种现象就是卡顿现象。那咱们呢,去看一下咱们的这样的一个项目。那虽然说咱们已经完成了,鼠标一进谁,哎,是不是谁就有这个类名叫做坑。以及呢,有这个背景颜色天蓝色,那这个业务呢,其实咱们已经完成了。那么咱们呢,就是在这个鼠标进入这里去演示一下子这个卡顿现象。那咱们呢,去找到咱们相应的组件type NAV。那首先说啊,咱们呢,去看一下咱们代码。那首先说如果鼠标进入到H3的时候。OK,会触发这个叫做change in death这样的一个方法。那也就是鼠标进入的这个回调这里。
01:03
那老师呢,在这里呢,先给你打印成一句话,哎,比如说conso.log。比如说咱写上吧,叫做鼠标进入。对吧,那以及呢,老师呢,后面加一个索引值吧,咱们可以看一下咱。那咱们测试一下,老师给你刷新看这啊咱。老师呢,把它呢这个控制台啊整到右侧这里,这样咱们呢方便一些,老师搁这清一下看这。那首先说啊,现在的老师如果正常的慢慢来,你看鼠标进入。鼠标进入。对吧,慢慢来是没问题的,你只要进入到这个一级。分类当中它就会进行打印,这是没问题的。对吧,你可以看一下子老师慢点来来老师往这边挪挪,你看你慢点来鼠标进入。鼠标进入。
02:00
对不,哎,这是没问题。但是呢,要注意一件事,那假如说老师呢,从全部商品分在这里,快速的从顶上到底下这样的执行一下。那你要注意一件事啊。老师呢,是从全部商品分类这里快速的滑到底下这里。那这里呢,你要注意一件事儿啊,那么这16个一级分类,你要注意老师虽然整的很快,但是你要想明白一件事什么事儿,那么本身应该触发这16个一级分类的,这样的鼠标进入的时间。对吧,你虽然操作的是很快,但是你琢磨琢磨,我鼠标从顶上这儿快速的滑到底下,那这16个一级分类,那一定都应该触发了鼠标进入时间。对不?你看,只不过老师整的很快,唰的一下。但是呢,你会发现一件事,什么事,右侧的这里。
03:03
它只有三个一级分类触发了。但是你要想明白这一件事儿,这件事儿一定要想明白,老师只不过是从这儿到这儿。快速的往底下啊整了一下子,但是你要想明白这16个一级分类,有就是这16个H3,它本身应该。都应该触发了鼠标进入时间。但是你会发现由于用户的行为过快。它只有三个H3是不是触发。对吧,那虽然说你用户执行的过快,但是你要想明这件事,一定要想明白,你虽然用户的行为过快,但是这16个H3本身它都应该触发了鼠标进入事件,但为什么这一次它只有四个触发了呢?那你这块要想一想,哎,那是因为什么呢?因为用户的行为他操作太快。
04:01
浏览器它反应不过来了。你想想,对于解析器,或者是对于浏览器,它解析代码它也是需要时间的。那所以说如果你正常慢慢来。哎,那这16个一级分类的鼠标进入事件都会触发,但是如果用户的行为过快。对吧,如果用户像老师这样唰的一下。那么浏览器解析它反应不过来。对吧,所以说只有四个执行了。对吧,那这里呢,咱们得去聊聊,你看这儿。看这。咱先说正常情况下。比如说事件触发非常频繁。而且每一次的触发回调函数都要去执行。但是你要注意,老师刚刚也给你演示了,那么如果时间很短,而且回调函数内部有计算,那么很有可能出现卡顿现象,啥意思呢?老师呢,在这儿呢,做一下笔记。
05:08
看这。咱就说正常情况,正常情况。什么情况呢,就是用户哎,写下用户慢慢的这个操作。对吧,比如说鼠标进入。那用户慢慢的来,那你会发现每一个一级分类。对,也就是那个H3。那么都会怎么的触发哎,触发鼠标。进入世界,这是没问题的。那还有一种就是非正常情况。什么呢?就是用户的这个操作很快。对吧,哎,很快。那你会发现本身。对吧,哎,本身那么全部的一级分类啊,都应该。
06:04
触发鼠标进入事件。但是经过测试。那么只有部分的H3出发了。就正常说你这16个虽然快,你用户行为快归快,但是正常说这16个都应该触发了鼠标接入事件,但是它只有部分触发。对不,那为什么,就是由于什么呀,哎,就是由于用户的行为怎么的,哎行为。过快。导致什么呢?导致咱们的这个浏览器反应不过来,对吧,哎,反应不过来。那么如果呀,如果当前的回调函数中。对吧,有一些大量的业务,就比如说在这个回道当中还有很多业务。
07:00
对吧,还有很多代码,那就有可能出现什么,就是有可能出现卡顿现象。啊,那说白了,如假如说出现了卡顿现象,那因为什么?就是因为用户的操作太快。时间太短,你根本没有给人家解析器、浏览器留下充裕的时间。对吧,那所以说假如说要解决这种卡顿问题,那咱们这里边儿得聊聊谁了呢?得聊聊函数的防抖与节流。当然啊,在面试当中以及工作当中,函数的防抖与节流还是使用频率非常高的。所以说咱们接下来去花点时间去讲讲函数的截流与方等。
我来说两句