CSS3性能优化新属性:will-change使用攻略_优化菜鸟教程下载

will-change属性通过告诉浏览器什么属性、什么元素将会发生变化,可以对这些操作进行可能性的优化,由此提高CSS动画的执行效率。属性的取值:1、auto: 实行标准浏览器优化。2、scroll-position: 表示开发者希望在不久后改变滚动条的位置或者使之产生动画。3、contents: 表示开发者希望在不久后改变元素内容中的某些东西,或者使

CSS3性能优化新属性:will-change使用攻略

will-change属性通过告诉浏览器什么属性、什么元素将会发生变化,可以对这些操作进行可能性的优化,由此提高CSS动画的执行效率。

CSS3性能优化新属性:will-change使用攻略_优化菜鸟教程下载

属性的取值:

1、auto:  实行标准浏览器优化。

2、scroll-position:  表示开发者希望在不久后改变滚动条的位置或者使之产生动画。

3、contents:  表示开发者希望在不久后改变元素内容中的某些东西,或者使它们产生动画。

4、<custom-ident>:  表示开发者希望在不久后改变指定的属性名或者使之产生动画,比如transform 或 opacity。

使用须知:

1、不要将 will-change 应用到太多元素上,如果过度使用的话,可能导致页面响应缓慢或者消耗非常多的资源。

2、通常,当元素恢复到初始状态时,浏览器会丢弃掉之前做的优化工作。但是如果直接在样式表中显式声明了 will-change 属性,则表示目标元素可能会经常变化,浏览器会将优化工作保存得比之前更久。所以最佳实践是使用完后及时清除。

3、如果你的页面在性能方面没什么问题,则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是作为最后的优化手段,用来尝试解决现有的性能问题,它不应该被用来预防性能问题。

使用

如果想通知浏览器会发生一个transform方面的变化,可以这样写:

.element {
	will-change: transform;
}

我们还可以指定多个值,用逗号分隔,例如:

.element {
	will-change: transform, opacity;
}

然而,千万不要过度使用will-change属性,否则,事与愿违,页面的执行效率会降低,推荐的做法是当一个元素或属性发生变化时打开will-change,变化完成之后关闭它

海计划公众号
(0)
上一篇 2020/03/30 07:15
下一篇 2020/03/30 07:15

