第一章-CSS和文档 ---@import 命令

     import命令使用的我平常碰见并不多,主要是使用link来引入样式,关于import的知识点,个人觉得更多是在于面试题中;

主要是区分import和link方式的区别,以及各自的有确定比较!

     import语句需要放在css文件或者style标签中,且必须放在开头部分!

import和link方式的细微差别:

  1. link属于XHTML标签,而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
  2. 加载顺序的差别。比如,在a.css中使用import引用b.css, 只有当使用当使用import命令的宿主css文件a.css被 被下载、解析之后,浏览器才会知道还有另外一个b.css需要下载,这时才去下载,然后下载后开始解析、构建render tree等一系列操作.
  3. 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
  4. 当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。对于可换皮肤的网站而言,可以通过改变link便签这两个的href值来改变应用不用的外部样式表,但是对于import是无法操作的,毕竟不是标签。
 
      关于imoport标签,是不推荐使用的,从优化性能的角度看,应该尽量避免使用 @import 命令!
 
      至于为什么会影响细性能,的确是因为提到的第二点,加载顺序的问题,但是原因绝不是网上流传的“ 使用css @import, 相当于把import的css文件放在了页面底部,而是这样做会导致css无法并行下载”,而是import的css文件必须等宿主css下载完成,解析之后,浏览器才会去下载,解析import的css文件, 因此css @import引起的css解析延迟会加长页面留白期。 所以,要尽量避免使用css @import而尽量采用link标签的方式引入。
 
 

摘抄一位网友提供的外文文献 

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"> 
 

参看文章链接

原文地址:https://www.cnblogs.com/alanzhang906536936/p/4966926.html