V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
DoisLONG
V2EX  ›  问与答

[提问:(性能比较)前端特效用 CSS 实现快,还是继续 JS 更好?] 引用 OddBird 的设计师兼开发人员 Miriam Suzanne 的一段话:.CSS 的改进将以惊人的方式影响网页设计

  •  
  •   DoisLONG · 2018-01-26 10:27:10 +08:00 · 1968 次点击
    这是一个创建于 2289 天前的主题,其中的信息可能已经有所发展或是发生改变。

    “在 CSS 中有很多令人兴奋的事情——将诸如网格和定制属性之类的新工具与 Calc 和 Viewport 单元等现有功能集成在一起。现在的 CSS 使交互,响应和数据变得可视化,而在以前这需要大量使用 JavaScript。我很高兴看到这项技术有更多新的发展趋势。“

    —— OddBird 的设计师兼开发人员 Miriam Suzanne

    有帖子却持有相反的观点:JS 渲染效果更快更好 --却没有提出实据

    有点困惑。当然,实际开发的时候怎么快怎么来吧,只是想听一听大家对这方面的看法和见解。

    10 条回复    2018-01-26 22:40:10 +08:00
    xwhxbg
        1
    xwhxbg  
       2018-01-26 10:43:17 +08:00
    优化好的 js,速度跟 webassembly 差不多,至于说 DOM 渲染,用 js 和用 css 改变后都要重绘,有什么区别么?
    不过貌似某些 css 属性可以让重绘走 GPU 加速倒是了
    jy02534655
        2
    jy02534655  
       2018-01-26 11:15:00 +08:00
    大部分情况下 css 实现特效更平滑一些,js 得看你的能力水平...
    Tokin
        3
    Tokin  
       2018-01-26 11:42:21 +08:00
    如果是我,我肯定是倾向于 CSS,因为像是过渡动画,如果自己用 JS 写,要好长一段代码,而如果引入第三方 JS 库,那也是多占用了一些带宽,所以如果不考虑兼容低版本浏览器,为什么不用 CSS。。。
    cloudzqy
        4
    cloudzqy  
       2018-01-26 11:54:46 +08:00
    最简单的原则,能用 css 完成的东西,就不要用 js。
    whypool
        5
    whypool  
       2018-01-26 12:12:36 +08:00
    css 动画什么的可以开 gpu 渲染,这才是优势
    autoxbc
        6
    autoxbc  
       2018-01-26 12:21:48 +08:00
    送分题,CSS 更好
    xiaojie668329
        7
    xiaojie668329  
       2018-01-26 13:23:39 +08:00 via iPhone
    能用 CSS 的就用 CSS 写,一些简单的 icon 我都不想用图直接画的。但是 CSS 也有局限的,复杂的就只能用 JS 了,比如说需要维护动画状态的,CSS 你是控制不了什么时候开始什么时候结束的。
    luoway
        8
    luoway  
       2018-01-26 14:20:56 +08:00
    JS 渲染效果更快更好,前提是渲染在 canvas 标签里。
    否则 DOM 性能拖后腿,JS 渲染谈不上性能优势
    DoisLONG
        9
    DoisLONG  
    OP
       2018-01-26 15:30:36 +08:00
    稍稍总结一下:不涉及 DOM 的时候,使用 CSS 可能更好;如果增加效果时候必须用到 DOM,选用 JS ;

    目前微信小程序(商场):效果实现上用 JS 比 CSS 多,已对比只用 CSS 进行渲染和只用 JS 进行渲染,页面渲染速度差距基本相同 ?!😕 ,可能是项目量级还不够吧,明年有做页面效果多的时候,继续留意和比较,随时更新!
    exonuclease
        10
    exonuclease  
       2018-01-26 22:40:10 +08:00 via Android
    能用 css 尽量用 css 很多时候 css 动画可以走硬件加速 有些 css 写不出来的动画只有 js 了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2195 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 05:07 · PVG 13:07 · LAX 22:07 · JFK 01:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.