`
deng131
  • 浏览: 673673 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

@import导入样式缺点

阅读更多
大家都知道在页面中加入ccs样式常用方式:

1:最常用页面嵌入方式<style> </style> 。    

2:导入外部样式文件方式<link rel='stylesheet' type='text/css' href='' />


@import也是导入外部样式文件一种方式。

但是如果使用@import的话,必须要将@import放到样式代码最前面,否则它将会不起作用。

而且事实证明,避免使用@import 同样对网站性能有益。这2种方法也早就有对比:http://www.qianduan.net/high-performance-web-site-do-not-use-import.html

影响效率原因:
    * 在一个样式文件中使用@import会为页面总体加载时间增加更多一个返程(也就是增加页面的总体加载时间)
    * 在IE中使用@import 将会引起文件的下载顺序被改变。这更会引起样式文件花费更长的时间来下载,这会阻碍页面的渲染,让人感到页面比较慢。


<<高性能网站设计>>也有明确的优化建议,网页在性能上的优化尽量使中<link/>方式导入css文件,在网站效率也有提升。



0
1
分享到:
评论

相关推荐

    css @import url加载样式应用深入分析

    CSS中的`@import`规则是一种用于在样式表中导入其他样式表的方法。这个特性允许将多个样式表合并到一个文档或一个主样式表中,以实现更好的组织和管理。然而,`@import`的使用在前端开发社区中一直存在争议,因为它...

    CSS @import与link的具体区别

    @import通常在CSS文件的最开始部分使用,它允许将一个样式表拆分成多个文件,再通过@import语句进行导入,从而实现样式表的模块化管理。 为何使用@import呢?使用@import的一个主要原因是它允许在CSS文件中导入其他...

    引入CSS的方式有哪些?link和@import的有何区别应如何选择

    例如,在一个样式表中使用`@import`导入另一个CSS文件: ```css @import url("another-styles.css"); ``` 需要注意的是,`@import`语句必须放在CSS文件的最前面,即在所有样式规则之前。它的优势是可以在一个CSS文件...

    css中link和@import的区别分析详解

    在CSS中,除了`@import`,还有`@media`规则可以用于条件性导入样式,例如针对不同的设备类型: ```css @media print { @import "print.css"; } ``` 综合来看,`&lt;link&gt;`标签和`@import`规则各有优缺点。`&lt;link&gt;`更...

    import link的具体区别

    因此,`@import` 不建议用于关键的样式导入,特别是在页面头部。 在决定使用`@import`还是`link`时,通常推荐使用`link`,尤其是对于小型网站或那些不需要模块化CSS管理的项目。`link` 提供了更好的性能和用户体验...

    引入css样式表的四种方式介绍.rar

    然而,这种方式会阻塞页面渲染,直到所有被导入的样式表加载完成,因此在性能上不如直接使用`&lt;link&gt;`标签。 总结来说,选择合适的CSS引入方式取决于项目需求和规模。对于小项目或简单的页面,内部样式表可能足够;...

    html引入css四种引入方式示例分享

    在HTML文档中引入CSS主要有四种方式:内联样式、内部样式表、link引用外部样式表以及@import导入CSS文件。每种方式都有其适用的场景。在实际开发中,推荐使用link标签引用外部样式表,以实现样式和内容的分离,便于...

    举例说明在html中引入css的方法.docx

    本文将详细介绍四种在HTML中引入CSS的方法:行内式、内嵌式、导入式和链接式,并探讨它们的优缺点。 1. **行内式**: 行内式CSS是在HTML元素的`style`属性内直接定义样式。例如: ```html ;"&gt;这是一段红色的文字...

    『豪横,让面试官无题可问』☛第一期-HTML面试题持续更新——猛男,你会了吗?

    3.页面导入样式时,使用link和@import有什么区别?4.html的元素有哪些(包含H5)5.HTML全局属性(global attribute)有哪些(包含H5)?6.HTML5的文件离线储存怎么使用,工作原理是什么?7.简述超链接target属性的取值...

    2018最新BAT-前端必考面试(内附答案)

    - @import是CSS2.1规范提出的语法,用于在CSS文件中导入其他CSS样式。 - link在页面加载的同时被加载,而@import引用的CSS在页面加载完毕后加载。 - @import在IE5以上版本浏览器中支持,而link不存在兼容性问题。...

    CSS引入方式资料下载

    四、导入样式表 使用@import规则可以在一个CSS文件中导入另一个CSS文件的样式,常用于组合多个样式表。例如: ```css @import 'reset.css'; @import url('layout.css'); ``` 这样,`reset.css`和`layout.css`中的...

    网页中应用CSS样式的多种形式总结

    导入外部样式表是另一种将CSS代码组织在外部文件中的方法,但它是通过`@import`规则在内部样式表中实现的。这种方式在早期浏览器中可能不受支持,但现在大多数现代浏览器都能处理。例如: ```html @import ...

    web前端面试题1

    `link`和`@import`的区别在于,`link`加载时与页面同时进行,`@import`在CSS文件加载完成后执行,且`link`支持JavaScript修改样式,`@import`不行。 6. **CSS选择符与继承**:选择符包括标签选择符、类选择符、ID...

    前端常见面试考点2015

    - **`link` 与 `@import`**:`link` 是 HTML 标签,用于引入外部资源(如 CSS 文件),而 `@import` 是 CSS 规则,用于在样式表内部导入其他样式表。当页面加载时,`link` 标签引用的 CSS 会立即加载并应用,而 `@...

    HTML5+CSS3开发商业站点Chapter4.pptx

    - 缺点:不便于多页面间的样式共享和维护。 - **外部样式表**:将CSS代码保存在一个`.css`文件中,并通过`&lt;link&gt;`或`@import`方式引入。 - **链接式**: ```html …… …… ``` - **导入式**: ```...

    在HTML文档中嵌入CSS的三种常用方式

    此外,还可以使用@import CSS规则导入外部样式表,或者通过HTTP消息报头的link字段链接样式表。@import语法如下: ```html @import "mystyle.css"; /* 或者 */ @import url("mystyle.css"); ``` HTTP报头...

    CSS 控制页面样式的4种方式和优先级问题

    导入方式是使用@import 语句来导入外部的 CSS 文件,例如:@import url("style.css"); 这种方式可以使得 CSS 代码变得更加模块化,提高了代码的可读性和维护性。 CSS 优先级问题 在同一个页面中,如果有多种方式...

    媒体课件设计

    - **导入式**:使用`@import`规则导入CSS,通常用于组织多个样式表。 - **优先级**:行内样式 &gt; 内联样式 &gt; 外部链接 &gt; 导入式,相同情况下,后出现的样式覆盖前面的。 3. 体验CSS: - **从零开始**:理解CSS的...

    BAT前端面试题大全

    - `@import`是CSS提供的一种导入其他样式表的方式,只能用于导入样式。 2. **加载时机**: - 使用`link`引入的CSS会在页面加载时同步加载,即页面渲染过程中就会加载CSS。 - 使用`@import`导入的CSS则是在页面...

Global site tag (gtag.js) - Google Analytics