阿里腾讯前端实习面试知识点总结（持续更新）

阿里dv面试

• 网络

  • HTTP 1.0. 1.1区别

    • 缓存处理，在HTTP1.0中主要使用header里的If-Modified-Since,Expires来做为缓存判断的标准，HTTP1.1则引入了更多的缓存控制策略例如Entity tag，If-Unmodified-Since, If-Match, If-None-Match等更多可供选择的缓存头来控制缓存策略。
    • 带宽优化及网络连接的使用，HTTP1.0中，存在一些浪费带宽的现象，例如客户端只是需要某个对象的一部分，而服务器却将整个对象送过来了，并且不支持断点续传功能，HTTP1.1则在请求头引入了range头域，它允许只请求资源的某个部分，即返回码是206（Partial Content），这样就方便了开发者自由的选择以便于充分利用带宽和连接。
    • 错误通知的管理，在HTTP1.1中新增了24个错误状态响应码，如409（Conflict）表示请求的资源与资源的当前状态发生冲突；410（Gone）表示服务器上的某个资源被永久性的删除。
    • Host头处理，在HTTP1.0中认为每台服务器都绑定一个唯一的IP地址，因此，请求消息中的URL并没有传递主机名（hostname）。
    • 长连接，HTTP 1.1支持长连接（PersistentConnection）和请求的流水线（Pipelining）处理，在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟，在HTTP1.1中默认开启Connection： keep-alive，一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点。

  • HTTP 2.0

    • 新的二进制格式（Binary Format）
    • 多路复用（MultiPlexing）
      • HTTP/1.* 一次请求-响应，建立一个连接，用完关闭；每一个请求都要建立一个连接；
      • HTTP/1.1 Pipeling解决方式为，若干个请求排队串行化单线程处理，后面的请求等待前面请求的返回才能获得执行机会，一旦有某请求超时等，后续请求只能被阻塞，毫无办法，也就是人们常说的线头阻塞；
      • HTTP/2多个请求可同时在一个连接上并行执行。某个请求任务耗时严重，不会影响到其它连接的正常执行
    • header压缩
    • 服务端推送

  • HTTPS安全机制，如何实现的？

    • SSL, TLS 加密解密 再到TCP

• HTML

  • 页面阻塞的原因？

    • 下载JS外链脚本

      • 原因：浏览器防止js影响页面渲染

      • 解决：

        • 内联JS：若确实影响初始渲染可以使用内联JS
        • 推迟加载：不影响初始渲染，放后面, 或defer属性(仅支持IE)。或在 window.onload 事件发出后开始下载代码。其中defer在onload前。
        • 异步加载：没有相关依赖，则异步加载 （async或setTimeout等）

    • CSS

      • CSS阻塞页面渲染，但不阻塞页面加载。样式表必须在嵌入的 JS 执行前先加载、解析完。CSS 就可以并行下载。

    • 解决方案：

      • 内联CSS
      • 推迟加载首屏渲染不需要用到的CSS

  • 缓存

    • localStorage,webstorage

    • web.config 来设置Cache-Control

    • 原生NodeJSsetHeader 方法来添加 Cache-Control

      response.setHeader('Cache-Control', 'max-age=31536000');
      

• CSS

  • position有哪些属性
    • fix,relatative,absolute,static(默认)，inherit
    • 有元素a,b,c。 ac没有设置position,只有b设置了absolute结果会怎样？
      • b和c会重叠
  • 脱离文档流的方式
    • float,absolute,fixed
  • 隐藏元素
    • 有哪些？hidden, none,opacity=0.
    • 区别？

• JS异步调用函数有哪些？什么顺序

  • setTimeOut
  • setInterval
  • Promise
  • 生成器(Generators),async await
  • 生成器（ generator）是能返回一个迭代器的函数。 生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，在其函数体内可以使用yield关键字,函数会在每个yield后暂停，等待，直到这个生成的对象，调用下一个next（）,每调用一次next 会往下执行一次yieId，然后暂停
  • 回调地狱

• Vue

  • 双向绑定
    • VUE如何实现双向绑定
    • 如何原生js实现双向绑定
      • 一个简单的实现：给元素加监听事件触发函数，函数中修改视图
  • 父子create 和mount的顺序
    • 父create 子create

• React

  • 生命周期，

  • react hook

  • react版本

    • 15升16，基本的使用没有什么改变。

    • 16.3的变化比较大，这个变化会在未来17版本发布时生效。
      16.3废弃了componentWillMount、componentWillRecieveProps、componentWillUpdate生命周期。
      新增getDerivedStateFromProps、getSnapshotBeforeUpdate.

      16用了fiber渲染机制

