HTML、CSS、JS

CSS

水平垂直居中

css

.center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.center02 {
	display: flex;
	margin: auto;
}

.center03 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

nth-child和nth-of-child区别

nth-child: 父元素的第几个子元素
nth-of-child: 父元素的第几个同类型元素

html

<!--nth-child(3)为div、nth-of-child(3)则为span第 3 个-->
<div>
	<span></span>
	<span></span>
	<div></div>
	<span></span>
</div>

浏览器的渲染过程

解析HTML -> 构建DOM
解析CSS -> 构建CSSOM(CSS不会阻塞HTML解析、JS会阻塞HTML解析)
合并DOM、CSSOM -> 构建渲染树(不包含display:none)
布局 -> 确定节点位置、尺寸等信息
分层
绘制
输出

为什么CSSOM不会阻塞HTML解析?

因为下载和解析CSS的工作是在预解析线程中执行的。

为什么JS会阻塞HTML解析?

因为JS是在主线程中执行的。可能会修改DOM树，所以生成DOM阶段必须暂停。

回流

本质就是重新计算layout

INFO

如果你改变了影响元素布局的东西（比如大小、位置、隐藏/显示），浏览器就得重新计算页面中哪些东西应该放哪，哪些占多大地方。
这个重新计算、重新布局的过程就叫回流（Reflow）

哪些东西会触发回流?

改变元素的宽高、内外边距（margin/padding） → 会回流
插入/删除节点 → 会回流
改变字体大小 → 会回流

重绘

本质就是重新绘制paint

INFO

重绘是浏览器在页面布局不变的情况下，把某个元素重新画一遍
换句话说，形状、大小、位置没变，只是外观（颜色、阴影、透明度、背景图片）有变化，所以浏览器只需要重新“上色”，不用重新排版
回流一定会造成重绘

哪些东西会触发重绘?

改变文字颜色
改变背景颜色
改变显示隐藏
改变阴影、边框

回流和重绘的区别

特性	回流（Reflow）	重绘（Repaint）
发生条件	布局或结构发生变化	仅视觉样式变化，不影响布局
涉及内容	重新计算元素位置、尺寸、页面排版	重新“上色”，重新绘制像素
性能开销	大：可能影响父元素、兄弟元素甚至整个文档	较小：只重新画改变的元素
常见触发操作	改变宽高、内外边距、边框、显示/隐藏节点、添加/删除节点、改变字体大小、DOM结构变化	改变颜色、背景、阴影、透明度、`visibility`（不影响布局）、`outline`
影响范围	可能波及整页	通常只影响局部
优化策略	避免频繁 DOM 改动；批量修改；使用 `DocumentFragment`、`display: none` 后再更新；开启 GPU 加速等	合理使用 CSS 动画属性（避免 layout 属性变化），尽量修改不会引起回流的属性

如何减少回流和重绘

尽量使用css简写: padding: 10px 20px;、border: 1px solid red;
批量修改元素样式: class
尽量避免table布局，一旦触发回流就会导致其他元素回流
需要创建多个dom节点时，尽量使用DocumentFragment
尽量不要在for循环里面获取元素的位置和大小，引起回流，最好能利用缓存

addEventlistener参数有哪些?

/**
 *
 * @param {string} type - 事件类型
 * @param {function} listener - 监听函数
 * @param {object | boolean} options - 配置项(可选参数)
 * options.capture - 捕获阶段监听(默认为false)
 * options.once - 只执行一次(默认为false)
 * options.passive - 默认情况下，浏览器会阻止一些默认行为
 */
el.addEventlistener(type, listener, options);

其他

对行内元素设置margin-top生效吗？答：不生效,只对左右生效
如何解决外边距重叠？答：使用BFC(页面上一个隔离的独立容器)
1. display: inline-block; display: table-cell;
2. 绝对定位
3. 浮动元素
浏览器下载资源是并行还是串行？答：并行，最多支持6个
css如何实现一条0.5像素的线？答：使用scale缩小

JS

事件委托

事件委托是将事件监听器添加到父元素，而不是每个子元素单独设置。触发子元素事件就会冒泡到父元素触发监听器。

内存占用减少

html

<ul id="parent">
	<li data-id="1">苹果</li>
	<li data-id="2">香蕉</li>
	<li data-id="3">橘子</li>
</ul>

<script>
	const ul = document.getElementById('parent');

	ul.addEventListener('click', function (e) {
		console.log('父元素监听到点击了:', e.target); // 实际点到的元素
		console.log('当前处理事件的元素:', e.currentTarget); // <ul>

		if (e.target.tagName === 'LI') {
			console.log('你点击了第', e.target.dataset.id, '个水果');
		}
	});
</script>

HTML、CSS、JS ​

CSS ​

水平垂直居中 ​

nth-child和nth-of-child区别 ​

浏览器的渲染过程 ​

回流 ​

重绘 ​

回流和重绘的区别 ​

如何减少回流和重绘 ​

addEventlistener参数有哪些? ​

其他 ​

JS ​

事件委托 ​