@import vs link

作者：手气不错 发布时间：September 25, 2008 分类：CSS

对于 CSS 的载入方式，在这里咬文嚼字下。这篇主要探讨 CSS 的两种载入方式：@import 和 link 元素间的差异。

link 是在 (X)HTML 文档中的语义是“页面资源”（当然也会包括 CSS），而 @import 只是 CSS2.1 的语句。

使用 @import 可以使各 CSS 文件间相互嵌套。在 Explorer5.x 时代，同时也是浏览器间判断是否支持 CSS2.1 的一个方法。

其实，我们最关注的是 @import 和 link 两种不同的 CSS 载入方式的性能问题。先写了两个简单的脚本，让 CSS 文件延时 5 中载入，可以在各浏览器下看看结果 使用 @import 使用 link。

可以看见，Exploer 系列在使用 @import 方式时，会先载入文档，然后再载入样式；而在其他浏览器以及其他情况下，都需要等待样式载入完毕以后统一渲染。

总结下我个人的看法。我个人倾向于使用 link 方式，主要是下面的几个原因

  1. CSS 文件也是页面资源的一部分（更佳的语义）
  2. 没有各浏览器间的载入分歧
  3. 便于 Javascript 操作（link 是 HTML 结构的一部分，而 @import 载入的只能操作 style 节点）

当然，应用 @import 的场合也很多，比如在无法更改页面结构、或者是需要统一的 CSS 入口的情况下等。

参考阅读

已有 7 条回复

  1. 锐风 September 26th, 2008 at 04:04 am #1
    锐风

    很不幸的我又沙发了.

    两种方式各有利弊是肯定的. 但有些时候还确实非得用 @import 不可.

  2. 大猫 September 26th, 2008 at 04:07 am #2
    大猫

    For no real apparrent reason (are you sensing a theme?), when a < script > or < link > tag is placed in the < head > section your flickering, delayed CSS problem should be history.

    @import在IE下一闪的问题，哈

  3. smoke520 September 26th, 2008 at 04:53 am #3
    smoke520

    还是倾向link 方式。

  4. robbenmu September 26th, 2008 at 07:12 am #4
    robbenmu

    还有个问题是在ie下动态修改样式后,@import会失效

    http://blog.12km.com/import/import_bug.html

  5. x September 26th, 2008 at 10:21 am #5
    x

    opera访问两个地址效果一样,都是先载入内容再载入样式,为何?

  6. 手气不错 September 26th, 2008 at 07:59 pm #6
    手气不错

    @robbenmu 感谢补充

    @x Opera 没有测试过

  7. yaosl December 23rd, 2008 at 05:42 pm #7
    yaosl

    2楼大猫兄，用 @import 方式时，会先载入文档，然后再载入样式，这种方式下出现闪屏很正常。而对于firefox，在yslow中可以看到，即使把@import 放到页面最上面，显示的还是没有遵守css放页面上面的原则

添加新回复

Yahoo 统计