快捷搜索:
来自 新京葡娱乐场网址 2019-07-22 02:24 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

新京葡娱乐场网址:change进步页面滚动

一、先来看四个例证

上面那么些例子来自某外文,笔者那边差不离转述下。

视差滚动今后不是挺流行的呗,然后Chris Ruppel当其应用background-attachment: fixed贯彻背景图片不随滚动条滚动而滚动作效果应的时候,开掘,页面包车型大巴绘图品质掉到了每秒30帧,这种帧频人眼已经得以感到到一定的顿挫感了。

新京葡娱乐场网址 1

新兴,参谋一些其余同事照旧同行的建议,做了一番优化,然后,页面包车型客车渲染质量——

新京葡娱乐场网址 2

那优化此前完全正是牛皮癣,屎拉不出来的以为到;而优化现在,完全就是一落千丈,裤子都来不如脱的以为。

一兄得心悸,在洗手间里久久无法如便。
正在他全力以赴努力的时候,看一男人风一样的冲进厕所,进了他旁边的地点,刚进来就突然不见了一真狂沙雷雨,那兄惊羡的对这男人说:男子好赞佩你呀!
那男生说:钦慕啥,裤子还没脱呢。。。

大家一定会惊叹,那到底施了什么法力,能够让渲染提高如此之简明。3个小tips:

  1. background-attachment: fixed改成了position: fixed,因为前边那玩意儿滚动实时总结重绘;
  2. 背景图片所在的因素交替为::before伪元素;
  3. 使用了CSS3 will-change加速;

连带代码如下(假如类名是front):

CSS

.front::before { content: ''; position: fixed; // 代替background-attachment width: 百分百; height: 100%; top: 0; left: 0; background-color: white; background: url(/img/front/mm.jpg) no-repeat center center; background-size: cover; will-change: transform; // 创设新的渲染层 z-index: -1; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.front::before {
    content: '';
    position: fixed; // 代替background-attachment
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: white;
    background: url(/img/front/mm.jpg) no-repeat center center;
    background-size: cover;
    will-change: transform; // 创建新的渲染层
    z-index: -1;
  }

OK, 主演粉墨上场了,就是will-change, 那是如何鬼?

四、参考小说

  • Fix scrolling performance with CSS will-change property
  • MDN:will-change
  • An Introduction to the CSS will-change Property

本文内容均属于外文整理采摘,加上本身通晓书写。内容从未亲自推行验证,由此,无法确认保障百分之百不易,仅供我们学习参谋。

设若文中有何发挥不准确的地点,款待大力指正,谢谢阅读,接待调换!

新京葡娱乐场网址 3

本文为原创小说,包罗脚本作为,会时时更新知识点以及修正一些荒谬,由此转发请保留原出处,方便溯源,避免陈旧错误知识的误导,相同的时间有越来越好的阅读经验。
本文地址:

(本篇完)

三、CSS3 will-change使用注意事项

will-change就算如此能够加快,可是,一定明确要适用使用。这种全局都敞开will-change等候形式的做法,无疑是死路一条。尼玛,用脚趾头想想也了然,你让浏览器各类要素都随时GPU渲染加速待命,仍然妥妥搞死!

谈到此地,想到了移动端的GPU加速。比比较多自认为然的同窗写CSS3卡通的时候,只怕静态属性的时候,动不动就把translateZ等等GPU hack属性写上。同学们啊,GPU这个人升高页面渲染品质它是有代价的呀,什么代价呢,就是手提式有线电话机的电量。你真认为有“既要马儿跑,又要马儿不吃草”的好专门的学业啊!

平日,大家一般地CSS动画,平常的渲染管理,手机都是足以相比流利的。大可不必以捐躯其余东西来落实。手提式无线电话机上的电量弥足珍惜。假若发现(越发Android)机子h5页面不流利,找找看是或不是卡通片属性使用难题,或许非可视动画层没遮蔽等等原因。

回到will-change. 同样的,will-change的运用也要谨严,遵守最小化影响原则,所以,一同始的例子,才使用伪成分去搞,独立渲染(即使作者没看出来这些梗在怎么着地方)。

sitePoint网址上的那篇作品体现了多少个管理例子:

无须这么一向写在暗中同意状态中,因为will-change会直接挂着:

CSS

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

