11、css3新增了哪些新特性？

自己回答：flex、gird、transfrom、animation

标准回答：

css3新增的选择器有如下：

 - 层次选择器（p~ul）

	选择前面有p元素的每个ul元素

 - 伪类选择器

	:first-of-type 表示一组同级元素中其类型的第一个元素
	:last-of-type 表示一组同级元素中其类型的最后一个元素
	:only-of-type 表示没有同类型兄弟元素的元素
	:only-child 表示没有任何兄弟的元素
	:nth-child(n)根据元素在一组同级中的位置匹配元素
	:nth-last-of-type(n)匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从未尾开始计数
	:last-child 表示一组兄弟元素中的最后一个元素
	:root 设置HTML文档
	:empty 指定空的元素
	:enabled 选择可用元素
	:disabled 选择被禁用元素
	:checked 选择选中的元素
	:not(selector)选择与<selector> 不匹配的所有元素

 - 属性选择器

	 [attribute*=value]:选择attribute属性值包含value的所有元素
	 [attribute^=value]:选择attribute属性开头为value的所有元素
	 [attribute$=value]:选择attribute属性结尾为value的所有元素

css3新增的样式

• 边框
• border-radius
• box-shadow
• border-image
• 背景
  • background-clip:背景画区，从border/padding/content区域开始
  • background-origin:以border/padding/content的左上角
  • background-size:背景图片大小，展示形式
  • background-break:
    • background-break: continuous; 默认值。忽略盒之间的距离(也就是像元素没有分成多个盒子依然是一个整体一样)
    • background-break: bounding-box; 把盒之间的距离计算在内;
    • background-break:each-box;为每个盒子单独重绘背景
• 文字
  • word-wrap
  • text-overflow
  • text-shadow
  • text-decoration
• 颜色
  • rgba
  • hala

新增动画

• transtion 过渡
• transform 转换
• animation 动画

新增颜色渐变

• linear-gradient:线性渐变
• radial-gradient:径向渐变

其他

• flex
• grid
• 多列布局
• 媒体查询
• 混合模式

12、css3动画有哪些？

常见的动画效果很多，如平移、旋转、缩放等，复杂动画则是多个简单动画的组合

• transtion 实现渐变动画
• transform 转变动画
• animation 实现自定义动画

transtion

属性如下
property:填写需要变化的css属性
duration:完成过渡效果需要的时间单位(s或者ms)
timing-function:完成效果的速度曲线
delay:动画效果的延迟触发时间

transform

• translate：位移
• scale：缩放
• rotate：旋转
• skew：倾斜

animation
animation-duration：指定动画完成一个周期需要的时间
animation-timing-function：指定动画计时函数，动画的速度曲线
animation-delay：动画延迟时间
animation-iteration-count：动画播放次数
animation-direction：指定动画播放的方向
animation-fill-mode：动画填充模式
animation-play-state：动画播放状态，正在运行或暂停
animation-name：指定@keyframes动画的名称
通过 @keyframes 定义关键帧
因此，如果我们想要让元素旋转一圈，只需要定义开始和结束两帧即可：

