轻松搞定网页设计(html+css+js)》 轻松搞定网页设计(html+css+js)》 

  • CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite
  • Paint通常是里最费性能的,尽可能避免下触发paint的CSS动画属性,这吗是胡我们推荐在CSS动画中行使 webkit-transform: translateX(3em)的方案代替使用 left: 3em,因为left会额外触发layout与paint,而webkit-transform单接触整个页面composite
  • CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite
  • Paint通常是其中最费性能的,尽可能避免采用触发paint的CSS动画属性,这也是干吗咱们引进以CSS动画中行使 webkit-transform: translateX(3em)的方案代替使用 left: 3em,因为left会额外触发layout与paint,而webkit-transform仅仅点整个页面composite

 

 

 

 

 
div {
  -webkit-animation-duration: 5s;
  -webkit-animation-name: move;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  width: 200px;
  height: 200px;
  margin: 100px;
  background-color: #808080;
  position: absolute;
}
 
div {
  -webkit-animation-duration: 5s;
  -webkit-animation-name: move;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  width: 200px;
  height: 200px;
  margin: 100px;
  background-color: #808080;
  position: absolute;
}

 

 

 

 

 
@-webkit-keyframes move{
    from {
        left: 100px;
    }
    to {
        left: 200px;
    }
}
 
@-webkit-keyframes move{
    from {
        left: 100px;
    }
    to {
        left: 200px;
    }
}

 

 

 

 

 

 

 

 

 

 

一般来说图下left拿不断触发页面重绘,表现吗革命边框:

如下图使用left以连触发页面重绘,表现为红边框:

图片 1

图片 2

 

 

 
@-webkit-keyframes move{
    from {
        -webkit-transform: translateX(100px);
    }
    to {
        -webkit-transform: translateX(200px);
    }
}
 
@-webkit-keyframes move{
    from {
        -webkit-transform: translateX(100px);
    }
    to {
        -webkit-transform: translateX(200px);
    }
}

 

 

 

 

 

 

 

 

 

 

附:《[韩顺平]轻松搞定网页设计(html+css+js)》 http://www.gooln.com/dir/16908.html 

附:《[韩顺平]自在搞定网页设计(html+css+js)》 http://www.gooln.com/dir/16908.html 

正如图下-webkit-transform页面就出结合,表现为橙色边框:

正如图下-webkit-transform页面只发生结合,表现呢橙色边框:

图片 3

图片 4

  • CSS属性在CSS动画中行为表
  • CSS属性在CSS动画中行为表

图片 5

图片 6

高性能 CSS3 动画

强性能移动Web相较PC的光景需要考虑的素为相对更多又复杂,我们总也以下几点: 流量、功耗与流畅度。
在PC时代我们重多之是考虑体验及之流畅度,而在Mobile端本身丰富的景象下,需要格外关注对用户基站网络流量用的情景,设备耗电量的场面。

关于流畅度,主要反映于前者动画中,在存活的前端动画体系受到,通常有星星点点种植模式:JS动画及CSS3卡通。
JS动画是透过JS动态改写样式实现动画能力的相同种植方案,在PC端兼容低端浏览器中正是一栽推荐方案。
而当移动端,我们选性能更优浏览器原生实现方案:CSS3卡通。

可,CSS3动辄画在移动多终端设备景下,相比PC会冲再多的特性问题,主要反映于动画的卡顿以及闪亮。

现阶段本着升官活动端CSS3动辄画体验的重点措施有几点:

高性能 CSS3 动画

赛性能移动Web相较PC的面貌需要考虑的元素吧相对更多重复扑朔迷离,我们总也以下几点: 流量、功耗与流畅度。
在PC时代我们再度多之是考虑体验及的流畅度,而当Mobile端本身丰富的现象下,需要额外关注对用户基站网络流量使用的场面,设备耗电量的场面。

有关流畅度,主要反映于前者动画中,在存活的前端动画体系中,通常有一定量种模式:JS动画以及CSS3动画。
JS动画是经JS动态改写样式实现动画能力的一致种方案,在PC端兼容低端浏览器中正是一种植推荐方案。
而在移动端,我们选择性能更优浏览器原生实现方案:CSS3动画。

然,CSS3动辄画在走多终端设备景下,相比PC会对再多的性质问题,主要反映于动画的卡顿与闪亮。

此时此刻针对升级活动端CSS3动辄画体验的第一措施有几沾:

尽量多的行使硬件能力,如应用3D变形来拉开GPU加速

 

 

 
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

 

 

 

倘动画过程发生闪光(通常有在动画开始的时候),可以品味下的Hack:

 
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
 
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

 

 

 

 

 

