前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

性能优化css篇 willchange#编程语言

好的观众彭娜,今天来讲讲性能优化。今天的性能优化是跟css相关的,并且是作为css中的属性去使用的,这个属性叫will change。这个属性就是由开发者去告知浏览器未来会有哪些元素或者属性去发生变化,这样浏览器就可以提前去做好计算的准备,这样就可以提升页面上的一部分性能。

先来看一下属性包括哪些值,这里方面的d a v去演示一下will change。

·第一个是凹凸,也就是默认值。

·第二个是contents,也就是这里边的内容可能是动态的,会发生变化,就可以使用这个。

·第三个就是scope position,也就是滚动条。

直接可以看一下应用场景。

·第一个就是有动画的过渡效果,也就是这里可以自定义,比如有transform,可能会发生变化或者是些别的,当然也可以支持多个属性,比如有opcity,就是背景透明度,透明度也可能会发生变化,可以支持多个属性的组合。

·第二就是滚动效果,滚动效果其实也就是scrop position,也可以使用这个。

·第三个就是动态内容的更新,也就是content。

·第四个就是复杂布局的变化,也就是宽、高还有动画同时发生,也可以去自由的去组合这些属性,比如ys transform height,自己去组合也是可以的,所以它的应用场景还是非常的多的。

来看一下属性的注意事项。

·第一个就是这个东西不能滥用,不要看见一个小小的动画就要给它去加,因为它背后要使用gpu去加速,会占用内存的,所以一般我是推荐使用复杂布局变化的时候,也就是有很多东西要去变化的时候再去使用它,所以不要去滥用这个东西。

·第二个就是不要过度的去依赖这个东西。

·第三个就是最佳实践,这个也是我个人非常推荐的,就是不要在变化之前就把这个东西就开启了,也就什么意思?就是给大家写一个最佳实践,比如来一个ys为一百p叉,background为right,未来可能会给它添加一个过渡效果,就直接在这给它添加上,这样是不好的。

比如来个transform,div hover,tries from缩放,比如缩放一个二倍,就是不要把属性提前的在这里去给它添加上。

来看一下效果,效果是没有什么问题的,给它来一个过渡效果,tries is也是没有问题。最佳实践是怎么使用?推荐,比如,鼠标滑上去的时候是不是才使用它?也就是说在鼠标滑上去的时候再把属性去添加上,当鼠标不滑上去就没有属性,所以要去控制属性就是启动和禁用,这就是最佳实践。这个效果其实也是非常好的,也是没有什么问题。

·第二个就是使用脚本代码去进行控制。下面有个例子,也就是当鼠标划上元素的时候去添加,这两个属性可能会进行发生变化,当动画结束的时候再把它重置回去,这个是最佳时间。不要把属性一直在给元素去添加,用完之后要给它去释放的。

可以使用添加到这些hover一些尾类里边,或者是使用脚本去控制它,这样才是最佳实践。

·第四条写了不要把这个东西过早的去进行优化,因为它会一直去占用内存,会使用gpu去加速,反而会降低性能,所以使用的时候一定要注意一下这个东西。

如果大家想要资料是直接放到公众号了,没有任何广告,就是大家一个一个私信,懒得回大家去公众号里边去自取就可以。

以上就是本上的一个小知识。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言