为什么建立的css没用,web前端优化时为什么不建议使用css @import

web前端优化时为什么不建议使用css @import

发布时间：2013-12-27 15:33:05   作者：佚名   我要评论

研究web前端优化时最多的建议就是不要使用 css @import 因为用这种方式加载css相当于把css放在了html底部，关于这一点下面为大家详细介绍下

曾经研究web前端优化时在网上多处看到这样一条建议，大意是：

不要使用 css @import, 因为用这种方式加载css相当于把css放在了html底部。

关于这一点，我一直很疑惑： 为什么用@import就等于把css放在了页面底部？ 原理是什么？？ 但一直不得而知，因为网络文章一大抄，转载的很多，去细究原因的却很少。

直到今天，在google developers看一篇文章时，无意间找到了这个原因，原文如下：

Avoid CSS @import

Overview

Using CSS @import in an external stylesheet can add additional delays during the loading of a web page.

Details

CSS @importallows stylesheets to import other stylesheets. When CSS @import isused from an external stylesheet, the browser is unable to downloadthe stylesheets in parallel, which adds additional round-trip timesto the overall page load. For instance, iffirst.css contains the following content:

@import url("second.css")

The browser must download, parse, andexecute first.css before it is able to discover that itneeds to downloadsecond.css.

Recommendations

Use the tag instead of CSS @import

Instead of @import, use a tag for each stylesheet. This allows the browser to download stylesheets in parallel, which results in faster page load times:

我们确实要避免使用css @import， 但原因却不是什么相当于放在了页面底部，而是这样做会导致css无法并行下载，因为使用@import引用的文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。 星球浏览器在页面所有css下载并解析完成后才会开始渲染页面(Before a browser can begin to render a web page, it mustdownload and parse any stylesheets that are required to lay out thepage. Even if a stylesheet is in an external file that is cached,rendering is blocked until the browser loads the stylesheet from disk.)，因此css @import引起的css解析延迟会加长页面留白期。 所以，要尽量避免使用css @import而尽量采用link标签的方式引入。

相关文章

这篇文章主要介绍了关于CSS浮动与取消浮动的问题，通过设置元素脱离正常的文档流让元素靠左或向右靠近，通过设置文字包周围图片来解决浮动问题，具体解决方法跟随小编一起2021-06-28

本文介绍了什么是 ::marker 以及它的一些实用场景，可以看出虽然 ::before 、::after 也能实现类似的功能，但 CSS 还是提供了更具有语义化的标签 ::marker，也表明了大家需2021-06-25

很多前端的初学者,在使用margin的之后或许会遇到一些问题，本文主要介绍了margin塌陷和margin合并，需要的朋友们下面随着小编来一起学习学习吧2021-06-24

当我们想写一个类似掘金的文章或者自己的博客的时候，是否有想过该怎么实现给自己文章的章节添加章节号，本文就来介绍一下使用CSS实现章节添加自增序号的方法，感兴趣的可2021-06-23

本文主要介绍了CSS变量实现主题切换的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-06-23

本文就将介绍一些使用单标签绘图的技巧，并且使用这些技巧，借用单个标签去实现一些复杂图形，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2021-06-16

这篇文章主要介绍了CSS几步实现赛博朋克2077风格视觉效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-15

今天来带大家做一个可爱的滑动导航栏效果，这个demo很基础，但是使用场景非常广泛，感兴趣的小伙伴们可以参考一下2021-06-15

大家都知道Calc方法有个很大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度，本文通过一个例子给大家详细介绍，需要的朋友参考下吧2021-06-03

本文将给大家介绍使用 CSS prefers-* 规范提升网站的可访问性与健壮性的相关知识，在css媒体查询中新增的几个特征功能,本文也给大家详细介绍，需要的朋友可以参考下2021-05-25

最新评论