设下面一个因素通过translate3d右移500px的卡通流畅度会肯定优化使用left属性:

 

 
#ball-1 {
  transition: -webkit-transform .5s ease;
  -webkit-transform: translate3d(0, 0, 0);
}
#ball-1.slidein {
  -webkit-transform: translate3d(500px, 0, 0);
}
 
 
#ball-2 {
  transition: left .5s ease;
  left: 0;
}
#ball-2.slidein {
  left: 500px;
}

 

 

 

 

 

 

 

 

流动:3D变形会消耗又多的内存和功耗,应真正发生总体性问题时常才去下其,兼以衡量

尽量多之采用硬件能力,如采用3D变形来开GPU加速

 

 

 
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

 

 

 

若是动画过程有闪光(通常有在动画开始的当儿),可以品尝下的Hack:

 
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
 
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

 

 

 

 

 

万一下面一个元素通过translate3d右移500px的卡通片流畅度会强烈优化使用left属性:

 

 
#ball-1 {
  transition: -webkit-transform .5s ease;
  -webkit-transform: translate3d(0, 0, 0);
}
#ball-1.slidein {
  -webkit-transform: translate3d(500px, 0, 0);
}
 
 
#ball-2 {
  transition: left .5s ease;
  left: 0;
}
#ball-2.slidein {
  left: 500px;
}

 

 

 

 

 

 

 

 

流淌:3D变形会消耗又多的内存和功耗,应真正发性能问题时才去用它,兼以衡量

尽可能少的运用box-shadowsgradients

box-shadowsgradients数还是页面的习性杀手,尤其是在一个因素而都动了她,所以拥抱扁平化设计吧。

尽可能少的动box-shadowsgradients

box-shadowsgradients多次还是页面的习性杀手,尤其是于一个元素而还采用了它们,所以拥抱扁平化设计吧。

尽量的让动画元素不在文档流中,以减掉重排

 

 
position: fixed;
position: absolute;
 

 

尽可能的让动画元素不以文档流中,以调减重排

 

 
position: fixed;
position: absolute;
 

 

 

 

优化 DOM layout 性能

咱们由实例开始描述是主题:

 

 
var newWidth = aDiv.offsetWidth + 10;
aDiv.style.width = newWidth + ‘px’;
var newHeight = aDiv.offsetHeight + 10;
aDiv.style.height = newHeight + ‘px’;
 
var newWidth = aDiv.offsetWidth + 10;
var newHeight = aDiv.offsetHeight + 10;
aDiv.style.width = newWidth + ‘px’;
aDiv.style.height = newHeight + ‘px’;

 

 

 

 

 

立马是零星段子能力达到了一样的代码,显式的区别正如我们所展现,只有实行顺序的区分。但真是如此呢?下面是加了证注释的代码版本,很好之阐发了里的愈发差异:

 

 
// 触发两次 layout
var newWidth = aDiv.offsetWidth + 10;   // Read
aDiv.style.width = newWidth + ‘px’;     // Write
var newHeight = aDiv.offsetHeight + 10; // Read
aDiv.style.height = newHeight + ‘px’;   // Write
 
// 只触发一次 layout
var newWidth = aDiv.offsetWidth + 10;   // Read
var newHeight = aDiv.offsetHeight + 10; // Read
aDiv.style.width = newWidth + ‘px’;     // Write
aDiv.style.height = newHeight + ‘px’;   // Write

 

 

 

 

 

 

从注释中但是找到规律,连续的宣读取offsetWidth/Height属性与连续的设置width/height属性,相比分别读取设置单个属性可不见沾发一样糟糕layout。

于结论看似乎和履行队列有关,没错,这是浏览器的优化策略。所有可触发layout的操作都见面受暂时放入 layout-queue 中,等到必须创新的时刻,再计整个队列中存有操作影响之结果,如此就可才进行同样破的layout,从而升级性。

关键一,可触发layout的操作,哪些操作下会layout的翻新(也称reflow或者relayout)?

