CSS中link和import的加载顺序级别以及HTML加载顺序详解

来源：互联网发布：淘宝打印画骗局编辑：程序博客网时间：2024/05/16 02:06

概念：
(1)import与link的区别：
@import url(“CSS地址”) CSS专用语法
作用：@import作用于团队分工，最后合并一起
可以在.css中使用，即在一个css文件中能够引入另外的CSS文件，
或者是在标签使用，如下：

link：链接 relation：关联(可以省略)
type：类型 href： HyperText Reference超文本引用
作用：主要用来引入CSS和网页图标，指示告知搜索引擎，网页之间的关系…

(2)link与import加载顺序级别：link比import优先加载
加载顺序对于网站前台重构（优化网页结构，性能）有影响
第一：HTML，同时加载link,CSS和加载import的样式
HTML加载：1 加载HTML-DOM结构
2 CSS,JS
3 图片，多媒体
4 加载完成后onload事件触发
第二：加载顺序对网站的影响：
import：import放到底部，数据先出来，然后美化
link：CSS优先，边加载，边渲染
link无论放到哪里都是优先加载，import受代码顺序影响

用自己的CSS建议使用link，放前面
用第三方：import,js放到底部，不影响自己网站

实战讲解

<head>        <meta charset="UTF-8">        <title></title>        <style>            @import url("css/a.css");        </style>        <link rel="stylesheet" type="text/css" href="css/b.css">     </head>

在火狐浏览器中进行调试
这里写图片描述
由此可见虽然在程序中a写在b的上面，但是b先比a加载。

阅读全文

0 0