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

·  阅读 1273

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

  1. 说一下webapack打包优化

  2. webapck loader和pulgin的区别

  3. webpack tree-shaking 内部原理 再哪里配置

  4. webpack 如何配置 一个文件改变 其他的hash不改变 (只改变这个文件 其他依赖不重新打包)

  5. 首屏优化做了哪些操作

  6. 说一下http 2和http1.1的区别 和 http3 的区别

  7. 为什么http2 多路复用就好

  8. new一个函数的时候发生了什么

  9. 箭头函数的this指向

  10. var 和let的区别 为什么let 声明的对象不对window里

  11. vue的响应式基于什么

  12. vue的数组的变更方法内部做了什么

  13. vue3.0做了什么更新 让性能更快,我说代理反射,他问 那为什么代理反射比数据劫持要好

  14. 箭头函数有没有prototype属性

  15. 箭头函数 为什么不能当做构造函数

  16. __proto__ 属性和prototype属性的区别

  17. vue的隔代遗传,provide 和inject 如果爷爷底下的组件也用provide 遗传 那么子组件用谁的值

  18. 宏任务 settimeout 是先放在栈里,还是先运行定时任务然后 放在栈里

  19. vue内部mixin 和extends的实现原理

  20. css flex 布局 如果缩放 超过了父的长度,那么会如何缩放

  21. 作用链上的参数 是属于词法作用域吗

  22. 如何判断一个对象是不是通过 new 出来的

  23. for in 和for of 的区别

  24. // 代码段一:
    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
    复制代码
  25. function bar() {
        console.log(myName)
    }
    function foo() {
        var myName = "11"
        bar()
    }
    var myName = "222"
    foo()
    //myName:222  又问是词法作用域吗 我???
    复制代码
  26. Object.prototype.a = 'Object';
    Function.prototype.a = 'Function';
    function Person () {};
    var child = new Person();
    console.log(child.a);
    console.log(Person.a);
    //Object
    //Function
    复制代码
  27. 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
    复制代码
  28. 问了个快排思想

9.30

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

10.09

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

10.10

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

10.10

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

10.12~10.15

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

  1. 下面程序的输出结果
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')
复制代码

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

分类:
前端
标签: