前端八股文总结(一)

前端八股文总结(一)

1.css盒模型:内容+外边距+内边距+描边

**标准模型(content-box)：**content + margin + padding + border
**IE盒模型(border-box)：**margin + content(border、padding)
通过box-sizing设置盒模型，默认值content-box

2.css选择器的优先级

!important > 行内样式 > id > 类/伪类/属性> 标签 > 全局选择器

3.css隐藏属性

a. 元素在页面中消失，不占据页面空间

display:none.

b. 元素在页面中消失，元素占据空间

visibility:hidden
假如此元素上绑定后点击事件，点击对应位置，不会触发事件

c. 设置的样式的透明为0，元素不可见，占据空间位置

opacity:0
假如此元素上绑定后点击事件，点击对应位置，会触发事件

4.回流(reflow)和重绘(repaint)有什么区别？

reflow和repaint影响网页的加载性能，要减少网页reflow

回流(reflow): 会引起DOM树结构变化，页面布局变化的行为叫回流，且回流一定伴随重绘
重绘(repaint): 如果变化的元素，只是更改了元素的背景色，文字颜色、边框颜色等等不影响它周围或者内部布局的属性，那这种行为只会引起repaint(重绘)，所以repaint的速度明显比reflow快
什么情况会导致回流：
(1) 页面首次渲染
(2) 添加或者删除可见的DOM元素
(3) 元素位置改变；
(4) 元素尺寸改变,包含：边距、填充、边框、高度和宽度的变化
(5) 内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变
(6)、浏览器窗口尺寸改变——resize事件发生时
如何好的避免回流(reflow)
(1) 减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面
(2) 通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow。所以最好通过设置class的方式。
(3) 实现元素的动画，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局。
(4) 不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用 table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的 影响范围。

回流必将引起重绘，重绘不一定会引起回流。

5.html渲染页面的过程

HTML渲染页面的过程主要包括以下几个步骤：
(1) 解析HTML：浏览器将接收到的HTML文件进行解析，构建出DOM树（Document Object Model）结构。
(2) 解析CSS：浏览器将接收到的CSS文件进行解析，构建出CSSOM树（CSS Object Model）结构。
(3) 构建渲染树（Render Tree）：将解析后的DOM树和CSSOM树结合，构造出渲染树，该树只包含需要在页面上显示的节点，即被渲染的节点。
(4) 布局（Layout）：渲染树构建完成后，浏览器计算每个节点在屏幕上的位置以及大小，得到布局信息。
绘制（Paint）：根据布局信息，浏览器绘制出每个节点在屏幕上的内容。
(5) 合成图层（Composite Layers）：现代浏览器通常会对页面进行分层处理，每一层都会被单独绘制、合成，最终显示在屏幕上。
显示（Display）：浏览器将绘制好的节点显示在屏幕上，完成页面渲染的过程。
这个过程涉及到多个模块，包括HTML解析器、CSS解析器、布局和JavaScript引擎，它们共同协作以实现高效的渲染。