您可能感兴趣的内容

  • 给前端开发的 6 点建议菜鸟教程下载_建议指南教程

    最近接触了很多前端的小伙伴,和他们谈了很多职业发展的问题。他们大部分是做了一到三年的前端新手。在交流中我发现了一个很有意思的现象,大家同样是入门不足三年,一部分感觉前端是一个很有前途的职业,甚至一部分两年经验的前端同学透露年薪已经30W以上了,而另一部分则表示前端薪资水平不高,技术体系庞杂,迭代速度飞快,苦于学习各种不断更新的技术和框架,心神俱疲。同样是前端

    2020/03/30
  • 网站防刷限流基础入门_nginx菜鸟知识

    我在nginx 和tengine 之间选择了tengine。tengine是淘宝公司在nginx 研发的。同时也测试过nginx 在一些功能方面不是很好。比如:限流这块,nginx目前只支持对ip限流还有对后端服务器的检测方面都不如tengineTengine version: Tengine/2.3.1
    nginx version: nginx/1.16.

    2020/03/22
  • 前端必须知道的 HTTP 安全头配置小白攻略_安全指南攻略

    在本文中,我将介绍常用的安全头信息设置,并给出一个示例。在本文的最后,我将介绍用于常见应用程序和web服务器的安全头信息示例设置。Content-Security-Policy内容安全策略(CSP)常用来通过指定允许加载哪些资源来防止跨站点脚本攻击。在接下来所介绍的所有安全头信息中,CSP 可能是创建和维护花费时间最多的而且也是最容易出问题的。在配置你的网站

    2020/03/26
  • Trumbowyg小白知识_一个轻量级的Js富文本编辑器

    Trumbowyg小白知识 官方网址:https://alex-d.github.com/Trumbowyg GitHub:https://github.com/Alex-D/Tr…

    2020/03/06
  • css自定义checkbox样式使用指南_样式菜鸟教程下载

    1.利用CSS3属性 appearance。该属性(强制)更改(改变)默认(原生)样式。Firefox 支持替代的 -moz-appearance 属性;Safari 和 Chrome 支持替代的 -webkit-appearance 属性;IE不支持该属性。所以可以利用该属性取消checkbox的原生样式。2.利用:checked选择器当checkbox被

    2020/03/23
  • JS 数组精简技巧使用说明_数组入门攻略

    数组是 JS 最常见的一种数据结构,咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮助咱们提高开发效率。1. 删除数组的重复项var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];// First method
    var

    2020/03/20
  • Vue开发之底部导航栏菜鸟指南_导航基础入门

    一、导航切换封装一个公用组件Tabbar,在需要导航页的页面引入组件即可。代码如下:<div class="tab

    2020/03/23
  • Development模式是如何运作的?小白攻略_模式小白知识

    如果您的JavaScript代码库非常复杂,那么您可能会想办法在开发模式和生产模式中捆绑和运行不同代码。在开发模式和生产模式中捆绑并运行不同的代码是非常强大的。在开发模式中,React里有许多预警,可以帮助我们在导致bug之前找到问题。然而,检测此类错误所需的代码通常会增加bundle文件的大小,并使应用程序运行得更慢。在开发模式中程序运行缓慢是可以接受的。

    2020/03/26
  • 闭包实现:异步变同步入门基础知识_闭包小白基础

    问题思考在不使用ES6的前提下如何将一个多个异步请求按顺序执行呢?比如: var imgUrls = [‘http://www.xxx.com/1.jpg’,’http://www.xxx.com/2.jpg’,’http://www.xxx.com/3.jpg’,’http://www.xxx.com/4.jpg’,’http://www.xxx.com/

    2020/03/20
  • Easings.net基础入门_常见函数图表,缓冲函数速查

    Easings.net基础入门 官方网址:https://easings.net/ 简介描述:常见函数图表,缓冲函数速查 缓动函数指定参数随时间的变化率。 现实生活中的对象不仅会立…

    2020/03/11
  • 一张图理清 Vue 3.0 的响应式系统小白帮助_响应式基础知识教程

    随着 Vue 3.0 Pre Alpha 版本的公布,我们得以一窥其源码的实现。Vue 最巧妙的特性之一是其响应式系统,而我们也能够在仓库的 packages/reactivity 模块下找到对应的实现。虽然源码的代码量不多,网上的分析文章也有一堆,但是要想清晰地理解响应式原理的具体实现过程,还是挺费脑筋的事情。经过一天的研究和整理,我把其响应式系统的原理总

    2020/03/23
  • javascript中defer的作用是什么菜鸟教程网_脚本入门基础教程

    javascript中defer的作用是什么菜鸟教程网 Javascript中defer的作用是文档加载完毕了再执行脚本,这样会避免找不到对象的问题。 defer是脚本程序强大功能…

    2020/03/19
  • 编码规范入门基础html代码规范化编写_规范小白教程

    语法缩进使用soft tab(4个空格);嵌套的节点应该缩进;在属性上,使用双引号,不要使用单引号;属性名全小写,用中划线做分隔符;不要在自动闭合标签结尾处使用斜线(HTML5 规范 指出他们是可选的);不要忽略可选的关闭标签;HTML5 doctype在页面开头使用这个简单地doctype来启用标准模式,使其在每个浏览器中尽可能一致的展现;虽然doctyp

    2020/04/03
  • HTMLHint教程视频_一款基于JS开发的静态扫描组件

    HTMLHint教程视频 官方网址:https://htmlhint.io GitHub:https://github.com/htmlhint/HTMLHint 简介描述:一款基…

    2020/03/06
  • CSS flex布局入门教程视频_布局使用帮助

    一、 why flex都知道html正常的文档流是自上而下排列的,块级元素会像下左图一样排列。但是项目中尤其是移动端项目会有很多需求的排版方式是要求由左到右排列。虽然可以通过dispaly:inline-block、float、position完成排版,但是需要对距离进行计算,计算起来十分麻烦。2009年W3C提出了一种新的方案–引入了弹性布局flex方式

    2020/03/26
  • css calc()有啥用?入门百科_属性攻略教程

    css calc()有啥用?入门百科 CSS3的calc() 函数用于动态计算长度值。 calc()函数允许我们在属性值中执行数学操作。例如,我们可以使用 calc() 指定一个元…

    2020/03/20