面试题

代码题

异步并行

// const taskQueue = new TaskQueue();
// taskQueue.add('log 11111', 1000);
// taskQueue.add('log 22222', 2000);
// taskQueue.add('log 33333', 2000);
// taskQueue.add('log 44444', 4000);
// taskQueue.add('log 55555', 3000);
// taskQueue.run(2);

promise

new Promise((resolve, reject) => {
  console.log(1)
  setTimeout(() => {
    console.log(2)
  })
  resolve()
})
  .then(() => {
    console.log(3)
  })
  .then(() => {
    return new Promise((resolve, reject) => {
      console.log(4)
    }).then(() => {
      console.log(5)
    })
  })
  .then(() => {
    console.log(6)
  })
console.log(7)
// 不输出5
// 不会输出6 因为then 返回的promise  没有resolve

a={}
b={key:1}
c={key:2}
a[b]='b'
a[c]="c"
// 输出a

js代码如何运行
es6新特性

for in和for of的区别-- promise和async await的区别， --看场景 promise.all解决了什么问题，如何处理错误请求，是如何实现的 --接口返回, http2.0有什么特性，最多支持几路, 浏览器url->过程网络安全:csrf,xss

flex布局 --flex缩写
如果CSS一直下载不下来，页面就一直空白吗
闭包，已经相关的使用场景? 未用过柯里化-- 未用过
如何判断一个数组
原型和原型链，简述，用来做什么 -- 继承 ES5继承 :new,原型链 ES6,区别
设计模式发布订阅和观察者
vue是如何做到响应式数据绑定的？--2.0 ,双向绑定, nextTick , slot -- 封装过组件 key, 虚拟dom
性能优化-- 页面流量大
webpack 一般用脚手架, 未自己搭建过. 写过plugin. 构建过程

构建工具

  data() {
    return {
      a: 1,
      b: 1,
    };
  },
  watch: {
    a() {
      console.log('a is changed');
    },
    b() {
      console.log('b is changed');
    },
  },
  methods: {
    changeData() {
      this.b = Date.now();
      this.a = Date.now();
    },
  },

new Promise((resolve, reject) => {
  console.log(1);
  setTimeout(() => {
    console.log(2);
  });
  resolve();
})
  .then(() => {
    console.log(3);
  })
  .then(() => {
    return new Promise((resolve, reject) => {
      console.log(4);
    }).then(() => {
      console.log(5);
    });
  })
  .then(() => {
    console.log(6);
  });
console.log(7);

动画，分别遇到下面两段代码，哪段会阻塞动画的渲染?--- a. 代码A:

let func = () => { Promise.resolve().then(func)} func();

b. 代码B:

let func = () => { setTimeout(func, 0);
}
setTimeout(func, 0);

一、JavaScript基础 1、变量和类型

2、原型和原型链

3、作用域和闭包

4、执行机制

5、语法和API

二、HTML和CSS 三、计算机基础 1、编译原理

2、网络协议

3、设计模式- 【点击查看设计模式】

四、数据结构和算法 1、JavaScript编码能力

2、手动实现前端轮子

3、数据结构

4、算法

五、运行环境 1、浏览器API

2、浏览器原理

3、Node

六、框架和类库 1、TypeScript

2、React

3、Vue

4、多端开发

5、数据流管理

6、实用库

7、开发和调试

七、前端工程 1、项目构建

2、nginx

3、开发提速

4、版本控制

5、持续集成

八、项目和业务 1、后端技能

2、性能优化

3、前端安全

4、业务相关

九、学习提升十、技术之外 1.熟悉常见工程化工具:webpack，gulp，eslint 等等，知道如何调优:chunkhash，contenthash，dllplugin，commonchunkplugin，最好自己写过 loader 和 plugin。AST 和依赖树，commonJS 和 ES6 Module 差别。

2.熟悉常见缓存优化和 http，http2.0。如:Cache-control 及其下 no-store，no-cache，max-age，last-modified 及其下 If-modified-since。http 常见头，1.0 与 2.0 区别。

3.熟悉 MVV，MVN，SSR，了解 vue 或 react 的 virtual dom 原理，熟悉 diff 算法，知道生命周期。

4.原生 js 熟悉原型链，原型链继承，worker，event loop，defer 和 async 引入差别，requestIdleCallback，常见坑:NaN==NaN。

5.css 的 bfc，ifc，1px，flex 布局，grid 布局，垂直居中。

6.架构优化与多端开发。离线缓存如 service worker 等。

7.前沿探索，webgl+wasm。

// 1.洋葱圈 X 2.eventLoop X, 3.双向绑定 4. 2个前端,写代码

代码题​

代码题