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