某团前端面经
一面：
讲下BFC，怎么用，什么特性（忘了，只讲了应用）
垂直居中方法（好多种）
css行内元素和块级元素区别
讲下transform
手写：css手写一个三角形
（知道几种方法但是一上手写不出来，讲了下思路，主要用径向渐变）
js：
面试官说宏任务微任务问烂了，直接看题
1 pormise说出结果（success没太懂）：
const promise = new Promise((resolve, reject) => {
console.log(1);
setTimeout(() => {
console.log("timerStart");
resolve("success");
console.log("timerEnd");
}, 0);
console.log(2);
});
promise.then((res) => {
console.log(res);
});
console.log(4);
1 2 4 timerStart success timerEnd 事件循环的理解
js的执行过程中，同步依靠主线程栈，异步依靠任务队列执行事件。整个过程称为事件循环
一个线程中，事件循环是唯一一个，但任务队列有多个，可分为宏任务和微任务
macrotask：setTimeOut,script,serInterval,I/O等
microtask：promise（async、await、原生promise）,process.nextTick(循环的任务队列。宏任务循环完成后调用，优先于微任务。)
事件循环：执行宏任务->执行该宏任务产生的微任务，若执行微任务产生了新的微任务，则继续执行微任务->宏任务循环
1、setTimeout 定时器，属于js任务队列里的宏任务。
指的是把任务队列塞进执行栈里等待执行线程依次执行。虽然可以设为0，需要等待本轮里 所有同步和异步任务 执行完毕之后才去执行。
2、promise es6的异步语法，属于js任务队列里的微任务。
在执行本轮宏任务的过程中，如果遇到promise，会将其塞入本轮执行过程的微任务，待本轮宏任务执行完毕之后，才会执行它。执行完毕之后，开始执行下一轮任务队列。
总结：
- 存在微任务的话，那么就执行所有的微任务
- 微任务都执行完之后，执行下一个宏任务
async/await执行顺序:
node中：
- 定时器检测阶段(timers)：本阶段执行 timer 的回调，即 setTimeout、setInterval 里面的回调函数。
- I/O事件回调阶段(I/O callbacks)：执行延迟到下一个循环迭代的 I/O 回调，即上一轮循环中未被执行的一些I/O回调。
- 闲置阶段(idle, prepare)：仅系统内部使用。
- 轮询阶段(poll)：检索新的 I/O 事件;执行与 I/O 相关的回调
- 检查阶段(check)：setImmediate() 回调函数在这里执行
- 关闭事件回调阶段(close callback)：一些关闭的回调函数，如：socket.on('close', ...)。
Promise.resolve(v)和new Promise(resolve =＞ resolve(v))
Promise.resolve(p)
等价于
new Promise(
resolve => {
Promise.resolve().then(()=>{
p.then(resolve);
});
});promise:
var promise = new Promise(function(resolve, reject) {
// 异步处理
// 处理结束后、调用resolve 或 reject
});2 原型链说出结果：
function Person(name, age) {
this.name = name;
this.age = age;
this.eat = function() {
console.log(age + "岁的" + name + "在吃饭。");
}
}
Person.run = function () {}
Person.prototype.walk = function () {}
let p1 = new Person("jsliang", 24);
let p2 = new Person("jsliang", 24);
console.log(p1.eat === p2.eat);
console.log(p1.run === p2.run);
console.log(p1.walk === p2.walk); 3 算法题
给一个字符串：‘helloworld’
一个字典[a,b,hello,world]
判断是否能从字典拼出来字符串
思路是dfs，但实际上可以用dp做（待研究）
中间问了框架
vue样式穿透scoped（脑子一热忘了::v-deep
哪个生命周期提交请求？
前端性能如何优化->
牵扯到首屏时间和白屏事件（还是要涉及）
v-for,v-if区别，优先级（v-for具有比 v-if更高的优先级）
nextTick作用（答得朦朦胧胧的，似乎没到点上）
vueX,钩子作用
keepalive和actived相关（这块忘了，打死）
如何做跨域(回答nginx)但面试官可能是想听手动配node和jsonp这样的
HTTP2怎么样（忘记多路复用了，只记得加密安全性，还说了性能比不上HTTP QAQ）
讲讲输入url到展示
移动端适配，em，rem
前端性能怎么优化
如何深拷贝
问项目，node用法。。。
什么时候学的前端，为啥
面试官问有事吗，要不要接着面，同意
2面：业务
前端性能优化
如何实现（思路上涉及）轮播图组件
问项目
白屏时间和首屏时间
白屏时间(First Paint)：是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。
白屏时间 = 页面开始展示的时间点 - 开始请求的时间点
计算：
首屏时间(First Contentful Paint)：是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。
首屏时间 = 首屏内容渲染结束时间点 - 开始请求的时间点
计算：
标记首屏标签模块/统计首屏最慢图片加载时间
/window.performance(timing：一系列关键时间点，包含网络、解析等一系列的时间数据)
目前白屏常见的优化方案有：预渲染
优化首屏加载时间的方法：
缓存
前端的资源动态加载
减少请求的数量
利用好HTTP压缩