---恢复内容开始---

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

这个属性可以有4个值:

  • auto: 实行标准浏览器优化。
  • scroll-position: 指明元素的滚动位置将会出现动画变化,浏览器应该为滚动视窗内容的不可见部分事先做好准备。
  • contents: 指明元素的内容将会发生变化,浏览器不要缓存它们的内容。
  • <custom-ident>: 指明will-change实施的目标属性,比如transform 或 opacity

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

.element {
will-change: transform;
}

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

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

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

转载自CSDN--

我跟大家一样涨知识了

---恢复内容结束---

CSS性能优化新属性:will-change的更多相关文章

  1. 第二次讨论——响应式设计、布局技巧、css性能优化、css预处理

    第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于 ...

  2. CSS性能优化的8个技巧

    本文作者:高峰,360奇舞团前端工程师,W3C性能工作组成员,同时参与WOT工作组的学习. 我们都知道对于网站来说,性能至关重要,CSS作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验 ...

  3. CSS性能优化探讨

    大部分前端开发人员都不关心CSS性能优化,其实对于一个复杂的页面来说,高效的选择器还是可以带来一定的性能提升的. 1. CSS 选择器 浏览器是“从右往左”来分析 class 的,它的匹配规则是从右向 ...

  4. vue中关于v-for性能优化---track-by属性

    vue中关于v-for性能优化---track-by属性 最近看了一些react,angular,Vue三者的对比文章,对比来说Vue比较突出的是轻量级与易上手. 对比Vue与angular,Vue有 ...

  5. 页面中的CSS性能优化

    大型网站中会有多个CSS文件,性能优化是不要的.主要有以下几个方法: 一:压缩样式表: 通过构建工具压缩CSS文件,能够减少文件的大小,从而得到更快的下载.解析和执行.对于使用预处理器例如 Sass, ...

  6. CSS性能优化的几个技巧

    前言 随着互联网发展至今,对于网站来说,性能显的越来越重要了,CSS作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验.所以,我们需要重视与CSS相关的性能优化. 项目开发初期我们可能因 ...

  7. css性能优化

    1.前端 1.1.减少http请求次数: 1.1.1先了解下HTTP对性能的影响,HTTP是浏览器和服务器通过Interet进行相互通信的协议.HTTP是一种客服端/服务器协议,有请求和响应构成. 浏 ...

  8. Oracle 11g 中SQL性能优化新特性之SQL性能分析器(SQLPA)

    Oracle11g中,真实应用测试选项(the Real Application Testing Option)提供了一个有用的特点,叫SQL性能分析器(SQL Performance Analyze ...

  9. Oracle12c中性能优化新特性之新增APPROX_COUNT_DISTINCT 快速唯一值计数函数

    Oracle11g中,为了改善DBMS_STATS包收集统计信息时的唯一值计数功能,增加了 APPROX_COUNT_DISTINCT函数,但文档中未记载.Oracle12c文档中包括了该函数,因此, ...

随机推荐

  1. 鼠标点击按钮控制图片移动或者键盘控制图片移动(解决问题:parseInt失效问题,用Number)

    在测试用鼠标点击按钮,使图片左右上下移动: 效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...

  2. mysql5.1解压版安装

    1.如果已经安装别的版本先卸载干净,cmd管理员权限登录,mysql\bin目录:mysqld -remove 2.环境变量 MYSQL:path 3.my.ini [mysqld]port=3306 ...

  3. 2018-2019-2 网络对抗技术 20165314 Exp6 信息搜集与漏洞扫描

    一.原理与实践说明 1.实践内容 本实践的目标是掌握信息搜集的最基础技能.具体有: 1.各种搜索技巧的应用 2.DNS IP注册信息的查询 3.基本的扫描技术:主机发现.端口扫描.OS及服务版本探测. ...

  4. CF1097D Makoto and a Blackboard(期望)

    [Luogu-CF1097D] 给定 \(n,k\)一共会进行 \(k\) 次操作 , 每次操作会把 \(n\) 等概率的变成 \(n\) 的某个约数 求操作 \(k\) 次后 \(n\) 的期望是多 ...

  5. 剑指offer——面试题17:打印从1到最大的n位数

    用字符串模拟加法: #include"iostream" #include"string.h" using namespace std; bool AddOne ...

  6. linux 安装谷歌浏览器

    1. 下载 rpm 包https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm2. 安装依赖包yum ins ...

  7. Dubbo的Api+Provider+Customer示例(IDEA+Maven+Springboot+dubbo)

    项目结构 dubbo-demo dubbo-api:提供api接口,一般存储实体类和接口服务 dubbo-provider:dubbo生产者提供服务,一般存储接口具体实现 dubbo-customer ...

  8. 服务端模拟http服务请求客户端

    try { InputStream in = req.getInputStream(); int i = -1; ByteArrayOutputStream out = new ByteArrayOu ...

  9. (转)Apache和Nginx运行原理解析

    Apache和Nginx运行原理解析 原文:https://www.server110.com/nginx/201402/6543.html Web服务器 Web服务器也称为WWW(WORLD WID ...

  10. HTML5定位使用心得

    最近项目中接到一个需求,需要使用百度地图API和HTML5定位特性. 对于百度地图API,没啥好说的,刨它的API就是了. 今天想说说JS定位特性. 浏览器支持 Internet Explorer 9 ...