「前端杂问」「1」页面导入样式时，使用link和@import有什么区别？

此文集来自于github上的高赞项目。每天做点养生题目，有益身心。事不宜迟，立即开搞。

1）link由html提供，@import由css提供。
2）@import必须用于IE5+以上版本的浏览器。
3）link为按顺序加载，而@import为页面加载完成了过后才会去加载。
4）js可操作DOM标签实现操作link。

顺带说一句，css的4种引入方式

  <head>
    <style type="text/css">
        div {
           color: #999;
        }
    </style>
  </style>
  </head>

<div style="color: #999">test</div>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<style>
    @import url(style.css);
</style>

一般的，我们都不会去采用额外的css的@import引入css，因为一是要等待页面加载完后才会加载导入的样式，二是这样会增加很多的不必要的http请求，造成性能下降。在前端优化当中，一般都会减少静态样式，图片的http请求。css中用到的就有嵌入页面，或者打包成少量的css文件，压缩后导入。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。