2019校招前端面经

浑水摸鱼度过大学四年，女朋友都没谈个，竟然都要找工作面试，都没准备好，然后就开始做完简历海投了。

小米一面

第一家面试公司，也是第一次面试，特别紧张。果然没做好准备，然后就凉了，不怕，失败乃成功的母亲。

1. 自我介绍
2. 谈项目，遇到什么问题，怎么解决的
3. vue和jq的区别是什么（其实就是问vue的特点）
   • 数据视图分离 （MVVM）
   • 性能特别好（虚拟dom）
   • 维护成本低（组件化，模块化）
4. 手撕es6 map源码

   
       class myMap{
           constructor(){
               this.init();  
           }
           init(){
               this.bucket = new Array(10);
               for(var i = 0; i < this.bucket.length; i++){
                   this.bucket[i] = {
                       type : 'bucket' + i,
                       next : null
                   }
               }
           }
           makeHash(key){
               //string number null NaN undefined function(){} {} []  boolean
               var hash = 0;
               if(typeof key != 'string'){
                   if (typeof key == 'number') {
                       hash = Object.is(key,NaN) ? 0 : key;
                   } else if(typeof key == 'object'){
                       //null {}  []
                       hash = 1
                   } else if(typeof key == 'boolean'){
                       hash = +key;
                   } else {
                       //funciton undefined
                       hash = 2 
                   }
   
               } else {
                   for(var i = 0; i < 5; i++){
                       hash += key[i] ? key[i].charCodeAt() : 0;
                   }
               }
               return hash % 8;
           }
           set(key,value){
               var hash = this.makeHash(key);
               var oTempbucket = this.bucket[hash];
               while(oTempbucket.next){
                   if(oTempbucket.next.key == key){
                       oTempbucket.next.value = value;
                   } else {
                       oTempbucket = oTempbucket.next;
                   }
               }
               oTempbucket.next = {
                   key : key,
                   value : value,
                   next : null
               }
           }
           get(key){
               var hash = this.makeHash(key);
               var oTempbucket = this.bucket[hash];
               while(oTempbucket.next){
                   if(oTempbucket.next.key == key){
                       return oTempbucket.next.value;
                   } else {
                       oTempbucket = oTempbucket.next;
                   }
               }
           }
           delete(key){
               var hash = this.makeHash(key);
               var oTempbucket = this.bucket[hash];
               while(oTempbucket.next){
                   if(oTempbucket.next.key == key){
                       oTempbucket.next = oTempbucket.next.next;
                       return true;
                   } else {
                       oTempbucket = oTempbucket.next
                   }
               }
           }
           has(key){
               var hash = this.makeHash(key);
               var oTempbucket = this.bucket[hash];
               while(oTempbucket.next){
                   if(oTempbucket.next.key == key){
                       return true
                   } else {
                       oTempbucket = oTempbucket.next;
                   }
               }
               return false;
           }
           clear(){
               this.init();
           }
       }
   

   这其实就是哈希表的简单实现，面试官只让写怎么存储的，所以不用写下面的api，但还是全贴出来吧。
5. 归并排序
   基操了,随手往上一写。常见排序算法见上篇博客
6. 闭包的概念和作用
7. cookie、sessionStorage、LocalStorage的区别
   • cookie有同源策略的限制
   • cookie有生命周期（max-age，expires）
   • cookie有大小限制（4k左右）
   • LocalStorage本地存储，除非手动取消，否则一直存在，大小5M左右
   • sessionStorage 会话存储，关闭页面即消失，大小5M左右
8. cookie是浏览器设置还是服务器设置
   Cookie是由服务器端生成的，发送给User-Agent（一般是浏览器），（服务器告诉浏览器设置一下Cookie），浏览器会将cookie以key/value 的形式保存在某个目录下的文本文件内，下一次请求同一网站时就发送该Cookie服务器（前提是浏览器设置Cookie）
9. http请求头哪个部分有cookie信息
   这我还真不知道，屌大的来补充下
10. 性能优化
    性能优化可以分为页面优化，代码优化

- 页面优化
1. 最最最重要就是减少http请求，了解输入url到页面显示的过程你就会了解，这是多么有效。
2. 设置http缓存
3. 资源的合并和压缩
4. 雪碧图 懒加载 瀑布流
5. script放在底部

- 代码优化
1. 这个时候你就可以秀一下，防抖节流，要是追问你，就手撕源码给他看。
2. 减少重绘和重排
3. 减少沿作用域链的查找，设置变量保存即可
4. 使用文档碎片  fragment

百度一面

百度，真的，笔试编程题巨难，满头大汉，就A了一道，然后莫名其妙的就进了笔试。
百度面完才知道自己有哪些不足，然后回去疯狂补

1. b和strong的区别

2. 语义化的作用

3. this指向

4. js继承的设计思想

5. flex布局

6. 闭包的概念和作用

7. 手撕堆排序
   这不就尴尬了么这不是，除了堆排序不会，其他都会，然后就让写了个快排。

8. 反转链表

9. 怎么判断链表是否有环
   快慢指针即可

10. 二叉树的前中后序遍历

11. 前后端通信有哪些基本方式
    就知道个ajax，好像还有个webSocket？？

12. 介绍一下ajax并实现

13. https的过程 （就是非对称加密生成私钥，私钥进行对称加密传输）
    

14. 七层模型和五层模型
    主要就是把各个层的协议说出来即可

15. tcp为什么比udp安全
    介绍三次握手过程即可

