记2020前端面试之路

头像
kangting
    阅读 7 分钟
    7

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

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

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

    1. 日常问题

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

    2. html篇

      1. meta一般有什么属性？

    3. css篇

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

    4. js基础篇

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

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

        示例题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.png

        示例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篇

      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. 开发组件的注意事项
    javascript前端vue.jscsshtml
    kangting
    62 声望3 粉丝

    一只小小的前端

    « 上一篇
    javascript toString()
    下一篇 »
    值得推荐的资源

    引用和评论

    推荐阅读
    头像
    前端性能优化

    kangting阅读 817

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.9k评论 7

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 26阅读 6.7k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    0 条评论
    得票最新