显卡3D性能能低的问题，官方怎么解释

来源：蜘蛛抓取(WebSpider) 时间：2017-11-18 06:43 标签： 显卡3D性能
目前对提升移动端CSS3动画体验的主要方法有几点：
尽可能多的利用硬件能力，如使用3D变形来开启GPU加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：
-webkit-backface-visibility:
-moz-backface-visibility:
-ms-backface-visibility:
backface-visibility:
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
如下面一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性：
transition: -webkit-transform .5
-webkit-transform: translate3d(0, 0, 0);
#ball-1.slidein {
-webkit-transform: translate3d(500px, 0, 0);
transition: left .5
#ball-2.slidein {
注：3D变形会消耗更多的内存与功耗，应确实有性能问题时才去使用它，兼在权衡
尽可能少的使用box-shadows与gradients
box-shadows与gradients往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们，所以拥抱扁平化设计吧。
尽可能的让动画元素不在文档流中，以减少重排
优化 DOM layout 性能
我们从实例开始描述这个主题：
var newWidth = aDiv.offsetWidth + 10;
aDiv.style.width = newWidth + 'px';
var newHeight = aDiv.offsetHeight + 10;
aDiv.style.height = newHeight + 'px';
var newWidth = aDiv.offsetWidth + 10;
var newHeight = aDiv.offsetHeight + 10;
aDiv.style.width = newWidth + 'px';
aDiv.style.height = newHeight + 'px';
这是两段能力上完全等同的代码，显式的差异正如我们所见，只有执行顺序的区别。但真是如此吗？下面是加了说明注释的代码版本，很好的阐述了其中的进一步差异：
从注释中可找到规律，连续的读取offsetWidth/Height属性与连续的设置width/height属性，相比分别读取设置单个属性可少触发一次layout。
从结论看似乎与执行队列有关，没错，这是浏览器的优化策略。所有可触发layout的操作都会被暂时放入&layout-queue&中，等到必须更新的时候，再计算整个队列中所有操作影响的结果，如此就可只进行一次的layout，从而提升性能。
关键一，可触发layout的操作，哪些操作下会layout的更新（也称为reflow或者relayout）？
阅读(...) 评论()电脑高手解释下入门级3D性能是什么意思?_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
电脑高手解释下入门级3D性能是什么意思?
我有更好的答案
从低到高是
入门-低端-中段-高端-发烧
中间还有什么
中低端什么的就不说了
采纳率：30%
为您推荐：
其他类似问题
您可能关注的内容
等待您来回答君，已阅读到文档的结尾了呢~~
国产3D性能、特点对比分析表
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
国产3D性能、特点对比分析表
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口

我要回帖

更多关于 显卡3D性能 的文章

 

随机推荐