链接和@import有什么区别？

@importurl("./myCss.css");写的比较早在真正的前端开发中，我们很少写内联样式和嵌入样式，一般都是指外部样式。刚开始学习的时候，外部样式表都是通过链接导入的，但是慢慢学多了，发现@import也可以引入样式。然后也是外部样式的介绍，两者有什么区别呢，请跟着我一起了解下link和@import的区别吧！区别@importurl("./myCss.css");这是两种引用方式的共同用法，可以明显看出1.隶属关系：link是一个html标签，不仅可以加载CSS文件，还可以定义RSS,rel连接属性等；而@import是css的语法，只引入样式表。2、加载顺序：页面加载时，链接和html会同时加载；@import引入的CSS将在页面加载后加载。3、兼容性：@import是CSS2.1特有的语法，所以只能被IE5及以上识别；而link是一个HTML标签，所以不存在兼容性问题。4、DOM：javascript只能控制dom改变link标签引入的样式，而@import的样式不受dom控制。5.link方式的样式权重高于@import方式。（如果你对权重不是很熟悉，可以看我之前的文章）@import优化写法@import'style.css'//WindowsIE4/NS4,MacOSXIE5,MacintoshIE4/IE5/NS4不识别@import"style.css"//WindowsIE4/NS4,MacintoshIE4/NS4不识别@importurl(style.css)//WindowsNS4,MacintoshNS4不识别@importurl('style.css')//WindowsNS4,MacOSXIE5,MacintoshIE4/IE5/NS4不识别@importurl("style.css")//WindowsNS4,MacintoshNS4不识别@importurl(style.css)和@importurl("style.css")是最佳选择，具有最兼容的浏览器。从字节优化的角度来看，@importurl(style.css)是最推荐的。结论@import依赖css，存在一定的兼容性问题。根据浏览器渲染机制，dom树渲染完成后才会渲染，不能被js动态修改。相比之下，link兼容性更好，dom元素的样式可以被js动态修改，而且由于link的权重高于@import，@import适合引入公共基础样式或者第三方样式，而link适合自己写的需要动态修改的风格。经过实际使用，相信大家在实际编写和调整风格的时候，一定能够如鱼得水。结语以上就是本文的全部内容，如有不妥之处还望指正。感谢阅读，觉得有用请点赞/转发。前端深入系列是一个踩坑系列。是对自己在工作学习中遇到的问题和踩过的坑的探索和总结。在此记录和分享，也是对自己技术的反思和质疑。.前路漫漫，陷阱不断。前端深入系列持续更新中……以上为2019-10-08。