基础【前端】面试题
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.输出结果，根据入口和模块直接的关系，组装成一个个多个模块，在进行转换单独的文件加入输出列表，最后根据配置的路径和文件名进行输出。
原文地址：https://blog.csdn.net/weixin_43991433/article/details/141820634
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！