前端一些概念知识及参考链接
1、为什么浏览器解析 css 选择器是从右到左的
参考:https://github.com/zwwill/blog/issues/2
2、伪元素和伪类的单冒号和双冒号
2.1、伪类(:)
伪类是用于定义元素特殊状态的。
示例:
//未访问的连接 a:link{ color:black; }; //已访问的连接 a:visited{ color:gray; }; //鼠标悬浮在链接上 a:hover{ color:red; }; //已选择的链接 a:active{ color:blue; };
2.2、伪元素(::)
CSS共右5个伪元素,分别是:
- ::before 在元素之前插入内容
- ::after 在元素之后插入内容
- ::first-letter 选取首个字母
- ::first-line 选取元素首行
- ::selection 匹配被用户选取的部分
3、重排(Reflow)和重绘(Repaint)
当渲染树中的一些元素需要更新属性,而这些属性只是影响元素的外观、风格,而不会影响布局的操作,比如 background -color,我们将这样的操作称为重绘。
当渲染树中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作,会影响到布局的操作,这样 的操作我们称为重排。
任何会改变元素几何信息(元素的位置和尺寸大小)的操作,都会触发重排。
添加或者删除可见的 DOM 元素;
元素尺寸改变——边距、填充、边框、宽度和高度
内容变化,比如用户在 input 框中输入文字
浏览器窗口尺寸改变——resize事件发生时
计算 offsetWidth 和 offsetHeight 属性
设置 style 属性的值
当你修改网页的默认字体时。
重排必定会引发重绘,但重绘不一定会引发重排。重排所需的成本比重绘高的多,改变父节点里的子节点很可能会导致父节点的一系列重排。
3.1、如何避免重排和重绘
避免措施:
- 使用 visibility 代替 display:hidden、none。
- 使用 absolute 或 fixed 脱离文档流。
- 使用 class 去修改样式,减少直接操作 dom 元素。
- 尽量减少 table使用,table 属性的变化会直接导致布局重排或者重绘。
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布局规则
BFC,即块级格式化上下文(Block Formatting Context,简称BFC),独立渲染区域,不会影响边界外的元素。可以理解为按照块级元素从上到下,行内元素从左到右的规则布局。
拥有 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.1、拥有 BFC 元素具有的特性
BFC 元素的特性如下:
- 内部的 Box 会在垂直方向,一个接一个地放置。
- 盒子垂直方向的距离由margin决定。同一个BFC的两个相邻盒子margin会重叠
- BFC中,margin-left会触碰到border-left(对于从左至右的方式,反之)
- BFC 区域不会与浮动的盒子产生交集,而是紧贴边缘浮动
- 计算BFC高度时,会自动检测浮动的盒子高度
6.2、拥有BFC的元素
满足下列条件之一该元素即拥有 BFC 特性:
- 根元素 html
- 脱离文档流:float 属性不为 none
- position为 absolute 或 fixed
- display 为 inline-block, table-cell, table-caption, flex, inline-flex
- overflow 不为 visible
6.3、BFC的作用
- 解决外边距合并问题
- 解决因子元素浮动而父元素高度塌陷的问题。父元素设置为BFC可以清除子元素的浮动(最常用overflow: hidden,在IE6上需加上*zoom:1),因为计算BFC高度时会检测浮动子盒子高度
- 右侧盒子自适应:BFC区域不会与浮动盒子产生交集,而是紧贴浮动边缘
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把所有语言都统一到一套编码里,这样就不会再有乱码问题了。(乱码问题主要是使用的编码不同导致)
参考:https://www.cnblogs.com/angelye/p/8249711.html#top