俺们由浏览器的源码实现入手,以起源Webkit/Blink为条例,
对layout的换代,Webkit
主要通过 Document::updateLayout 与Document::updateLayoutIgnorePendingStylesheets 个别独艺术:

 

 
void Document::updateLayout()
{
    ASSERT(isMainThread());
 
    FrameView* frameView = view();
    if (frameView && frameView->isInLayout()) {
        ASSERT_NOT_REACHED();
        return;
    }
 
    if (Element* oe = ownerElement())
        oe->document()->updateLayout();
 
    updateStyleIfNeeded();
 
    StackStats::LayoutCheckPoint layoutCheckPoint;
 
    if (frameView && renderer() && (frameView->layoutPending() || renderer()->needsLayout()))
        frameView->layout();
 
    if (m_focusedNode && !m_didPostCheckFocusedNodeTask) {
        postTask(CheckFocusedNodeTask::create());
        m_didPostCheckFocusedNodeTask = true;
    }
}
 
 
void Document::updateLayoutIgnorePendingStylesheets()
{
    bool oldIgnore = m_ignorePendingStylesheets;
 
    if (!haveStylesheetsLoaded()) {
        m_ignorePendingStylesheets = true;
 
        HTMLElement* bodyElement = body();
        if (bodyElement && !bodyElement->renderer() && m_pendingSheetLayout == NoLayoutWithPendingSheets) {
            m_pendingSheetLayout = DidLayoutWithPendingSheets;
            styleResolverChanged(RecalcStyleImmediately);
        } else if (m_hasNodesWithPlaceholderStyle)
            recalcStyle(Force);
    }
 
    updateLayout();
 
    m_ignorePendingStylesheets = oldIgnore;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

从 updateLayoutIgnorePendingStylesheets 方法的里边贯彻可知,其也是对准 updateLayout 方法的恢宏,并且以现有的
layout 更新模式被,大部分场景都是调用
updateLayoutIgnorePendingStylesheets 来拓展layout的创新。

 

优化 DOM layout 性能

咱于实例开始描述是主题:

 

 
var newWidth = aDiv.offsetWidth + 10;
aDiv.style.width = newWidth + ‘px’;
var newHeight = aDiv.offsetHeight + 10;
aDiv.style.height = newHeight + ‘px’;
 
var newWidth = aDiv.offsetWidth + 10;
var newHeight = aDiv.offsetHeight + 10;
aDiv.style.width = newWidth + ‘px’;
aDiv.style.height = newHeight + ‘px’;

 

 

 

 

 

当即是鲜截能力达到全平等的代码,显式的差距正如我们所展现,只有实行各个的区别。但真是如此吗?下面是加了征注释的代码版本,很好的阐释了内部的逾差异:

 

 
// 触发两次 layout
var newWidth = aDiv.offsetWidth + 10;   // Read
aDiv.style.width = newWidth + ‘px’;     // Write
var newHeight = aDiv.offsetHeight + 10; // Read
aDiv.style.height = newHeight + ‘px’;   // Write
 
// 只触发一次 layout
var newWidth = aDiv.offsetWidth + 10;   // Read
var newHeight = aDiv.offsetHeight + 10; // Read
aDiv.style.width = newWidth + ‘px’;     // Write
aDiv.style.height = newHeight + ‘px’;   // Write

 

 

 

 

 

 

自注释中唯独找到规律,连续的诵读取offsetWidth/Height属性与连续的装置width/height属性,相比分别读取设置单个属性可丢碰发一样不良layout。

自从结论看犹如跟实践队列有关,没错,这是浏览器的优化策略。所有可触发layout的操作都见面给临时放入 layout-queue 中,等到必须创新的上,再计整个队列中持有操作影响的结果,如此就只是仅进行相同软的layout,从而提升性。

关键一,可触发layout的操作,哪些操作下会layout的换代(也叫reflow或者relayout)?

我们由浏览器的源码实现入手,以起源Webkit/Blink为条例,
对layout的换代,Webkit
主要通过 Document::updateLayout 与Document::updateLayoutIgnorePendingStylesheets 片只方式:

 

 
void Document::updateLayout()
{
    ASSERT(isMainThread());
 
    FrameView* frameView = view();
    if (frameView && frameView->isInLayout()) {
        ASSERT_NOT_REACHED();
        return;
    }
 
    if (Element* oe = ownerElement())
        oe->document()->updateLayout();
 
    updateStyleIfNeeded();
 
    StackStats::LayoutCheckPoint layoutCheckPoint;
 
    if (frameView && renderer() && (frameView->layoutPending() || renderer()->needsLayout()))
        frameView->layout();
 
    if (m_focusedNode && !m_didPostCheckFocusedNodeTask) {
        postTask(CheckFocusedNodeTask::create());
        m_didPostCheckFocusedNodeTask = true;
    }
}
 
 
void Document::updateLayoutIgnorePendingStylesheets()
{
    bool oldIgnore = m_ignorePendingStylesheets;
 
    if (!haveStylesheetsLoaded()) {
        m_ignorePendingStylesheets = true;
 
        HTMLElement* bodyElement = body();
        if (bodyElement && !bodyElement->renderer() && m_pendingSheetLayout == NoLayoutWithPendingSheets) {
            m_pendingSheetLayout = DidLayoutWithPendingSheets;
            styleResolverChanged(RecalcStyleImmediately);
        } else if (m_hasNodesWithPlaceholderStyle)
            recalcStyle(Force);
    }
 
    updateLayout();
 
    m_ignorePendingStylesheets = oldIgnore;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

从 updateLayoutIgnorePendingStylesheets 方法的内部贯彻可知,其也是本着 updateLayout 方法的恢宏,并且以现有的
layout 更新模式面临,大部分现象都是调用
updateLayoutIgnorePendingStylesheets 来进展layout的更新。

 

相关文章