16. 设计模式知道吗？
    答：简单工厂，抽象工厂，装饰者模式，观察者模式，单例模式
    问：那你知道简单工厂和抽象工厂的区别么，各自的使用场景
    答：简单工厂就是通过一个函数来决定创建某一种产品对象类的实例，主要用来创建同一类对象
      抽象工厂就是定义一个产品簇，声明一些必备方法，如果子类没有重写就会抛出错误。
    问：拿手写一个单例模式
    答：

    var obj = {}  天秀
    

    问：知道适配器和装饰者模式的区别么？
    答：装饰者模式：在不改变愿对象的基础上，通过对其进行包装拓展（添加属性或方法）使其原有对象可以满足用户的更复杂需求
      适配器模式：将一个类的接口转化为另外一个接口以满足用户需求，使类之间接口的不兼容问题通过适配器得到解决
    问：你知道策略模式么？
    答：不知道

17. 数据库索引的作用
    (懵逼…)
    查找速度更快，B+树

快手一面

快手的算法题还是比较简单的，经过前面面试，然后自己复习，觉得还ok

1. 判断链表是否有环
2. 删除链表倒数第n个
   还是快慢指针，快指针走到第n个，然后两个指针一起走
3. 判断回文
   头指针和尾指针即可
4. 给定数组，统计出现次数
   对象哈希表实现
5. js数据类型（提了一嘴Symbol）
6. Symbol的特点 独一无二
7. let和const的区别
8. tcp和udp的区别
9. http有哪些请求头或响应头以及有哪些状态码
   这里如果知道浏览器缓存（强缓存，协商缓存）就可以把浏览器缓存的那些状态码讲出来，然后引导面试官问你他们之间的区别…
   常用状态码：200 301 302 304 400 403 404 500
10. flex布局以及常用属性
11. display有几种方式以及含义
12. 不知道宽高怎么水平垂直居中
    transfrom
    flex
    left，top，right，bootm 0
13. table里面的td怎么居中
14. display table和table-ceil的区别
15. vue的生命周期以及作用
16. vue阻止冒泡的简单写法 （修饰符）
17. 写vue的数据双向绑定
18. 学习前端的途径

快手二面

先是一堆自我介绍，blabla…

1. 为什么要学习前端，对前端有什么看法
2. 看什么书
   刚好给大家推荐下
   <<JavaScript设计模式>>
   <<JavaScript高级程序设计>>
   <<JavaScript权威指南>>
   <<你不知道的JavaScript>>
   <<数据结构与算法JavaScript描述>>
3. html为什么要有这么多类型的标签
4. es6 常用api
5. pomise的作用及其原理
   异步流程控制
   没让我随手写下源码可惜了。
6. 归并排序
7. Vue和Zepto的区别
   就是问Vue的特点
8. 是否写过后端接口
   刚好学校数据库课设搞了个Severlet
9. 是否写过webpack的和chorme插件
   这个还真没，只了解过chorme插件。但也没动手写，还是太弱了
10. webpack的loader和plugin的区别
    loader只是一个转化器，比如less-loader css-loader style-loader
11. 是否用过git
12. https详细过程
13. 服务端返回的证书，客户端怎么验证有效
    本地有个C.pub
    查看指令为$ cat ~/.ssh/id_rsa.pub ssh-rsa

最后面试官建议 多刷几遍小红书，犀牛书只是参考手册

快手三面

准备三面，把源码，数据结构算法全都巩固了一遍，自信满满，然后…一个都没考！！！

1. 自我介绍

2. 反转数字（效率最高的写法）
   最开始写的是转化为字符串然后遍历一遍
   最后面试官提示说，如果是c语言，转化为字符串都不好转，怎么办呢。
   想了半天，差点都取模运算给忘了
   不知道除了这个还有什么效率更好的做法

3. （牛客网视频面）在下面聊天框中输入一些东西，直到看见，这过程发生了什么
   这个我答的不太好，编译原理没学…就随便扯扯

4. 那我输入这些发送出去，直到你看到，网络中发生了什么过程
   这也没回答好…扯的是UDP
   但好像多人聊天室是webSocket

5. 最后问了一个贪吃蛇是如何具体实现的
   blablabla…

6. 我没有什么问题了，你还有什么问题吗
   OS：这么快吗？？不问动态规划，背包啥算法…
   就问了一个后端该如何选择
   面试官超级细心，聊了5mins，本来还有些迷茫，后来就非常清楚该如何做了

   随手提了一嘴，咱们是不是面的有点快呀
   答：不快了，这都半个小时了…

快手hr面

前面感觉还答的挺好的，但是最后由于没有实习经验，感觉会凉。

1. 介绍自己
2. 对工作城市是否有选择
3. 项目的背景，扮演角色，负责的模块，收获
4. 一二三面的优点和缺点
5. 缺点该怎么取弥补
6. 应聘快手岗位的优势和劣势在哪
7. 学习或生活中最骄傲的一件事
8. 未来三到五年的规划
9. 为什么不考研
10. 是否有实习

同花顺一面（电话）

1. 介绍自己
2. cookie特点
3. vue特点
4. http状态码
5. 如果给一个指针，顺时针旋转一圈的动画如何实现
6. 是否了解单页面应用 （不了解…）
7. 如何判断引入的js文件是否加载完 （complete）
   …
8. 10月份给offer能否来实习

好多不记得了，同花顺一面有点简单了，可能电话面没法问算法和数据结构。

---

陆续收到其他厂的面试，陆续更新…