记2020前端面试之路

时间  2021-02-19
标签 javascript css html 前端 vue java node jquery webpack es6 栏目 快乐工作 繁體版
原文   原文链接

2020从我第一份简历投递出去已经将近两个月了，虽然暂时没画句号，但我想先记录一下，大家裸面的，裸辞的都慎重一下。javascript

下面写的都是真实面试过的，真的会考的。包括腾讯，阿里，头条，滴滴，美团，好将来，真融宝，快手，贝壳等，对问的题目进行了分类。css

题主中途也心理崩溃过，好在有靠谱领导和小伙伴分析，靠谱老公支持，最终抗到了如今。html

  1. 平常问题前端

    1. 自我介绍（99%会问，最好仍是准备一下）

  2. html篇vue

    1. meta通常有什么属性？

  3. css篇java

    1. flex 弹性布局了解吗？用过哪些？
    2. flex布局？？怎么让它一个居左一个居右？
    3. positon说一下类型；absolute父级没有relative针对什么定位
    4. 左右布局有几种方式
    5. 标准盒模型和怪异盒模型的区别
    6. BFC解释一下
    7. 元素居中的方法

  4. js基础篇node

    1. 闭包、原型链（手写闭包）
    2. javascript继承
    3. 原型链说一下，字符串有原型吗(有，__propto__指向Object)，全部对象都有原型吗

    4. 理解事件循环机制（会问你详细怎么走的，必须得无理解了才能彻底hold住）；async与await是什么任务；为何是微任务jquery

      示例题1
console.log('script start');
setTimeout(function()  {
console.log('setTimeout');
},  0);
Promise.resolve().then(function()  {
console.log('promise1');
}).then(function()  {
console.log('promise2');
});
console.log('script end');

      示例2:输出什么，为何？
      image.pngwebpack

      示例3
async function async1(){
    console.log('async1 start')
    await async2()
    console.log('async1 end')//w1
}
async function async2(){
    console.log('async2')
}
console.log('script start')
setTimeout(function(){// h1
    console.log('setTimeout')
},0)  
async1();
new Promise(function(resolve){
    console.log('promise1')
    resolve();
}).then(function(){
    console.log('promise2')//w2
})
console.log('script end')
      示例4任务队列理解
setTimeout(()=>{
    console.log(1);
    Promise.resolve().then(()=>{
        console.log(2);
    });
}, 0)

