00:00
这边我们再来看个点,好,我来刷一下,这是我们刚才代码吧,大家看我每次轮播图在动的时候,下面的字是不是在抖,或者说我这边在划的时候,是不是你会发现字有点抖。比如说我把这个什么。啊,我把这个。里面的自动轮播给它开起来。自动在哪开,是不是在这边是吧,应该什么你的。凹凸AU tu吧,还有个什么need need的前面的玩意吗?是不是完了,你们跟我学单词都不会读了,语言专业的都不会读,那咋整?来看一下你。说一下。下面字不得了。下面这是不是不抖了?
01:03
说一下。咦,不抖了?真的不得了。这什么鬼啊,怎么突然不抖了?是不是?哎,你们看一下你们的这上面抖不抖。PC啊,就是可能我是不是升到最最新版本,它做的优化。懂不懂?不抖了,懂不懂?啊,待会儿啊,我看看来啊,我们来看一下啊,比如说我这个存储,存储这一块啊,我把我刚改动的代码稍微变一变。
02:03
好,那这是。我没有动过的代码,我们来看啊,我这边好像现在不抖了。F12,刷一下啊,我让它自动轮播,你看下面是没有在抖啊,可是有些同学应该是抖的比较厉害的。是吧,下面这一排姿势有的比较厉害的啊,可能是你的二七版本比较低啊,或者说可能是啊,你机子可能现在干嘛开的都是稍微有点多啊,他就在重绘重排之后的话,你会很明显的看见他的重会重牌。能没意见啊,那怎么办呢?那我们来看一下吧,比如说我之前跟你们在你们看过一个图层吧。啊,不对,不是他。这个是吧,我们来刷一下,大家看看是不是现在都是图层。几个图层。那么多图什么是不是这个图层这个东西的话,底下是有原因的,它为什么是个。
03:03
图层吧,那这个现在还没法讲啊,可是我们现在讲这个3D硬件,它也是会单独开一个图层的啊OK,那我们这个图纸我们放到后后面再来说,讲到什么性能优化的时候再来说,你们知道就在我3D硬件加速的时候,它就会干嘛开启一个图层的。啊,比如说我们来看一下,我把它放大一点。嗯。放的太大了,哎,显示不是百分百。OK,我把这个东西我们稍微拉一拉。大家看到这是不是我们那个导航条,你看底下有小绿吗。哪有旅馆?这个绿块你看我选中是那个导航吧。底下是不是有一个。有个小点点是不是哇,这都开启图层了。看一下吧。
04:06
看到我们看到多少个图像。是不那么多出生,呃,这个就。没那么好玩了。哎,为什么是这样的,我都有点想不通啊。刷一下,让他这个图层重新渲染啊,我电脑肯定要卡了啊。啊,因为这个图层开起来的话,肯定会占据我很大的CPU的。这是什么玩意儿?这是最最最上面这层是什么鬼啊?什么背景?好像是真的。好像真的是背景那段。好奇怪哦啊,这个图层我们放到之后再来分析吧啊,为什么初晨现在长初生现在长这么奇怪。我什么时候开这么多畜生了?
05:02
啊,你你图层开这么多的话,其实是蛮卡的一件事情啊,是不是我们说只要是运动的那几个元素开图层就行了。你看下面这张轮播的短,这个你你从这个图层里面,你就完全可以看到前端的这个这个啊,骗人的把戏了,是不是我们看到效果是不是这样的,你看最终在真正我们的逻辑就在这边。啊,整个什么布局都在这边是不是啊,这样吧,我们再来看个东西吧,不能看图层了,呃,我们看重绘重排吧,看能不能看到重绘重排啊。Running。OK。你看只要是。变绿的东西是不是都在重构,重返看我这个页面上,因为我现在构立一个选项嘛,它会将所有需要去重构的东西干嘛都给你啊。高亮起来用什么,用我们这个最喜庆的颜色,绿色啊,会给你高亮出来,你们来看是不是,你看这边你看大家看。
06:07
大家看这个无缝花屏这块是不是一在高亮一直在重回重白,OK啊,那其实啊,这只能说看到了重归重白而已啊,跟我们讲的3D加环没关系啊,咱们这个3D啊,现在我讲一个点啊,我主要是想讲什么,咱们现在是不是都拿着2D变换,OK,我们说2D变换走的还是我们的浏览器。浏览器的内核嘛,但是呢,我们电脑对电脑有个最基本的认识啊,电脑对电脑上面是有一层叫OS操作系统,操作系统是软件还是硬件。操作系统是软件还是硬件,软件啊,操作系统是软件啊,它底下有很多硬件。是不是显卡CPUGPU是不是就是我们的显卡,什么内存条,硬盘是不是你的什么什么什么什么各式各样的什么什么一些硬件嘛,都在下面嘛,现在我这个浏览器是不是要要去绘制一些动画,绘制页面啊,最终是不是去你屏幕上面成像啊,它都是要通过操作系统去干嘛,去调用下面的什么。
07:15
硬件呢?懂不懂,比如说你绘图要调用相相应的绘图的硬件。渲染要调用相应的什么渲染硬件吗?你放声音是不是要调用什么声卡?是吧,你做动画要调用显卡有没有讲,也就是说我们这个2D变换都要经过一层软件计算才能最终去调什么硬件设备,是不是,你看我们上面如果有2D变换。好,这些2D变化。他只能。通过走操作系统,操作系统里面的这个逻辑,也就是什么走软件,软件计算,最终去调用硬件嘛,OK,那我们有另外一种形式就是什么。好,嗯,还有什么颜色没用,Pink好叫做什么3D变换吗?3D变换不走软件计算,直接走你的显卡。
08:04
直接走硬件。问你那是不是解,是不是干嘛避过了一层什么?软件计算的过程,那这样的话你是不是更快,可是因为你是直接去调用显卡的,那它会更消耗你的CPU,更消耗你的硬件,你说吗?可能你手机会用的很好,能理解吗?那这个3D变化确实能提高我们动画的性能,可是能不能乱用?不能啊,像比如说现在我们这个页面里面,像谁需要3D3D3D3D硬件加速的这个无缝滑屏,它需要3D硬件加速,其他的你可以不用给他开,因为其他的都是你手动触发的,你看我每触一次,你看重回重拜吧,因为是张load图吗。六点图你是不是看到它转啊,所以说六点图的性能是比较低的。是不是,你看我每次转的时候,你看一直在重重排吧,是不是一直在闪啊,你看我上面划的时候,他也一直在重会重排吧,点开它的时候重坏重拍重坏重拍是不是,我问你能不能我们最好是避免重重拍,你做项目能不能避免重重拍。
09:12
不可能,老师我一张网页我性能写的极高,我会再一看一张空白页,没有业务你去弹性能就是空谈。懂不懂,业务重要,性能重要,业务重要,我们说在实现业务的基础之上,哎,我们可以去考虑一下性能懂不懂,那这边是不是看发现大量的元素都在重回重拜,是不是你想重回崇拜,如果他们都有单独一个图层是不是更好?你有单独的图层,让你去重回重款的话是不是更好?能不能理解啊,OK,那我们来看一下。好,那我要跟大家去讲一个事情,叫做3D硬件加速。OK 3d硬件加速啊,这个3D硬件加速触不触发重会重白,我们可以看一下。怎么看呢,我们找到我们这个。
10:00
无缝花屏吗?这是我们的完成版,因为这个样式什么都在一起吧,是吧,没有分开来嘛,所以说嘛,我们把它贴过来填好了,看一下今天是我们的2D板吧。现在是在里面吗?好像是,哦,不对。那就尴尬了,在哪?是不是这个CTRLC贴过来CTRLV,好来看一下这是我们的2D版本吧,好打开这2D版本好关掉它。哎,不知道好刷一下。好,我们来看一下这个什么。Round这里是不是有个车,有个叫round OK,看。刷一下,看他是不是一直在重归重吧。所以你是不是在一直在说一中板啊,比如说现在我让它开启3D硬件加速啊,在不开启3D硬加速时,我们再来看它的图层。Yaa。这什么鬼?啊啊。
11:00
你。CTRLC啊,我们说这个你们自己去又去解决了吧,OK ctrl b。C平均S来看一下。中年。这里你看是不是一直在冲什么,看它的图层。啊,这个图层的概念之后会给你们细聊啊,好,来看一下几个图层。几个两个。他不让我点啊,现在。OK,几个图层。怎么一直在抖啊,好诡异啊。重汇重重汇重排,重汇重排在哪边?我都找不到了。关掉。来说一下。
12:02
肯定是这样的,你刚才猜那当然是这样的了,来看一下是不是有三个图层,你们是不是看到三个图层是不是,那这样吧,我先写一个干净一点的页面啊,可能是2D变化也会开启,因为开启图不止3D加速啊。呃,我们来看一下。比如说写一个index吧,好,我们来写一个div吧。来个ID,叫做test,干净一点。来一个style。嗯,Marin,零,Can定为零是不是,然后底下呢,给这个test干嘛?我们描一描,Y为200 X也为200PXOK,背景。写写back pink,看这个玩意有没有涂成。F12。
13:00
刷一下吧,只有你看图层里面有没有他。有没有没有这个元素吧,是不是看我让他开启3D。啊ator z是不是就是不是就得删掉,比如说我我就让你走零看一下刷一下看有没有图层,就为他单独开那个图层有没有讲,当然还有其他属性也能是开图层的,懂不懂好,可是3D加速不但能开图层还能干嘛?3D硬件加速,不但可以开图层,它还可以不走软件计算,是直接走显卡是不是性能是不是干嘛。比开图层还要高啊,那开图层它有什么意义呢?它比如说我让这个,我让这个块运动起来怎么办。你没写吗?是不是我说来个。十秒,然后呢,写一个目关键字嘛,来个in fair列条,就是给个只要有一分点就行了,两秒是不是来个什么线性的是吧,写个关键字吧二。
14:08
OK,叫什么木?From。好,大家看我们在没有开启3D电的时候,不然干嘛transform一开始玩什么X轴。X为多少?XY。零是不是兔呢?CTRLC啊,那你我让他往下走吧,下面是不是稍微宽一点,往下走走个。400PX是吧,我给他看一下。CTRL,现在不让你干嘛,3D加速吧,CTRLD看一下好。刷一下,呃,这是这是我们的图层吧,我们来看什么。看他有没有重归崇拜。
15:04
说下。滑动过程好像没有重复铜板。刷一下刷的时候肯定有啊,我说我刷新的候肯定有啊,说明是不是这个券我没有重回总啊。是不是啊,我们来看一下定位呢。我我把这个改成什么。把这个改成什么?他的行为是不从0PX走,走到400啊不不什么top是吧,从0PX走到。400PX,看有没有重重罚。说下有没有一直成为白吧,说明这个全的性能确实要比啊。什么高定位高是不是,可是我记忆当中是确实也会触发什么崇白的啊,我现在不知道为什么。
16:02
反正我们看到这效果了吧,他没有触发重规重牌吧,是个首先圈,是啊,我们看到你如果单独全内的外的话,他没有触发重规重牌。是吧,每次运动过程中是没有处罚,通规处罚,其次我们说干嘛,因为我可以再给他看什么。看什么CTRLC看他现看他现在有没有图层。你是吗?我是不是在没有走3D加速啊。是不是看他有没有涂层。刷一下。有没有图层刷一下,是不是他也有图腾二化,是不也也会给给你开启个图层啊讲那我们再给他干嘛。来一个translator z。没多少0PX。Translateator z。刷一下也没有成为重白吧,是吧,来看这个时候是不是也有一个图层啊,可是这个时候我们做什么。
17:06
那只有你我不动,你看运动过程中始终没有重复重围吧,是不是?而且我们说干嘛,他现在还走了一个什么?3D硬件加速,也就是说首先我为这个运运动的元素,因为你是2D变化,我帮你开启一个图层,是不是你单独在这个图层里面去进行。运动,其次你好像没有触发重归重盘,哪怕你能触发重归重盘,我也是在一个单独的图层里面。不影响其他元素吗?再一次我还给你开启了3D硬件加速,懂不懂?可是这些事情都是为了去做性能优化的吧,是不是?可是你知道,你得克制一点,你不能瞎开。懂不懂,那你那大家想想,那我们在我们这个项目里面是不是干嘛。我们说我们整个项目里面。整个项目里面谁最最需要3D加速?
18:01
无缝轮波,其他的你可以不用改,是不是,那在哪写。WS里面无轮波是在这边,谁待会去啊,谁待会去进行。运动的。谁啊,是不是这个。运动在哪边,是这边是不是这个ul。是不是啊,这一二是我们在这边创建的,那上来干嘛,创建的时候干嘛,点CSS干嘛。这个小玩意,我让你走一个什么transator laator z,走多少呢?零就可了。没有这干嘛加呗,是不是在哪C加这干嘛加一个全LZ嘛,CL已保存看一下。打开这个页面,CTRL f12看效果肯定是没有变的啊,不要看这个图层了。
19:03
说一下效果可能没有变的,可是他在走3D硬件加速了,能理解好,那这就是我们上午讲的第一节课讲的两个点,一个是垂直存值,一个是3D硬件加速,能理解吗?OK,好,大家下课先歇会。
我来说两句