移动端 像素渲染流水线与GPU Hack
什么是 像素渲染流水线
web页面你所写的页面代码是如何被转换成屏幕上显示的像素的。这个转换过程可以归纳为这样的一个流水线，包含五个关键步骤；
1.JavaScript：一般来说，我们会使用JavaScript来实现一些视觉变化的效果。比如用jQuery的animate函数做一个动画、对一个数据集进行排序、或者往页面里添加一些DOM元素等。
当然，除了JavaScript，还有其他一些常用方法也可以实现视觉变化效果，比如：CSS Animations, Transitions和Web Animation API。
2.计算样式：这个过程是根据CSS选择器，比如.headline或.nav > .nav_item，对每个DOM元素匹配对应的CSS样式。这一步结束之后，就确定了每个DOM元素上该应用什么CSS样式规
3.布局: 上一步确定了每个DOM元素的样式规则，这一步就是具体计算每个DOM元素最终在屏幕上显示的大小和位置。web页面中元素的布局是相对的，因此一个元素的布局发生变化，会联动地引发其他元素的布局发生变化。比如，<body>元素的宽度的变化会影响其子元素的宽度，其子元素宽度的变化也会继续对其孙子元素产生影响。因此对于浏览器来说，布局过程是经常发生的。
4.绘制: 本质上就是填充像素的过程。包括绘制文字、颜色、图像、边框和阴影等，也就是一个DOM元素所有的可视效果。一般来说，这个绘制过程是在多个层上完成的。
5.渲染层合并:由上一步可知，对页面中DOM元素的绘制是在多个层上进行的。在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上。对于有位置重叠的元素的页面，这个过程尤其重要，因为一旦图层的合并顺序出错，将会导致元素显示异常。
虽然在理论上，页面的每一帧都是经过上述的流水线处理之后渲染出来的，但并不意味着页面每一帧的渲染都需要经过上述五个步骤的处理。实际上，对视觉变化效果的一个帧的渲染，有这么三种 常用的 流水线：
1. JS / CSS > 计算样式 > 布局 > 绘制 > 渲染层合并
如果你修改一个DOM元素的”layout”属性，也就是改变了元素的样式（比如宽度、高度或者位置等），那么浏览器会检查哪些元素需要重新布局，然后对页面激发一个reflow过程完成重新布局。被reflow的元素，接下来也会激发绘制过程，最后激发渲染层合并过程，生成最后的画面。
2. JS / CSS > 计算样式 > 绘制 > 渲染层合并
如果你修改一个DOM元素的“paint only”属性，比如背景图片、文字颜色或阴影等，这些属性不会影响页面的布局，因此浏览器会在完成样式计算之后，跳过布局过程，只做绘制和渲染层合并过程。
3. JS / CSS > 计算样式 > 渲染层合并
如果你修改一个非样式且非绘制的CSS属性，那么浏览器会在完成样式计算之后，跳过布局和绘制的过程，直接做渲染层合并。
第三种方式在性能上是最理想的，对于动画和滚动这种负荷很重的渲染，我们要争取使用第三种渲染流程（充分合理 利用 GPU hack）
下面我们先看个gif例子；4个dom元素运动；
第1个 left的，单纯left运动 绿色 差的
第2个 left的，left+gpu运动
第3个 left的，单纯translateX运动 绿色差的
第4个 left的，单纯translate3d运动（自动缓存GPU）
绿色部分(第一个 和 第三个 )表示dom 元素在运动时候，元素dom位置发生改变，促发了回流， （回流（也叫重排reflows）必将引起重绘(repaints)，而重绘不一定会引起回流。）
相关css
#btn{ width:100%; margin:30px auto 300px; border:2px solid red; background:url(../loveImg/30939_1240374_248286.jpg) no-repeat center top; background-size:100% ; height:380px; position:relative; text-align:center;}#moveleft{ position:absolute; top:10px; left:0; background:#fff; color:#333; width:120px; height:60px;line-height:60px; text-align:center; }#moveleft2{ position:absolute; top:100px; left:0; background:#fff; color:#333; width:120px; height:60px;line-height:60px; text-align:center; }#movetranslateX{position:absolute; top:190px; left:0; background:#fff; color:#333;width:120px; height:60px; line-height:60px; text-align:center;}#movetranslate3D{position:absolute; top:280px; left:0; background:#fff; color:#333;width:120px; height:60px; line-height:60px; text-align:center;}
.GPU{ -webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden; }相关dom
<div id="btn"><div id="moveleft" >left</div><div id="moveleft2" class="GPU">GPU left</div><div id="movetranslateX">translateX</div><div id="movetranslate3D">movetranslate3D</div></div>
相关js
<script>var btn=document.getElementById("btn");var moveleft=document.getElementById("moveleft");var moveleft2=document.getElementById("moveleft2");var movetranslateX=document.getElementById("movetranslateX");var movetranslate3D=document.getElementById("movetranslate3D"); var isBACK=true;btn.addEventListener("click",function(){if(isBACK){transform(moveleft,{"left":"420px"},400);transform(moveleft2,{"left":"420px"},400);transform(movetranslateX,{"translateX":"420px"},400);transform(movetranslate3D,{"translate3d":"420px,0,0"},400);}else{transform(moveleft,{"left":"0"},400);transform(moveleft2,{"left":"0"},400);transform(movetranslateX,{"translateX":"0"},400);transform(movetranslate3D,{"translate3d":"0,0,0"},400); }isBACK=!isBACK;},!0);</script>回流何时发生：
当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流：
1、添加或者删除可见的DOM元素；
2、元素位置改变；
3、元素尺寸改变——边距、填充、边框、宽度和高度
4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
5、页面渲染初始化；
6、浏览器窗口尺寸改变——resize事件发生时；
开启 一般这样可以了
.GPU{ -webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden; }下面的css属性也可以的 都能开启GPU加速；
-webkit-transform: translate3d(0,0,0); -webkit-transform:translate3D(0,0,0); //大写3D-webkit-transform: translateZ(0); -webkit-backface-visibility:hidden; -webkit-transform: scaleZ(0) ; -webkit-transform: rotateX(0); -webkit-transform: rotateY(0); -webkit-transform: rotateZ(0) ; -webkit-transform: scale3d(0,0,0) ; -webkit-transform: rotate3d(0,0,0,0);
GPU hcak 缓存到渲染层；常用的环境 适当利用
1.含有 fixed 元素
2.含有 动画的元素
3.含有 -webkit-overflow-scrolling: touch;
页面中 transform() js 函数 代码
参考与推荐：
html5rocks
google 开发者
腾讯舜子 16.6毫秒的优化 虽然是2013年的，还是很值得借鉴的和细细品读的
阿里 hugohua 和荔枝 写的 移动端性能调优
转载于:https://www.cnblogs.com/surfaces/p/5235724.html
移动端 像素渲染流水线与GPU Hack相关推荐
- Chrome 渲染流水线演化的未来
摘要:前段时间我写了一篇文章浏览器渲染流水线解析与网页动画性能优化,对目前 60 左右版本的 Chrome 的渲染流水线进行解析,文末也讨论了当前渲染流水线的一些不足和未来演化的方向. 当前的渲染流水 ...
- Unity 渲染流水线 ：CPU与GPU合作创造的艺术wfd
前言 购优惠 www.fenfaw.cn 对于Unity渲染流程的理解可以帮助我们更好对Unity场景进行性能消耗的分析,进而更好的提升场景渲染的效率,最后提升游戏整体的性能表现 Unity的游戏画面 ...
- 浏览器渲染流水线解析
摘要: 若干年前,我写过一篇介绍浏览器渲染流水线的文章 - How Rendering Work (in WebKit and Blink),这篇文章,一来部分内容已经过时,二来缺少一个全局视角来对流 ...
- 图形 1.1渲染流水线（知识梳理笔记）
目录 前言 渲染流水线整体流程 序 应用阶段 准备基本场景数据 加速算法粗粒度剔除 设置渲染状态,准备渲染参数 调用Draw Call ,数据输出到显存 几何阶段 顶点着色 顶点处理(可选) 投影 裁 ...
- GPU工作原理，可编程渲染管线,图形流水线和GPU架构
由于计算机图形的性质,最图形管线已构造为计算状态与数据流动作为它们之间的数据流.每个阶段工作在一组元素,如顶点,三角形或像素.下图1 [ Shr99 ]给出了典型的OpenGL固定管道. 图1: 在 ...
- Direct3D 12入门教程之 ---- 渲染流水线介绍
本文主要参考 <DirectX 12 3D游戏开发实战>一书, 以及微软官方的Direct3D 12示例:DirectX-Graphics-Samples 渲染流水线:又称渲染管线,指的是 ...
- 移动设备渲染架构以及GPU优化技巧
移动设备渲染架构以及GPU优化技巧 前言 一.常用的两种GPU渲染架构 二.Immediate Mode Rendering 1.说明 2.优点 3.缺点 三.Tile-Based Rendering ...
- 使用opengl编程实现一个三维渲染实体_Unity Shader学习随记_01_渲染流水线
什么是Shader?它和Material(材质)的关系 Shader,中文翻译:着色器,是可编程图形管线的算法片段 Shader实际上就是一小段程序,它负责将输入的顶点数据以指定的方式和输入的贴图或者 ...
- 「技美之路」图形 1.1 渲染流水线
今日起开始分享学习技美之路专栏,文章来源听课笔记以及业界大佬分享的经验文章,主要来自CSDN_知乎等.技美路漫长 一定要坚持 开始吧! 一.整体流程 整体流程(渲染管线可分为四个阶段)每一个阶段的输 ...
最新文章
- [HDOJ2819]Swap（二分图最大匹配, 匈牙利算法）
- 目标检测——Faster R_CNN使用smooth L1作为bbox的回归损失函数原因
- 【Python学习系列九】Python机器学习库scikit-learn实现SVM案例
- python爬虫实验
- php中的匿名函数简单使用
- 处理sharepoint 列表中的 person or group类型字段
- AI项目商务合作，寻广州附近计算机视觉算法团队！
- 微软设计套装 Expression Studio 4 (Ultimate+Web Pro+Encoder Pro) 最新版下载
- ajax验证本服务器,jquery – 使用Ajax调用的http基本身份验证
- AI总监Karpathy亲自揭秘特斯拉纯视觉系统，还有自动驾驶超算Dojo原型
- Something about mvss
- 天堂2开源java,关于这 2 年来，做开源项目的一些感慨
- python制作二维码生成器3.0
- gnuplot：散点图
- 洞见2020企业服务：“我的平台，你的花开”
- 又到年末“团建”！某企业员工吐槽：这真是一场噩梦……
- [转]静态框架导航，左侧折叠树的样式，类似于treeview
- 历届图灵奖 (Turing award)得奖名单
- JPMML调用PMML机器学习模型零基础总结（内含新版本jpmml解决方法）
- Python+locust性能测试(一)，进军高阶测试......