当前位置: 首页 > 面试题库 >

外部CSS与内联样式的性能差异?

壤驷经国
2023-03-14
问题内容

我的一个朋友说,使用开头部分<div style=""></div>代替压缩的css文件可以link href提高性能。真的吗?


问题答案:

与使用CSS文件的性能提升(通过其他因素)相比,您的朋友提到的性能提升可能微不足道。

浏览器使用style属性,仅绘制该特定元素的规则,在这种情况下为<div>元素。这样可以减少CSS引擎查找哪些元素与CSS选择器匹配的查找时间(例如a.hover#someContainer li)。

但是,将样式置于元素级别将意味着您无法单独缓存CSS样式规则。通常,将样式放在CSS文件中将允许进行缓存,从而减少每次加载页面时服务器的负载量。

将样式规则放在元素级别还会使您无法跟踪以什么方式对哪些元素进行样式设置。这也可能会抵消绘画特定元素的性能提升,您可以在其中一起重新绘画多个元素。使用CSS文件可将CSS与HTML分开,从而使您可以确保样式正确,以后更容易修改。

因此,如果您看一下比较,您会发现使用CSS文件比在元素级别进行样式设计具有更多好处。

不要忘记拥有外部CSS样式表文件时,浏览器可以缓存该文件,从而提高了应用程序的效率!



 类似资料:
  • 问题内容: 我有使用内联样式的标记,但是我无权更改此标记。如何仅使用CSS覆盖文档中的内联样式?我不想使用jQuery或JavaScript。 HTML: CSS: 问题答案: 覆盖内联样式的唯一方法是使用CSS规则旁边的关键字。以下是一个示例。 重要笔记: 使用不是一个好的做法。因此,您应避免同时使用内联样式。 将关键字添加到任何CSS规则后,该规则就可以 强行优先 于该元素的 所有其他CSS规

  • 问题内容: 是否有CSS选择器通过其内联样式属性值选择此元素? 就像是 问题答案: 内联属性与任何其他HTML属性没有什么不同,并且可以与子字符串属性选择器匹配: 正是由于这个原因,它 非常脆弱 。由于属性选择器不支持正则表达式,因此只能执行与属性值 完全 匹配的子字符串。例如,如果属性值中的某处有空格,如下所示: 在您更改选择器以适应空间之前,它不会匹配。然后,它将停止匹配 不 包含空格的值,除

  • 问题内容: 我正在寻找一个Java库,该库可以根据其ID / class属性将外部文件与文档内联。 我找到了 jStyleParser, 但不确定这是否适合我。我似乎无法理解它是否可以内联HTML中的元素。文档和示例不是我所期望的。 有没有人可以回答这个问题,或者有另一个图书馆可以解决这个问题? 谢谢 问题答案: 您可以尝试CSSBox。只需查看软件包中包含的 ComputeStyles 演示(有

  • 本文向大家介绍HTML 外部CSS样式表,包括了HTML 外部CSS样式表的使用技巧和注意事项,需要的朋友参考一下 示例 标准做法是将CSS<link>标签放在<head>HTML顶部的标签内。这样,将首先加载CSS,并将在加载页面时将其应用于您的页面,而不是在加载CSS之前显示无样式的HTML。该type属性在HTML5中不是必需的,因为HTML5通常支持CSS。 和 ...在HTML5中做同样

  • 问题内容: 请执行以下操作: 与以下内容相比对性能有任何影响: 问题答案: 从文档的 性能: 用样式对象制作样式表可以通过ID引用它,而不必每次都创建一个新的样式对象。 它还仅允许通过桥发送一次样式。所有后续使用都将引用一个ID(尚未实现)。 另一个好处是样式错误将在编译时而不是运行时生成。 我个人仍然喜欢使用内联样式(并为共享样式创建新的组件),因为它使代码对我而言更具可读性,并且对性能的影响并