某团前端面经

一面：

讲下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压缩

来还个愿，需要的xd用我的内推码：KRE64H9