查看: 8390|回复: 4
chrome开启硬件加速对flash能起作用?
以前一直都是关闭硬件加速，flash看优酷高清视频CPU占用在12%左右吧
昨天尝试着打开硬件加速
QQ图片41.jpg (6.96 KB, 下载次数: 1)
09:52 上传
发现同样一个系列的视频，CPU占用竟然降到了0%
这是chrome27的pepperflash
之后我用chromium28+flashplugin(11.7)，结果类似，开启加速有种本地播放的感觉。这样是不是说明，chrome的硬件加速能对flash起作用呢
对了，我是Windows XP系统
nankang508
flash从10.1版就已经支持硬件加速了，在解释一下：硬件加速是指在计算机中透过把计算量非常大的工作分配给专门的硬件来处理来减轻中央处理器的工作量的技术。尤其是在图像处理中这个技术非常经常被使用
nankang508 发表于
flash从10.1版就已经支持硬件加速了，在解释一下硬件加速：硬件加速是指在计算机中透过把计算量非常大的工作 ...
flash硬件加速本身就是开启的，我对比的是chrome开启硬件加速前后的不同，就是想知道chrome的硬件加速对flash有没有影响 我的情况是不是偶然现象
有作用，不过是对谷歌内置的flash，插件的flash默认就是开启的
前提是显卡还凑合能用的。别是什么共享显存的显卡，在这种情况下开GPU加速网页会流畅很多。滚动时相当流畅且不占用CPU太多。另外一些视频播放器如SPLAYER QQ影音这些也能直接开启的。播放高清时CPU占用不要太低
Copyright & KaFan & All Rights Reserved.
Powered by Discuz! X3.1( 苏ICP备号 ) GMT+8,Google Chrome将内建3D硬件加速支持
为凸显与其他浏览器不同的特色，Google已开始把自家的O3D插件引入Chrome，让这个网页浏览器能使用以硬件加速的3D 绘图。
Greg Spencer程序设计师周三在一个邮件列表(mailing list)宣布有关Chromium的计划，Chromium是开放源代码开发计划，其中最重要的就是Chrome。
他说：&O3D团队正着手把O3D整合至Chromium build，而我们正快要完成迈向整合的第一步骤。&
此举凸显Google正为Chrome支持高效网络游戏打基础，也进一步显示Google力图加速Web(全球信息网)的转型，从静态的媒体转变成应用程序的平台。
在Google宣布2010下半年将推出，也就是瞄准上网本的操作系统后，这一切努力显得更加重要。Chrome
OS以Linux为基础，但Google曾表示，Chrome OS应用程序的真正基础是Web。
Google同时发展Google Native Client，其功用是让网络应用程序善加利用计算机的原生处理效率。
Google Native Client工程经理Brad
Chen在6月时表示：&我们察觉，浏览器安装遭遇一些阻力。因此，我们强烈倾向提供预安装好的原生客户端(Native
Client)，或内建在浏览器里。我们会聚焦于此，作为提供原生客户端给使用者的主要策略。&
Brad Chen，Google Native Client工程经理
(Credit: Stephen Shankland/CNET)
但Chrome不会是唯一一款支持加速功能的浏览器，因为Google正着手开发外挂(plug-ins)版本。把此技术内建于
Chrome，则能迫使其他浏览器跟着支持此技术。
若是能让Native Client和O3D演变成浏览器的一种通用标准，可吸引更多程序设计师踊跃支持，藉此提升Chrome作为网络应用程序平台的竞争力。
浏览器大战再度升温
Google在2008年9月推出Chrome，根据Net
Applications的市调数据，Chrome目前已取得将近2%的浏览器市占率，距离成为市场主流还有漫长的路要走。目前浏览器市场仍由微软的 Internet
Explorer称霸，而Mozilla的火狐(Firefox)努力多年，如今才拿下大约20%的市占率，成为IE之外首屈一指的替代选择。
不过，Google正努力迎头赶上，最近更是积极努力在Chrome中加入别的浏览器已具备的功能，例如插件、书签管理、打印预览等常见但有用的功能。Google同时也着手开发创新的功能，例如纳入更强的安全防护功能，并加速JavaScript程序的执行效能。
Google希望，自家技术能让网络软件的执行效能，能媲美桌上计算机软件。&
Chen在今年5月的一场演讲中表示：&有了O3D，我们将能支持高质量游戏，就像游戏机上常见的，和计算机辅助设计（CAD）应用程序那般。&
除此之外，Google也参与由Mozilla与Khronos Group所发起的另一项3D网络绘图计划。
[责任编辑：alect]
-5-4-3-2-1012345
当前平均分: 打分后显示
-5-4-3-2-1012345
当前平均分: 打分后显示1525人阅读
　　最近几周一直在搞自己的，一来是为了总结一下近几年自己的前端职业历程，二来是希望把这个网站做成自己的Web版个人履历/简历。网站首屏会有一个跟随鼠标进行空间透视移动的DOM动画效果，这里用到了一些JS逻辑，由于涉及到动画和性能问题，这里简要总结一下开发过程中遇到的一些问题。想来博客已经近两年没有更新过了，甚感愧疚，2014年一定一定一定会勤快些的！
　　大家看过网站之后，应该能大致了解到，动画中使用了很多大尺寸半透明PNG24图片，具体尺寸取决于你电脑的分辨率，目前会根据24这三种分辨率宽度加载不同尺寸的图片。动画逻辑是每个图片都会以不同的速度跟随鼠标移动，以达到空间感很强的透视效果。具体的js逻辑我会在以后单独写一篇讲解，还会把这个动画写成jQuery插件提供给大家下载，敬请关注^_^
先来说说遇到的问题：
　　网站本身设计初衷就没有打算支持IE8及以下版本浏览器，并不是因为代码兼容性问题，而是真的不想迁就那些懒得更新自己操作系统和浏览器的用户，毕竟是我自己的网站，所以我说了算！哈哈~
　　没有了低版本IE6浏览器，就不用顾虑他们的性能问题了，本以为开发会一帆风顺，结果”性能问题”竟然出现在了一直以性能出色著称的Chrome浏览器中。
　　Chrome下的动画比IE9和FF都要慢很多，一开始觉得是自己的js逻辑问题，因为要遍历9个元素并计算他们的坐标。后来尝试了使用requestAnimationFrame、webWorker和canvas，但情况仍然没有任何好转。通过chrome的DevTool中TimeLine监控，发现动画的代码逻辑并没有占用太多资源，反倒是painting消耗了大量的时间，平均才30fps左右。
上图可见主要时间都浪费在painting上了，元素背景图过大导致。
　　上面这几张图都是开启GPU硬件加速之前使用Chrome DevTool Timeline功能中Frames模块监测到的数据，明显看到平均帧速率在30fps左右
　　其实，chrome对于渲染多张大尺寸图片方面一直表现疲软，之前在开发人人小站瀑布流布局模板的时候就遇到过这类问题，chrome中只要存在大量缩放图片，页面滚动的时候就会极其卡顿，就像是用一台2004年的电脑访问一个2014年的网站一样。chrome对于渲染很多大尺寸图片(尤其是alphy透明度PNG24图片)方面有先天的不足，从它版本10+的时候就有开发者在官方平台报过这个Bug，如今chrome已经更新至版本30+，却依旧没有完美解决这个顽疾。
解决Chrome动画”卡顿”的办法
　　为动画DOM元素添加样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，这两个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU，其实说白了这是一个小伎俩，也可以算是一个Hack，-webkit-transform:transition3d和-webkit-transform:translateZ其实是为了渲染3D样式，但我们设置值为0后，并没有真正使用3D效果，但浏览器却因此开启了GPU硬件加速模式。
　　这种GPU硬件加速在当今PC机及移动设备上都已普及，在移动端的性能提升是相当显著地，所以建议大家在做动画时可以尝试一下开启GPU硬件加速。
当然也可以这样开启所有浏览器的GPU硬件加速：
webkit-transform:&translateZ(0);
-moz-transform:&translateZ(0);
-ms-transform:&translateZ(0);
-o-transform:&translateZ(0);
transform:&translateZ(0);
webkit-transform:&translate3d(0,0,0);
-moz-transform:&translate3d(0,0,0);
-ms-transform:&translate3d(0,0,0);
-o-transform:&translate3d(0,0,0);
transform:&translate3d(0,0,0);
　　使用-webkit-transform:transition3d(0,0,0)开启GPU硬件加速的chrome中渲染动画性能明显顺畅了许多，平均能达到55fps左右。无图无真相：
开启GPU硬件加速前后帧速率对比图(点击查看清晰大图)
chrome诡异的Bug
　　对所有动画DOM元素添加-webkit-transform:transition3d(0,0,0)开启GPU硬件加速之后，又出现了一个chrome诡异的Bug，当你有多个position:元素添加-webkit-transform:transition3d(0,0,0);开启GPU硬件加速之后，会有几个元素凭空消失，调试许久无果遂Google之，国内暂时没有人发表过关于这类问题的文章，于是在国外网站找呀找，找到了很多与我遇到同样问题的人，但都没有真正靠谱的解决办法，这可能是跟添加-webkit-transform之后chrome尝试使用GPU硬件加速有关系，最后还是要等待Chrome官方更新解决了，当前Chrome版本是33。如果谁发现比较好的解决办法，欢迎提出^_^
其他人遇到的类似问题：
如何避免这个问题：
　　在使用-webkit-transform尝试对很多DOM元素编写3D动画时，尽量不要对这些元素及他们的父元素使用position:absolute/fixed。(其实这种情况很难避免)
所以我的临时解决办法是，减少使用-webkit-transform:transition3d(0,0,0)的DOM元素数量，从9个减至6个便没有元素消失的现象了。
PS：由于测试环境有限，如果大家发现在你的浏览器还有这个Bug,麻烦留言告诉我，万分感谢！
开启GPU硬件加速可能触发的问题：
通过-webkit-transform:transition3d/translateZ开启GPU硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动，可以尝试以下办法解决之：
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
如何监测动画帧速率
推荐两种实时监测网页渲染帧速率的方法：
1.Chrome的DevTool中TimeLine的Frame模块
2.地址栏输入”chrome:flags”搜索”fps”，将”FPS计数器”开启，浏览器重启后右上角会实时显示帧速率。
我会再过些天单独写一篇关于通过Frame模块监测网站性能的教程，敬请留意^_^
通过-webkit-transform:transition3d/translateZ开启GPU硬件加速的适用范围：
使用很多大尺寸图片(尤其是PNG24图)进行动画的页面。
页面有很多大尺寸图片并且进行了css缩放处理，页面可以滚动时。
使用background-size:cover设置大尺寸背景图，并且页面可以滚动时。(详见:/p/j5udlw)
编写大量DOM元素进行CSS3动画时(transition/transform/keyframes/absTop&Left)
使用很多PNG图片拼接成CSS Sprite时
我能想到的暂时只有这五种情况，欢迎大家补充。
　　通过开启GPU硬件加速虽然可以提升动画渲染性能或解决一些棘手问题，但使用仍需谨慎，使用前一定要进行严谨的测试，否则它反而会大量占用浏览网页用户的系统资源，尤其是在移动端，肆无忌惮的开启GPU硬件加速会导致大量消耗设备电量，降低电池寿命等问题。
您还可以参考以下HTML5相关文章:
以查看HTML5最新资源、教程。
原载:——关注前端开发
& Web UI设计
本文链接:如需转载必须以链接形式注明原载或原文地址，谢谢合作
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：268939次
积分：4029
积分：4029
排名：第6230名
原创：17篇
转载：801篇
(6)(7)(64)(10)(19)(15)(41)(24)(23)(17)(8)(4)(10)(6)(54)(12)(7)(3)(16)(12)(20)(10)(14)(15)(4)(10)(19)(2)(1)(4)(31)(4)(4)(27)(24)(16)(23)(1)(8)(3)(15)(12)(8)(3)(3)(4)(35)(1)(3)(8)(30)(31)(24)(5)(12)(7)(5)(3)(1)(1)(3)(13)开启隐藏的Chrome浏览器GPU硬件加速!
我的图书馆
开启隐藏的Chrome浏览器GPU硬件加速!
尽管从Google Chrome&7就已内建了GPU的硬件加速功能，不过默认却是关闭的，并且还找不到可以开启的选项。难道Google在和我们开玩笑吗？其实新版Google浏览器的确有硬件加速浏览的功能，不过要用特殊的方法才能开启！&
&&& 打开Google浏览器后，在网址栏输入“about:plugins”，并按下“Enter”鍵，会列出目前的外挂程序清单，但并没有看到GPU加速的相关程序。
&& ● 注：新版的Chrome浏览器，已经把GPU加速功能放在“about:flags”里。只要在网址栏输入这个指令，就可以看到许多尚在开发中的功能，想要先试试看的话便可以自行开启。
&&& 先链接至“”进行硬件加速效能的评测，会根据硬件差异而出现不同的分数。
&&& 在“Google浏览器”快捷方式上按一下右鍵，并从菜单中点“內容（属性）”。
&&& 在“Google浏览器內容”对话框的“目标”选项中，原本的文字后方加入下列参数，完成后按下“确定”。
&&& --enable-accelerated-compositing&--enable-gpu-plugin&--enable-gpu-rendering&--enable-accelerated-2d-canvas
&&& 重新开启Google浏览器，在网址输入“about:plugins”，并按下“Enter”键，此时会发现外挂程序清单中，多出了“GPU&Plug-in”这个项目。
&&& 连至“”再次进行硬件加速的测试，可以明显看出分数比刚才还要高出一些，证明开启GPU加速功能成功！■
发表评论：
TA的最新馆藏}