腾讯实习一面 | 前端

1. 做个简单的自我介绍？

2. 学习的方式 / 途径?

   1. 现代 JavaScript 教程
   2. MDN
   3. 阮一峰 ES6 教程
   4. 各种官方文档
   5. 逛技术社区
   6. 不是很喜欢看视频学习

3. 说活你最熟悉的技术?

   1. 这里我说了 JS、CSS、H5 老三样
   2. 基本是想到什么就说了什么
   3. 面试官把主动权都给我了，一直在听我说，也没有打断我

4. 说说 CDN 的原理

   • 只说了 CDN 的功能，原理上答不上来；

   以下是网络上的答案：

假设您的加速域名为 www.a.com，接入 CDN 网络，开始使用加速服务后，当终端用户（北京）发起HTTP 请求时，处理流程如下图所示。

1. 当终端用户（北京）向www.a.com下的指定资源发起请求时，首先向LDNS（本地DNS）发起域名解析请求。
2. LDNS检查缓存中是否有www.a.com的IP地址记录。如果有，则直接返回给终端用户；如果没有，则向授权DNS查询。
3. 当授权DNS解析www.a.com时，返回域名CNAME www.a.tbcdn.com对应IP地址。
4. 域名解析请求发送至阿里云 DNS 调度系统，并为请求分配最佳节点 IP 地址。
5. LDNS 获取 DNS 返回的解析 IP 地址。
6. 用户获取解析 IP 地址。
7. 用户向获取的 IP 地址发起对该资源的访问请求。
   • 如果该 IP 地址对应的节点已缓存该资源，则会将数据直接返回给用户，例如，图中步骤7和8，请求结束。
   • 如果该 IP 地址对应的节点未缓存该资源，则节点向源站发起对该资源的请求。获取资源后，结合用户自定义配置的缓存策略，将资源缓存至节点，例如，图中的北京节点，并返回给用户，请求结束。配置缓存策略的操作方法，请参见缓存配置。

5. 说说常用的 ES6 的新特性？

   1. const、let

   2. map、set

   3. promise、async、await

   4. 展开运算符 ...

   5. 解构赋值

   6. 函数参数的默认值

   7. iterator、for...of

   8. Class

   9. Symbol

   10. 函数、数组的拓展

6. 新增方法的兼容性？

   IE 10/11 以上?(自作聪明了, 其实 ES6 在 IE 全军覆没, Edge 14/15以上兼容性有 90% 以上)

7. 怎么知道这些方法的兼容性？

   1. MDN
   2. Can I Use（紧张到忘记了 好后悔）
   3. 直接上网搜索

8. ... 和 Array.from 转数组的区别?

   1. ... 只能用于可迭代对象
   2. Array.from 不仅可用于可迭代对象, 还可以用于类数组对象

9. 说说直接使用对象存键值对和 map 存键值对的区别?

   脑袋突然糊了, 好久没看 map, 答不上来

   1. Object 有原型(除非主动设置 Object.create(null)), 有一些默认的 key 在原型链上, 但是 map 没有
   2. 在 Object 对象中， 只能把 String 和 Symbol 作为 key 值， 但是在 map 中，key 值可以是任何类型
   3. 通过 Map 中的 size 属性，可以很方便地获取到 Map 长度; 对象没有直接求长度方式

10. 缓存

    1. 为什么要有 Etag

       1. 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新 GET；
       2. 某些文件修改非常频繁，比如在秒以下的时间内进行修改, If-Modified-Since 能检查到的粒度是s
       3. 某些服务器不能精确的得到文件的最后修改时间。

    2. 如果让你只能选择一个缓存你会选择什么? 为什么?

       1. 协商缓存, 如果选强缓存永远都是本地数据拿不到最新的网络数据

    3. 只选择协商缓存要怎么做到减少请求?

       答: 使用 localStorage 和 sessionStorage 协助缓存本地数据, 本地没有的数据再进行协商缓存

       追问: 可是 localStorage 和 sessionStorage 多是【字符级别】的内容, 而网络请求的数据多是【文件级别】的内容

       答: ...整不会了

11. 智力题: 现在是下午五点三十五分, 求指针夹角?

    这里很尴尬, 减法写成加分, 面试官反问我思路, 我一理思路发现写反了/笑哭

12. 不论用什么方式, 怎么只用 CSS 隐藏某个元素?

    1. display : none
    2. visibility : hidden
    3. opacity : 0

13. 除了常用的这三种你还能想到其他的吗?

    1. position 移出屏幕后设置 overflow: hidden 防止用户滚轮找到这个元素
    2. z-index 设置在屏幕下方 上方用其他元素遮盖
    3. 如果元素是空的, 可以设置背景色为 transparent

    面试太紧张了, 脑袋糊的 没想到其他方法了, 结束面试之后想到的:

    1. 2D 图形可以通过 rotate 翻转 90°
    2. 所有数据都设置为 0 并且去除所有边框和外线 并 overflow: hidden

14. 握手挥手?

    我才刚开始说就回复我不用说了

15. AJAX?

    balabala 省略

16. 其他前端优化方案?

    1. 合并请求, 减少请求数量
    2. 雪碧图、字体图标、SVG、Webp
    3. 缓存
    4. 压缩资源大小
    5. CDN
    6. DNS
    7. 资源加载时机
    8. 减少回流重绘
    9. webpack
    10. 节流防抖

17. 你刚提到 Webp，可以说说 Webp 的兼容性吗？

    1. webp具有更优的图像压缩算法
    2. 据我所知，Webp 在安卓手机上兼容性很好

18. webp 图片格式的原理（为什么能更优压缩）？

    鸦雀无声

19. 那么在电脑端浏览器上的兼容性呢？

    1. 也许在 Chrome 浏览器兼容也不错
    2. 感觉总体的兼容性应该比较差
    3. 我对于 webp 在浏览器上的兼容性并不是很了解

20. 雪碧图、字体图标、SVG 图标能减轻加载压力的原因？

    balabala 省略

21. 怎么让你项目中的拍平方法兼容 IE？

    1. 第一时间想到先判断是否兼容 然后自己造轮子（蠢）
    2. 面试官提醒 polyfill（焕然大悟，很少用 给忘了）

22. 什么 CSS 放上面，JS 放下面?

    1. 引出 script 的 async 和 defer

23. HTTP 状态码？

24. 请完成一个工具方法，统计出纯英文的文章中出现次数最多的单词是什么，输入为文章内容，输出为次数最多的单词和出现的次数

25. 什么时候能来实习?

26. 实习时长

27. 大四没课？

反问

1. 我现在面试的部门是？

   CSIG 腾讯教育

2. 组内主要的技术栈？（我主要学的是 Vue）

   流行的框架都会使用，但是考虑到统一性和方便管理, 主要使用的是 React 更加偏向于 React 但是其他框架也并存(以公有制为主体, 多种所有制共同...)

3. 组内氛围？

4. 组内偏向团队合作还是个人发展？

   团队合作...(闲聊)

晚上六点半了，结束面试，各奔干饭