style样式和页面标签谁先加载

Posted 2023-05-11

参考技术A 样式。页面加载自上而下，style样式先加载，写在body标签后由于浏览器以逐行方式对html文档进行解析，当解析到尾部样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成重新渲染，在window的IE下可能会出现fouc现象。

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

1. link属于XHTML标签，除了加载CSS外，还能定义rel连接属性等作用，而@import是CSS提供的，只能用于加载CSS。

2. 页面被加载时，link会同时被加载，而@import引用的CSS会等页面被加载完再加载。

3. import是CSS 2.1提出的，只在IE5以上才能被识别，存在兼容问题，而link是XHTML标签，无兼容问题

4. link是XHTML标签,它不仅可以引入css文件，还可以引入网站图标或者设置媒体查询。

5. @import是CSS提供的语法规则，只能用来加载css。

6. @import一定要写在除@charset外的其他任何 CSS 规则之前，如果置于其它位置将会被浏览器忽略。而且，在@import之后如果存在其它样式，则@import之后的分号是必须书写，不可省略的。

7. link引入css文件，页面载入同时载入css文件，@import在页面完全载入之后载入css文件，在网络较慢情况下一开始会没有css样式。

8. link在浏览器中没有兼容问题。@import在css2.1中提出，低版本浏览器会不支持。

9. link中的css可以被javascript获取进而控制DOM，而@import不支持。