zoukankan      html  css  js  c++  java
  • will-change属性

    牛逼的 will-change属性

    will-change属性可以提前通知浏览器我们要对元素做什么动画,这样浏览器可以提前准备合适的优化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。元素可以更快的被改变,渲染的也更快,这样页面可以快速更新,表现的更加流畅。

    举个例子,当对于素使用 CSS 3D变形时,元素及其内容可以在合成到页面之前被创建到我们之前说的layer。然而把元素放到layer中是个昂贵的操作,这将会导致变形动画延迟一个课件的瞬间,也就是flicker

    为了避免这种延时,我们可以在发生之前通知浏览器,这样浏览器会有一定的时间去准备这些变化,当发生的时候layer已经准备好了,这样动画酒会很流畅,不会闪屏

    使用will-change提示浏览器关于即将发生的变形十分简单,添加个CSS属性就行

    will-change: transform;
    

    也可以告诉浏览器要改变元素的滚动条位置,或者多个要变化的属性,写下属性的名字就行,也可以写多个,逗号隔开

    will-change: transform, opacity;
    

    声明了元素即将进行的变化会让浏览器在渲染页面时做更好的决定,这明显比之前说的3D hacks要好。

    合理使用

    了解了will-change的行为,为浏览器上一切元素设置will-change是不是效率会变高?答案是否定的,will-change如果被滥用会使页面崩溃。

    will-change也有副作用,虽然并不直接可见,毕竟它只是在背后和浏览器说悄悄话,为了合理使用will-change,给一些小建议

    不要声明太多属性或为太多元素声明

    *,
    *::before,
    *::after {
        will-change: all;
    }
    

    虽然看起来很屌,但其实对页面渲染伤害很大,这样的规则设了和没设没什么区别,浏览器本来就尝试最优的渲染所有元素,就等于你让老师重点照顾班里每个同学一样,就是废话!

    其实这甚至是有害的,因为一些操作会占用太多的资源,甚至会导致页面奔溃,就等于强制要求老师为每个学生补课,累死了。。。

    给浏览器足够的时间工作

    will-change顾名思义,通知浏览器即将发生的变化,而不是正在发生的变化。使用will-change,我们要求浏览器重点照顾我们声明的元素,为了这个浏览器需要一定的时间来组织优化操作,这样当变化发生的时候,优化才能没有延迟的作用到元素

    在变化前立即为元素添加will-change几乎没有作用,可能还不如不设置,因为会导致新的layer创建

    .element:hover {
        will-change: transform;
        transition: transform 2s;
        transform: rotate(30deg) scale(1.5);
    }
    

    这样的设置就没什么用,我们需要给浏览器足够的时间,下面这样就是有用的,感受一下

    .element {
        /* style rules */
        transition: transform 1s ease-out;
    }
    .element:hover {
        will-change: transform;
    }
    .element:active {
        transform: rotateY(180deg);
    }
    

    如果一定要hover的时候,也有技巧

    .element {
        transition: opacity .3s linear;
    }
    /* declare changes on the element when the mouse enters / hovers its ancestor */
    .ancestor:hover .element {
        will-change: opacity;
    }
    /* apply change when element is hovered */
    .element:hover {
        opacity: .5;
    }
    

    其实核心思想就是让浏览器有时间去准备

    变化完成后移除will-change

    对于一般的优化,当变化完成的时候浏览器会撤销优化,恢复普通模式,但是如果使用了will-change会导致该优化迟迟不能释放,这就要求我们用完了就释放

    这时候我们需要借助JavaScript

    'auto';
    }
    

    当然对于用户会反复触发的操作放在style中不移除也可以

    will-change属性的值

    1. auto 表示没有明确的意图; 无论是启发式和最优化,用户代理应该应用都和正常情况相同
    2. scroll-position 表示开发者期望去在接下来去改变或者有动画应用元素的滚动位置
    3. contents 表示开发者期望去在接下来去改变或者有动画应用元素的内容
    4. 用来排除关键字 will-change, none, all, auto, scroll-position, and contents, 从之外增加一些通用的关键字

      will-change: transform:
      will-change: opacity:
      will-change: top, left, bottom, right:

    如果一个属性无最初的值,在这个元素上这个属性将创建一个堆栈的内容, 明确规定在will-change的属性必须在这个元素上创建一个堆栈的内容.

    如果一个属性无最初的值, 这个属性将造成这个元素产生一个包含区块的固定定位的元素, 明确规定在 will-change的属性必须造成这个元素产生一个包含区块的固定定位的元素

    浏览器兼容性

    这个目前不乐观,相信以后会好

    image

    结束语

    will-change可以帮助我们摆脱hack的硬件加速,但是能力越大、责任越大

    Tab Atkins Jr

    Set will-change to the properties you’ll actually change, on the elements that are actually changing. And remove it when they stop.

  • 相关阅读:
    左孩子右兄弟的字典树
    UVA 1401 Remember the Word
    HDOJ 4770 Lights Against Dudely
    UvaLA 3938 "Ray, Pass me the dishes!"
    UVA
    Codeforces 215A A.Sereja and Coat Rack
    Codeforces 215B B.Sereja and Suffixes
    HDU 4788 Hard Disk Drive
    HDU 2095 find your present (2)
    图的连通性问题—学习笔记
  • 原文地址:https://www.cnblogs.com/ysx215/p/7094605.html
Copyright © 2011-2022 走看看