search

ForeveHG / Frontend-Daily-Interview

学习,尝试回答一些前端面试题
1 stars 0 forks source link

65. 页面导入样式时，使用link和@import有什么区别？ #66

Open ForeveHG opened 4 years ago

ForeveHG commented 4 years ago

题目来源

ForeveHG commented 4 years ago
  1. 本质：link是一个html标签，@import是css规则
  2. 使用：link可以在html页面中使用，还可以在js中创建link标签的dom元素再添加到html页面中，@import可以在.css文件中使用，在css文件中使用时必须写在文件最上方，否则无效,也可以在html中的标签中使用，在style标签使用时，在权重相同的情况下，后面的规则覆盖前面的。
  3. 加载：link引入的样式文件在页面加载时同时加载，@import的css样式在页面加载完成后才会加载，在网速慢的情况下会出现最初没有css样式，闪烁后出现样式的情况（参考上面题目来源中的回答）
  4. 性能：使用link，不要使用@import
ForeveHG commented 4 years ago

查漏补缺发现link和@import都是可以直接应用媒体查询的条件

  1. 在css文件中使用@import或者在html文件中使用