web前端面试
position
absolute
元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。
css盒模型
ie表示content、padding、border。正常表示content。
Promise
Promise状态平pending,fulfilled,rejected。
resolve reject
Promise.all then得到一个结果数组,任何一个报错就进catch。Promise.any then得到第一个fulfilled的结果。promise allSettled
Promise.then Promise.catch
call apply bind
call是每个参数。apply是参数组成的数组。bind只绑定this。
微任务宏任务
setTimeout就是作为宏任务来存在的,而Promise.then则是具有代表性的微任务,上述代码的执行顺序就是按照序号来输出的。
new Promise在实例化的过程中所执行的代码都是同步进行的,而then中注册的回调才是异步执行的。
async函数在await之前的代码都是同步执行的,可以理解为await之前的代码属于new Promise时传入的代码,await之后的所有代码都是在Promise.then中的回调
先执行微任务,再执行宏任务
BFC块格式化上下文
根元素()
浮动元素(float 值不为 none)
绝对定位元素(position 值为 absolute 或 fixed)
行内块元素(display 值为 inline-block)
非受控组件,受控组件
ref指向表单是非受控组件
递归 栈溢出
闭包
访问私有变量,防抖节流
导致内存泄露
js节流防抖
节流:快速的多次输入只向后端请求一次数据
防抖:一直进行某个事件时以一定的间隔运行某项操作
强缓存和协商缓存
强缓存:浏览器不会像服务器发送任何请求,直接从本地缓存中读取文件并返回Status Code: 200 OK
协商缓存: 向服务器发送请求,服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存,如果命中,则返回304状态码并带上新的response header通知浏览器从缓存中读取资源;
http状态码
200 成功。300重定向。400客户端错误。500服务器错误
瀑布流 圣杯
三栏布局 flex
中间加上{ flex: 1 }
,表示flex-grow占用可用空间
eval缺点
不安全,消耗性能
jsonp原理
利用script标签的src属性来实现跨域。
由于使用script标签的src属性,因此只支持get方法
箭头函数
this指向
不能用作构造函数
call apply不能绑定this
箭头函数没有prototype属性
箭头函数没有自己的arguments
html5
video audio canvas worker storage websocket
css3
圆角 渐变 转换 动画 媒体查询 flex布局
WeakMap WeakSet
WeakMap指键为对象,当这个对象设置为null之后,这个键也会删除。普通的Map不会删除这个键
WeakSet指元素为对象。
Array.prototype.find()
console.log同步异步
chrome的控制台出于性能考虑,对于引用类型的数据读取是存在延迟的;
控制台默认值读取第一层数据,当你点击展开时,才会重新去堆内存中读取属性值和下一层的数据。
这种出于性能优化会让我们觉得console.log 是异步的。
所以console.log到底是同步还是异步的,答案肯定是同步。
AMD、CMD、CommonJs三者之间的区别
组合继承 js
数组随机排序
大量插入dom元素的方法
css hack
内存泄露
没有使用的全局变量
计时器没有回收
dom节点的引用,删除节点后还存在
闭包
重绘重排
当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程,叫做重绘。
当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。
重排一定引起重绘
事件委托
当发生点击事件(或传播的任何其他事件)时:
事件从 window、document、根元素向下传播,并经过目标元素的祖先(捕获阶段);
事件发生在目标(目标阶段)上;
最后,事件在目标祖先之间冒出气泡,直到根元素 document 和 window(冒泡阶段)。
该机制称为事件传播。
事件委托是一种有用的模式,因为你可以只需要用一个事件处理程序就能侦听多个元素上的事件。
使用事件委托需要三个步骤:
确定要监视事件的元素的父级元素
把将事件侦听器附加到父元素
用 event.target 选择目标元素
node.js中间件
cookie-parser,cookie-session,body-parser,mongoose,passport
文件上传formidable
文件下载createReadStream
react事件
React合成事件机制: React并不是将click事件直接绑定在dom上面,而是采用事件冒泡的形式冒泡到document上面,然后React将事件封装给正式的函数处理运行和处理。
跨站登录
登录成功后跳转路由中携带登录信息
正六变形
扁平化数据 树形
监听路由
内存 储存
回收内存
promise es5
异步
纯函数 副作用
无副作用 & 纯函数
函数与外界的只有唯一一个渠道进行沟通,通过传入参数和返回值进行沟通。
相同的传入参数永远只会有相同的返回值。
性能优化
代码压缩,代码分片,减少http请求,图片懒加载