@keyframes rotate{
 from{
    transform: rotate(0deg);
 }
 to{
    transform: rotate(360deg);
 }

13、介绍一下grid网格布局

自己回答：grid打破原来行布局，变成行列布局，一个块由于行列坐标，以及行列宽高决定
标准回答：

Grid 布局是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局，也是唯一的二维布局方案，利用grid布局可以很轻松的实现很多的网页布局

gird布局很强大，采用网格布局的区域，称为"容器"（container）。容器内部子元素，称为"项目"（item），即container -> item

注意：Grid 布局只对项目生效，项目只能是容器的一级子元素，不包含项目的子元素

grid相关属性

Grid 布局属性可以分为两大类：

• 容器属性
• 项目属性

容器属性如下：

1、display 属性

文章开头讲到，在元素上设置display：grid 或 display：inline-grid 来创建一个网格容器

• display：grid 则该容器是一个块级元素
• display: inline-grid 则容器元素为行内元素

2、grid-template-columns 属性，grid-template-rows 属性
grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高

.wrapper {
  display: grid;
  /*  声明了三列，宽度分别为 200px 200px 200px */
  grid-template-columns: 200px 200px 200px;
  grid-gap: 5px;
  /*  声明了两行，行高分别为 50px 50px  */
  grid-template-rows: 50px 50px;
}

3、grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性

grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式

grid-row-gap: 10px 表示行间距是 10px
grid-column-gap: 20px 表示列间距是 20px
grid-gap: 10px 20px 等同上述两个属性

4、grid-template-areas 属性
用于定义区域，一个区域由一个或者多个单元格组成

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。

多个单元格合并成一个区域的写法如下

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';
 

上面代码将9个单元格分成a、b、c三个区域

如果某些区域不需要利用，则使用"点"（.）表示

5、grid-auto-flow 属性

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。
顺序就是由grid-auto-flow决定，默认为行，代表"先行后列"，即先填满第一行，再开始放入第二行

6、justify-items 属性， align-items 属性， place-items 属性

justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下），place-items属性是align-items属性和justify-items属性的合并简写形式

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

7、justify-content 属性， align-content 属性， place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下），place-content属性是合并简写形式

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

8、grid-auto-columns 属性和 grid-auto-rows 属性

有时候，一些项目的指定位置，在现有网格的外部，就会产生显示网格和隐式网格

比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。超出的部分就是隐式网格

而grid-auto-rows与grid-auto-columns就是专门用于指定隐式网格的宽高

项目属性如下：

1、grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性

指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置

grid-column-start 属性：左边框所在的垂直网格线
grid-column-end 属性：右边框所在的垂直网格线
grid-row-start 属性：上边框所在的水平网格线
grid-row-end 属性：下边框所在的水平网格线

举例

<style>
    #container{
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
    }
    .item-1 {
        grid-column-start: 2;
        grid-column-end: 4;
    }
</style>

<div id="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
</div>

通过设置grid-column属性，指定1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线

2、grid-area 属性

grid-area 属性指定项目放在哪一个区域

.item-1 {
  grid-area: e;
}

意思为将1号项目位于e区域

与上述讲到的grid-template-areas搭配使用

3、justify-self 属性、align-self 属性以及 place-self 属性

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

这两个属性都可以取下面四个值。

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）

14、说说flexbox（弹性盒布局模型），以及使用场景？

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局

采用Flex布局的元素，称为flex容器container

它的所有子元素自动成为容器成员，称为flex项目item

容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向

每根轴都有起点和终点，这对于元素的对齐非常重要

关于flex常用的属性，我们可以划分为

• 容器属性
• 容器成员属性

容器属性有：

• flex-direction：决定主轴的方向(即项目的排列方向)
• flex-wrap：决定容器内项目是否可换行
• flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
• justify-content：定义了项目在主轴上的对齐方式
• align-items：定义项目在交叉轴上如何对齐
• align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

容器成员属性如下：

• order：定义项目的排列顺序。数值越小，排列越靠前，默认为0
• flex-grow：容器宽度有空余时，根据flex-grow来决定定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
• flex-shrink：定义了项目的缩小比例（容器宽度<元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小
• flex-basis：设置的是元素在主轴上的初始尺寸，默认为auto
• flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

应用场景：能够通过flex简单粗暴的实现元素水平垂直方向的居中，以及在两栏三栏自适应布局中通过flex完成

15、说说设备像素、css像素、设备独立像素、dpr、ppi之间的区别？

