link 和 @import 的区别是什么?
2024-09-30 04:24:06
link语法结构:
<link href="url" rel="stylesheet" type="text/css">
@import语法结构:
@import url 多用于css文件中,把多个样式表导入到一个样式表中,在页面里面只需要导入一个样式表即可,便于修改和扩展
1.在html中
<style>
@import url
</style>
2.在css中
@import url
link 和 @import 的区别:
1.语法结构的不同
2.本质不同
属于标签,只能放入html源码里进行使用,而@import可以看作为css样式,可以引入css样式(属于html标签,而@import是css提供的)
3.页面加载
页面加载时,会被同时被加载,而@import引用的css会等到页面被加载完的时候再加载
4.兼容性。
@import只有在IE5以上才能被识别,而是html标签,无兼容问题
5.优先级
不管是还是@import ,优先级按加载顺序为参考,后加载的优先级高
6.可控性
使用js控制dom改变样式只能使用标签
为什么要避免使用css @import
在web前端优化的建议中,不建议使用css @import 因为这种方式加载css相当于把css放在了底部,因此@import会在网页加载中增加延迟
至于为什么会增加延迟是因为使用@import引用的文件只有字引用它的那个css文件被下载、解析后,浏览器才会知道还有另一个css需要下载,这时才会去进行想在,然后再解析、构建render tree等一系列操作。因此css @import引起的css解析延迟会加长页面留白期,所以要尽量避免css @import,采用标签的方式引入
最新文章
- CMD命令小结
- c# base关键的理解
- tensorflow1
- 一个4节点Hadoop集群的配置示例
- MFC编程入门之六(对话框:创建对话框模板和修改对话框属性)
- 查看ubuntu文件目录的大小和文件夹包含的文件数 zT
- 【JavaScript DOM编程艺术(第二版)】笔记
- Apache Hadoop RPC Authentication 安全绕过漏洞
- BZOJ 1076: [SCOI2008]奖励关(概率+dp)
- 解决CenOS 7下启动ActiveMQ时报错
- 门面(Facade)模式
- 浅谈python 复制(深拷贝,浅拷贝)
- VS2015远程调试
- 使用IIS Server Farms搭建应用服务负载均衡
- PyQuery详解
- Windows平台最方便最易用的法语输入法
- python 历险记(四)— python 中常用的 json 操作
- 第 8 章 容器网络 - 058 - flannel 概述
- Java开发中常用的设计模式(一)---工厂模式
- JavaScript常用模块
热门文章
- 洛谷 P4206 [NOI2005]聪聪与可可 题解
- axios跨域访问eggjs的坑egg-cors egg-passport passport-local session传递问题
- 单细胞转录组测序技术(scRNA-seq)及细胞分离技术分类汇总
- zookeeper的未授权访问漏洞解决
- Linux系统卡死后紧急处理
- 装系统 ---------- 了解 UEFI与Legacy、硬盘分区MBR和GPT
- javaweb应用程序概述
- 02 (OC)* ViewController 的声明周期
- 【Unity与Android】01-Unity与Android交互通信的简易实现
- Docker学习之Dockerfile