1
2
3
4
5
6
7
.will-change {
  will-change: transform;
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

能够让父成分hover的时候,注脚will-change,那样,移出的时候就能自行remove,触发的限制基本上是平价成分范围。

CSS

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

1
2
3
4
5
6
7
8
9
.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时候打声招呼, 动画结束自带回调,于是(暗暗提示,不要在意细节):

CSS

dom.onmousedown = function() { target.style.willChange = 'transform'; }; dom.onclick = function() { // target动画哔哩哔哩... }; target.onanimationend = function() { // 动画停止回调,移除will-change this.style.willChange = 'auto'; };

1
2
3
4
5
6
7
8
9
10
dom.onmousedown = function() {
    target.style.willChange = 'transform';
};
dom.onclick = function() {
    // target动画哔哩哔哩...
};
target.onanimationend = function() {
    // 动画结束回调,移除will-change
    this.style.willChange = 'auto';
};

等。

三、CSS3 will-change使用注意事项

will-change虽说能够加快,不过,一定料定要适宜使用。那种全局都打开will-change伺机形式的做法,无疑是死路一条。尼玛,用脚趾头想想也清楚,你让浏览器种种要素都随时GPU渲染加快待命,如故妥妥搞死!

提及这里,想到了活动端的GPU加快。比相当多自以为然的同室写CSS3动画片的时候,也许静态属性的时候,动不动就把translateZ等等GPU hack属性写上。同学们啊,GPU那东西进步页面渲染质量它是有代价的呦,什么代价呢,就是手提式有线电话机的电量。你真感到有“既要马儿跑,又要马儿不吃草”的好专门的职业呀!

通常,大家一般地CSS动画,平时的渲染管理,手提式有线电话机都是足以比较流畅的。大可不必以投身其余东西来达成。手提式有线电话机上的电量弥足爱戴。如果开掘(特别Android)机子h5页面不流畅,找找看是还是不是卡通属性使用难点,或然非可视动画层没遮盖等等原因。

回到will-change. 同样的,will-change的采取也要严酷,遵守最小化影响原则,所以,一开端的例证,才使用伪成分去搞,独立渲染(即使本人没看出来那么些梗在怎么着地点)。

sitePoint网址上的这篇文章展现了几个管理例子:

毫不那样直接写在默许状态中,因为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-change
    this.style.willChange = 'auto';
};

等。

选择CSS3 will-change升高页面滚动、动画等渲染质量

新京葡娱乐场网址 ,2015/11/05 · CSS · 渲染质量

原来的文章出处: 张鑫旭   

一、先来看多个例证

上面那么些例子来自某外文,作者那边大约转述下。

视差滚动今后不是挺流行的呗,然后Chris Ruppel当其行使background-attachment: fixed贯彻背景图片不随滚动条滚动而滚动作效果应的时候,发掘,页面包车型地铁绘图质量掉到了每秒30帧,这种帧频人眼已经能够觉获得一定的顿挫感了。

新京葡娱乐场网址 4

新兴,参考一些任何同事还是同行的提出,做了一番优化,然后,页面包车型地铁渲染质量——

新京葡娱乐场网址 5

那优化以前完全正是脚气,屎拉不出去的认为到;而优化未来,完全就是一蹶不振,裤子都来不比脱的感到。

一兄得久痢,在厕所里长时间不能够如便。
正在她大力努力的时候,看一哥们风一样的冲进厕所,进了她旁边的职位,刚进入就传来一真狂暴风雨,这兄惊羡的对那男人说:男人好仰慕你呀!
那哥们说:恋慕啥,裤子还没脱呢。。。

世家一定会感叹,那到底施了哪些法力,能够让渲染升高如此之分明。3个小tips:

  1. background-attachment: fixed改成了position: fixed,因为前边那东西滚动实时总括重绘;
  2. 背景图片所在的因素交替为::before伪元素;
  3. 使用了CSS3 will-change加速;

相关代码如下(借使类名是front):

.front::before {
    content: '';
    position: fixed; // 代替background-attachment
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: white;
    background: url(/img/front/mm.jpg) no-repeat center center;
    background-size: cover;
    will-change: transform; // 创建新的渲染层
    z-index: -1;
  }

OK, 主演粉墨登台了,正是will-change, 这是怎么样鬼?

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:新京葡娱乐场网址:change进步页面滚动

关键词: