找实习日志

文章目录
  1. 1. 前言
  2. 2. 阿里巴巴 蚂蚁金服
  3. 3. 腾讯 WXG
  4. 4. 百度 FEX
  5. 5. 网易 网易云音乐
  6. 6. 海豚浏览器
  7. 7. 心得体会

前言

你的未来一定是不懈的努力和坚持+狠狠地抓住来之不易的机会
从2017年2月开始准备，到2017年4月21，历时两个月，终于收割了实习offer。回首这两个月，经常为了第二天的面试备战到深夜，也曾食不知味，也曾暴饮暴食，也曾为了多一次面试机会，一天之内往返800公里以外的城市，也曾怀疑自己，对未来不止一次的迷茫与焦虑，也曾认识很多志同道合的朋友，一起奔跑，发现自己的不足，幸运的是有了一个还不错的结果。fighting~

阿里巴巴 蚂蚁金服

2017/3/6-2017/4/21内推一个半月，经历了笔试，boss面，一面，二面，蚂蚁花呗交叉面，HR面。

  1. 笔试
    实现一个poplayer，弹层组件。(常见组件:poplayer弹层、slider图片轮播、suggest输入框的自动补全、tab标签页、pagging分页、scrollbar滑动条)

  2. boss面

    1. 有没有做过分布式系统;
    2. Session Cookie里面都可以放那些信息字段;
    3. 有没有用过TCP、UDP;
    4. HTTP Head 头里有哪些字段;
    5. 如果我们要用UDP实现可靠的传输，怎么去实现;
    6. POST二进制文件，怎么实现？(POST四种方式，enctype="multipart/form-data")。

  3. 一面

    1. NodeJs的IO是异步还是同步的方式(不管网络IO还是文件IO都是异步，同步也是在异步的基础上实现的);
    2. CSS样式版本管理。(静态资源发生变化后，强制浏览器加载更新的资源，而不是缓存的没过期的);
    3. 闭包、跨域;
    4. React;
    5. Canvas优化。

  4. 二面

    1. 项目面(最有成就感项目，详细)。

  5. 三面

    1. React的生命周期，在什么时候调用Ajax请求比较好(AJAX请求的源URL应该通过props传入；其次，最好在componentDidMount函数中加载数据。加载成功，将数据存储在state中后，通过调用setState来触发渲染更新界面。);
    2. Array的splice slice方法什么区别，如何实现一个10个元素的数组去除最后一个，如何实现获取3,6个位置的数组元素(如何用原生js实现splice);
    3. Session 、Cookie 、 HTTPOnly;
    4. MongoDB与MySql;
    5. Base64的优缺;
    6. 介绍Webpack是什么，有哪些属性;
    7. 介绍Express的API;
    8. 浏览器从页面输入URL到页面呈现在浏览器中经历了那些过程;
    9. HTTP请求有哪些方式;
    10. 说说是实验室的项目;
    11. 说说Web前端的职责，需要掌握哪些技术，在团队里是个什么样的作用。

  6. HR面

    1. 知道你面试的部门的主要业务是什么;
    2. 除了前端，你还会什么其他的语言;
    3. 如果你们部门就你一个前端，你要怎么做;
    4. 你周围人对你的评价;
    5. 你认识哪些前端大牛;
    6. 你觉得你前面几面面的怎么样;
    7. 家庭相关。

腾讯 WXG

2017/3/25 - 2017/4/17 笔试，一面(两个半小时之久。。)

  1. 笔试

    1. 多C++，计算机网络、计算机基础、数据结构，算法;

  2. 一面

    1. 如何获取cookie中的值;
    2. webSocket是怎样建立客户端与服务器的实时通信的，用什么类库实现的，有哪些api，你在项目里是如何使用的;
    3. 正则实现在一段文本中，将每个单词的首字母变大写，并返回;
    4. 解释闭包的概念，使用场景,写一个闭包;
    5. 如何监测一个页面的性能;
    6. 原生实现Ajax;
    7. 如果一个页面打不开，你会怎么样去排查，以后怎么避免;
    8. 解释CRSF;
    9. Angular、React的优缺点;
    10. 怎么用WebPack构建雪碧图,Webpack的作用;
    11. Webpack怎样去处理ES6的,怎么去引入JS文件的;
    12. 怎么样在移动端调试页面，比如一个页面在电脑上显示正常，手机上就是不正常;
    13. 说说浏览器的兼容问题;
    14. 所有的浏览器都有冒泡，捕获吗？发生的顺序一样吗;
    15. CSS盒子模型,box-sizing;
    16. 算法题:实现两个大数相加(用字符串表示);
    17. 智力题:8个盒子，里面有一个重量不一样，有一个天平，请问最少几次可以找出那个不一样的盒子(3);
    18. 智力题:5点十分，时针和分针之间的夹角是多少;
    19. 智力题:两个人约定在10点到11点之间见面，到的时间都是随机的，先到的会等待15分钟再离去，请问他俩最后能见面的概率。

百度 FEX

2017/4/21 - 2017/4/25一面、二面、三面

  1. 一面

    1. 最有成就感的项目，继续做下去会怎么做，重做一遍你要改进哪些地方;
    2. Long-Polling 原理;
    3. 有没有自己写过组件，你会给出哪些接口给用户;
    4. NodeJS的应用场景，不适合什么样的场景;
    5. 有用过后端模板吗？觉得后端模板有什么样的优缺点;
    6. 浏览器渲染、前端渲染、后台渲染;
    7. 最近在学习什么技术;
    8. 项目中遇到的问题，后来你是怎么去解决它的;
    9. CSS如何实现垂直居中;
    10. CSS如何实现清除浮动;
    11. 说说HTML中元素分为几类，分别有哪些，都起什么作用;
    12. 说说客户端存储方式有哪些？有哪些区别;
    13. Jquery有哪些扩充方法($.fn);
    14. 在写移动端页面的时候，有哪些要注意的地方;
    15. 如何获取url后面的参数值;
    16. 算法题: 实现一个抽奖程序，从1-100中随机抽取十个中奖号码，要求整个抽奖环节，不能重复中奖。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      function lottery(amount, n) {
          var cards = Array(amount).fill().map(function(value, index) {
              return index + 1;
          }); // 构造数组 
          var result = [];
          for(var i = 0; i < n ; i++) {
              var index = Math.floor(cards.length * Math.random());
              result.push(cards.splice(index, 1)[0]); // 为了防止重复，将抽取的数字通过 cards.splice(index, 1)从原数组中取出来。
          }

          return result;
      }

      console.log(lottery(100, 10))

  2. 二面

    1. 如何实现一个抽奖的转盘(会给出哪些接口，后台获取抽奖结果后，如何控制转盘指针的速度，实现慢慢减速停在结果处);
    2. 平时的开发流程;
    3. 平时是怎么学习前端的;
    4. Flex实现一个三栏布局，中间自适应，左右固定(说出别的几种方法);
    5. SASS、LESS用了哪些功能;
    6. 平时怎么做前端性能优化;
    7. 怎么做Node的运维？(怎么保证服务器的稳定和健壮性);
    8. 怎么用Mongodb实现事务;
    9. 用关系型数据库用的多吗;
    10. Node的错误处理(回调的错误优先、promise.catch、Async.wait);
    11. 移动端H5页面的开发;
    12. 多种实时通信方式的优缺点;
    13. Node有没有自己写过中间件，或者用过别人写的中间件;
    14. CSS协作开发中的代码规范，有没有考虑过用构建工具去实现;
    15. Git的协作开发时怎么进行的，有没有看过 git merge 如果当前分支落后于主分支的话，会有什么变化;
    16. 个人项目技术选型是怎么做的;
    17. ES6都了解哪些;
    18. CSS3动画特性(实现height从1-100px)。

  3. 三面

    1. 还记得之前一面二面面试官问的一些回答的不好的问题吗;
    2. 最近学习了哪些技术;
    3. 你平时是怎么学习前端的;
    4. socket.io使用多态服务器的话会有什么问题;
    5. 你觉得你比较擅长什么方面，原生JS;
    6. 介绍一下ES6;
    7. 箭头函数的作用。

网易 网易云音乐