• ES6常用内容

  • 类
  • 模块化
  • 箭头函数
    • 箭头函数与普通函数区别
      • 语法更简洁
      • 箭头函数不会创建自己的this，所以它没有自己的this，它只会从自己的作用域链的上一层继承this。
        • this指向定义时所处的外层执行环境的this
        • this指向不变
        • call()/apply()/bind()无法改变箭头函数中this指向
      • 不能作为构造函数
      • 箭头函数没有自己的arguments对象，访问arguments实际上获得的是外层局部（函数）执行环境中的值。箭头函数中使用rest参数代替arguments对象，来访问箭头函数的参数列表。
      • 箭头函数没有原型prototype
      • 箭头函数不能用作Generator函数，不能使用yeild关键字
  • 函数参数默认值
  • 模板字符串
  • 解构赋值
  • 延展操作符
  • 对象属性简写
  • Promise
  • Let与Const
  • 具体案例

• 版权说明：（部分答案内容选自博客）

  • https://www.joji.me/zh-cn/blog/web-performance-optimization-remove-blocking-javascript-and-css/
  • https://www.joji.me/zh-cn/blog/web-performance-optimization-cache-static-file-as-much-as-you-can/
  • https://juejin.im/post/5c18b1c7f265da61461e18aa
  • https://www.cnblogs.com/sunmarvell/p/9386075.html
  • HTTP1.0、HTTP1.1 和 HTTP2.0 的区别

---

阿里dw可视化面试（体验感最佳的面试）

• 基本信息
  • 自我介绍
    • 答：主要从学历，前端经验，科研经历，项目经历，实习经历，技能点有侧重点的描述了一下。介绍经历时注意讲自己突出的经历，简明扼要，内容多的时候可以适当地询问面试官对这个经历是否感兴趣需要展开讲。
  • 为什么选择可视化？（开放性回答）
    • 答：大二开始接触前端，选择前端是因为喜欢展示数据大于喜欢操作后台数据，再深接触后，了解有偏前的前端和偏后的前端，先尝试接触了偏后的前端，学习了node等，后来随着大数据的发展，AI, 可视化技术的发展，重点学习接触了可视化，觉得通过前端可视化解释数据背后的故事，更有趣，且对我更有吸引力。
• 项目经验
  • 贡献？功能？开发工具？
• 算法
  • 使用了什么算法，怎么用的？
• 可视化方案
  • 问：假设目前有一个场景，以淘宝为例，有四个基本操作，进入界面，加入购物车，购买，付款，还有一些额外操作，如何可视化？
  • 答：从这四个基本操作的场景来看，似乎更需要关注数据的操作的时间点以及时间间隔。（例如从进入界面到加入购物车的时间，加入购物车到付款的时间），用子弹图或甘特图就可以模拟一个用户的行为。点表示一个操作，线的宽度表示操作之间间隔的时间。
  • 问：如果还想看这些额外操作?
  • 答：在线中间按时间点用颜色编码不同的额外操作行为，可以看顺序，看额外的操作时间
  • 问：如果更关注操作对用户留存度的影响？
  • 答：线的高度编码用户数量，根据两个操作点之间的线段高度变化，可以直观地观察留存度。类似桑基图的效果。
• 10w+节点如何可视化
  • 答：首先10w+节点在同一个视图展示意义不大，没有可比较性，难于观察想关注的侧重点，如果一定要可视化的话建议用webGL(webGL> Canvas > Svg). 然后讲了在我们项目里是如何可视化10w+的节点的（局部可视，坐标局提前计算）。
• 其他
  聊了聊关于他们部门业务场景的涉及到的业务内容，遇到的问题，发展的机遇和挑战。为什么体验感最佳呢，因为面试的过程有互动，不是应试型面试，考的开放性的思维。也会给一定的反馈。
• 在线题
• 三道，考的前端基础、性能优化、代码风格和完整度
• 1. 写一个有效的算法完成矩阵搜索，这个矩阵有如下特点：
     1. 矩阵中的每行数字都是经过排序的，从左到右依次变大。
     2. 每行的第一个数字都比上一行的最后一个数字大
• 2. 有一个数组： const imgs = ['url1', 'url2', 'url3', ...];
     请实现效果：按照图片数组顺序队列加载图片（注：加载完一张再加载下一张）
• 3. 有一个数组 [ 7, 8, 3, 5, 1, 2, 4, 3, 1 ]，写一个方法来“去重”并“输出从大到小”的“货币格式”。
     期望结果："8,754,321"
• 技术二面
  • 知识点
    • Flex布局？有哪些属性？如何设置固定宽高
    • JS的隐式调用
    • Canvas
      • 如何检测一个canvas选中对象？
        • 答案：边缘检测算法
      • 场景拓展：
        • 如果对象是一个三角形？如何检测某点在三角形内还是外？
          • 答案：算点到这三条边所构成的面积，等于三角形面积则在内，大于三角形面积则在外。
      • 场景拓展：
        • 如果对象是矩形，视图里有1000个矩形？如何检测某点在矩形内还是外？
          • 答案：获取矩形的坐标范围，找到这个点所在的最小可计算的坐标范围，再对该范围内的矩形进行计算。
• 其他
  • 期望的base地点等等
• 交叉面
  • 聊简历
    • 简历上的项目/实习/科研经历，用三句话描述你最想表达的信息
    • 出于什么原因做了这些项目？
    • 什么使你要去访问学习？
    • 做项目过程中遇到的最大的难题？
  • 聊个人
    • 对自己未来工作的期望
    • 自己的缺点
• 总监面
  • 聊简历
  • 学习前端的路线和方式
  • 接触，学习，掌握新技术的方式
  • 有没有在开源的项目里提过issue
  • 有没有参与论坛的讨论
  • 多人协作的经验
  • Git的使用（commit的内容有错误怎么办）
  • 华为实习的经历
  • 访学学习到了什么

---

阿里dd面试

基本信息

• 项目经历
• 科研经历
• 技术栈
• 介绍了部门的概况和发展机遇
• 在线笔试题
  • 一道基础的算法题
    实现一个方法，用于比较两个版本号（version1、version2）
    如果version1 > version2，返回1；如果version1 < version2，返回-1，其他情况返回0。版本号规则x.y.z，xyz均为大于等于0的整数，至少有x位

---

蚂蚁金服

• 可视化

  • d3源码？架构？

• 工程

  • 框架，源码，架构
  • 原生js如何实现list去重？复杂度多少。

    • list.forEach(d=>{ 
         if(list.indexOf(d)!==list.lastIndexOf(d))){
           list.splice(list.lastIndexOf(d),1)
         }
      

    •  Array.from(new Set(list))
      

• 数据分析

  • 衡量数据分布的数据？ 标准差，方差，均值，
  • 平均值有哪些？ 算术平均值，调和平均，平方
  • 图分析的手段？ 中心度，路径，最大联通子图

• 看过的书

• 最完整的看过文档的技术？

• 最突出的技能点

---

腾讯 （一二三四面）

• 腾讯课堂语音面试
• 基础知识
  面试官大大博客里有总结的很全的知识点# 从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！
  
• 两道笔试题（共享桌面做题）
  • 1.页面内有一个正方形元素，实现对其拖拽和放下(onmousedown/onmousemove/onmouseup)
  • 2.大数加减法(正整数、负整数、小数)
• 然后介绍了一下部门概况和发展方向。
• 缓存
  • webstorage和local storage 的区别
• DNS解析过程
• 安全
• 回流重绘
• 项目中解决的问题
• webpack打包方式
• CSS动画如何实现旋转60度？
• async, await, generator
• ajax 有几个状态？readyState
• 做过哪些性能优化？
• DNS迭代和递归的区别
• 如何学习一门技术？
• 逻辑题：一班 60%喜欢足球，70%喜欢篮球，80%喜欢排球，同时喜欢足球和篮球的有多少?

• 网络
  • IPV4与IPV6的区别
  • HTTPS的实现
  • 非对称和对称
  • TCP/IP三次握手四次挥手
• 数据库
  MySQL索引实现原理
• 数据结构
  • 数组和链表的区别
• 性能与安全

  • Cookie、 LocalStorage 与 SessionStorage

  • 登陆态
  • CSRF和XSS攻击？如何防护？ 什么需要转义？
• JS篇
  • 字符串去重
    • 转换成数组:
      • set: 字符串 -> 数组 -> set -> list
      • indexOf: 字符串 -> 数组 ->
    • 对象key值唯一
  • 判断属性是继承还是自有
    • has own property
  • 判断对象类型(https://www.cnblogs.com/sunmarvell/p/9386075.html)
    类型object / list?
    • Object.prototype.toString.call()
• 框架篇
  • react
    • 生命周期
    • 版本特性
    • redux
    • react hook
    • 函数式组件和类组件？
  • Vue
    • 双向绑定如何实现
  • 如何管理包？
  • Webpack?

---

面试的策略

经过很多轮面试部门的轰炸之后，根据面试官对答案的反应，面试结束后跟面试官的交流，总结了一些面试过程的技巧，
一般面试环节分为：

• 自我介绍
  • 基于简历展开来逐个介绍，这样面试官和你都有共同的文件作为参考，而不是光听你讲。
• 简历提问
  • 用了什么方法，解决了什么难点，有多大影响
• 知识提问
  • 知识点
    • 纯考知识点：
    • 场景出发考知识点：
  • 开放性思维
    • 给定场景，看解决问题的方式和思维逻辑和算法的基础
• 个人特质
  • 考察的点
    • 独立思考能力(What How Why)
    • 逻辑思维能力

技巧

• 面试流程中争取面试的主导权

  • 对于准备了大量知识点的面试官，就好好答他的知识点。答不上的，也尽可能答，然后可以提一下自己更擅长，如果面试官有动摇，或者后续有时间可以补充
  • 对于没有过多的准备知识点的面试官，且没有时间控制
    尽可能的往你擅长的方向引导，在擅长的地方多说一说

• 根据面试官的风格切换自己的回答问题的方式

  • 幽默随和型
    • 想到的知识点可以都试着提一提，多提比少提好。
    • 回答开放性问题的时候可以跳脱点，可以适时的请求一些提醒。
  • 严肃型
    • 答案要严谨，有逻辑，不会的点不要提。
    • 回答开放式问题的时候要想好再逐点回答。

• 回答问题时先回答解题思路

  • 答案固然重要，但是就像考试一样，解题的过程可能占了8分，答案只占两分。当面试官问一个问题时，先回答解题思路，再定位到具体的答案。