setTimeout(()=>{
    console.log(3);
    Promise.resolve().then(()=>{
        console.log(4);
    });
}, 0)
    5. DOM操做——怎样添加、移除、移动、复制、建立和查找节点
    6. cookie、localStorage、sessionStorage 区别和使用场景
    7. 跨域相关问题，怎么解决？几种方式？
    8. 跨域的方法
    9. 为何会跨域，跨域到后端了吗
    10. 为何会跨域，跨域的实现；option在什么状况会发
    11. 跨域,cookie容许跨域的配置withCredentials: true
    12. 缓存有哪些
    13. 缓存有哪些，协商缓存返回状态是什么，强缓存返回状态是多少
    14. 缓存：强缓存，协商缓存，seestion,localstorge,cookie
    15. 刷新列表会形成数据丢失怎么办
    16. cookie,localstorge,sessionStorge区别
    17. cookie怎么带给后端(withcans)
    18. call,apply,bind的区别
    19. ajax原生怎么写？get与post的区别？post的参数放在哪里的？
    20. post/get的区别，contentType的类型
    21. js实现深度复制（手写代码）
    22. js的基本数据类型；怎么判断数据类型（必须答出对象原型才肯罢休）；symbol怎么声明
    23. [1,2,3].toString()和{a:10}.toString分别打印什么，为何
    24. 邮箱的正则怎么写？
    25. 写一个正则匹配/<script/>内的内容
 const str = 
 /<script\>....</script>
 /<div\></div>
 \<label text="aa"/></label>
    26. 垃圾回收机制，闭包应用场景
    27. 事件循环原理
    28. 判断是不是数组--instanseof ，是不是它的实例
    29. 浏览器缓存
    30. 判断下面的对象是如何成环的
 var a = {
     b: c
 }
 var c = {
     d: d
 }
 var d = {
     a: a
 }

  5. ES6篇es6

    1. promise 实现原理
    2. promise的实现（手写代码）
    3. 怎么判断5个全对
    4. promiseAll --->原生实现

    5. promise结合try catch

      try{
    Promise.reject(2)
    .catch((e)=>{
        console.log(e) 
        throw new Error(3)
    })
}catch(e){
    console.log(e) 
}
try{ 
    const data = await Promise.reject(2);
     console.log(data);
     console.log(4);
     throw new Error(3);
}catch(e){ 
     console.log(e)
    6. async await
    7. js实现继承,ES6实现继承，es6有用吗？ES6 class有用吗？babel把es6转为ES5?ES5实现继承？
    8. set map/weakmap区别
    9. map和forEach的区别
    10. Es6 commonJS的区别
    11. es6和ts

    12. function 和尖头函数的区别

      m:function(){
        console.log(this)
    },
    n:()=>{console.log(this)}
};
a.m();
a.n();
var x=a.m;
var y=a.n;
function f(){
    x();
    y();
}
x();
y();

    13. 解构

      const obj = { 
        a: { b:1, }, 
        c:2
        } 
        const obj1 = {...obj}; 
        const obj2 = {...obj1}; 
        obj.a.b = 3;
        obj.c = 4; 

        obj1.a.b

  6. Vue篇

    1. vue的组件间怎么通讯？父子间怎么通讯？父组件调子组件的方法怎么调用？
    2. vuex
    3. vue生命周期；beforeCreated created之间的区别；created和 beforeMouned之间的区别；若是父组件和子组件，生命周期又是怎样的
    4. SPA，vue单页面如何在后退时返回到上次滚动位置（考vue-router）
    5. vue双向绑定的原理。那是怎么向订阅者发送消息的呢？
    6. vue data 到view的过程（要答出Vdom哦，没问你也要答，否则扣分～～～）
    7. vue-router路由：hash# history；history主要的API；pushState replaceState 区别
    8. vue 模版，虚拟Dom 到真实Dom的转换过程
    9. vue MVVM驱动的原理是什么
    10. 详细说一下vue的周期,平时用什么哪些周期多一些？他们的应用场景
    11. nextTick，他的原理是什么

    12. vue.nextTick(()=>{})是怎么实现的，以及下面的输出

      data: {
   a: 1
 }
 vue.nextTick(()=>{
     this.a = 2
     console.log(this.a)
 })
 Promise.resolve().then(()=>{
     this.a = 3;
 })
 console.log(this.a)
    13. vue-router路由,默认的是什么【hash】
    14. vue路由的钩子函数----没答上来
    15. 组件的通讯方法
    16. vuex的数据流向，vuex的原理
    17. vue过滤器有哪些,数字格式化{{ num | formatAmount(0)}} 它的原理
    18. vue使用use的使用的发生了什么
    19. computed计算属性的原理
    20. vuex为何这么设计,为何要采用传参数的方式
    21. vue-router
    22. vue函数式组件和非函数式组件
    23. 登陆 权限 content 路由导航
    24. vuex说一下
    25. event.bus (知识)//new Vue()，自定义事件
    26. v-model的双向绑定原理
    27. object.property的缺点，为何不能监听
    28. vue3.0的改进proxy
    29. vue的原理
    30. jquery和vue的区别
    31. vue获取元素的方法
    32. nextTick，原理
    33. created和mounted的区别
    34. computed和watch的区别，哪一种效率高一些
    35. data 为何是一个函数
    36. data的函数能够改为箭头函数吗
    37. vue3.0 为何使用proxy
    38. 数据新增对象怎么让它能够更新到组件上-vue.set

  7. webpack篇

    1. webpack打包用过吗？
    2. webpack loader(module)和plugin用了哪些
    3. webpack的loader和plugin的区别，为何要使用loader，各个loader的做用
    4. 为何webpack4能够再命令行直接执行
    5. 用过哪些webpack的高级属性
    6. 热重载是怎么作的
    7. 不一样环境怎么区分打包（packge.json）
    8. webpack的构建过程
    9. 热更新的原理-------》不知道
    10. 自定义插件的流程
    11. require的原理，es6转es5原理
    12. tree shaking的原理以及如何充分利用tree shanking

  8. npm篇

    1. npm发布了几个包？打包出来的格式？
    2. npm install发生了什么

  9. http篇

    1. http缓存？
    2. http缓存,这两个缓存的关联关系是怎么样的,是怎么转换的
    3. 一个页面从输入 URL 到页面加载显示完成，这个过程当中都发生了什么？
    4. HTTP/2 和 HTTP 1.1 有什么区别？
    5. http状态码有哪些？
    6. 浏览器输入地址发生了什么
    7. http2.0了解吗
    8. http请求成功的状态码有哪些
    9. http2.0的改进

  10. 移动端

    1. 移动端怎么作适配？
    2. rem和em的区别；
    3. 若是要在chrome上显示10px的字怎么办
    4. rem是基于什么布局的一个方式？
    5. hybrid开发？
    6. 怎样实现 微信开发的登录与分享 ？
    7. 遇到过哪些移动端的一些坑
    8. PC和移动怎么自适应怎么作
    9. 手机调试问题
    10. 移动端设置
    11. Pc和移动开发的区别

  11. 性能优化篇

    1. 如何优化和减小页面的加载时间。
    2. 性能优化相关？
    3. 项目中作了哪些性能优化
    4. cdn有哪些优化静态资源加载速度的机制
    5. 设计AutoComplete组件（又叫搜索组件、自动补全组件等）时，须要考虑什么问题？
    6. 浏览器第一次访问，第二次访问，第三次访问的区别
    7. DOMContentLoad 与ttfb区别
    8. ready与onload区别，哪一个先执行
    9. 错误监控
    10. DNS解析
    11. CDN的理解
    12. 常见的性能
    13. 防抖
    14. 函数节流，函数防抖实现

  12. 服务端篇

    1. koa2中间键用了哪些
    2. nodejs?了解哪些部分？
    3. node的进程管理
    4. koa2节点管理
    5. node了解多少
    6. node了解多少

  13. 手写代码和算法篇

    1. 请用js实现将一个二维数组转换成树结构
   例如：将下面数据
   [
       ["a", "aa", "aaa", "aaaa"],
       ["b", "bb", "bbb"],
       ["a", "ab", "aba"],
       ["a", "aa", "aab"]
   ] 转为：
   [
       {
           "name" : "a",
           "child" : [
               {
                   "name" : "aa",
                   "child" : [
                       {
                           "name" : "aaa",
                           "child" : [
                               {
                                   "name" : "aaaa",
                                   "child" : []
                               }
                           ]
                       },
                       {
                           "name" : "aab", "child" : []
                       }
                   ]
               },
               {
                   "name" : "ab",
                   "child" : [
                       {
                           "name": "aba",
                           "child" : []
                       }
                   ]
               }
           ]
       },
       {
           "name": "b",
           "child" : [
               {
                   "name" : "bb",
                   "child" : [
                       {
                           "name" : "bbb",
                           "child" : []
                       }
                   ]
               }
           ]
       }
    2. `fn = f(n-1) + f(n-2)
   f0 = 0
   f1 = 1
   n >=0 正整数
   fn`
    3. 数组拍平（手写代码）
      image.png
      image.png

    4. 嵌套数组拍平

      [1,2,3,4,[5,6,[7]],8]
[1,2,3,4,5,6,7,8]
除了常规方法，还有奇葩方法，全转字符串再把中括号删掉
    5. image.png

    6. query解析

      ?a=0&a=1&a=2&c&url=url内容#333
转成
{
    query:{
        a:[0,1,2],
        url:'url内容'
    },
    hash:''

    7. 手写

      var data = { a: { b: { c: 'ScriptOJ' } } }
console.log(safeGet(data, 'a.b.c')) // => scriptoj
console.log(safeGet(data, 'a.b.c.d')) // => 返回 undefined
console.log(safeGet(data, 'a.b.c.d.e.f.g')) // => 返回 undefined
console.log('ScriptOJ') // => 打印 ScriptOJ
    8. 手写阶乘 5*4*3*2*1
    9. 拖拽
    10. 写一个函数，计算两个矩形是否碰撞
    11. 实现函数，功能是给数组打乱顺序，要求不能用sort进行打乱
    12. 手写快速排序
    13. 手写promise的实现
    14. 浅拷贝
    15. 深拷贝
    16. 怎么让0所有到最后去的方法
    17. 二叉树
    18. [1,2,5,3] 获得10的函数
    19. 两个有序数组（升序）排序组合成1个有序数组（升序）
    20. 二分查找算法
    21. 5000 → 5,000,5430342 → 5,430,342
    22. var list = [{age: 1}, {age:13}, {age:8}],按照 age的值 将list从大到小排序
    23. var list = [{age: 1}, {age:13}, {age:8}],输出重复次数最多的age？重复了多少次？（此问题和第一问无关系）

    24. 函数柯里化

      请实现方法`curry(Function) => Function`，传入一个多参函数，返回单参函数
 example:
 const sub = function(a, b, c, d) {
     return a+b+c+d;
 }
 const subCurry = curry(sub);
 sub(1,2,3,4) = subCurry(1)(2)(3)(4)
 sub(1,2,3,4) = subCurry(1,2)(3)(4)

  14. 项目流程篇

    1. 前端上线流程是怎么样的
    2. 怎么保障你的代码质量
    3. 代码上线了有问题怎么办
    4. 部署是怎么样的过程，上线的过程是怎么样的？他是怎么被用户访问到的？
    5. 如何保证代码质量

  15. 开放性问题

    1. 目前你对什么Web技术最感兴趣
    2. 最近了解前端的什么技术？
    3. 你有什么想问个人吗
    4. 你遇到的一些难点
    5. 介绍一个你的一个项目
    6. 说一下你的用户体验怎么优化的
    7. 你最近在学习什么
    8. 技术的积累沉淀有哪些
    9. 你为何要离职
    10. 了解为微应用吗
    11. 你是如何设计组件的，如何设计一个dialog，要考虑哪些问题
    12. 你平时是怎么学习
    13. 你想作什么工程
    14. 你有什么想问个人
    15. 技术管理有什么想法
    16. mock方法
    17. 组件怎么封装
    18. 你的兴趣爱好
    19. 最骄傲的一件事
    20. 你的优势和缺点
    21. 你有什么要问个人
    22. 开发组件的注意事项
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程