基础【前端】面试题

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.输出结果,根据入口和模块直接的关系,组装成一个个多个模块,在进行转换单独的文件加入输出列表,最后根据配置的路径和文件名进行输出。

相关推荐
醉の虾12 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧21 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm30 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep70143 分钟前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王1 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒1 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰2 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter