让手机响应速度丝般顺滑 一文读懂GPU加速是啥_网易手机
让手机响应速度丝般顺滑 一文读懂GPU加速是啥
用微信扫码二维码
分享至好友和朋友圈
（原标题：一文读懂：GPU加速是什么？）
众所周知，网页不仅应该被快速加载，同时还应该流畅运行，比如快速响应的交互，如丝般顺滑的动画……一. GPU加速能做什么？首先我们要了解什么是16ms优化大多数设备的刷新频率是60次/秒，（1000/60 = 16.6ms）也就说是浏览器对每一帧画面的渲染工作要在16ms内完成，超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验。浏览器在一帧里面，会依次执行以下这些动作。减少或者避免layout，paint可以让页面不卡顿，动画效果更加流畅。JavaScript：JavaScript实现动画效果，DOM元素操作等。Style（计算样式）：确定每个DOM元素应该应用什么CSS规则。Layout（布局）：计算每个DOM元素在最终屏幕上显示的大小和位置。由于web页面的元素布局是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫reflow。Paint（绘制）：在多个层上绘制DOM元素的的文字、颜色、图像、边框和阴影等。Composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。利用GPU加速优先使用渲染层合并属性，避免layout，paint。从上图可以看出，可以通过改变元素的transform实现移动，伸缩变换而非改变物体的left，top，width，height避免layout，paint。让动画效果更加流畅。优化@keyframes&demo&{0%&{transform:&translateY(10px);}100%&{transform:&translateY(30px);}}二. GPU是什么，如何用Chrome devtools进行分析debug？浏览器渲染一个页面大致是按照下面这个步骤执行。获取DOM并将其分割为多个层(RenderLayer)将每个层栅格化，并独立的绘制进位图中将这些位图作为纹理上传至GPU复合多个层来生成最终的屏幕图像(终极layer )。Chrome开启查看renderlayer按上面的步骤之后，即可看到黄色边框：有动画3d变换的元素，表示放到了一个新的复合层（composited layer）中渲染蓝色的栅格：这些分块可以看作是比层更低一级的单位，这些区域就是RenderLayer打开一个页面，如果该页面的黄色边框很多，那么肯定要查看一下原因了Chrome查看layer打开timeline进行录制，选中timeline的某一帧，然后选择下面的layer，可以左右拖动该模块出现3d。我们可以看到一个页面实际是像下面一样组成的从上图不难理解，虽然我们最终在浏览器上看到的只是一个复印版，即最终只有一个层。类似于PhotoShop软件中的“图层”概念，最后合并所有可视图层，输出一张图片到屏幕上。但实际上一些dom会因为一些规则被提升成独立的层（开启GPU加速），一旦被独立出来之后，便不会再影响其他dom的布局，因为它改变之后，只是“贴上”了页面。根据这个优点，我们可以把页面中一些布局经常变换的dom（动画）提升到独立的层。那么，浏览器在之后的16ms中，只需进行下面的几个步骤。三.如何开启GPU加速？目前下面这些因素都会引起Chrome创建合成层：3D或透视变换(perspective，transform) CSS属性使用加速视频解码的video元素拥有3D (WebGL)上下文或加速的2D上下文的canvas元素混合插件(如Flash)对自己的opacity做CSS动画或使用一个动画webkit变换的元素拥有加速CSS过滤器的元素元素A有一个z-index比自己小的元素B，且元素B是一个合成层（换句话说就是该元素在复合层上面渲染），则元素A会提升为合成层上面6点都非常容易理解，在日常开发中，最容易出现问题的是第7点四. GPU加速隐藏的坑–隐式合成元素A有一个z-index比自己小的元素B，且元素B是一个合成层（换句话说就是该元素在复合层上面渲染）拿实际项目举个栗子，我们按照上面的步骤开启layer borders尚未给上图右手添加高层级的z-index时，整个页面在移动端打开后闪退。而添加了z-index之后，页面正常显示，不闪退了。仔细看上面的gif，仅仅改变了z-index，就会改变大批数量的层（黄色边框）为什么z-index力量这么大？我们来看一个栗子，B在做动画，理所当然把B提到单独的合成层。减少重绘。按照上图，我们遇到一个逻辑问题，元素B应该在单独的合成层上，并且屏幕的最终图像应该在GPU上组成。但是A元素在B元素的顶部，我们没有指定提升A元素自身层级的东西。那么浏览器会做什么？它将强制为元素A创建一个新的合成图层。这样，A和B都被提升到单独的复合层。因此，使用GPU加速提升动画性能时，最好给当前动画元素增加一个高一点的z-index属性，人为干扰复合层的排序，可以有效减少Chrome创建不必要的复合层，提升渲染性能。注意：GPU不仅需要发送渲染层图像到GPU，而且还需存储它们，以便稍后在动画中重用。别盲目创建渲染层，一定要分析其实际性能表现。因为创建渲染层是有代价的，每创建一个新的渲染层，就意味着新的内存分配和更复杂的层的管理。对于使用移动设备的用户来说是很坑的。移动设备没有台式机那么多的内存。过多的GPU加速会引起页面卡顿甚至闪退。找到layers，点击当前层，在右边查看占用的memory（内存）
总结整篇文章介绍了下面几个部分GPU加速能做什么GPU是什么，如何用Chrome devtools进行分析debug？如何开启GPU加速？GPU加速隐藏的坑–隐式合成
本文来源：IT之家
责任编辑：韩一冰_NT3945
用微信扫码二维码
分享至好友和朋友圈
加载更多新闻
热门产品:　　　
:　　　　　　　　
:　　　　　　　　　
热门影院：
阅读下一篇
用微信扫描二维码
分享至好友和朋友圈你的位置： >
> Photoshop CS6显示器驱动已停止响应sniffer_gpu.exe内存cpu占用高
认识一下GPU
GPU好比是显卡的CPU，在绘制绚丽的图片时软件会通过它更流畅，显卡的档次由它决定。在 Photoshop CS6 中在使用关键工具（如“液化”、“变形”、“光效”以及“油画”滤镜）进行编辑时可以更急流畅。
NVIDIA公司在1999年提出图形处理芯片GPU的概念，作用是计算多边形的3D位置和处理动态光线效果，也可以称为“几何处理”。
如果您在运行 Photoshop 时遇到崩溃、错误的窗口或性能问题，同时进程中会出现sniffer_gpu.exe进程，可能会是多个，而且内存和cpu占用率很高。可以尝试下面方法解决。
1、关闭GPU Sniffer
为了帮助防止Photoshop发生GPU问题，每当 Photoshop 启动时，都会启动 Sniffer_gpu.exe。Sniffer 将 GPU 运行的结果报告给 Photoshop。如果 Sniffer 崩溃或失败，则 Photoshop 将不使用 GPU。“首选项”的“性能”面板中的“使用图形硬件”复选框会被取消选中并停用。
Sniffer 第一次失败时，Photoshop 会显示一个对话框，指示检测到 GPU 问题。在随后的启动中，将不再显示该对话框。
如果您通过更换显卡或更新驱动程序更正了该问题，则在下次启动时 Sniffer 将通过，并将启用“使用图形硬件”复选框，还原为以前的状态（启用或停用）。
建议：如果在不关闭GPU情况下能解决问题最好，这样在处理图片时可以更快。
2、关闭 OpenGL绘图功能。
打开Photoshop，如果未响应不能操作先结束进程“sniffer_gpu.exe”再选择“编辑”&“首选项”或“Photoshop”&“首选项”。
在“性能”面板中，取消选中“使用图形处理器”。单击“确定”。
重新启动 Photoshop，然后执行同一个功能。
如果在 OpenGL 绘图功能停用的情况下再次发生该问题，则说明 OpenGL 不是造成该问题的原因。尝试用下面的方法解决。
3、将Photoshop 更新最新版。
可以点击关于更新Photoshop为最新版，尝试问题是否解决。
4、更新显示器驱动程序。
更新一下电脑的显卡驱动，可以用驱动精灵等软件快速更新为最新驱动。
5、复位Photoshop首选项。
复位Photoshop首选项后，会将 OpenGL 设置还原为默认状态。
在启动 Photoshop 后立即按住 Shift+Ctrl+Alt (Windows) 或 Shift+Option+Command (Mac OS) 就可以复位 Photoshop 。如果系统询问您是否要删除 Adobe Photoshop 设置文件时，请单击“是”。这时再看看问题解决了没有。
6、更改 OpenGL 模式为“基本”。
将 OpenGL 模式设置为“基本”后，会减少 GPU 内存占用率和最基本的 GPU 功能集。
关闭所有打开的文件。
点击“编辑”&“首选项”(Windows) 或“Photoshop”&“首选项”(Mac OS)。
在“性能”面板中，单击“GPU 设置高级设置”。
更改“模式”&“基本”。
保存并重新启动 Photoshop。
7、最好用一个视频适配器。
多个视频适配器会导致 Photoshop 中的 GPU 加速功能或已启用的功能出现问题。最好将两台（或更多）显示器连接到一个视频适配器。如果您必须使用多个视频适配器，请确保它们的品牌和型号相同。否则，Photoshop 中会发生崩溃和其他问题。
注意：使用两个视频适配器不会增强 Photoshop 的性能。
8、提高“高速缓存级别”的值。
如果已经将 Photoshop 首选项中的高速缓存级别设置为 1，则会影响 GPU 功能的性能。将高速缓存级别复位到默认设置 4。
点击“编辑”&“首选项”&“性能”(Windows) 或“Photoshop”&“首选项”(Mac OS)。
在“性能”面板中，选择“高速缓存级别”&“4”。
官方已针对 Photoshop CS6 进行测试的显卡
Adobe 在发行 Photoshop CS6 之前测试了以下显卡，本文列出了显卡型号。Photoshop CS6 所支持显卡的最低内存量为 256 MB。
注意：Adobe 测试了以下各中显卡的笔记本和台式机版本。确保下载适用于您具体型号的最新驱动程序。（笔记本和台式机版本的名称略有不同。）
nVidia GeForce 、100、200、300、400、500 系列
nVidia Quadro 400、600、（Mac 和 Win）、CX、
AMD/ATI Radeon 、、 系列
AMD/ATI FirePro 、、、、
Intel Intel HD Graphics、Intel HD Graphics P3000、Intel HD Graphics P4000
注意：将不再测试 ATI X1000 系列和 nVidia 7000 系列的显卡，Photoshop CS6 不再正式支持这些显卡，但有些基本的 GL 功能可能仍可用于这些显卡。
Photoshop CS6中特性功能
Photoshop CS6 中添加的 GPU 增强功能
“自适应广角”滤镜（需要兼容的显卡）
液化（通过具有 512 MB VRAM 的兼容显卡加速）
油画（需要兼容的显卡）
变形和操控变形（通过兼容的显卡加速）
场景模糊、光圈模糊和倾斜/偏移（通过支持OpenCL 的显卡加速）
光效库（需要配备了 512 MB VRAM 的兼容显卡）
新的 3D 增强功能（Photoshop 中的 3D 功能需要配备了 512 MB VRAM 的兼容显卡）：
可拖动的阴影
画布 UI 控件
画布边缘的光 Widget
IBL（基于图像的光）控制器
官方帮助：
转载请注明： & 原文地址：
分享此文到：
与本文相关的文章女孩子都是挺虚荣的，我长的不高也不帅，所以我也挺有自知之明，从来不要求和她一起出门，只是默默地把卡_百度宝宝知道硬知识：手机GPU各指标参数揭秘_搞趣网