• 设备像素：设备像素是物理屏幕上的最小可见单元，用于实际渲染图像或文本。它表示硬件像素点的数量，通常用于描述屏幕的分辨率。设备像素的数量确定了屏幕的细节和清晰度。
• CSS 像素：CSS 像素是在 Web 开发中使用的抽象单位，用于定义网页上的布局和样式。它是一个相对单位，不直接对应物理屏幕上的像素。CSS
  像素可以通过缩放和变换来适应不同的设备和分辨率。
• 设备独立像素 (DIP)：设备独立像素是一种逻辑像素单位，用于将 CSS 像素与实际渲染的设备像素进行关联。DIP 可以看作是在 CSS 像素与设备像素之间建立了一个转换层。在标准的 96 DPI（dots per inch）的情况下，1 DIP 等于 1 CSS
  像素。
• 设备像素比 (DPR)：设备像素比是设备的物理像素与 CSS 像素之间的比例关系。它表示在一个 CSS 像素中有多少个设备像素。例如，如果设备像素比为 2，那么 1 CSS 像素将对应 2 个设备像素。DPR 可以用来判断屏幕的高清程度，即
  Retina 屏幕。
• 每英寸像素密度 (PPI)：每英寸像素密度表示屏幕上每英寸区域内的像素数量。它是一个描述屏幕分辨率的物理指标。更高的 PPI 值通常意味着更高的像素密度和更细腻的图像显示。

总结：

• 设备像素是物理屏幕上的最小可见单元。
• CSS 像素是 Web 开发中使用的抽象单位，用于布局和样式。
• 设备独立像素是逻辑像素单位，建立了 CSS 像素与设备像素之间的转换关系。
• 设备像素比是设备的物理像素与 CSS 像素之间的比例关系。
• 每英寸像素密度表示屏幕上每英寸区域内的像素数量，反映了屏幕的分辨率和显示质量。

16、说说em/px/rem/vh/vw区别？

自己回答：
em：相对父级字体像素的倍数大小
px：绝对像素，css里的固定像素单位
rem：相对根元素字体像素的倍数大小
vh：页面高度的百分比单位
vw：页面宽度的百分比单位

标准回答：
em：相对单位，基准点为父节点字体的大小，如果自身定义了 font-size，按自身来计算，整个页面内1em不是一个固定的值
px：绝对单位，页面按精确像素展示
rem：相对单位，可理解为 root em，相对根节点 html 的字体大小来计算
vh：根据可视窗口的高度，分成100份，100vh表示满高，50vh表示一半高
vw：根据可视窗口的宽度，分成100份，100vh表示满宽，50vh表示一半宽

17、让Chrome支持小于12px的文字方式有哪些？区别？

自己回答：

• 设置12px后，缩放整体

标准回答：
背景：chrome中文版会默认设定页面的最小字号是12px

解决方案一：

更改谷歌浏览器的基础设定12px值，用来解决开发人员的调试问题

解决方案二：

使用属性设置，使用较为广泛

优点：单行、多行文本都可使用
缺点：只是视觉效果变小，并不会改变盒子的实际占位，在对齐其他盒子时不太友好

缩放属性：

• zoom
• -webkit-transform:scale()

其他属性-webkit-text-size-adjust:none //该属性用来设定文字大小是否根据设备（浏览器）来自动调整显示大小

-webkit-text-size-adjust:none 属性值：

• percentage：字体显示的大小；
• auto：默认，字体大小会根据设备/浏览器来自动调整
• none：字体大小不会自动调整

这个属性设置后会有一个问题，当放大网页时，一般情况下字体也会随着变大，设置了以上代码后，字体只会显示当前设置的字体大小，不会随着网页放大而放大。所以不建议全局应用该属性，而是单独对某一属性使用，而且chrome 27后取消了这个属性的支持

解决方案三：

使用SVG 矢量图设置text
优点： 1px-12px任意字号均可设置，可对设计界面进行对齐调整
缺点：不支持多行文本

18、怎么理解回流和重绘？什么场景下会触发？

自己回答：

• 回流
• 重绘：由于样式变化，引起的页面局部变化，不会有位置的改变

