在jQuery中添加動態CSS有什麼性能問題

我正在創建一個列表頁面。其中大約20條記錄將在頁面加載時加載，其餘部分將在滾動時動態添加。在我的應用程序中，我使用了包含引導樣式的通用佈局。但是對於這個特定的頁面，我需要重寫一些css。例如，我需要將td元素的填充減少到默認爲8px的4 px。我有兩種方法來做到這一點，無論是添加一個新的CSS文件，並有條件地包含在標題（標題是所有頁面通用）或添加此頁面的腳本。所以我添加了jquery腳本來實現這一點，這是簡單的解決方案，沒有太多的代碼改變。在jQuery中添加動態CSS有什麼性能問題

$("td").css({'padding':'8px 2px'});

當我這樣做，我看到了內聯CSS是被添加到該被追加到現有的錶行的每個TD。我只是想知道是否有任何性能問題，或者如果我這樣做會影響加載時間。

來源

2017-06-16 Vineesh

且不說更高效，您加載，而不是JQuery的使用純js應該沒有 – Vivick

爲什麼不在這樣的目標特定的表在css中.page-table td {padding：8px 2px;}。所有你需要的是該表的類名 – karthick

添加一個特定的類是好的，但問題是添加一個新的CSS，我需要添加一個新的文件夾，新的文件（因爲我們遵循一些標準，根據框架我們正在使用），所以我試圖通過在腳本中添加css來避免這種情況。在我正在修改 – Vineesh

通過JavaScript添加樣式有成本。成本包括腳本時間和重新計算樣式。如果您僅通過js爲少數記錄添加樣式（可以說是20），則此成本可忽略不計，但如果您試圖爲大量記錄（1000）添加相同記錄，則成本會變高。

由於您的用例是類型查看更多，您必須準備最糟糕的。

因此，最好在css中添加樣式。

如果由於某些限制，您無法在css文件中添加規則。您可以創建一個動態的樣式表，並添加到身體和使用類表格單元格，這仍然會高於$的.css（）

.padd-fix { 
padding:8px 2px; 
} 

$('td').addClass('padd-fix');

來源

2017-06-16 06:40:13 karthick

在jQuery中添加動態CSS有什麼性能問題

回答

相關問題