阿里腾讯前台实习面试知识点总结（持续升级）

阿里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等）
```
  <script type="text/javascript" src="page.js" async></script>
```
  - CSS
    - CSS阻塞页面渲染，但不阻塞页面加载。样式表必需在嵌入的 JS 执行前先加载、解析完。CSS 即可以并行下载。
  - 处理方案：
    - 内联CSS
    - 延迟加载首屏渲染不需要用到的CSS
- 缓存
  - localStorage,webstorage
  - web.config 来设置Cache-Control
```
<?xml version="1.0" encoding="UTF-8"?><configuration> <system.webServer>     <staticContent>         <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />     </staticContent> </system.webServer></configuration>
```
  - 原生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
- HTTP1.0、HTTP1.1 和 HTTP2.0 的区别

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

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

阿里dd面试

基本信息

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

腾讯

腾讯课堂语音面试
基础知识
面试官大大总结好了考的知识点最后发给了我了~# 从输入URL到页面加载的过程？如何由一道题完善自己的前台知识体系！
两道笔试题（共享桌面做题hhh刺激）
- 1.页面内有一个正方形元素，实现对其拖拽和放下(onmousedown/onmousemove/onmouseup)
- 2.大数加减法(正整数、负整数、小数)
而后详情了一下部门概略和发展方向。

面试的策略

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

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

技巧

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

根据面试官的风格切换自己的答复问题的方式
- 幽默随和型
  - 想到的知识点可以都试着提一提，多提比少提好。
  - 答复开放性问题的时候可以跳脱点，可以适时的请求少量提示。
- 严肃型
  - 答案要严谨，有逻辑，不会的点不要提。
  - 答复开放式问题的时候要想好再逐点答复。