00:00
好嘞,各位,那在这小节呢,我们再来学习一个内置的指令,它的名字呢,叫做V-clock,一点也不难啊,好理解,来,我们打开它,先写一个简单的效果啊,我要把学校的名字呢,给它呈现到页面上,直接插之语法写name啊,然后配置一个view实例,写好了name值呢,是上硅谷。好了,我们分析这么一个问题啊,各位观察你代码的第七行你在干嘛呢?是不是引入了一个外部的GS啊,然后呢,我想问的是啊,如果有一天由于某种原因,你第七行这个外部的JS啊,他足足等了五秒钟才加载回来,那么对整个页面的渲染是有什么影响的呢?那有些同学就说,老师啊,不用聊,你这问题聊不下去,你没有办法控制第七行这个外部的JS,让他晚五秒钟再回来,你没法控制。对吧,哎,同学说老师那我还想晚十秒呢,我看你咋办,哎,可以办,各位来,我是这么做的,我呢给你写了一个服务器,哎,叫做delay server delay什么意思呀,延迟的意思,把这服务器呢启动一下你就知道啊,它是干嘛的了啊no,然后我这个服务器的主文件呢,是这个server.js,哎,所以说我就直接写了server回车启动了吧,你看他说什么呢。
01:23
说请你访问绿色框里的这个地址呢,你就能够获取VGS了。啊,同学,我之前是怎么获取的呀?回到代码中,我是访问了一个本地的路径,你说对吧,你这样写,同学速度那是相当快的啊,但如果你反问我这个,那就不一定了,说老师那到底慢多久呢?由你定,看没看这写了一个零秒,零秒的意思就是一点也不延迟,你要我就给你,如果你写了一个五秒,同学你把这路径改一下,那么你发现我8080这台服务器呢,就等五秒钟再把VGS给你,这样的话,你觉不觉得就可以灵活控制了?来我们试试看好不好用啊,把它复制一份回到浏览器里边,走,先试一下零秒,就是一点延迟都没有的这个效果啊,来,走,你只要要他就给你好了,接下来我把那个零啊,给它调成三啊,让他晚三秒钟好了,走,你计时一下。
02:19
得等三秒他才回来对吗?各位,这样的话就可以灵活的控制了啊,然后有些小伙伴说,哎呀老师啊,你太笨了,来我教你一招吧,啊,你呢,打开这个控制台啊,切到呢,这个network选项卡是吧,放大一点说老师在这儿呢,就能调网速,确实啊,我承认这会儿能调网速。第一个选项什么意思啊,就是网速正常,不让它慢,这啥意思?快的3G网络,这个呢,慢的3G网络,那这个呢,什么意思,让浏览器断网是吧?说老师你用这个多好啊,是这样的,各位用这个呀,也不是不可以,但是这个东西啊,它只是把浏览器的网速调慢,我没有办法控制这个外部的GS,到底得等几秒才回来,你明白吧,你就比如说我可能打到了这个快3G,但是觉得还是太快了,我就切到这个慢3G,但是又发现太慢了,哎呀,试来试去,这个效果也不好,所以说我就不用这个了是吧,说老师你这有一错误,这不是咱写的啊,是这个插件出的问题,咱不用去管它啊,好了,那这个呢,你知道了之后呢,我们就诶用这个去引入吧,给它复制一份同学到这儿你知道怎么写了,把正常的这个地址啊,给它删掉,换成我这个对吧,而且把这儿呢给它改成五,现在我想问各位啊,这个红色的外部GS可是足足等了五秒钟才会清。
03:40
回来那我想问的是页面会怎样呢?其实这里面啊,各位有一个知识点在基础的时候呢,你们应该讲过,就是有一个东西叫做GS阻塞。哎,就是我们基础的时候呢,去说这个atml结构的时候,应该说过这个问题,就是GS阻塞,啥叫GS阻塞呀,我直接跟大家说啊,各位观察红色框,你是不是引入的是外部JS,再观察这个绿色框是不是我网页的核心内容body区,再观察粉色框是不是我在最后写的一段脚本,那同学你就慢慢来,在红色的这个位置,同学我耽误了几秒钟五秒钟,那你听我说所谓的阻塞就是我要是走不下去,你们谁也不能出现效果,这就是阻塞。
04:30
对吧,你想想同学100多个人走一独木桥对吧?如果说前面那人直接停下来,那后边的人都别想走了,这就是阻塞,好你看红色框是不是晚了五秒钟,那你听我说啊,各位,那就在这个五秒钟期间,这个绿色的结构是不可以被渲染到页面上的,这个粉色这一堆脚本也是不可以去执行的,因为一切都在等第七行这五秒,OK,说老师你说那玩意儿真的假的呀,咱们验证一下不就得了吗?对吧?好了,打开这个文件啊,然后这样啊,各位,我把这个呢新开一个,我不要这个,我从头开始分析,我提前就把这控制台打好行吧,然后呢,我再做一个事儿,各位,我在整个的这个粉色的脚本这个区域啊,我在最上方,我给你来一个CONSOLO1,同学,你说控制台上如果见到了CONSLO1,那就证明什么呢?这一段脚本是不是开始执行了?
05:28
对不?各位好了,那我们看看效果啊,回到这儿,同学,控制台我可是开好的啊,该清的东西清掉,来看着就这个地址是不是来开始啊,走,等吧。你得等五秒钟,你看五秒钟之后什么样?同学,五秒钟之后我问各位,诶上硅谷是不是出来了,哎,然后这一是不是也出来了,哎,所以说它整个的流程就是这样的,来最后完整说一下同学第七行啊,他咋的耽误了你五秒钟,好就是因为它耽误的这五秒,那么绿色的整个的这个区域是不可以被渲染到页面上去的,那么粉色的这个它也是不执行的,然后等呀等呀等呀等好了,这个GS回来了,接下来怎么办?
06:15
那这个绿色的结构,哎,是不是就可以放到页面上去了,然后是不是就有容器了,有容器了之后同学代码执行的速度是相当快的,然后粉色框是不是就开始介入,一介入同学是不是就log个一,LOG1之后是不是紧随其后整出来一个VU实例,那VU实力呢,瞬间就接管容器,然后就把里边这个差值语法是不是就解析了呀,哎,OK,就是这么一个效果阻塞嘛,啊好。那接下来呢,各位你看着我把引入外部GS的这个代码啊,换一个位置,我们之前学基础的时候也跟大家说过,对吧,就是说有一个地方也可以去引入外部的JS,哪儿呢?就是body的最下方,就是在这个位置,你body里边不得写结构吗?哎,在这些结构的最下方,你可以去引入外部的GS,舒老师呢,放在这儿有什么影响呢?
07:09
那这回就更有意思了,敲诈各位。它还是红色框。红色框耽误了几秒啊,五秒。但是你要知道的是,红色框的上边。这是不是正常的一段结构啊?那它就是这么运行的啊,各位你看着绿色框的这些结构呢,直接渲染到页面上去,然后在这儿又开始阻塞五秒钟,等啊等啊等啊,等什么时候外部的这个GS请求回来了,五秒钟过去了,然后粉色框的代码怎么着才得以有机会去执行。那也就意味着有一种感觉啊,这个div root先跑到页面上去了,而且给用户看了足足五秒钟,然后呢,Vu才开始介入,然后呢,Vu才开始接管整个容器,然后呢,Vu才开始编译这个什么呢?差值语法,那你说那就意味着。
08:09
用户好像在五秒钟之内啊,能看到一些东西,看到什么东西呢?就是整个这个root容器未经编译的结果,你觉得呢,好,咱们试试看看是不是这个样子啊,来右键打开看。对吧,等五秒等啊等啊,VIEW1介入,诶,这个差值语法就有人解析了,是这意思不好,右键检查我们刷新一下再来看啊,那我得重新开一个,因为我在这儿刷新吧,它不足以说明问题,因为本来一上来就有这上硅谷了嘛,好了再来一个啊,控制台也打开。然后呢,该清的东西啊,给它清掉好了,我敲回车啊,你看着走。没有解析过的模板出现到页面了,同学,这是问题,你说对吧,说老师那好解决呀,这个问题你这么讲不就给我解决完了吗?老师别在这儿引入,老师在这儿引入,OK,问题解决,哎,同学,你这也是一个解决的办法啊,确实是可以的,就放在这儿,那同学现在我就想把它放在body的下方,然后我还不想让它出现这个问题。
09:18
说老师那你控制不了啊,这段GS它网速就慢呀,那服务器就不怎么着啊,返回的就是慢呢,就慢了五秒钟,那你怎么办呢?同学呢,我觉得是这样的啊,不应该出现这个效果,哪个效果呢?同学你这是啥呀,我这写一个还好对吧,用户可能还觉得哎哟挺有意思哈,这俩小东西哈,啊来看一下,哎,这俩小东西还感觉跟小胡子似的吧,哎,还行,但是同学你这东西写多了,我问你整个页面全是这玩意儿,那用户不疯了呀,对吧?然后等等了五秒钟,你整个页面E1抖东西才回来,同学,这就是啥?这就是页面闪现。这不行啊,说老师,那你的追求是我的追求,是这样,同学上硅谷要么不展示。对吧,展示的时候直接就是上硅谷了,不会出现这个效果,就页面不可能出现这玩意儿,对不对?哎,说的再直白点,同学这H2啊,要么就别展示,展示的时候就已经解析完了,对不对?哎,那怎么处理呢?同学view呢,给我们提供了一个指令叫做V-clock,利用这个东西再配合CSS就可以解决这个问题。
10:22
说老师这什么意思呢,你瞧一下啊,我在HR的身上啊,我给你来一个V-clock说老师那加这东西它有什么用呢?诶说一下啊各位。这个东西啊,你直接写是不是就相当于HR上有了这么一个特殊的属性,那你听我说同学就这个V-clock,会在V实力接管容器的一瞬间,就把这个V-clock就给删掉了。说老师啥玩意儿没懂啊,怎么回事,就是我写了一个V-clock啊对,然后说you,后来再给我删掉啊,老师,那为啥我要写呢?哎,你看一下效果你就懂了啊各位你说这块晚了多久,是不是晚了五秒钟,那也就意味着下边整个粉色区域这些东西是不是都得晚五秒钟,那我问你各位绿色框里的东西是不是就会先跑到页面上去,那你跑到页面上去,我问你同学view都没有引入呢,View都没有加载回来呢,没有请求回来呢,也就是说V根本就没有工作,那我问你是不是就相当于我写了一个正常的HTML,然后里边是不是有一个HRHR是不是有一个V-clock属性。
11:30
对不?哎,那你看一下效果,说老师啊,你没给他写值呢,等于什么什么,这个指令是没有值的,这个指令只有名好,你看一下效果啊,来打开。右键检查。你看这是不是有V-clock?再等着view只要一介入,同学那个东西就被删掉,来再看一下各位啊,HR,现在我问你,他身上有那个V-clock吗?没有来注意啊,来,我刷新走,View没有介入的时候,这个属性就是正常存在,一旦view介入了,诶就把那个东西给你删掉了,发现了没说老师,那我还是不知道它有什么用,同学,我写完这段代码啊,你就恍然大悟喽,来看着我写一个style样式,然后写一个什么选择器呢,叫属性选择器,诶我把这个东西呢,给它复制一份,然后呢,我这么写啊,瞧着方括号走,同学,这是啥意思?
12:25
这啥意思?选中所有标签里边有V杠、clock这个属性的元素,对不对?好,然后让他们干嘛呢?瞧着now OK,我就写完了。各位说,老师这咋就写完了呢?那你琢磨琢磨呗,这段东西是不是先跑到页面上去了?哎,那我问你HR里边是不是有这个东西啊,叫做V-clock呀?哎,那我是不是给这个V-clock加了一个样式display none啊,所以说同学觉没觉得结构跑到页面上去了,但是我控制样式把它隐藏了,随后啊说老师那不就废了吗?你别急啊,你等V回来之后,同学view一旦接管容器了,上来就做一件事,是不是把V-clock移除,把这个属性一旦一移除,我问各位display none是不是就不再能限制我了呀,这不就可以了吗?来,你瞧一下效果啊,打开。
13:17
诶,你看没东西,其实各位结构在,只不过没有给你展示,你瞧着啊,打开body,打开这儿是不HR商硅谷,你看我刷新的时候页面是没东西的,但是你看这儿,你看clock在,然后等着等着等着view有一介入,诶是不是回来了,哎,所以说同学这个V-clock呀,主要解决一个什么问题呢?就是当你的网速过慢的时候,诶,他可以不让这种未经解析的模板跑到页面上去,对吧,那样的话多丑啊来,那我们总结一下吧,各位来在这写一个啊,V-clock指令它是没有值的,哎,本质啊,它就是一个特殊的属性,一个标签属性,View实例创建完毕并接管容器后,会删掉V-clock属性。
14:03
使用CSS配合这个是不是可以解决网速慢的时候,页面展示出差值语法等等那些乱七八糟的未经解析的模板的那个问题啊,OK,好了,那这一小节呢,我们停一下。
我来说两句