自我介绍
公司,项目经历,技术栈,爱好(折腾后端)
CSS
- 清除浮动
overflow:hidden
clearfix
clear :both
- 盒模型
- CSS 中transition和animate有何区别
- position定位
transition一般用来做过渡的, 没时间轴的概念, 通过事件触发(一次),没中间状态(只有开始和结束)
而animate则是做动效,有时间轴的概念(帧可控),可以重复触发和有中间状态;
JS
- 数据类型: null,undefiend,string,number,boolean,symbol和 object
- Promise实现
- ES6+ const,let,箭头函数,解构,rest操作符,模板字符串,promise,async/await/,class,module系统,Array.some/String.padStart/Object.assign/is.
- this和作用域,闭包
- 类型判断
Object.prototype.toString.call(obj).slice(8, -1); - 原型,构造函数
- 垃圾回收机制
- 事件轮训机制, microTask(Promise),macroTask(setTimeout,setInterval)
Vue
- vue响应式原理
vue响应式原理
DOM
DOM操作: 增删改查
事件冒泡 事件代理
事件冒泡和捕获
w3c制定了统一的标准——先捕获再冒泡。
element.addEventListener(event, function, useCapture)
第一个参数是需要绑定的事件
第二个参数是触发事件后要执行的函数
第三个参数默认值是false,表示在事件冒泡阶段调用事件处理函数;如果参数为true,则表示在事件捕获阶段调用处理函数。
浏览器
- 从地址栏输入url到页面加载经历了什么
- IP寻址,dns解析(浏览器-系统-路由器-dns服务器)
- TCP三次握手,四次挥手,HTTP协议发送请求报文,解析响应报文
- 请求html,下载css/js。绘制页面,js解释执行
- 用户看到页面
- http协议
- 页面性能优化
- 体积 js/css/img压缩,chunk分割,减少第三方库依赖,gzip压缩
- 减少请求 css精灵图 缓存(e-tag/if-modified) service worker缓存
- 代码方面 内存泄露(闭包/全局变量) tree-shaking 减少重排重绘
- 预加载 link preload
- 服务器端渲染
- http2多路复用 头部压缩
- 重绘和重排
- css3动画优化
- localstorage,sessionstorage和cookie
大小,API友好,生命周期
Nodejs
- 异步IO,事件循环,
- 模块循环以来
假设a,b模块循环依赖,那么a加载后执行到某段进入b模块,b模块又反过来引用a模块,那么b则只会获取到a模块已执行的代码(unfinished part),而不会获取到a未执行的部分。因为commonjs是同步加载的。b执行结束后才会执行a余下的部分。
类似function a执行过程中进入function b。类似栈的概念。
前端工程化
- webpack性能优化
dll,多进程编译,commonchunk,设置别名,loader的exclude
HTTP协议
- https
- http头
- 跨域 jsonp cors 代理
- TCP,IP分层和职责
- http状态码
1XX 正在处理 其中101 switching protocols经常用于Websocket建立时的Http协议转Websocket协议 具体流程为发送get请求,通过Upgrade: Websocket头升级为Websocket,通道建立成功后就采用Websocket协议通信
2XX 请求成功 204 常用于options预检请求,因为没有报文主体传输效率更高
3XX 重定向 304 Not Modified常用于缓存
4XX 客户端错误 参数错误...
5XX 服务端错误