前端面试题-（W3C标准，重绘，回流 ，CSS伪类）

W3C标准

W3C标准主要包括一下几个方面
1.结构化标准语言：主要败局哦XHTML和xml .Xhtml是一种基于xml的标记语言，用于创建和组织网页内容。具有更好的可读性和维护性。xml则是一种用于描述和传输数据的标记语言，具有可扩展性和灵活性。被广泛应用于web服务，数据存储和配置文件等领域。
2.表现标准语言：主要包括css。css是一种用于控制网页样式和布局的标记语言，通过选择器和属性来定义元素的外观和行为。可以实现网页的美化和响应式设计，使得网页可以适应不同的屏幕尺寸和设备类型。
3.行为标准:主要包括对象模型 W3C DOM ECMAScript等。Dom是一种用于访问和操作网页文档的编辑接口。它讲网页文档表示为一个树状结构，可以通过dom接口来操作和修改网页元素。ECMAScript 则是一种js的标准，用来实现网页的交互性和动态性。

什么是回流(reflow) 什么是重绘(repaint）

重绘是指当页面的某些部分发生改变时，浏览器需要冲洗绘制页面的过程。在web开发中，页面的重绘通常发生在元素样式或布局发生变化时。
1.修改元素的背景色
2.改变字体方向，颜色等
重绘可能导致页面的重新布局和绘制，从而影响页面的性能和用户体验

回流是指在浏览器渲染页面时，根据也没得结构和样式计算元素的布局和位置的过程。当前页面布局或元素位置发生变化。浏览器需要重新计算元素的布局。这个过程就叫做回流。回流的开销比较大，因为它需要遍历整个dom树。计算元素的大小和位置
1.修改元素的宽度，高度，位置等属性
2.修改元素的字体大小，字体样式等属性
3.添加或移除元素
4.修改元素的内容
5.修改元素的背景色，边框样式等属性
6.修改元素的class属性
7.修改文档的样式表

为了减少回流和重绘的次数，可以采用以下一些优化策略
1.使用css3的transfrom属性来实现动画效果，而不是修改元素的位置属性
2.使用虚拟dom技术，将多次dom操作合并为一次操作
3.尽量减少直接操作样式属性，可以使用类名来改变元素的样式
4.避免频繁修改文档样式表，可以将样式属性写在内联样式中

浏览器兼容（只说我遇到的）

1.时间类型解析 new Date 火狐不能解析(2024/1/19 xxx:xxxx:xx)这种类型的时间会报错
2.不同浏览器标签内外边距 不一样 一般样式最开始都要写一个统一的清除样式
3.火狐不支持curor:hand
4.之前还有很多低版本的IE 但是现在IE亡了

CSS伪类有哪些

选择器	描述
:checked	选择所有选中的表单元素（input:checked）
:disabled	选择所有禁用的表单元（input:disabled）
:empty	选择所有没有子元素的P元素(p:empty)
:enabled	选择所有启用的表单元素(input:enabled)
:first-of-type	选择每个P元素是其父元素的第一个p元素(p:frist-of-type)
:in-range	选择元素指定范围内的值(input:in-range)
:invalid	选择所有无效的元素(input:invalid)
:last-child	选择所有P元素的最后一个子元素（p:last-child）
:last-of-type	选择每个p元素是其父元素的最后一个p元素(p:last-of-type)
:not(xxx)	选择所有除P外以外的元素(:not§)
:nth-child(n)	选择所有 p 元素的父元素的第二个子元素(p:nth-child(2))
:nth-last-child(n)	选择所有P元素的倒数第二个子元素(p:nth-last-child(2))
:nth-last-of-type(n)	选择所有是其父元素倒数第二个子元素的p元素
:nth-of-type(n)	选择所有是其父元素第二个子元素的P元素
:only-of-type	选择有且仅有一个子元素的p元素
:only-child	选择所有仅有一个元素的P元素
:optional	选择没有required的元素属性
:out-of-range	选择制定范围以外的值的元素属性
:read-only	选择只读的元素属性
:read-write	现在没有只读属性的元素
:required	选择有required属性指定的元素属性
:root	选择文档的根元素
:target	选择当前的活动（锚点的名字）
:valid	选择所有有效值的属性
:link	选择所有未访问的链接
:visited	选择所有访问过的链接
:active	选择正在活动的链接
:hover	鼠标悬浮
:focus	具有焦点的
:first-letter	选择每个P元素的第一个字母
:first-line	选择每个P元素的第一行
:first-child	选择所有p元素的第一个子元素(p:first-child)
:before	元素头位置插入伪元素
:after	元素尾位置插入伪元素
:lang(language)	未p元素的lang属性选择一个开始值