css3 性能优化之 will-change 属性

（一）含义

will-change，顾名思意“我要变形了，它的作用是“提高浏览器的页面渲染性能”。

当我们通过某些行为（点击、移动或滚动）触发页面进行大面积绘制的时候，浏览器往往是没有准备的，只能被动使用CPU去计算与重绘，由于没有事先准备，应付渲染够呛，于是掉帧，于是卡顿。而will-change则是真正的行为触发之前告诉浏览器：“浏览器同学，我待会儿就要变形了，你心理和生理上都准备准备”。于是乎，浏览器同学把GPU给拉上了，从容应对即将到来的变形。

CPU：中央处理器

GPU：图形处理器（专门处理图形的）

（二）用法

/* 关键字值 */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;        /* <custom-ident>示例 */
will-change: opacity;          /* <custom-ident>示例 */
will-change: left, top;        /* 两个<animateable-feature>示例 *//* 全局值 */
will-change: inherit;
will-change: initial;
will-change: unset;

auto
默认值

scroll-position
告诉浏览器，我要开始翻滚了。

contents
告诉浏览器，内容要动画或变化了。

custom-ident 就是哪个属性要变化了，写上

（三）代码

// 不要这样写 因为will-change会一直挂着
.will-change {will-change: transform;transition: transform 0.3s;
}
.will-change:hover {transform: scale(1.5);
}

可以让父元素hover的时候，声明will-change，这样，移出的时候就会自动remove，触发的范围基本上是有效元素范围。

.will-change-parent:hover .will-change {will-change: transform;
}
.will-change {transition: transform 0.3s;
}
.will-change:hover {transform: scale(1.5);
}

如果使用JS添加will-change, 事件或动画完毕，一定要及时remove. 比方说点击某个按钮，其他某个元素进行动画。点击按钮(click)，要先按下(mousedown)再抬起才出发。因此，可以mousedown时候打声招呼, 动画结束自带回调，

dom.onmousedown = function() {target.style.willChange = 'transform';
};
dom.onclick = function() {// target动画哔哩哔哩...
};
target.onanimationend = function() {// 动画结束回调，移除will-changethis.style.willChange = 'auto';
};

css3 性能优化之 will-change 属性相关推荐

CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
css+动画优化,css3动画性能优化--针对移动端卡顿问题
一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...
mysql属性配置提高查询_MYSQL性能优化-安装时优化参数配置提高服务性能
MYSQL性能优化一直是个头痛的问题,目前大多都是直接把页面html静态页面或直接使用了缓存技术,下面我就mysql本身的性能优化来分享一下. 安装时优化参数配置提高服务性能在Linux下安装Mys ...
巧用css的border属性完成对图片编辑功能的性能优化
一.需求场景: 最近闲来无事,boss提出了一个要求,研究相关代码并完成一个关于编辑图片功能的性能优化,该功能的主要界面展示如下: 通过了几分钟的短暂试用,发现就是一个简单的裁剪并保存用户选择并上传的 ...
CSS3 动画卡顿性能优化解决方案--摘抄
最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示到底是什么意思? 所以这又触碰到了我的知识盲区, ...
炫技，从12.67s到1.06s的网站性能优化实战
(给视学算法加星标,提升全栈技能) 作者:jerryOnlyZRJ https://juejin.im/post/5b6fa8c86fb9a0099910ac91 0.引言作为互联网项目,最重要的便 ...
移动H5前端性能优化指南[转]
移动H5前端性能优化指南米随随2015.01.23 移动H5前端性能优化指南概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点 ...
移动端HTML5性能优化
[导读] 得益于智能手机的普及和各行各业互联网+的运动,移动端的市场占比疯狂增长. 2016年1月发布的2015年电商数据显示,2015年中国移动端网购交易额同比暴涨123 2%,在网购总交易额中的占 ...

css3 性能优化之 will-change 属性

（一）含义

（二）用法

（三）代码

css3 性能优化之 will-change 属性相关推荐

最新文章

热门文章