阿里 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
页面阻塞的原因?
下载 JS 外链脚本
原因: 浏览器防止 JS 影响页面渲染
解决:
内联 JS: 若确实影响初始渲染可以使用内联 JS
推迟加载: 不影响初始渲染, 放后面, 或 defer 属性(仅支持 IE). 或在 Windows.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 如何实现双向绑定
如何原生 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 + 的节点的(局部可视, 坐标局提前计算).
其他
聊了聊关于他们部门业务场景的涉及到的业务内容, 遇到的问题, 发展的机遇和挑战. 为什么体验感最佳呢, 因为面试的过程有互动, 不是应试型面试, 考的开放性的思维. 也会给一定的反馈.
在线题
三道, 考的前端基础, 性能优化, 代码风格和完整度
写一个有效的算法完成矩阵搜索, 这个矩阵有如下特点:
矩阵中的每行数字都是经过排序的, 从左到右依次变大.
每行的第一个数字都比上一行的最后一个数字大
有一个数组: const imgs = ['url1', 'url2', 'url3', ...];
请实现效果: 按照图片数组顺序队列加载图片(注: 加载完一张再加载下一张)
有一个数组 [ 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)
逻辑思维能力
技巧
面试流程中争取面试的主导权
对于准备了大量知识点的面试官, 就好好答他的知识点. 答不上的, 也尽可能答, 然后可以提一下自己更擅长, 如果面试官有动摇, 或者后续有时间可以补充
对于没有过多的准备知识点的面试官, 且没有时间控制
尽可能的往你擅长的方向引导, 在擅长的地方多说一说,
根据面试官的风格切换自己的回答问题的方式
幽默随和型
想到的知识点可以都试着提一提, 多提比少提好.
回答开放性问题的时候可以跳脱点, 可以适时的请求一些提醒.
严肃型
答案要严谨, 有逻辑, 不会的点不要提.
回答开放式问题的时候要想好再逐点回答.
来源: http://www.jianshu.com/p/dc9a92f3db9c