为什么不建议使用css @import
来源:互联网 发布:上证指数月度数据下载 编辑:程序博客网 时间:2024/04/28 17:25
曾经研究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 <link> tag instead of CSS @import
- Instead of @import, use a
<link>
tag for each stylesheet. This allows the browser to download stylesheets in parallel, which results in faster page load times:<link rel="stylesheet" href="first.css"><link rel="stylesheet" href="second.css">
我们确实要避免使用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标签的方式引入。
上面两段引文分别出自:
https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport
https://developers.google.com/speed/docs/best-practices/payload#RemoveUnusedCSS
- 为什么不建议使用css @import
- 为什么建议使用link方式来加载css,而不是使用@import方式
- 为什么不建议使用vector<bool>
- Hadoop 为什么不建议使用 RAID?
- android 为什么不建议使用Thread.stop()
- Mysql为什么不建议使用join
- android 为什么不建议使用Enum
- [挖坑]sqlite数据库中的sqlite3_get_table接口为什么不建议使用
- 为什么使用CreateThread时不建议调用RTC函数
- sql server中为什么不建议使用not in
- 数据库同步为什么不建议使用dblink方式
- 为什么我们不建议使用函数模板具体化
- [CSS]为什么不推荐在CSS中使用ID选择器
- 为什么不建议客户端bind
- 为什么不建议用Table布局
- 为什么不建议直接操作AX数据库
- scala中为什么不建议用return
- C++为什么不建议使用malloc,calloc,realloc来分配内存?
- SQL XML 操作
- 马上就过元旦了!
- adstpall.sh: Database connection could not be established. Either the database is down or the APPS c
- elasticsearch中如何高效的使用filter
- 查找tomcat端口号方法总结
- 为什么不建议使用css @import
- 在Mac下配置php开发环境:Apache+php+MySql
- Mac OS X下Sublime Text (V2.0.1)破解
- Chrome扩展 实现网页中视频的探索以及下载
- 二见钟情之IPO图
- innodb和myisam的区别
- Bootstrap 3 网格系统简介
- jQuery遮罩插件
- iOS多线程编程之NSThread的使用