# interview

**Repository Path**: yaozeyu112/interview

## Basic Information

- **Project Name**: interview
- **Description**: 面试题
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-03-11
- **Last Updated**: 2026-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

1. 浏览器会开启一个线程来处理这个请求
2. 

## ajax实现原理及方法使用

## 简单介绍下重绘和回流（Repaint & Reflow），以及如何进行优化

1. 解析HTML，生成DOM树，解析CSS，生成CSSOM树
2. 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
3. Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
4. Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
5. Display:将像素发送给GPU，展示在页面上。（这一步其实还有很多内容，比如会在GPU将多个合成层合并为同一个层，并展示在页面中，而css3硬件加速的原理则是新建合成层）

### 生成渲染树
    1. 从DOM树的根节点开始遍历每个可见节点;
    2. 对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。
    3. 根据每个可见节点以及对应的样式，组合生成渲染树
	    不可见元素包括：
			- scrite、meta、link等
			- 通过css进行隐藏的节点。比如：display:none。注意，利用visibility和opacity隐藏的节点还是会显示在渲染树上，
			  因为visibility和opacity只是元素不可见，但还会占据布局空间，而display:none属于隐藏元素，不占据布局空间。

### 回流

在最后渲染（rander Tree）时还需要计算每个节点在设备视口（viewport）内的确切位置和大小，这个计算的阶段就是回流。

触发回流的操作：

1. 添加或删除可见的DOM元素
2. 元素的位置发生变化
3. 元素的尺寸发生变化（包括外边距、内边距、边框大小、高度、宽度等）
4. 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片替代。
5. 页面初次渲染时
6. 浏览器的窗口尺寸变化

> 注意：回流一定会触发重绘，而重绘不一定会回流

### 重绘

将准备好的渲染树和回流阶段准备好的几何信息，就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫重绘

触发重绘的时机：

1. 颜色或某些css样式的改变会发生重绘，但不会引起回流

### 优化

##### 浏览器的优化

因为每次重绘前都会做大量的计算，因此大多数浏览器会通过队列优化并批量执行来优化重绘过程。浏览器会将修改操作放入队里中，过一段时间或者操作达到一个阈值，才清空队列。但有些操作会导致队列的强制刷新：

	offsetTop、offsetLeft、offsetWidth、offsetHeight
	scrollTop、scrollLeft、scrollWidth、scrollHeight
	clientTop、clientLeft、clientWidth、clientHeight
	getComputedStyle()
	getBoundingClientRect
	参考：https://gist.github.com/paulirish/5d52fb081b3570c81e3a
以上的属性和方法都需要返回最新的布局信息，所有浏览器会清空队列，触发回流和重绘来返回正确的值，因此，在修改样式时避免使用或将值缓存起来。

##### 减少回流和重绘

**最小化重绘和重排**

例如通过js修改节点样式时，不建议通过style属性来修改样式，而是通过添加、删除className来实现样式修改，这样浏览器只会触发1次回流

## Vue中 key 的原理

便于diff算法的更新，key的唯一性，能让算法更快的找到需要更新的dom。

> 注意：key 必须保持唯一性，如果对dom需要进行增删改查时如果key不唯一会导致更新错误；对于更新操作频繁的元素应尽量使用 固定的id 值来作为key，这样会使得查找更快速，在循环遍历时不建议使用索引(index)作为key（如果使用index，肯定在增删节点时导致vue重新计算模板，增加计算量），如果列表数据只为满足浏览的功能可以使用索引作为key。
> 在 Vue3.0 中优化了key，不需要用户主动提供key，vue在编译模板时会为每个节点创建一个唯一的key

## Vue双向绑定的原理是什么？

### Vue2.X

在vue2.x中，双向数据绑定是基于Object.defineProperty()重新定义get和set方法实现的。修改触发set方法，获取触发get方法，并通过数据劫持发布消息

### Vue3.X

通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除
通过Reflect（反射）：对被代理对象的属性进行操作
可以通过Reflect.get(target, prop)，Reflect.set(target, prop, value)，Reflect.deleteProperty(target, prop)

## Vue中$nextTick的作用

$nextTick()方法可以保证在本次dom更新结束后立即执行

## css中link与@import的区别
1. @import是css提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载css文件，还可以定义RSS、rel连接属性等
2. 加载页面是，link引入的css被同时加载，@import引入的css将在页面加载完毕后加载。
3. link标签作为HTML元素，不存在兼容性问题，而@import是CSS2.1才有的语法，老版本浏览器可能识别不了。
4. 可以通过JS操作DOM，来插入link标签改变样式；由于DOM方法是基于文档的，无法使用@import方式插入样式。