JS、CSS3、Canvas缤智与yeti哪个好更快,为什么会快?

来源：蜘蛛抓取(WebSpider) 时间：2016-11-12 15:59 标签： 捷达与昕锐哪个好
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
产生这个问题前，我先查询的是svg和canvas的区别，有一个根本的却别是：
svg可以当作xml，可以放大缩小，像html一样操作
而canvas则是一个实实在在画布，像swf那样，编辑起来不是很方便，但是效率高
从这里可以看出两者各有优劣，再后来我又看了CSS3，我发现CSS3结合了两者的长处：
可以结合DOM，和svg一样容易操作
渲染效率高，可以像canvas在dom上画出任意形状
那么我有这么几个问题：
有了css3之后，我们还需要svg还有canvas吗？
他们各自的有缺点是什么
什么场合适合用CSS3，什么场合适合用svg，什么场合适合canvas
目前这三者有什么知名的框架来便于操作、使用吗？
他们三者目前浏览器兼容情况如何，希望能提供参考页面或者图表说明
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
CSS3在DOM节点多的情况下效率严重下降。
CSS3的旋转比canvas（2d）要好。
CSS3的文字渲染比canvas好。
canvas可以在更底层操作。
canvas支持webgl，可秒杀一切。
canvas（2d）兼容性还不错。
webgl兼容性坑爹，移动平台支持不好。
网页效果请用CSS3；应用、游戏、图表用canvas；如果你觉得展示数据的时候css3不够自由，canvas太麻烦可以用svg。
不是很熟悉
还有一些用来制作css3动画的工具，不过没见到让人满意的……
用的很少，这个勉强算一个？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我首先想到的是svg的兼容性比css3好，svg支持IE8+，css3和html5的部分属性在ie8下不支持
其次，说css3像svg一样可以结合dom，这有点抬举它了，svg基于xml，它的结构很好，很适合修改和扩展，而如果用css3重写就是html，语义上不对不说，结构也得靠工程师自己来设计和优化，扩展性和修改能力上远不如svg。所以，复杂图形上面，svg的优势很明显，而简单的图形，可以说css3跟svg差不多。
canvas的话，因为跟js结合更紧密，所以一些逻辑操作要比css3方便太多，比如用canvas逐帧写动画和游戏，css3实现的话会更加吃力一些。
其实css3我认为依然是对css的扩展，更多是从扩展样式表现方面的考虑，从程序逻辑上来说，只能依靠模拟来实现，在这方面依附于js的canvas还是有比较大的优势。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
canvas的操作更底层（使用WebGL的情况下） 效率更高 以后可能成为新的游戏平台
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
三者的应用场景不一样.
css3除去文本效果,边框,圆角,多背景,多列等等,应该说主要意义在动画,过渡等效果上相比于以往css2.1做了较大的创新,.
,或许你可以借鉴借鉴.canvas作为一项H5的新技术,凭借高效且相比于SVG更简单的特点,对于大部分的前端同学来说更熟悉.Canvas更是借着数据可视化迎来了很多人的喜爱.但是抛去浏览器,svg在许多其他场景干翻Canvas,因为资格老,而且Canvas推出的初衷只考虑在浏览器当中.不过浏览器当中,svg还是有一席之地的,,自定义添加svg文件,然后只需添加相应class即可轻松创建新icon.避开svg的dom短板,可以说这样的icon质量很高,可伸缩,对屏幕大小不感冒,可以说屏幕越大优势越明显.
综合比较看来,css3的图形部分主要意义在于"动画2D3D过渡效果",为什么打引号,是因为真正的3D大头其实在于难啃的WebGL.随着H5的兴起,浏览器的2D大头在于Canvas.css3,svg,canvas暂时谁也不能淘汰谁,除非css3自己可以画出更好的图形,而不仅仅是带来更好的动画过渡效果;而svg(后台是adobe和ms),canvas相比于css3(后两者后台应该算webkit系列)更偏重于静态,矢量图形,但是因为本质完全不一样,各有各的优点,也是一样的都无法被替代.
如果将来浏览器图形这方面的标准能够做得更统一,或许会有数量更少,优点更多的技术;但是目前无法做到.
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我 确实不知道怎么回答好
只是来逛逛 ，你们加油
该答案已被忽略，原因：
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：好多搞HTML5做的应用完全可以不用Canvas，而是用div css来做，为什么用Canvas呢？怎么考虑的？ - 知乎15被浏览5016分享邀请回答11 条评论分享收藏感谢收起0添加评论分享收藏感谢收起查看更多回答1 个回答被折叠（）本文章为综合其它资料所得。
根据，Chromium项目里，渲染线程分为main
thread和compositor thread。
如果CSS动画只是改变transforms和opacity，这时整个CSS动画得以在compositor
thread完成（而JS动画则会在main thread执行，然后触发compositor进行下一步操作）
在JS执行一些昂贵的任务时，main thread繁忙，CSS动画由于使用了compositor thread可以保持流畅，可参考。
在主线程中，维护了一棵Layer树（LayerTreeHost），管理了TiledLayer，在compositor thread，维护了同样一颗LayerTreeHostImpl，管理了LayerImpl，这两棵树的内容是拷贝关系。因此可以彼此不干扰，当Javascript在main thread操作LayerTreeHost的同时，compositor thread可以用LayerTreeHostImpl做渲染。当Javascript繁忙导致主线程卡住时，合成到屏幕的过程也是流畅的。
为了实现防假死，鼠标键盘消息会被首先分发到compositor thread，然后再到main thread。这样，当main thread繁忙时，compositor thread还是能够响应一部分消息，例如，鼠标滚动时，加入main thread繁忙，compositor thread也会处理滚动消息，滚动已经被提交的页面部分（未被提交的部分将被刷白）。
CSS动画比JS流畅的前提：
在Chromium基础上的浏览器中JS在执行一些昂贵的任务同时CSS动画不触发layout或paint
在CSS动画或JS动画触发了paint或layout时，需要main thread进行Layer树的重计算，这时CSS动画或JS动画都会阻塞后续操作。
参考，只有如下属性的修改才符合“仅触发Composite，不触发layout或paint”：
backface-visibilityopacityperspectiveperspective-origintransfrom
所以只有用上了3D加速或修改opacity时，才有机会用得上CSS动画的这一优势。
因此，在大部分应用场景下，效率角度更值得关注的还是下列问题。
是否导致layoutrepaint的面积是否是有高消耗的属性（css shadow等）是否启用硬件加速
那么Chromium以外的其他浏览器呢？CSSTrick里。
Animated properties
JS-based Animation更快
CSS-based Animation更快
top, left, width, height
Windows Surface RT, iPhone 5s (iOS7), iPad 3 (iOS 6), iPad 3 (iOS7), Samsung Galaxy Tab 2, Chrome, Firefox, Safari, Opera, Kindle Fire HD, IE11
translate, scale
Windows Surface RT, iPhone 5s (iOS7), iPad 3 (iOS7), Samsung Galaxy Tab 2, Firefox, Opera, IE11
iPad 3 (iOS6), Safari, Chrome
可以看到，Chromium以外的其他浏览器没有这方面的CSS动画效率的优化。尽管MSDN提到“它可提供更好的呈现性能”，但测试并没有支持这一点。
现今CSS动画和JS动画主要的不同点是
功能涵盖面，JS比CSS3大
定义动画过程的@keyframes不支持递归定义，如果有多种类似的动画过程，需要调节多个参数来生成的话，将会有很大的冗余（比如jQuery
Mobile的动画方案），而JS则天然可以以一套函数实现多个不同的动画过程时间尺度上，@keyframes的动画粒度粗，而JS的动画粒度控制可以很细CSS3动画里被支持的时间函数非常少，不够灵活以现有的接口，CSS3动画无法做到支持两个以上的状态转化
实现/重构难度不一，CSS3比JS更简单，性能调优方向固定对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码CSS动画有天然事件支持（TransitionEnd、AnimationEnd，但是它们都需要针对浏览器加前缀），JS则需要自己写事件CSS3有兼容性问题，而JS大多时候没有兼容性问题
版权声明：本文为博主原创文章，未经博主允许不得转载。
阅读(...) 评论()

我要回帖

更多关于 捷达与昕锐哪个好 的文章

 

随机推荐