标准回答：

回流（重排）：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

具体的浏览器解析渲染机制如下所示：

• 解析HTML，生成DOM树，解析CSS，生成CSSOM树

• 将DOM树和CSSOM树结合，生成渲染树(Render Tree)

• Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）

• Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素

• Display:将像素发送给GPU，展示在页面上

在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变

当我们对 DOM 的修改引发了 DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来

当我们对 DOM的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘

什么场景下会触发？

回流触发时机：

• 添加或删除可见的DOM元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
• 页面一开始渲染的时候（这避免不了）
• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

还有一些容易被忽略的操作：获取一些特定属性的值

offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

这些属性有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流

除此还包括getComputedStyle方法，原理是一样的

重绘触发时机：

触发回流一定会触发重绘

可以把页面理解为一个黑板，黑板上有一朵画好的小花。现在我们要把这朵从左边移到了右边，那我们要先确定好右边的具体位置，画好形状（回流），再画上它原有的颜色（重绘）

除此之外还有一些其他引起重绘行为：

• 颜色的修改
• 文本方向的修改
• 阴影的修改

浏览器优化机制

由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列

当你获取布局信息的操作的时候，会强制队列刷新，包括前面讲到的offsetTop等方法都会返回最新的数据

因此浏览器不得不清空队列，触发回流重绘来返回正确的值

19、说说对css预编语言的理解，有哪些区别？

一、是什么

Css 作为一门标记性语言，语法相对简单，对使用者的要求较低，但同时也带来一些问题

需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 Css 编写经验而很难写出组织良好且易于维护的 Css 代码

Css预处理器便是针对上述问题的解决方案

预处理语言

扩充了 Css 语言，增加了诸如变量、混合（mixin）、函数等功能，让 Css 更易维护、方便

本质上，预处理是Css的超集

包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 Css 文件

二、有哪些

Css预编译语言在前端里面有三大优秀的预编处理器，分别是：

• sass
• less
• stylus

三、区别

虽然各种预处理器功能强大，但使用最多的，还是以下特性：

• 变量（variables）
• 作用域（scope）
• 代码混合（ mixins）
• 嵌套（nested rules）
• 代码模块化（Modules）

因此，下面就展开这些方面的区别

基本使用
less和scss

.box {
  display: block;
}

sass

.box
  display: block

stylus

.box
  display: block

嵌套

三者的嵌套语法都是一致的，连引用父级选择器的标记 & 也相同

区别只是 Sass 和 Stylus 可以用没有大括号的方式书写
less

.a {
  &.b {
    color: red;
  }
}

变量

变量无疑为 Css 增加了一种有效的复用方式，减少了原来在 Css 中无法避免的重复

less声明的变量必须以@开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号:分隔开

@red: #c00;

strong {
  color: @red;
}

sass声明的变量跟less十分的相似，只是变量名前面使用$开头

$red: #c00;

strong {
  color: $red;
}

stylus声明的变量没有任何的限定，可以使用$开头，结尾的分号;可有可无，但变量与变量值之间需要使用=

在stylus中我们不建议使用@符号开头声明变量

red = #c00

strong
  color: red

作用域

Css 预编译器把变量赋予作用域，也就是存在生命周期。就像 js 一样，它会先从局部作用域查找变量，依次向上级作用域查找

sass中不存在全局变量

$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
} 

编译后

.scoped {
  color:white;/*是白色*/
  background-color:blue;
}
.unscoped {
  color:white;/*白色（无全局变量概念）*/
} 

所以，在sass中最好不要定义相同的变量名

less与stylus的作用域跟javascript十分的相似，首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止

@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
} 

编译后：

.scoped {
  color:white;/*白色（调用了局部变量）*/
  background-color:blue;
}
.unscoped {
  color:black;/*黑色（调用了全局变量）*/
} 

混入

混入（mixin）应该说是预处理器最精髓的功能之一了，简单点来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用

可以在Mixins中定义变量或者默认参数

在less中，混合的用法是指将定义好的ClassA中引入另一个已经定义的Class，也能使用够传递参数，参数变量为@声明

.alert {
  font-weight: 700;
}

.highlight(@color: red) {
  font-size: 1.2em;
  color: @color;
}

.heads-up {
  .alert;
  .highlight(red);
}

编译后

.alert {
  font-weight: 700;
}
.heads-up {
  font-weight: 700;
  font-size: 1.2em;
  color: red;
}

Sass声明mixins时需要使用@mixinn，后面紧跟mixin的名，也可以设置参数，参数名为变量$声明的形式

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

stylus中的混合和前两款Css预处理器语言的混合略有不同，他可以不使用任何符号，就是直接声明Mixins名，然后在定义参数和默认值之间用等号（=）来连接

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* 调用error mixins */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* 调用error mixins，并将参数$borderWidth的值指定为5px */
} 

代码模块化

模块化就是将Css代码分成一个个模块

scss、less、stylus三者的使用方法都如下所示

@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';

20、如果要做优化，css提高性能的方法有哪些？

自己回答：

• 字体库
• 精灵图

标准回答：

• 内联首屏关键CSS
• 异步加载CSS
• 资源压缩
• 合理使用选择器
• 减少使用昂贵的属性
• 不要使用@import

内联首屏关键CSS

在打开一个页面，页面首要内容出现在屏幕的时间影响着用户的体验，而通过内联css关键代码能够使浏览器在下载完html后就能立刻渲染

而如果外部引用css代码，在解析html结构过程中遇到外部css文件，才会开始下载css代码，再渲染

所以，CSS内联使用使渲染时间提前

注意：但是较大的css代码并不合适内联（初始拥塞窗口、没有缓存），而其余代码则采取外部引用方式

异步加载CSS

在CSS文件请求、下载、解析完成之前，CSS会阻塞渲染，浏览器将不会渲染任何已处理的内容

前面加载内联代码后，后面的外部引用css则没必要阻塞浏览器渲染。这时候就可以采取异步加载的方案，主要有如下：

• 使用javascript将link标签插到head标签最后
• 设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将media的值设为screen或all，从而让浏览器开始解析CSS

<link rel="stylesheet" href="mystyles.css" media="noexist" οnlοad="this.media='all'">

• 通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet

 <link rel="alternate stylesheet" href="mystyles.css" οnlοad="this.rel='stylesheet'">

资源压缩

利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间

合理使用选择器

css匹配的规则是从右往左开始匹配，例如#markdown .content h3匹配规则如下：

• 先找到h3标签元素
• 然后去除祖先不是.content的元素
• 最后去除祖先不是#markdown的元素

如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高

所以我们在编写选择器的时候，可以遵循以下规则：

• 不要嵌套使用过多复杂选择器，最好不要三层以上
• 使用id选择器就没必要再进行嵌套
• 通配符和属性选择器效率最低，避免使用

减少使用昂贵的属性

在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能

不要使用@import

css样式文件有两种引入方式，一种是link元素，另一种是@import

@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时

而且多个@import可能会导致下载顺序紊乱

比如一个css文件index.css包含了以下内容：@import url(“reset.css”)

那么浏览器就必须先把index.css下载、解析和执行后，才下载、解析和执行第二个文件reset.css

其他

• 减少重排操作，以及减少不必要的重绘
• 了解哪些属性可以继承而来，避免对这些属性重复编写
• cssSprite，合成所有icon图片，用宽高加上backgroud-position的背景图方式显现出我们要的icon图，减少了http请求
• 把小的icon图片转成base64编码
• CSS3动画或者过渡尽量使用transform和opacity来实现动画，不要使用left和top属性

总结：css实现性能的方式可以从选择器嵌套、属性特性、减少http这三面考虑，同时还要注意css代码的加载顺序