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

　　众所周知，网页不仅应该被快速加载，同时还应该流畅运行，比如快速响应的交互，如丝般顺滑的动画……

　　一。 GPU 加速能做什么?

　　首先我们要了解什么是 16ms 优化

　　大多数设备的刷新频率是 60 次/秒，(1000/60 = 16.6ms)也就说是浏览器对每一帧画面的渲染工作要在 16ms 内完成，超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验。

　　浏览器在一帧里面，会依次执行以下这些动作。减少或者避免 layout，paint 可以让页面不卡顿，动画效果更加流畅。



　　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



　　按上面的步骤之后，即可看到

赞 (0)

相关推荐

  • edge浏览器内置flash如何设置硬件加速？Edge浏览器硬件加速GPU的方法

    GPU硬件加速是现代浏览器必备功能,这既可以充分利用GPU的图形性能加速渲染网页中的图像信息,从而加快网页打开速度,又能减轻CPU负担,降低浏览网页时的系统资源占用.对于双显卡笔记本(既有核芯显卡/集 ...

  • 如何开启win10硬件加速GPU计划

    如何开启win10硬件加速GPU计划

    现在大部分电脑都是win10系统,有些用户想知道如何开启win10硬件加速GPU计划,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图所示,打开[设置]窗口.2. 第二步根 ...

  • 如何解决win10系统不显示硬件加速GPU计划问题

    如何解决win10系统不显示硬件加速GPU计划问题

    现在大部分电脑都是win10系统,有些用户遇到了不显示硬件加速GPU计划问题,想知道如何解决,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先按下[Win+R]快捷键打开[运行] ...

  • win10系统如何开启硬件加速GPU计划

    win10系统如何开启硬件加速GPU计划

    现在大部分电脑都是win10系统,有些新用户不知道如何开启硬件加速GPU计划,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先按下[Win+R]快捷键打开[运行]窗口,接着根据下 ...

  • 如何强制开启win10系统硬件加速GPU计划

    如何强制开启win10系统硬件加速GPU计划

    现在大部分电脑都是win10系统,有些用户想知道如何强制开启硬件加速GPU计划,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先按下[Win+R]快捷键打开[运行]窗口,接着根据 ...

  • 如何启用Windows11系统硬件加速GPU计划

    如何启用Windows11系统硬件加速GPU计划

    现在大部分新款笔记本电脑都是Windows 11系统,有些用户想知道如何启用硬件加速GPU计划,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图箭头所指,找到并双击[控制面 ...

  • qq等级加速最高加速是几天

    大家知道QQ等级最高加速是多少吗?以前QQ加速6.2天已经弱爆了!如今QQ加速最高7.2天!绝对是秒升等级呀!此方法是需要依靠qq电脑管家才能够实施的，具体方法小编将会在本文介绍。 大家可以看到小编与 ...

  • OPPO R11s/R11s Plus如何游戏加速,网络加速?

    王者荣耀已经成为当下最热门的手机游戏之一,越来越多的人在茶余饭后会开上一把. 而这种实时对战类游戏对网络环境的要求很高,OPPO R11s/R11s Plus可以做到边玩边加速,它拥有游戏加速:可实现 ...

  • IE9浏览器无法开启GPU硬件加速问题解答

    GPU硬件加速作为IE9浏览器最吸引眼球的功能，各大浏览器也相续的引进这个功能。很多用户也想体验一下这个功能能够给浏览器性能带来多大的提升。但安装了IE9 beta版以后发现无法开启GPU硬件加速，“ ...