1、为什么浏览器解析 css 选择器是从右到左的
参考：https://github.com/zwwill/blog/issues/2
2、伪元素和伪类的单冒号和双冒号
参考：https://www.jianshu.com/p/ebb86a086a87
3、重排和重绘
当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而发生改变时，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，这就是重排。完成重排后，浏览器会重新绘制受影响的部分到屏幕中，该过程被称为重绘。
重排必定会引发重绘，但重绘不一定会引发重排。
参考：https://www.cnblogs.com/zichi/p/4720000.html、https://www.cnblogs.com/cencenyue/p/7646718.html
4、JS操作动画和css动画的区别
参考：https://blog.csdn.net/qinlulucsdn/article/details/80664183、https://www.cnblogs.com/simba-lkj/p/6139066.html
5、CSS选择器优先级
!important > 行内样式 > ID选择器 > 类 = 伪类 = 属性选择器 > 标签 = 伪元素 > 通配符 > 继承
为什么CSS是从右到左解析的，参考：http://www.cnblogs.com/zhaodongyu/p/3341080.html
6、BFC布局规则
块格式化上下文（Block Formatting Context，简称BFC），可以理解为块级元素中的块级子元素的布局规则。只有块级子元素参与。
6.1、BFC布局规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
属于同一个BFC内的块级元素的布局符合 BFC 布局规则，BFC 元素内的块级子元素也可以是一个 BFC，该子元素还是会符合BFC父元素的布局规则，但该子元素里面的子元素即子子元素就和外面的BFC的子元素不属于同一个BFC了。
下面的第一个P元素和第二个P元素不属于同一个 BFC 内：
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>
.wrap {
overflow: hidden;
}
6.2、拥有BFC的元素
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
6.3、BFC的作用
6.3.1、实现自适应两栏布局
利用BFC布局规则第四条：BFC的区域不会与float box重叠。可以实现自适应两栏布局
6.3.2、清除内部浮动
根据BFC布局规则第六条：计算BFC的高度时，浮动元素也参与计算
6.3.3、防止垂直 margin 重叠
根据BFC布局规则第二条：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。通过使两个块级元素在不同的 BFC 内可以解决margin 重叠的问题。
详情参考：https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
7、浏览器前缀
参考：https://blog.csdn.net/jlj_cs/article/details/44204863
8、css性能优化
8.1、慎重选择高消耗的样式
高消耗属性在绘制前需要浏览器进行大量计算，比如：box-shadows、border-radius、transparency、transforms、CSS filters（性能杀手）
8.2、避免频繁重排
当发生重排的时候，浏览器需要重新计算布局位置与大小，常见的重排元素：width、height、padding、margin、display、border-width、position、top、left、right、bottom、
8.3、不泛滥使用float
Float在渲染时计算量比较大，尽量减少使用。
8.4、合理使用选择器
CSS选择器的匹配是从右向左进行的，所以有些看似很高效的选择器实际对性能消耗很高，比如：
#header>a {font-size: bold} 子选择器，浏览器必须遍历页面中所有的 a 元素并且确定其父元素的 id 是否为 header 。
#header a {font-size: bold} 后代选择器开销更大，在遍历页面中所有 a 元素后还需向其上级遍历直到根节点。
所以应该合理使用选择器：
- 保持简单，不要使用嵌套过多过于复杂的选择器。
- 通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用。
- 避免使用标签或 class 选择器限制 id 选择器
- 不要为了追求速度而放弃可读性与可维护性。
8.5、通过CSS继承减少代码量
常见的可以继承的属性比如：color，字体font系列，visibility，文本系列text-indent、text-align等等。
不可继承的比如：position，display，float，background等
8.6、使用link加载样式表，而不是@import方式
使用@import引入CSS会影响浏览器对样式表的并行下载。使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。这就导致浏览器无法并行下载所需的样式文件。
8.7、精简样式文件，删除没用样式
参考：http://baijiahao.baidu.com/s?id=1603253323416106525&wfr=spider&for=pc
9、ASCII 、UTF-8、Unicode编码的区别
ASCII 编码是计算机一开始使用的编码，用一个字节来表示一个字符。由于计算机是美国人发明的，因此，最早只有127个字符被编码到计算机里，也就是大小写英文字母、数字和一些符号。
后面为了统一各个国家的使用的编码规则，Unicode应运而生。Unicode把所有语言都统一到一套编码里，这样就不会再有乱码问题了。（乱码问题主要是使用的编码不同导致）