Question

我正在创建一个列表页面。其中将在页面加载中加载大约20条记录，其余的将在向下滚动时动态添加。在我的应用程序中，我使用包含引导样式的通用布局。但对于这个特定的页面，我需要覆盖一些CSS。例如，我需要将td元素的填充减少到4 px，默认为8px。我有两种方法可以执行此操作，添加新的css文件并有条件地包含在标题中（标题对所有页面都是通用的）或为此页面添加脚本。所以我添加了jquery脚本来实现这个，这是一个简单的解决方案，没有太多的代码更改。

/** @var UserQuizResult $userQuizResult */
$userQuizResult = new UserQuizResult();
$userQuizResult->setUser($this->getUser());

/** @var Question $question */
foreach ($quiz->getQuestions() as $question) {
    $userQuizAnswer = new UserQuizAnswer();
    $userQuizAnswer->setQuestion($question);

    // add answer to "collection"
    $userQuizResult->addAnswer($userQuizAnswer);
}

$this->createForm(new UserQuizResult(), $userQuizResult);

当我这样做时，我看到内联css被添加到附加到现有表行的每个td。我只是想知道是否有任何性能问题，或者如果我这样做会影响加载时间。

Answer 1

通过JavaScript添加样式需要付出代价。成本包括脚本编写时间和重新计算样式。如果你通过js仅为少数记录添加样式（比方说20），这个成本可以忽略不计，但如果你试图为大量记录添加相同的内容（1000），那么成本会很高。

由于您的用例属于类型视图，因此您必须做好最坏的准备。

所以在css中添加样式总是更好。

如果由于某些限制而无法在css文件中添加规则。您可以创建一个动态样式表并将其添加到正文并将该类用于表格单元格，这仍然比$ .css（）

更有效。

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

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

使用jQuery添加动态css是否存在任何性能问题

1 个答案: