基础【前端】面试题

css

1.BFC是什么？

1.块级格式化上下文，也就是说是一个独立的渲染空间，与外部区域毫不相干；
2.属于同一个bfc里面的相邻两个元素的margin会发生重叠；

2.清除浮动有哪些？

1.使用BFC格式（块级格式化上下文）；
2.使用clear：both；
3.使用伪元素-----ul::after{context:"";dispaly:bock;clear:both}

3.重回和回流

重绘：指的是样式改变不影响其布局；
回流：样式的改变会影响其布局以及位置大小等；
回流比重绘成本高，回流一定会重绘，重绘不一定会经过回流；

4.如何避免回流；

• 避免使用js控制css；

js

1.事件循环：

事件循环是单线程，单线程包含同步和异步，异步包含微任务和宏任务；
执行顺序：同步=》遇到微任务加入微任务队列=》遇到宏任务加入宏任务队列=》执行所有同步任务=》执行微任务队列任务=》执行宏任务队列任务
微任务：promise.then()
宏任务:  settimeout()

• 微任务里面包含多个微任务，只执行一次，其他放入任务队列；
• 微任务里面包含宏任务，直接把宏任务放到任务队列；
• 宏任务里面包含微任务，只执行一次，其他放入任务队列；

2.settimeout参数分别是什么？

1.第一个指的是函数；
2.第二个指的是时间参数，不写默认是0；
3.第三个指的可以传递额外的参数给延迟执行的函数，这在需要向延迟执行的函数传递数据时非常有用。

3. call、apply、bind区别

1.call和apply可以立即执行，bind返回的一个函数需要加（）才可以执行；
2.apply多个参数传的参数数组，call和bind多个参数挨个写；

4.原型和原型链

1.原型：每个构造函数都有一个prototype属性，这个属性是原型，此原型指向的是原型对象；
2.原型链：new一个对象实例，现在对象里面找，没有的话通过__proto__往上找，找到object.proto,没有就返回null；
3.原型连指向到null需要几层？

5.new操作符做了什么？

1.创建一个空对象；
2.将空对象的原型指向构造函数的原型上；
3.将空对象的this作为构造函数的上下文；
4.确保构造函数返回一个对象，没有返回空对象；

6.宿主对象、内置对象、原生对象；

宿主对象：window，node环境、document环境；
内置对象：JavaScript自带的对象；
原生对象：通过构造函数或是字面量创建的形式；

7.promise

1.概念：是指异步操作的一种模式，可以处理回调地狱的问题；
2.三种状态：pending（进行中）fulfilled（已完成）rejected(已失败)；
3.方法：then（），catch（），finally（）

8.如何理解箭头函数没有this？

所谓箭头函数没有this，并不是真正指的箭头函数没有this，而是箭头函数的this指向不是自己，而是捕获上下文而使用，作为自己的this而使用；

9.箭头函数和普通函数的区别？

1.箭头函数this指向上下文；
2.箭头函数的this不能改变（也就是不能使用call、apply、bind进行更改）；
3.箭头函数不能new（也就是说不能当作构造函数使用）；
4.箭头函数没有原型属性；
5.箭头函数不能使用yield关键词；

10.浏览器在输入url之后会发生什么？

1.浏览器想DNS服务器请求解析url的域名所对应的ip地址—做域名解析；
2.解析出ip地址后，根据ip地址和端口和服务器建立tcp连接—发起http请求，建立tcp请求；
3.浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器 - 浏览器发起读取文件请求；
4.服务器对相对应的请求做出相应，并把相对应的html文件发送给浏览器；
5.释放tcp连接；
6.浏览器解析html连接；

暂时性死区

指的是在没有声明let、const变量之前的区域，该变量是不可以用的，被称为暂时性死区；

暂时死性循环

js延迟方式

1.将js脚本放入文档最底部，使js脚本最后加载；
2.将js脚本使用defer属性，使文档和js脚本一块解析，可以使页面加载不会被阻塞；
3.给js脚本添加async属性，使脚本异步解析；可以使文本加载不对阻塞；

http缓存机制

根据是否需要向浏览器发起请求两大类，强缓存和协商缓存两大类；
强缓存：浏览器会强制查看缓存时间是否过期，过期就重新发起请求，没过期就缓存数据；
协商缓存：会和浏览器做交互，取得缓存向服务器确定缓存是否可以用，如果可以，返回信号，如果不可以用则返回新的数据；

说说async、await的设计和实现

async用于声明一个异步函数，而await用于暂停当前异步函数的执行，等待一个Promise解决或拒绝，然后恢复函数的执行并返回解决的值或拒绝的原因。
设计和实现
1.async返回一个promise对象；
2.await关键字只能在async内部使用；
3.当前执行到await时，会暂停async函数执行，等待promise执行解决；
4.一旦promise解决，async函数会恢复执行，并返回promise的结果；

深拷贝需要注意什么？

1.循环引用：如果存在对象引用，可能会造成无限递归；
2.自定义对象：对于自定义对象，深拷贝需要调用类的__deepcopy__方法，如果没有定义的话，深拷贝会拷贝所有属性；
3.不可变类型：对于不可变类型，深拷贝实际上时不必要的，因为不能修改；
4.特殊类型处理：特殊类型的对象（比如文件、字符串、元组）存在不被拷贝的情况；
5.性能：深拷贝比浅拷贝更耗内存；
6.递归深度：以防无限引用；

怎末让中间页面携带cookie？

1.设置cookie，通new cookie对象的addcookie方法添加一个cookie；
2.跳转页面，通过设置location头实现页面跳转，并携带cookie。
3.在跳转页面中读取cookie，new cookie对象的getcookies方法获取所有的cookie。

require和import的区别？

require‌是‌Node.js中‌CommonJS模块系统的语法，用于在服务器端和浏览器端加载模块。
‌import‌是‌ES6（ECMAScript 2015）及以后版本的语法，用于在编译时加载模块。它是在代码执行前加载模块，支持静态分析和解构赋值，通常与export一起使用。

1.加载方式不同：

• require是运行加载；
• import是编译加载； 2.规范不同：
• require遵循的是commonjs规范；
• import遵循es6模块规范； 3.静态与动态不同：
• require是动态的，无法进行静态分析；
• import是静态的，支持编译时的静态分析； 4.解构赋值：
• require导入整个模块；
• import支持解构导入；

react

单数据绑定，虚拟数据，

生命周期

挂载时
constructor–>render–>componentdidMonnt
更新时
shouldcomponentUpdata–>render—>componentDidUpData
卸载
componentWillUnmont

hook有哪些？

useRef
useEffect
useState
useMemo
useCallback

使用hook解决什么问题？

1.commonent非ui逻辑复用困难；
2.组件的生命周期函数不合适 side effect 逻辑的管理；
3.不友好的 class component。

调用setState会发生什么？

1.react会将传入对象和组件当前状态合并；
2.react会根据新的状态进行构建react元素树，并重新渲染ui界面；
3.react会计算新树和老树的节点差异，然后对界面进行最小化的渲染；
4.使用diff算法精准的检测发生变化的，并渲染发生改变的；
在同步环境中，setstate是同步执行的，在异步环境中，setstate表现异步执行。这是因为react为了优化性能，在异步环境中会延迟状态更新，直到下一个事件循环。

reactx

1.store
2.action
3.reducer
store数据在组件渲染，组件将要修改的数据通过dispatch方法放入给action传入reduces修改，reduces进行返回新的store。

高阶组件

高阶组件是一个函数，组件作为参数传递并返回一个组件。

受控组件和非受控组件

受控组件是用reac来控制管理组件，可以通过props传递参数控制使用；
非受控组件是组件内部管理组件，可以使用ref操作dom。

webpack的整个工作流程？

1.初始化参数：从配置文件和shell语句中读取合并参数，得出最终的配置对象。
2.开始编译：使用上一步的参数初始化compiler对象，并加载所有配置差价。
3.确定入口：根据配置中的entry属性找出所有文件；
4.编译模块：从入口文件开始，调出所有的loader对模块开始编译。
5.输出结果，根据入口和模块直接的关系，组装成一个个多个模块，在进行转换单独的文件加入输出列表，最后根据配置的路径和文件名进行输出。