关于硬件渲染了解一下

浏览器的渲染方式，主要分为两种，第一种是软件渲染，第二种是硬件渲染。若是绘制工做只是由 CPU 完成，那么称之为软件渲染，若是绘制工做由 GPU 完成，则称之为硬件渲染。软件渲染与硬件渲染有不一样的缓存机制，只要咱们合理利用，就能发挥出最好的效果。

开启

浏览器还有一种名为硬件渲染的渲染方式，它是使用 GPU 的硬件能力来帮助渲染页面,那么是怎么设置的？

• 启用硬件加速 在chrome的地址栏中输入chrome://settings/回车滚动页面到地步，点击显示高级设置再次滚动到页面地步，找到使用硬件加速模式
• 开启gup硬件加速 在chrome的地址栏中输入chrome://flags/#disable-accelerated-video-decode找到硬件加速的视频解码，点击启用

完成上面两步后重启浏览器

能作什么

你们都知道在页面性能优化的时候都会用到 GPU 加速、硬件加速相似方式，浏览器一帧（1000/16ms）会依次执行如下，减小或者避免 layout，paint 可让页更加流畅：

1. JavaScript：JavaScript 实现动画效果，DOM 元素操做等。
2. Style（计算样式）：肯定每一个 DOM 元素应该应用什么 CSS 规则。
3. Layout（布局）：计算每一个 DOM 元素在最终屏幕上显示的大小和位置。因为 web 页面的元素布局是相对的，因此其中任意一个元素的位置发生变化，都会联动的引发其余元素发生变化，这个过程叫 reflow。
4. Paint（绘制）：在多个层上绘制 DOM 元素的的文字、颜色、图像、边框和阴影等。
5. Composite（渲染层合并）：按照合理的顺序合并图层而后显示到屏幕上。

一个页面是由多个图层最后造成一个完整的合成层才被渲染出来效果就像这样：

硬件渲染 WebKit 会依据指定条件决定将那些 RenderLayer 对象组合在一块儿造成一个新层并缓存在 GPU，这些新层咱们统称为合成层（Compositing Layer）。这些合成层提高成独立的层，被独立出来以后，便不会再影响其余 dom 的布局。若是发生 偏移、透明度等等变换 GPU 要作的只是把更新的合成层进行相应的变换并送入 Compositor 从新合成便可，利用这个优势咱们能够把页面中一些布局常常变换的 dom 提高到独立的层。

在上图中黄色边框表示放到了一个新的复合层（composited layer）中渲染，左侧的列表里列出页面里存在哪些渲染层，右侧的 Details 显示的是这些渲染层的详细信息，包括渲染层的大小、造成缘由等。

如何触发合成层

1. 根节点 document
2. HTML5 Video或者Canvas元素。
3. 元素有一个 z-index 较低且包含一个复合层的兄弟元素
4. 3D 或透视变换(perspective，transform) CSS 属性 好比经常使用的 （设置translateZ()、backface-visibility为hidden）

注意事项

也就是上面第三条，英文原版是这么说

Element has a sibling with a lower z-index which has a compositing layer (in other words the it’s rendered on top of a composited layer)

意思是，若是有一个元素，它的兄弟元素在复合层中渲染，而这个兄弟元素的 z-index 比较小，且两个元素有重叠（显式的重叠好比能够经过 margin 的负值来实现，隐式的重叠好比未指定本身及浮动层兄弟元素的 z-index），那么这个元素（不论是不是应用了硬件加速样式）也会被放到复合层中。

因此用轮播、动画loading等页面的时候要注意下要遵循最小化影响原则，若是调试看到有不少 黄色边框 就要注意了。

使用 3D 硬件加速提高动画性能时，最好给元素增长一个 z-index 属性，人为干扰复合层的排序，能够有效减小 chrome 建立没必要要的复合层，提高渲染性能，移动端优化效果尤其明显。

关于 CSS3 will-change

前面说的那些有点hach，CSS3 will-change 才是正规军是属于 web 标准属性，兼容性这块 Chrome/FireFox/Opera 是支持的，他是提早通知浏览器元素将要作什么动画，让浏览器提早准备合适的优化设置，具体值：

/* 关键字值 */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;        /* <custom-ident>示例 */
will-change: opacity;          /* <custom-ident>示例 */
will-change: left, top;        /* 两个<animateable-feature>示例 */

/* 全局值 */
will-change: inherit;
will-change: initial;
will-change: unset;
复制代码

will-change 虽然能够加速,可是不可滥用。。。