刷题总结9.6

最新推荐文章于 2023-04-23 20:00:00 发布

Tarafireworks

最新推荐文章于 2023-04-23 20:00:00 发布

阅读量500

点赞数

分类专栏：前端文章标签： html5 css html

本文链接：https://blog.csdn.net/weixin_44760073/article/details/120114962

版权

前端专栏收录该内容

82 篇文章 1 订阅

订阅专栏

list-style-type 用于设置不同列表列表项的样式。

无序列表常使用：

ul {
    list-style-type:circle;  /* 每一项前都是圆圈 */
}
ul {
    list-style-type:square; /* 每一项前都是正方形 */
}

有序列表也可以用 list-style-type 来设置列表项

ol {
    list-style-type:upper-roman;  /* 每一项前面都是大写罗马数字 */
}
ol {
    list-style-type:lower-alpha; /* 每一项前都是小写字母 */
}

有序列表的小写字母如果大于26项再次从 'aa’开始

滥用硬件加速会导致严重性能问题

在这里插入图片描述

A在Blink和WebKit的浏览器中，某个元素具有3D或透视变换（perspective transform）的CSS属性，会让浏览器创建单独的图层。
浏览器渲染页面时会根据DOM通过不同的图层来叠加呈现出页面,对于某些属性如3D属性、硬件加速的<video>等都会创建新图层

B我们平常会使用left和top属性来修改元素的位置，但left和top会触发重布局，取而代之的更好方法是使用translate，这个不会触发重布局。
盒子属性、内部结构属性、定位属性、浮动等.这些可能修改节点的大小和位置,都会触发重布局.

C滥用硬件加速会导致严重性能问题，因为它增加了内存使用，并且它会导致移动端电池寿命减少。

D解决浏览器渲染的性能问题时，首要目标就是要避免层的重绘和重排

Translate不会引发重排

因为 GPU 进程会为其开启一个新的复合图层，不会影响默认复合图层（就是普通文档流），所以并不会影响周边的 DOM 结构，而属性的改变也会交给 GPU 处理，不会进行重排。

使 GPU 进程开启一个新的复合图层的方式还有 3D 动画，过渡动画，以及 opacity 属性，还有一些标签，这些都可以创建新的复合图层。

这些方式叫做硬件加速方式。

你可以想象成新的复合图层和默认复合图层是两幅画，相互独立，不会彼此影响。

降低重排的方式：要么减少次数，要么降低影响范围，创建新的复合图层就是第二种优化方式。

绝对布局虽然脱离了文档流，但不会创建新的复合图层，因此当绝对布局改变时，不会影响普通文档流的 render tree，但是依然会绘制整个默认复合图层，对普通文档流是有影响的(这里好像是只会触发自身的重排和重绘，但不会使其他元素发生重排)。

如果你要使用硬件加速方式降低重排的影响，请不要过度使用.

创建新的复合图层是有额外消耗的，比如更多的内存消耗，并且在使用硬件加速方式时，配合 z-index 一起使用，尽可能使新的复合图层的元素层级等级最高。

图层

1.浏览器在渲染一个页面时，会将页面分为很多个图层，每个图层上有多个节点，在渲染dom时，经历以下过程:

DOM分割图层
图层节点样式重计算(Recalculate style)
为每个节点生成图形和位置 (Layout，回流/重排/重布局)
将节点绘制并填充到图层中(Paint Setup和Paint, 重绘)
图层作为纹理上传到CPU处理
结合多个图层到页面上生成最终屏幕图像(图层重组)

2.触发创建单独图层

①3D或透视变换(perspective transform) CSS属性
②opacity做css动画或使用一个动画webkit变换的元素
③z-index在复合层上面渲染的元素
④拥有3D上下文或加速2D上下文的<canvas>节点
⑤使用加速视频解码的<video>节点

transform和opacity改变的仅是图层的结合不会触发回流和重绘：

opactity是GPU在绘画时简单的降低了之前已经画好的纹理的alpha值来达到效果，故不会触发回流和重绘
transform可以修改节点位置、旋转、大小等，使用left和top会触发重布局，修改时代价很大，故取而代之使用translate会提高性能

translate可以让浏览器创建图层，可以消除在动画开始之前的图层创建时间，使得动画尽快开始，不会随着抗锯齿而导出突变，但是创建过多的图层会导致崩溃所以要结合实际情况考虑，节制！

3.触发回流属性(修改节点大小和位置):
盒子模型相关属性、定位属性及浮动、节点内部文本结构(大小、排列方式)属性

4.触发重绘属性(节点内部渲染效果):
color、border-style、border-radius、visibility、text-decoration、background相关、outline相关、box-shadow

5.关于动画:
JS动画:
缺点：JS在浏览器的主线程中运行，其中还有很多需要运行的JS、样式计算、布局、绘制对其进行干扰，会导致线程堵塞(掉帧)
优点: 动画可控制

6.CSS动画:
缺点：缺乏对动画的控制
优点: 优化性能好，在主线程之外运行(丝滑)

CSS opacity 属性

设置 div 元素的不透明级别；

div
{
opacity:0.5;
}

使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。

css 中可继承的属性

继承就是指子节点默认使用父节点的样式属性。
不可继承的属性太多了不要背，记住可以继承的属性有哪些就行了。
可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。

所有元素可继承：visibility和cursor。

内联元素可继承：
letter-spacing、word-spacing、white-space、
line-height、color、
font、font-family、font-size、font-style、font-variant、font-weight、
text-decoration、text-transform、
direction。

终端块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

红色

1、颜色名
如：red，blue，green
2、十六进制(红绿蓝)
#f00、#ff0000表示红色
一般为3或者6位数字，题目4位？？？
3、rgb(r,g,b)
如：rgb(255,0,0)表示红色
4、hsl(Hue,Saturation,Lightness)/（色调、饱和度、亮度）
hsl(0,100%,100%)
0：红色
120：绿色，
240：蓝色