我對來自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