2017/3/25 - 2017/4/12 笔试、一面、二面

  1. 笔试

    集合、表达式、数组去重、列表点击th排序。

  2. 一面

    1. 小论文，介绍核心DOM-Diff算法，如何记录性能指标的(我的做法有误);
    2. 轮询是如何实现的，用setInterval还是setTimeOut，怎么写;
    3. 如何优化传统的轮询，长轮询，服务器端推送;
    4. 原生实现Jquery的map、filter函数，改进你写的函数(比如一个10000个数据的数组，链式调用这几个方法，多调用几次，每次都要遍历一遍，怎么去优化他，指令栈);
    5. 原生实现事件委托&.on()方法。注意目标元素含有子元素是e.target，通过判断.parentNode来绑定。
    6. this题
      1
      2
      3
      4
      5
      6
      7
      8
      9
      var a = {a:"haha",getA:function(){return this.a}};
      var b = {a:"hello"};
      function run(fn){return fn()};//没有return关键字的话，返回undefined
      var c = a.getA;
      var d = a.getA.bind(b);
      a.getA();//"haha"
      c();//全局对象a
      run(a.getA);//
      run(d);

  3. 二面

    1. 常见HTTP状态码:200,301,302,304,400,404,500,504等等;
    2. POST提交的几种方式;
    3. JS有几种引入方式(前端，后端，怎样在别的JS中引入JS文件，import、require);
    4. Flex弹性布局，具体属性，属性值;
    5. 如果同时设置了align-items和self-align谁生效;
    6. 详细介绍React生命周期;
    7. 调用setState会发生什么，出发那些函数;
    8. GET和POST的区别;
    9. ES6有没有了解;
    10. 说说有哪些语义化的标签;
    11. 盒模型，盒模型的怪异模式(IE6、7、8);
    12. 数组怎样删除一个元素，splice;
    13. 块级元素的高度重叠;
    14. BFC;
    15. 什么情况下使用localStorage/cookie/sessionStorage;
    16. 为什么研究React。

海豚浏览器

2017/3/2 整整一个下午的时间，经历了笔试，一面，二面，HR面。面试官都超级亲切，人生第一面结果还不错,第二天就通知面试通过。

  1. 笔试
    单选 + 多选 + 简答 + 算法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    /*
     *实现一个将16进制颜色转变成rgb颜色的方法，如`#FFFFFF`等同于`rgb(255,255,255)`,这里实现字符串`FFFFFF`转为`255.255.255`。
     */
    function transform(color){
        if(color.length != 6){
           console.log("请输入正确的颜色值~")；
           return;
        }
        var result = [];
        for(var i = 0;i<6;i+=2){
           result.push(parseInt(color.substr(i,2),16));
        }
        return result.join(".");
    }

  2. 一面

    1. 雪碧图优缺点;
    2. span、p块级元素，行内元素的区别;
    3. DOM Diff算法;
    4. 如何进行前端性能优化(雅虎网站页面性能优化的34条黄金守则);
    5. bootstrap模态框锚点(data-target”#myModel”/href=”#myModel”);
    6. 如何用一个div实现一个”回”字；(1. css3 border-top-colors 可以给边框加多个颜色，但只有Firefox3.0+浏览器支持，所以有必要加前缀“-moz-”。2. 伪元素。)
    7. html5、css3

  3. 二面

    1. 进程间通信是通过什么来实现的(底层通信);
    2. 线程与进程的区别;
    3. 线程间通信上下文切换的损耗是如何造成的;
    4. Node底层结构有了解过吗？使用什么引擎是如何解析运行js文件的;
    5. 用户登录模块应该如何设计，注意哪些地方？(从界面友好设计、安全(验证码、sql注入、xss、csrf)等);
    6. token 原理;
    7. 如何保持用户会话？(cookie,session);
    8. md5加密有什么破解的方法？(字典、查表、彩虹表等);
    9. 关系型数据库与非关系型数据库在设计理念上有什么区别(一个重安全，一个重弱结构化大数据存储等);
    10. HTTPS 与 HTTP区别，HTTPS的对称密钥，非对称密钥是什么意思；
    11. Git的合并分支是如何实现的；
    12. 你最满意的一个项目是什么，遇到了什么问题，你是如何解决的，如果让你继续做下去，或者重做一遍，你会怎么改进它。

心得体会

  1. 做好准备，纸上得来终觉浅;
  2. 对自己的项目一定要十分的熟悉;
  3. 去引导面试官问你熟悉的知识，比如我最近做的项目等等;
  4. 多看源码，基本的组件一定要熟悉;
  5. 自信、不要给自己挖坑，不会就不会，否则面试官会一直问;
  6. 有一些问题，没做过没关系，尝试给出解题思路;
  7. OJ还是要做一些，不然不会处理前端输入输出，笔试题再简单也抓瞎;
  8. 移动端开发要多做，总觉遇到的问题;
  9. FIGHTING!!!!!!!!!!!!!