轻易解决网页设计(html+公海赌船网址css+js)》 

  • 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;
}

 

 

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

 

 

 

 

 

如下图使用left将不仅触发页面重绘,表现为银白边框:

公海赌船网址 1

 

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

 

 

 

 

 

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

一般来讲图使用-webkit-transform页面只发生结合,表现为蛋黄边框:

公海赌船网址 2

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

公海赌船网址 3

高性能 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);

 

 

 

如动画进度有闪光(平常发生在动画开首的时候),可以品尝下边包车型客车哈克:

 
-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多次都是页面包车型客车性子剑客,特别是在一个成分同时都选拔了它们,所以拥抱扁平化设计呢。

用尽全力的让动画成分不在文书档案流中,以减掉重排

 

 
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的更新。

 

相关文章