奇舞团面试官被群面，这里的17道面试题你也遇到过吗？

你体验过群面前端大佬吗？

你有群面前端牛人的机会吗？

不要怀疑，星计划的同学经历过！

第六届360前端星计划上上周在云端顺利完成！

受疫情影响，今年的星计划只能在线上进行，参加星计划的学生在线上课，所有课程均已录制好在奇舞学院学习。

为了更好的帮助星计划的同学，我们每天都有线上班会，班会内容主要是学生提问，讲师(月影、文博等)解答。

刚开始大家还有点拘谨，后来熟悉之后便开始用他们遇到的各种各样的面试题来提问讲师了，场面直接是星计划五十多个学生群面月影。

那他们遇到的面试题都有哪些呢，小编整理了一些，大家一起来看看~

1

CDN 文件更新的原理是什么样的？

用户访问使用了 CDN 技术的文件后，在多个环节都可能会产生缓存，比如用户的浏览器中、CDN 的边缘节点等。浏览器端的缓存一般通过过期时间来自动更新；而对于 CDN 节点上缓存的更新，一般是通过源站更新后，手动触发 CDN 的缓存删除操作。

2

如何提升 WebSocket 性能？

可以通过增加机器的方式解决。需要注意的是，多机部署会带来的跨机通信问题。具体的解决办法可以参考奇舞周刊之前发的一篇文章「基于 ThinkJS 的 WebSocket 通信详解」。

3

如何防范 DDoS 攻击？

如果可以识别攻击的特征，可以使用防火墙或专门硬件进行防护。大部分情况下的 DDoS 是无法通过特征准确识别的，可以通过对带宽和机器进行扩容，也可以利用云厂商提供的 CDN 进行防范。推荐读一下阮一峰老师写的文章「DDOS 攻击的防范教程」。

4

为什么 constructor.prototype.constructor 指向 constructor 本身？

方便实例实例化之后的 constructor 属性指向原型本身。

5

使用 md5 加密存储不安全怎么解决？

md5 是一种常见的非对称加密算法，一般通过加密后的 md5 值获取到原始的字符串并不容易。但是通过彩虹表（将常见密码及其 md5 值对应表预先计算好），可以快速查询到表中的 md5 对应的原文。解决办法是将密码拼接一个字符串（也叫salt）之后再用 md5 加密。也可以使用其它加密方式。

6

Vue 中跨组件数据传递有哪些方法？

父子组件之间的通信可以通过属性或者事件来传递，这种情况比较简单。如果不是父子组件，中间跨了很多级，可以使用 Vue 提供的 provide/inject 机制进行通信。其它的情况，可以外部存储（比如 Vuex）或者观察者模式（Event Bus、Observe）。

7

前端工程师如何做好职业规划？

首先需要把基础打牢，之后可以由面到点，在具体的领域专精下去。学习需要举一反三，多多涉猎，这样自然而然了解的东西就会越来越多。需要注意的是，学习一个东西，不光是要学习它的用法，更重要的是学习它背后的一些思想。

8

DNS 解析失败可能有哪些原因？

1. 链路不通：比如网络原因、DNS 服务器原因；2. 域名记录不存在；3. 解析记录被污染。可能的原因还有很多，学习一下 DNS 的原理和解析过程，然后顺着解析的过程去看一下每一步都可能存在哪些失败的原因。

9

跨域时如何避免 OPTIONS 请求？

1. 使用简单请求；2. 规避自定义头。可以看一下奇舞团贺师俊（Hax）在奇舞周刊发发的文章 CORS 为什么要区分『简单请求』和『预检请求』？。

10

如何优化 CSS 性能？

首先是尽量避免选择器层级开销，比如使用 BEM 减少选择器的层级；其次，避免不必要的 Layout 和 Paint 的开销；页面上的动画可以合理使用硬件加速，提升动画性能；浏览器渲染路径的开销，去除未使用样式减小样式体积。

11

浮点数精度问题如何解决？现在项目中会用到 BigInt 吗？

浮点数精度的问题，一般在展示时使用固定位数的四舍五入即可；对于要求比较严格的场景，比如和钱相关的产品，可以转为整数来存取。BigInt 是 ES2019 的新特性，是以后大数场景优选方案，在此之前会使用一些 BigInt 模块，本质是字符串的处理。

12

如何提升大数据量下的渲染性能？

1. 尽量减少数据本身的体积问题；2. 避免数据处理造成的性能浪费；3. 用户体验优化规避，只渲染用户能看到的。

13

UTF-8 中一个字符占用几个字节？

UTF-16 是定长字符集，而 UTF-8 是变长字符集，不同的字符占用的字节长度也不一样。

14

前端如何处理文件的上传和下载？

上传使用 multipart/form-data 上传，屈屈的文章有详细说明：https://imququ.com/post。也可以自己用 FileReader 读取文件后 base64 上传，不推荐这样做。下载直接响应体返回文件内容，Content-Type 对应具体的文件类型即可。针对被浏览器自己渲染的场景可以增加 Content-Disposition: attachment 头强制使用下载未知数。

15

严格和混杂模式对跨页面通信有什么影响？

严格和混杂模式影响的是页面的渲染方式；跨页面通信的话可以使用外部存储、postMessage 等形式，具体可以搜“跨页面通信”。

16

协商缓存和强缓存如何选择？

二者区别在于会协商缓存会多一次请求。视资源的更新频率而定，频率不高使用强缓存，比较重要需要确认缓存必要性的话使用协商缓存。

17

ServiceWorker 的现状和前景是什么样的?

ServiceWorker 的现状比较尴尬，可以去做了解，Cache 部分的功能还可以，如果业务没有强烈的需求的话不建议话费大量的时间，同等场景下可以考虑小程序。

整理的面试题就到这里啦~

360前端星计划

360 前端星计划是由 360 前端团队倾力主办，面向在校大学生，为培养最优秀最潜力的前端人才举办的前端技术系列培训&人才选拔项目。

360前端星计划课程已对外开放，想学习星计划课程的同学欢迎到奇舞学院学习。

讲师为你答疑解惑~

更有月影等大佬在线分享~

奇舞学院(https://study.qiyun.360.cn)是奇舞团倾心打造的知识分享平台，对前端感兴趣的小伙伴可以一起来学习。

一起进步吧

加入「奇舞学院」学习交流群

加小机器人发送「奇舞学院」

不怕你不来，就怕你不学—360前端星计划

戳“阅读原文”开始重启前端学习之旅吧～