我对来自PHP/MySQL环境的客户端编程比较陌生。我理解CSS和JavaScript在浏览器环境中可以发挥的作用,但是,如果没有JavaScript,CSS就会出现不可逆转的停滞。我决不想创造一场辩论,但这就是我所看到的情况,即“新手”。那么,为什么不仅仅使用JavaScript来设置元素属性/属性呢?如果是这样,这是一种常见的做法吗? (我相信CSS要快得多......)用JavaScript代替CSS
回答
一些一般性的要点:
CPU成本
运行的JavaScript应用样式单个元素会慢得令人难以置信。 Javascript是同步的,所以它必须一次更新一种风格。另外,如其他地方所提到的,遍历DOM在计算上花费很大。更重要的是,如果您正在应用样式,因为您每次应用更改时都强制浏览器重新呈现网站。
大脑成本
这也是精神上昂贵的尝试写和在Javascript中保持的风格。这是一种从不打算包含布局规则的功能语言。 CSS只是更容易阅读。
它们级联!
CSS代表级联样式表。其中一个很大的好处是可以从彼此继承属性。考虑以下内容:
a.nav { font-weight: bold; }
现在,您所有带有“nav”类的链接都是大胆的。但是,如果您想进一步修改,你仍然可以链接到:
li a.nav { color: red; }
现在包含一个列表项目中所有的a.nav链接会变成红色和大胆。这是可能的,这是JavaScript,但你必须强制它,维护将是可怕的。
如果使用JavaScript的风格你的同事会打死你!
我觉得这1种不言自明
Css用于页面布局和样式。
Javascript是为了表现行为。
即使可以用javascript完全替换css,它也不被认为是标准做法,并且会被大多数web开发人员严重淹没。
良好的Web开发总是假设客户端可能已关闭了JavaScript,并将提供优雅的默认设置。用JavaScript替换CSS可能会使这不可能。
这远非惯常做法,实际上它可能被认为是一种不好的做法!
CSS用于设置页面的样式,并在页面加载时呈现它。 Javascript在页面加载后起作用并且可以操作现有的样式和页面。
如果你把它放到所有的JS中,它将会非常低效!如果你在JS中做了很多操作,DOM操作会变得很昂贵,并且在JavaScript中而不是CSS中执行所有样式将会有很多操作。客户端的负载很荒谬,客户端可能会有明显的滞后,因为它试图做出所有这些改变。另外如果客户端禁用JavaScript,会发生什么情况?有你的整个网站的外观和感觉。
将CSS想象成定义页面外观和应呈现的方式,然后将JS视为在完成呈现后更改该页面。你不应该把任何东西推到一个javascript中,你可以用一个简单的CSS样式预先做。
您应该使用JavaScript设置样式属性的唯一时间是在运行时需要更改样式。你应该总是使用CSS样式在可能的原因是:
- CSS往往是跨浏览器更加一致实施了很多比JS
- 用户可以有JS禁用
- “代码”做造型的CSS比很多字符更容易读写,比等效的JS代码更容易
将JavaScript改为CSS的真正问题是可维护性和性能。 CSS可以非常简单地找到单个元素样式并对其进行更改,而不会影响页面的其余部分。即使是一个简单的页面,JavaScript也会变得很麻烦,而对于一个更复杂的页面来说,完全无法管理。
在性能方面,任何时候javascript正在执行,你的页面将“冻结”。考虑到需要布置1000个元素的页面,根据布局的复杂性,执行时间可能会轻松增长到一分钟或更长时间。 CSS会原生处理,并且不会“冻结”浏览器。这会导致您的网页在某个人访问的第一个时间点无法使用,并且(根据统计数据),您只有10秒钟的时间才能在观众对您的网页无兴趣并且离开之前吸引观众的注意,这意味着您开车离开你所有的新访客。
- 1. textarea替代使用javascript/css
- 2. CSS替代JavaScript的定位
- 3. 使用CSS(或JavaScript)来代替SMIL
- 4. 替代显示:无使用CSS和Javascript
- 5. 替代使用CSS
- 6. 用Javascript代替“
- 7. libmagic。 text/plain代替文本/ javascript text/css
- 8. 替代全局CSS与纯JavaScript
- 9. CSS替代tabindex
- 10. Onclick CSS替代
- 11. 用AJAX替代JavaScript
- 12. 用javascript代替onmousedown
- 13. 用Javascript替换CSS类?
- 14. 用HTML/CSS替代XMLHttpRequest?
- 15. CSS替代此CSS-jQuery代码?
- 16. CSS替代定位
- 17. CSS替代style =“display:none”
- 18. CSS替代中心
- 19. CSS替代style =“display:none”
- 20. Javascript替代CronJob
- 21. IndexOf Javascript替代
- 22. 替代currentTarget Javascript
- 23. 替代document.write javascript?
- 24. Javascript替代品
- 25. JavaScript的替代
- 26. 的Javascript替代
- 27. 替代物使用JavaScript
- 28. 用javascript代替geojson对象
- 29. 用星号代替javascript/jquery?
- 30. 用javascript代替div内容
这是一个很好的问题,但该死它要花费很长的时间来回答 – 2010-01-14 16:01:20
社区维基这个问题。 – 2010-01-14 16:02:35
伟大的答案。渲染时间太昂贵,我会被排斥,并且即使可行,对JavaScript也不自然。谢谢。 – 2010-01-14 16:38:47