link 与 @import 的区别

  1. 从属关系区别

    @import 是 **CSS 提供的语法规则**，只有导入样式表的作用；link 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等

  1. 加载顺序区别

    加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载。

  1. 兼容性区别

    @import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标签作为 HTML 元素，不存在兼容性问题。

  1. DOM 可控性区别

    可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import 的方式插入样式。

开发中为什么要初始化 css 样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。

CSS 优化、提高性能的方法有哪些

  • 尽量将样式写在单独的 css 文件里面，在 head 元素中引用 将代码写成单独的 css 文件有几点好处： 1. 内容和样式分离，易于管理和维护 2. 减少页面体积 3. css 文件可以被缓存、重用，维护成本降低
  • 不使用@import
  • 避免使用复杂的选择器，层级越少越好 建议选择器的嵌套最好不要超过三层，比如：
  • 精简页面的样式文件，去掉不用的样式
  • 利用 CSS 继承减少代码量
  • 避免！important，可以选择其他选择器