1. dom操作找兄弟元素

element.parentNode.children[0] // 通过父节点
element.previousElementSibling // 上一个兄弟元素
element.previousSibling // 上一个兄弟节点（包含字符）
element.nextElementSibling // 下一个兄弟元素
element.nextSibling // 下一个兄弟节点（包含字符）

2. 浏览器合成层

segmentfault.com/a/119000004…

完整渲染：juejin.cn/post/684490…

3. html语义化标签

标签	描述
article	定义一篇文章
aside	从页面内容中定义内容
details	定义用户可以查看或隐藏的其他详细信息
figcaption	定义figure元素的标题
figure	指定独立的内容, 像图表, 插图, 照片, 代码片段等.
footer	为文档或节定义页脚
header	为文档或节指定页眉
mark	定义标记/突出文本
nav	定义导航链接
summary	为details元素定义一个标题
time	定义日期/时间

4. background属性

background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size，和 background-attachment

5. flex-shrink

flex-grow 负值无效。省略时默认值为 1。 (初始值为 0)

flex-shrink 负值无效。省略时默认值为1。 (初始值为 1)

flex-basis 若值为0，则必须加上单位，以免被视作伸缩性。省略时默认值为 0。(初始值为 auto)

flex-shrink空间收缩计算

A、B、C 显式定义了 flex-shrink 为 1，D、E 定义了 flex-shrink 为 2，所以计算出来总共将剩余空间分成了 7 份，其中 A、B、C 占 1 份，D、E 占 2 份，即1:1:1:2:2

我们可以看到父容器定义为 500px，子项被定义为 120px，子项相加之后即为 600 px，超出父容器 100px。那么超出的 100px 需要被 A、B、C、D、E 消化通过收缩因子，所以加权综合可得 100 * 1 + 100 * 1 + 100 * 1 + 100 * 2 + 100 * 2 = 700px

于是我们可以计算 A、B、C、D、E 将被移除的溢出量是多少：
A 被移除溢出量：(100*1/700)*100，即约等于14px
B 被移除溢出量：(100*1/700)*100，即约等于14px
C 被移除溢出量：(100*1/700)*100，即约等于14px
D 被移除溢出量：(100*2/700)*100，即约等于28px
E 被移除溢出量：(100*2/700)*100，即约等于28px
最后A、B、C、D、E的实际宽度分别为：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px，此外，这个宽度是包含边框的。

6. input标签oninput

该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发

7. Proxy作用

Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。

作用：

拦截和监视外部对对象的访问
降低函数或类的复杂度
在复杂操作前对操作进行校验或对所需资源进行管理

8. display:table

9. 事件代理

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数

优点：

减少内存消耗
可实现动态绑定

10. input输入收集汉语拼音（compositionstart，compositionend）

组合输入事件

  let inCompositionEvent = false;
  let input = document.querySelector('#input');
  
  input.addEventListener('input', function() {
    !inCompositionEvent && console.log('input', this.value);
  });
  input.addEventListener('compositionstart', function() {
    inCompositionEvent = true;
  });
  input.addEventListener('compositionend', function() {
    inCompositionEvent = false;
    console.log('composition', this.value);
  });

11. input只允许输入整数

<input type='text' onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">

12. dom获取元素宽高

javascript中获取dom元素高度和宽度的方法如下：

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft

对应的dom元素的宽高有以下几个常用的：

元素的实际高度：document.getElementById("div").offsetHeight
元素的实际宽度：document.getElementById("div").offsetWidth
元素的实际距离左边界的距离：document.getElementById("div").offsetLeft
元素的实际距离上边界的距离：document.getElementById("div").offsetTop

13. getOffsetWidth为什么会触发重排

触发重排条件

页面第一次渲染在页面发生首次渲染的时候，所有组件都要进行首次布局，这是开销最大的一次重排
浏览器窗口尺寸改变
元素位置和尺寸发生改变的时候
新增和删除可见元素
内容发生改变（文字数量或图片大小等等）
元素字体大小变化
查询某些属性或调用某些方法
- offset(Top|Left|Width|Height)
- scroll(Top|Left|Width|Height)
- client(Top|Left|Width|Height)
- getComputedStyle()

查询引发重排原因

浏览器的优化使得js操作DOM时不会立刻执行，会存放到队列中，当操作达到一定数量再统一执行。查询时会强制刷新队列，从而得到最新结果，但会打断浏览器优化流程，引发重排

14. 行内替换元素有哪些

<img/> <iframe/> <embed/> <video/>
<option/> <audio/> <canvas/> <object/> <applet/>

15. input禁止输入记录

autocomplete="off"

16. 如何判断时间复杂度

17. meta的作用

http-equiv：添加http头部内容
name：供浏览器解析的属性名
content：必填，前两者的实际内容

charset 声明文档字符编码

<meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

viewport 影响移动端页面布局

<meta name="viewport" content="width=device-width, initial-scale=1.0">

content 参数：

width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no) SEO优化

<!-- 页面标题<title>标签(head 头部必须) -->
<title>your title</title>
<!-- 页面关键词 keywords -->
<meta name="keywords" content="your keywords">
<!-- 页面描述内容 description -->
<meta name="description" content="your description">
<!-- 定义网页作者 author -->
<meta name="author" content="author,email address">
<!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->
<meta name="robots" content="index,follow">

18. React18/17新特性

setState自动批处理
并发模式transition juejin.cn/post/709403…
juejin.cn/post/702799…

19. Redux、dva、mobx实现差异

20. type和interface对比

相同点：

允许扩展（type：&；interface：extends） 不同点：
type可以声明基本类型别名，联合类型，元组等类型

// 基本类型别名 
type Name = string 

// 联合类型 
interface Dog { wong(); } 
interface Cat { miao(); } 
type Pet = Dog | Cat 

// 具体定义数组每个位置的类型 
type PetList = [Dog, Pet]

type语句中可以使用typeof获取实例的类型进行赋值

// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div

interface能够声明合并

interface User {
  name: string
  age: number
}

interface User {
  sex: string
}

/*
User 接口为 {
  name: string
  age: number
  sex: string 
}
*/

21. 手写React Router

22. 使用用React.FC声明函数组件和普通声明的区别是：

React.FC 显式地定义了返回类型，其他方式是隐式推导的
React.FC 对静态属性：displayName、propTypes、defaultProps 提供了类型检查和自动补全（如children等）

面经记录