电脑频道 手机频道
网络技能 路由器
电脑零碎 电脑蓝屏
游戏攻略 明星八卦
钱汇娱乐网 最新更新
首页 > 电脑适用技能>注释 通告: 为呼应国度净网举动,局部内容曾经删除,感激网友了解。

什么是GPU减速?GPU减速能做什么

【2017-04-18 12:23:32】 泉源:网络 作者:福州电脑之家 批评:

  众所周知,网页不只应该被疾速加载,同时还应该流利运转,比方疾速呼应的交互,如丝般顺滑的动画……

  一。 GPU 减速能做什么?

  起首我们要理解什么是 16ms 优化

  大少数设置装备摆设的革新频率是 60 次/秒,(1000/60 = 16.6ms)也就说是阅读器对每一帧画面的渲染任务要在 16ms 内完成,凌驾这个工夫,页面的渲染就会呈现卡顿景象,影响用户体验。

  阅读器在一帧外面,会顺次实行以下这些举措。增加或许防止 layout,paint 可以让页面不卡顿,动画结果愈加流利。

什么是GPU减速?GPU减速能做什么

  1。 JavaScript:JavaScript 完成动画结果,DOM 元素操纵等。

  2。 Style(盘算款式):确定每个 DOM 元素应该使用什么 CSS 规矩。

  3。 Layout(结构):盘算每个 DOM 元素在终极屏幕上表现的巨细和地位。由于 web 页面的元素结构是绝对的,以是此中恣意一个元素的地位发作变革,都市联动的惹起其他元素发作变革,这个进程叫 reflow。

  4。 Paint(绘制):在多个层上绘制 DOM 元素的的笔墨、颜色、图像、边框和暗影等。

  5。 Composite(渲染层兼并):依照公道的次序兼并图层然后表现到屏幕上。

  应用 GPU 减速优先运用渲染层兼并属性,防止 layout,paint。

\

  从上图可以看出,可以经过改动元素的 transform 完成挪动,伸缩变更而非改动物体的 left,top,width,height 防止 layout,paint。让动画结果愈加流利。

\

  优化

\

  二。 GPU 是什么,怎样用 Chrome devtools 停止剖析 debug?

  阅读器渲染一个页面大抵是依照上面这个步调实行。

  1。 获取 DOM 并将其联系为多个层(RenderLayer)

  2。 将每个层栅格化,并独立的绘制进位图中

  3。 将这些位图作为纹理上传至 GPU

  4。 复合多个层来天生终极的屏幕图像(终极 layer )。

  Chrome 开启检查 renderlayer

\

  按下面的步调之后,即可看到

\

  1。 黄色边框:有动画 3d 变更的元素,表现放到了一个新的复合层(composited layer)中渲染

  2。 蓝色的栅格:这些分块可以看作是比层更低一级的单元,这些地区便是 RenderLayer

  翻开一个页面,假如该页面的黄色边框许多,那么一定要检查一下缘由了

  Chrome 检查 layer

  翻开 timeline 停止录制,选中 timeline 的某一帧,然后选择上面的 layer ,可以左右拖动该模块呈现 3d。

  我们可以看到一个页面实践是像上面一样构成的

\

  从上图不难了解,固然我们终极在阅读器上看到的只是一个复印版,即终极只要一个层。相似于PhotoShop软件中的“图层”观点,最初兼并一切可视图层,输入一张图片到屏幕上。但实践上一些dom会由于一些规矩被提拔成独立的层(开启 GPU 减速),一旦被独立出来之后,便不会再影响其他dom的结构,由于它改动之后,只是“贴上”了页面。

  依据这个长处,我们可以把页面中一些结构常常变更的dom(动画)提拔到独立的层。那么,阅读器在之后的 16ms 中,只需停止上面的几个步调。

\

  三。 怎样开启 GPU 减速?

  现在上面这些要素都市惹起Chrome创立分解层:

  1。 3D 或透视变更(perspective,transform) CSS 属性

  2。 运用减速视频解码的video元素

  3。 拥有 3D (WebGL) 上下文或减速的 2D 上下文的 canvas 元素

  4。 混淆插件(如 Flash)

  5。 对本人的 opacity 做 CSS 动画或运用一个动画 webkit 变更的元素

  6。 拥有减速 CSS 过滤器的元素

  7。 元素A有一个 z-index 比本人小的元素B,且元素B是一个分解层(换句话说便是该元素在复合层下面渲染),则元素A会提拔为分解层。

  下面7点都十分容易了解,在一样平常开辟中,最容易呈现题目的是第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 减速隐蔽的坑–隐式分解

分享:
下载

相干文章

要害词: 减速 能做什么 GPU
宣布关于《什么是GPU减速?GPU减速能做什么》的批评

福州电脑网(福州iThome)专业电脑/盘算机学习网站.提供电脑维修知识,包罗盘算机软件/硬件维修知识,路由器/交流机/网络设置,电脑蓝屏,网络/it知识学习等等钱汇网址学习材料.

免责声明:本站一切信息内容仅供参考,若有得罪您的权柄请联络我们删除!请各人留意:本站删帖完全收费。邮箱:

Copyright (C) FziThome.com, All Rights Reserved.

版权一切 闽ICP备14002611号-3