珠海高端网站制作公司,凡客成品,wordpress建站赚钱,网站常用的优化方法博客 有更多精品文章哟。Composite 的优化 终于#xff0c;我们到了像素管道的末尾。对于这一部分的优化策略#xff0c;我们可以从为什么需要 Composited Layer#xff08;Graphics Layer#xff09;来入手。这个问题我们在构建 Graphics Layer Tree 的时候#xff0c;已…博客 有更多精品文章哟。Composite 的优化 终于我们到了像素管道的末尾。对于这一部分的优化策略我们可以从为什么需要 Composited LayerGraphics Layer来入手。这个问题我们在构建 Graphics Layer Tree 的时候已经说明过现在简单回顾一下避免不必要的重绘。利用硬件加速高效实现某些 UI 特性。根据 Composited Layer 的这两个特点可以总结出以下几点优化措施。使用 transform 和 opacity 属性来实现动画上文我们说过像素管道的 Layout 和 Paint 部分是可以略过只进行 Composite 的。实现这种渲染方式的方法很简单就是使用只会触发 Composite 的 CSS 属性目前满足这个条件的 CSS 属性只有 transform 和 opacity。使用 transform 和 opacity 需要注意的是元素必须是 Composited Layer如果不是Paint 还是会照常触发Layout 要看情况一般 transform 会触发。来看一个例子!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgestyle.div {width: 100px;height: 100px;background-color: #f00;/* will-change: transform; */}/styletitle性能优化/title
/headbodydiv classdiv/divscriptconst div document.querySelector(.div);const run () {div.style.transform translate(0, 100px);};setTimeout(run, 2000);/script
/body
/html我们将使用 transform 来向下位移开始我们先不把 div 节点提升为 Composited Layer通过下图可以看到还是会触发 Layout 和 Paint 的。这时把 div 节点提升为 Composited Layer我们发现 Layout 和 Paint 已经被略过了符合我们的预期。减少绘制的区域如果不能避免绘制我们就应该尽可能减少需要重绘的区域。例如页面顶部有一块固定区域当页面某个其他区域需要重绘的时候很可能整块屏幕都要重绘这时固定区域也会被波及到。像这种情况我们就可以把需要重绘或者受到影响的区域提升为 Composited Layer避免不必要的绘制。提升成 Composited Layer 的最佳方式是使用 CSS 的 will-change 属性它的详细说明可以查看 MDN 的文档。.element {will-change: transform;
}对于不支持的浏览器最简单的 hack 方法莫过于使用 3D 变形来提升为 Composited Layer 了。.element {transform: translateZ(0);
}根据上文所讲的例子我们尝试使用 will-change 属性来让固定区域避免重绘。!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgestyle.div {width: 100px;height: 100px;background-color: #f00;}.header {position: fixed;z-index: 9999;width: 100%;height: 50px;background-color: #ff0;/* will-change: transform; */}/styletitle性能优化/title
/headbodyheader classheader固定区域/headerdiv classdiv变动区域/divscriptconst div document.querySelector(.div);const run () {div.style.opacity 0.5;};setTimeout(run, 2000);/script
/body
/html首先我们来看下没有经过优化的情况顺带说明查看浏览器一帧绘制详情的过程。打开控制台的 Performance 界面。点击设置标记 1开启绘制分析仪标记 2。启动 Record标记 3获取到想要的信息后点击 Stop标记 4 停止 Record。点击这一帧的 Paint标记 5查看绘制详情。切换到 Paint Profiler 选项卡标记 6查看绘制的步骤。通过上面的图片标记 7 和标记 8可以看到固定区域的确被波及到并且触发重绘了。我们再对比使用 will-change 属性优化过的情况发现固定区域没有触发重绘。并且我们也可以通过一帧标记 1的布局详情标记 2查看固定区域标记 3是不是提升成 Composited Layer标记 4才避免的不必要绘制。合理管理 Composited Layer提升成 Composited Layer 的确会优化性能但是要知道创建一个新的 Composited Layer 必须要额外的内存和管理这是非常昂贵的代价。所以在内存资源有限的设备上Composited Layer 带来的性能提升很可能远远抵不上创建多个 Composited Layer 的代价。同时由于每一个 Composited Layer 的位图都需要上传到 GPU所以不免需要考虑 CPU 和 GPU 之间的带宽以及用多大内存处理 GPU 纹理的问题。我们通过 1000 个 div 节点来对比普通图层与提升成 Composited Layer 之后的内存使用情况。可以发现差距还是比较明显的。最小化提升通过上文的说明我们知道 Composited Layer 并不是越多越好。尤其是千万不要通过下面的代码提升页面的所有元素这样的资源消耗将是异常恐怖的。* {/* or transform: translateZ(0) */will-change: transform;
}最小化提升就是要尽量降低页面 Composited Layer 的数量。为了做到这一点我们可以不把像 will-change 这样能够提升节点为 Composited Layer 的属性写在默认状态中。至于这样做的原因我会在下面讲解。看这个例子我们先把 will-change 属性写在默认状态里然后再对比去掉这个属性后渲染的情况。.box {width: 100ox;height: 100px;background-color: #f00;will-change: transform;transition: transform 0.3s;
}
.box:hover {transform: scale(1.5);
}使用 will-change 属性提升的 Composited Layer普通图层我们发现区别仅在于动画的开始和结束会触发重绘而动画运行的时候删除或使用 will-change 是没有任何分别的。我们在构建 Graphics Layer Tree 的时候讲到过这样一条理由对 opacity、transform、fliter、backdropfilter 应用了 animation 或者 transition需要是 active 的 animation 或者 transition当 animation 或者 transition 效果未开始或结束后提升的 Composited Layer 会恢复成普通图层。这条理由赐予了我们动态提升 Composited Layer 的权利因此我们应该多利用这一点来减少不必要的 Composited Layer 的数量。防止层爆炸我们在 Graphics Layer Tree 中介绍过层爆炸它指的是由于重叠而导致的大量额外 Composited Layer 的问题。浏览器的层压缩可以在很大程度上解决这个问题但是有很多特殊的情况会导致 Composited Layer 无法被压缩这就很可能产生一些不在我们预期中的 Composited Layer也就是说还是会出现大量额外的 Composited Layer。在层压缩这一节我们已经给出了使用层压缩优化的例子这里就不再重复了。下面再通过解决一个无法被层压缩的例子来更为深入的了解如何防止层爆炸。!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgestyle.animating {width: 300px;height: 30px;line-height: 30px;background-color: #ff0;will-change: transform;transition: transform 3s;}.animating:hover {transform: translateX(100px);}ul {padding: 0;border: 1px solid #000;}.box {position: relative;display: block;width: auto;background-color: #00f;color: #fff;margin: 5px;overflow: hidden;}.inner {position: relative;margin: 5px;}/styletitle性能优化/title
/headbodydiv classanimating动画/divulli classboxp classinner提升成合成层/p/lili classboxp classinner提升成合成层/p/lili classboxp classinner提升成合成层/p/lili classboxp classinner提升成合成层/p/lili classboxp classinner提升成合成层/p/li/ul
/body
/html当我们的鼠标移入 .animating 元素的时候通过查看 Layers 面板可以很清晰的看到出现的大量 Composited Layer。这个例子虽然表面上看起来没有发生重叠但是因为在运行动画的时候很可能与其他元素造成重叠所以 .animating 元素会假设兄弟元素在一个 Composited Layer 之上。这时又因为 .box 元素设置了 overflow: hidden; 导致自己与 .animating 元素有了不同的裁剪容器Clipping Container所以就出现了层爆炸的现象。解决这个问题的办法也很简单就是让 .animating 元素的 z-index 比其他兄弟元素高。因为 Composited Layer 在普通元素之上所以也就没有必要提升普通元素修正渲染顺序了。这里我在顺便多说一句默认情况下 Composited Layer 渲染顺序的优先级是比普通元素高的但是在普通元素设置 position: relative; 之后因为层叠上下文并且在文档流后面的原因所以会比 Composited Layer 的优先级高。.animating {position: relative;z-index: 1;...
}当然如果兄弟元素一定要覆盖在 Composited Layer 之上那我们也可以把 overflow: hidden; 或者 position: relative; 去掉来优化 Composited Layer 创建的数量或者直接就不创建 Composited Layer。参考资料无线性能优化Composite坚持仅合成器的属性和管理层计数简化绘制的复杂度、减小绘制区域CSS Animation性能优化使用CSS3 will-change提高页面滚动、动画等渲染性能CSS3硬件加速也有坑深入理解CSS中的层叠上下文和层叠顺序总结本文首先讲了渲染需要构建的一些树然后通过这些树与像管道各部分的紧密联系整理了一些优化措施。例如我们对合成所进行的优化措施就是通过 Graphics Layer Tree 来入手的。优化也不能盲目去做例如提升普通图层为 Composite Layer 来说使用不当反而会造成非常严重的内存消耗。应当善加利用 Google 浏览器的调试控制台帮助我们更加详尽的了解网页各方面的情况从而有针对性的优化网页。文章参考了很多资料这些资料都在每一节的末尾给出。它们具有非常大的价值有一些细节本文可能并没有整理可以通过查看它们来更为深入的了解。
