jquery：.css vs append to head之間的速度差異？

我們有一些內部應用程序的kludgy解決方法，我想知道哪個jQuery/css技術被認爲更快/更高效...等。jquery：.css vs append to head之間的速度差異？

技術中的使用的CSS

$("#doc").css("margin-top", "90px"); 
$("#checkouthelp").css("margin", "50px 50px 0 0"); 

$("#changelanguage").css("float", "right") 
         .css("margin", "0 50px 0 0");

2.B技術 .append頭

$("<style>") 
    .prop("type", "text/css") 
    .html("\ 
    #doc {\ 
     margin-top:90px;\ 
    }\ 
    #checkouthelp {\ 
     margin:50px 50px 0 0;\ 
    }\ 
    #changelanguage {\ 
     float:right;\ 
     margin:0 50px 0 0;\ 
    }") 
    .appendTo("head");

這是那些開始了小和相對無害的項目之一，但已開發進入相當臃腫的解決方法。 鏈接到異地css文件或直接更改css規則，因爲我在這裏做的更快。速度是關鍵問題，上述樣品只是日益增長的雜物的一小部分。 [謝天謝地，根本原因正在評估......但在此期間]。

謝謝！

UPDATE

雖然我沒有做過全面的測試，在一些速度測試我做過使用Chrome的開發者工具，看起來像裝入規則從外部樣式表較慢。會做更多的測試，但我認爲我可能使用.css卡住了。感謝您對本文的回覆！

來源

2012-08-14 Bubnoff

我知道速度是主要問題，但我知道我不想負責維護技術B.我懷疑它也比較慢，但沒有任何堅實的基礎。 – KRyan 2012-08-14 18:05:49

用jQuery連接外部樣式表與上面的兩個例子有什麼關係？主要關注速度再次提高。謝謝！ – Bubnoff 2012-08-14 18:06:50

您可以將一些使用對象作爲參數的'.css'調用進行組合。 '$（「#changelanguage」）。css（{「float」：「right」，「margin」：「0 50px 0 0」}）;'我寧願使用外部css表單，但我不知道什麼會更快。嘗試測試它。 – 2012-08-14 18:12:58

jQuery的.css比追加提供的示例要快。我創建了演示了這種這裏測試用例：http://jsperf.com/jquery-css-vs-append-to-head

enter image description here

至於異地CSS，它不具有可比性，因爲場外的CSS速度取決於用戶的互聯網連接，與您的服務器速度ECT一起。如果你有一個邪惡的服務器和寬帶用戶，我說異地是好多了，否則對於速度，你只能可靠地依靠javascript。

來源

2012-08-14 19:12:40 Fresheyeball

這正是問題所在。我必須在30個地點運行測試，每個測試都有不同的網絡速度/問題。我不知道我可以依靠網絡速度。謝謝！ – Bubnoff 2012-08-14 19:20:00

我會通過jQ添加非語義類。如：'右移'，'右移'。這是維護imo更清潔。

來源

2012-08-14 18:25:05

我會牢記這一點。我的CSS知識非常簡單，所以我很欣賞這些建議。 – Bubnoff 2012-08-14 19:39:20

只需要清楚 - 這些類將已經存在於您的樣式表中，並且您將使用jQ來添加和刪除這些類。我假設你可以修改你的外部CSS。 – 2012-08-14 20:24:25

我可以添加外部工作表，但不能更改現有的主要工作表...但尚未。 – Bubnoff 2012-08-14 20:29:36

非現場CSS是要走的路。與非現場CSS瀏覽器只需要提出一個通常很快的請求。

另一方面，無論何時修改css元素，瀏覽器都必須重新分析整個dom樹，這可能更昂貴。

另一個重要的問題是：

是因爲你認爲它是速度真那麼重要嗎？這些解決方案之間的差異可能是45ms，這幾乎不值得您關注。您應該選擇一種技術，使您可以更快地編寫代碼並使其更好地維護，這就是實時節省的地方。

來源

2012-08-14 18:28:32 mkoryak

我將測試一個選定的位置子組並運行一些網絡測試。我們遇到的一個問題是，網絡在非現場樣式表的中心位置非常糟糕。但是也許... – Bubnoff 2012-08-14 19:22:55

另一個問題是由於其他問題解決方法導致的「千人死亡」效應。我肯定會測試場外樣式錶速度並進行比較。謝謝您的回答！ – Bubnoff 2012-08-14 19:26:55

不要忘記，瀏覽器會緩存非現場樣式表，所以你會在大多數時間免費獲得。你也可以設置文件的有效期限爲永遠不變，只需要改變文件需要更改的路徑 – mkoryak 2012-08-15 13:52:20

jquery：.css vs append to head之間的速度差異？

回答

相關問題