前端3年之啥都不会的渣渣面经(持续更新

emmmm 终于决定要开始写掘金了~ 哈哈哈不知道坚持多久先写写看~ 希望给正在找工作和将要找工作的小伙伴一些启发~
直接切入正题把 ❤

没有一场面试会是毫无启发和收获的~
针对之前改了一些内容适当做了一些删减然后去掉了公司名称哈哈哈一般都是顺着简历问的并不会出原题我们得更专注关注面试题本身~~~

9.22~9.23

react antd组件表单包一层怎么获取自定义组件的值
Html5 新增标签 css3新增属性 transition animaition 具体实现
说一下express和koa的区别
说一下微信公众号对接js-sdk的步骤如何去做环境配置
说一下web前端性能优化
cdn的原理
说一下web安全如果连接被运营商劫持怎么办说一下 crfs 和xss
说一下行内元素块级元素都有哪些如果一个行内元素要给高怎么给 (不能用display:inline-block
http状态码一些不常见的都是干嘛的
vue的主要生命周期
beforeMount 能拿到window吗能拿到$el对象吗
http主要的方法
数组去重
求数组中位数
ie盒模型和标准盒模型区别他们之间如何转换
css 画一个三角形
css 画一个梯形
storng 和b标签的区别 (strong的好处)
ssr 的原理 (服务端直出.基于业务的好处)
对于一个从0 的项目来说进行技术选型的话用react和vue的理由分别是什么面试官很nice~ 声音超级好听(不是...🤦‍♀️

9.23

promise.all 如何实现内部 promise all是并发的但是只返回错误的结果 (如果改写又想并发又想要所有结果怎么办重写all方法实现)
递归层次太深嵌套会导致爆栈, 如何防止内存溢出尾递归
vue watch 和 computed的区别
如何监听一个组件的一个某个变量状态(watch)
vue和react组件有什么区别
let const 的区别
说一下深拷贝和浅拷贝
redux和vuex 的区别什么时候去用这些数据管理
web存储都有哪些 localstoagre 和sessionstorage
axios 内部原理有了解过吗/和fetch有什么区别
为什么手机端的h5 验证不用cookie
token有什么缺点如果偷token怎么解决
vue 高阶组件和react 高阶组件的不同
http 如何传输内部底层原理 tcp是那一层数据时tcp分包传的吗
面向对象原型链
栈内存和堆内存的区别什么时候用栈,什么时候用堆
get和post的区别一般啥时候用get 啥时候用post 文件上传为啥只能用post
常用的linux命令都有哪些
还有一些vue业务层级的东西主要是整个项目组织架构如何流程
一个人从0开始搭建项目的话都会做一些什么配置
在封装基础组件的时候怎么区分哪些组件时基础的哪些组件的高级的
给组件注入一个值的话怎么注入(vue 高阶组件 mixin)

9.24

做一下自我介绍

项目中遇到的印象深刻的难点
如何升级一些项目里的包
webpack 优化的一些plugin 都有哪些
webpack 4 相对于3 的优化
自己写过webapck plugin吗
vue项目的优化的点
cdn 原理为什么快 cdn 的优缺点
每次是怎么更新cdn资源的
如果要不自己手动刷缓存有什么方法前端来控制
说一下浏览器缓存
etag 有什么缺点
强缓存如何通知过期 max和exprise 有啥不同哪个更有效 max-age 为啥优先级更高
为啥要尝试ssr ssr有什么好处
ssr的缺点
vue 虚拟dom 是干嘛的
vue 的数据劫持是怎么做的
object.definePrototyoe 有什么缺点
那vue3.0 有什么更新
说一下js 的回调的发展进程从地域回调到promise 到aysnc await
3个请求并发的时候怎么拿到结果
说一下js 的继承都有哪些方式
class 的构造函数和构造函数有什么区别
数组去重 (非常爱问每家必问)
说一下垃圾回收
说一下js 的复制方式 var let const的区别
常用css布局有哪些
float 怎么使用最开始要用float 是要解决什么
position 都有什么属性
用flex 布局有什么什么问题
十进制怎么转换为2进制
TCP是哪一层 IP是哪一层 HTTP是哪一层
TCP 怎么分片
TCP 为什么要三次握手,是怎么三次握手的
进半年的职业规划

9.25

var let const的区别
浅拷贝和深拷贝的区别
如果有函数的话怎么深克隆我用的库用的什么库
浏览器的事件循环
说一下事件冒泡,具体的例子
react 为什么要统一在document处监听
event 的target 和current target 有什么区别指的是点击的div还是
http 常见的状态码
https 为什么安全
https 公钥是放在哪里
react 和vue的key 有什么作用
vue 除了set方法和数组变更方法还有什么可以改变数组的数据,自己试过改变数组的方法
vue 双向绑定是怎么实现的
vue的render函数是怎么把模板变成render函数的

9.25

说一下 vue的 computed 计算属性和watch的区别
说一下watch的内部的原理 watch 怎么监听数组 watch 监听对象用的什么API
说一下nextTick 干什么用的,内部的原理是什么有没有用过,什么情况下用这个
vue 的源码有了解过吗
vue router的两种mode hash和history
vue的key 有什么作用
绑定v-for之后 dom会重复利用吗
箭头函数和普通函数的区别
箭头函数为啥不能当做构造函数呢
箭头函数的this和普通函数的this 分别指向哪里
函数改变作用域的方法 call,apply 和bind的区别
自己实现一个call 自己实现一个bind 怎么实现
函数防抖和节流有用过吗
协商缓存命中的状态码是多少强缓存命中的状态码是多少
webpack plugin 和loader的区别, 加载顺序是什么样的
webpack的魔法注释是什么在哪里使用
一般怎么做的项目优化
webpack 分包策略把一些不常用的资源分一个vendor包不要把所有第三方插件打在一起
http 和https的区别 , http2 和https的区别
css怎么画三角形
宽高不固定的话怎么垂直居中

9.27

写一个js 去掉出现次数最少的字符
const a=new Function() 的时候 new 发生了什么
react 减少render 函数的方式 (优化方式
react hooks useMemo()
react fiber
react purecomponent
进程和线程的区别
TCP 和UDP 的区别

9.28

//题目1
function sayHi() {
  console.log(name);
  console.log(age);
  var name = "Lydia";
  let age = 21;
}
//题目2
const demo = {a: false, b: undefined, c: null};
const {a = 1, b = 2, c = 3} = demo;

console.log(a, b, c);
//题目3
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}
//题目4
const shape = {
  radius: 10,
  diameter() {
    return this.radius * 2; //10
  },
  perimeter: () => 2 * Math.PI * this.radius //
};

shape.diameter(); 
shape.perimeter(); NaN


//题目5 自己写一个深拷贝
const isObject=(obj)=>{
  return typeof obj==='object' && item!==null || typeof obj==='function'
}
const deepClone =(obj) => {
 const o={}
  for(let key in obj){
  const item=obj[key]
    if(isObject(item)){
     o[key]=deepClone(item)
    }
    else if(Array.isArray(item)){
      o[key]=[...item]
    }
    else{
      o[key]=item
    }
    
  }
  return o;  
};



//题目6 自己写一个promise 的ajax
$.ajax({
  method: 'get'
});
new Promise((resolve,reject)=>{
  $.ajax({
  method: 'get',
  sunccess:()=>{
    resolve()
  },error:()=>{
    reject()
  }
}
}).then((res)=>{
  
},(err)=>{
  //失败
})


//题目6
给定一个字符串，请你找出其中不含有重复字符的 最长子串 的长度。
示例 1:
输入: "abcabcbb"
输出: 3
解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。
示例 2:
输入: "bbbbb"
输出: 1
解释: 因为无重复字符的最长子串是 "b"，所以其长度为 1。
示例 3:
输入: "pwwkew"
输出: 3
解释: 因为无重复字符的最长子串是 "wke" "kew"，所以其长度为 3。
请注意，答案必须是 子串 的长度，"pwke" 是一个子序列，不是子串。

9.29

1.给定一个字符串,得到一个数组,出现次数由大到小排序

2.试下一个数组扁平化

3.实现一个axios

4.css画一个三角形

5.宽高不定的如何元素如何垂直居中

9.29

说一下webapack打包优化
webapck loader和pulgin的区别
webpack tree-shaking 内部原理再哪里配置
webpack 如何配置一个文件改变其他的hash不改变 (只改变这个文件其他依赖不重新打包)
首屏优化做了哪些操作
说一下http 2和http1.1的区别和 http3 的区别
为什么http2 多路复用就好
new一个函数的时候发生了什么
箭头函数的this指向
var 和let的区别为什么let 声明的对象不对window里
vue的响应式基于什么
vue的数组的变更方法内部做了什么
vue3.0做了什么更新让性能更快,我说代理反射,他问那为什么代理反射比数据劫持要好
箭头函数有没有prototype属性
箭头函数为什么不能当做构造函数
__proto__ 属性和prototype属性的区别
vue的隔代遗传,provide 和inject 如果爷爷底下的组件也用provide 遗传那么子组件用谁的值
宏任务 settimeout 是先放在栈里,还是先运行定时任务然后放在栈里
vue内部mixin 和extends的实现原理
css flex 布局如果缩放超过了父的长度,那么会如何缩放
作用链上的参数是属于词法作用域吗
如何判断一个对象是不是通过 new 出来的
for in 和for of 的区别

// 代码段一：
var Fn = () => {
  this.name = 'hanmeimei';
  return 123 ; // {name: 'lilei'}
}
console.log(new Fn()) // 箭头函数不能new
var Fn = function A() {
  this.name = 'hanmeimei';
  return 123 ; // {name: 'lilei'}
}
console.log(new Fn()) // 我答123 打错了 结果是hanmeimei

//代码段二:
function Foo() {
  this.bar = 1;
  this.foo=2;
  this.id=111;
  this.getId = ()=>{
    console.log(this.id);
  }
}

Foo.prototype.fn = () => {
  console.log(this.bar);
  console.log(this.foo);
};

let foo = new Foo();
foo.fn();
//我答:两个undefined

function bar() {
    console.log(myName)
}
function foo() {
    var myName = "11"
    bar()
}
var myName = "222"
foo()
//myName:222  又问是词法作用域吗 我???

Object.prototype.a = 'Object';
Function.prototype.a = 'Function';
function Person () {};
var child = new Person();
console.log(child.a);
console.log(Person.a);
//Object
//Function

setTimeout(function() {
     console.log(1)
}, 0);

new Promise(function(resolve, reject) {
     console.log(2)
     for (var i = 0; i < 10000; i++) {
          if(i === 10) {console.log(10)}
          i == 9999 && resolve();
     }
     console.log(3)
}).then(function() {
     console.log(4)
})

console.log(5)
//2,10,3,5,4,1

问了个快排思想

9.30

垂直居中的方式
文本溢出 css 省略号单行文本如何垂直居中
说一下原型和原型链
常见web布局
说一下你遇到的浏览器兼容性
webpack 的优化怎么做的
浏览器的事件循环
vue的nextTick 具体的实现
vue的双向绑定
最近做的一个项目
自己实现一个vue的modal弹窗
vant源码看过吗

10.09

说一下自己的项目
说一下事件循环
微任务和宏任务有什么区别(事件队列这方面)
说一下自己平常用的es6特性
for-of /for-in /for循环的区别
移动端的兼容性和适配怎么做
vue的计算属性和method和watch的区别
ssr的好处和mpa 和spa的区别和理解
react的next了解吗我说我了解nuxt
react和vue 的生命周期的函数在ssr的时候有什么区别
react的新的生命周期
vue的代理和object.defineproperty的区别
vue3.0的代理是代理整个对象吗?
react的setState 是同步的还是异步的
常见的把setState变成同步的操作有哪些(settimeout 和promise(这个没说上来))
class类没有用到react 为什么要引入React
react hooks 有没有在项目里写过
受控组件和非受控组件的区别
redux都用过哪些第三方库
react和vue 的框架的理解和对比
react 的高阶组件有没有写过
打包优化是怎么做的
从url到浏览器显示出内容这方面可以怎么做性能优化,提升速度
http版本的一些迭代的变化
node有了解吗 express
实现一个函数柯里化 curry

10.10

vue 现在用2.0 还是3.0版本
vue 3.0 有什么变化内部有什么比较大的改动
object.defineproperty 怎么去做数据劫持
object.defineproperty 的缺陷是什么为什么不能代理数组
vue重写数组的方法有什么缺陷为什么可以做数据劫持及视图感知
数组的长度length,直接修改数字下标视图会更新吗内部做了什么
proxy 为啥就可以做数据劫持
了解元编程吗(用代理去修改 js内部的一些函数 )
反射Reflect一些常用的API都有哪些
http从url输入到输出都会经历那些过程越详细越好
tcp 是哪一层的协议(传输层) http是哪一层的协议(应用层)
强缓存和协商缓存强缓存发不发请求缓存的东西存在哪里 304代表什么
浏览器为什么只要某个资源需要强缓存/协商缓存用什么判断(cache-control判断)
cdn 或者其他nginx web容器怎么设缓存的一些操作
如果中间有代理nginx 它的缓存路径和机制是怎样的(会不会在代理nginx上缓存资源呢? )
静态资源为什么要放 cdn 呢
函数防抖节流有了解过吗手写一个防抖节流自己选一个
call和apply bind的区别,手写一个bind
es6的class 内部的实现机制大概是什么样的 constructor啊 super啊这些都做了什么呢
react 了解吗 hooks 使用时候生命周期这个顺序如何保证呢
useEffect 的替代的事哪几个生命周期
数据库sql inner join 是干嘛的一些sql的问题
如果设置一个用户管理权限怎么去设计这个数据表他们之间是怎么关联的
说一下你理解的promise / promise.all
说一些事件循环 / vue的nextTick
说一下你对ssr的理解它的优缺点
nuxt 是怎么把vue的模板 .vue文件变成html的? 包括去服务端去请求数据,放在html里的过程内部做了什么呢

10.10

给出一个字符串转成千分位
写一个数组扁平化的方法 ,不用API
手写函数节流防抖

10.12~10.15

堆和栈的区别
垃圾回收内部是怎么标记清除的,机制是怎么遍历呢
场景题: 一个有序[0~9]的数组,如何变成乱序的用最优解
设计模式了解哪些可以讲一下什么是发布订阅吗代码层级的设计如果实现
1+[] 输出什么呢

10.16

.下面代码控制台输出结果：

var scope = “global";
function myFunc () {
    console.log(scope); 
    var scope = "local";
}
myFunc()

2.下面代码控制台输出结果：

var name = “Mary”；
function hello () {
    console.log(“Hello！” + name);
}
function sayHello () {
    var name = “Bob”;
    hello();
}
function sayHello1 () {
    var name = “Mark”;
    function hello () {
        console.log(“Hello！” + name);
    }
    hello ();
}


（1）hello();（2）sayHello();（3）sayHello1();

3.写出下面程序的输出结果

function changeStuff(a, b, c)
{
  a = a * 10;
  b.item = "changed";
  c = {item: "changed"};
}
var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};


changeStuff(num, obj1, obj2);


console.log(num);
console.log(obj1.item);    
console.log(obj2.item);

4.写出下面程序的输出结果

var a=1
function myFunc() {
  this.a = 10
  setTimeout(() => {
    a = 20;
    console.log(this.a)
     setTimeout(function() {
          let a = 30;
        console.log(this.a)
    }, 100)
  }, 100)
}

(1)myFunc()

(2)var fun1 = new myFunc()

下面程序的输出结果

let promise2 = new Promise((resolve) => {
  resolve('promise2.then')
  console.log('promise2')
})
promise2.then((res) => {
  console.log(res)
  Promise.resolve().then(() => {
    console.log('promise3')
  })


  setTimeout(() => {
    console.log('setTimeout')
  })
  
})




Promise.resolve().then(() => {
  console.log('promise4')
})


console.log('script end')

面试到后期其实重复性的问题非常多大部分都是前面提到的有一些面试官会追着你问项目的一些技术难点亮点,如果没有亮点也没关系 ,准备一个比较有把握的模块去细细搞懂,挑一个部分去说面试官从中也可以看出来你的学习能力和你解决问题的一些方式 ,有些公司不怎么问基础喜欢按业务场景出题,有的公司一面非常注重基础有的面试官会深入的去问有的面试官在你磕绊的时候也会提醒一下哈哈哈哈祝大家都找到心仪的工作