个人秋招面经——商汤

博主目前在蚂蚁集团-体验技术部，AntV/S2 是博主所在团队的开源项目——多维交叉分析表格，欢迎使用，感谢到 S2 github 仓库点赞 star，有任何关于前端面试、就业、技术问题都可给在文章后留言。

一面（2021/7/22）

一、GB28181的原理。

GB28181是对国际上通用的sip协议进行私有化定制，而sip也叫会话初始协议，它是一个基于文本的应用层控制协议，用于多媒体的通信。比如可以通过发送sip信令对摄像头进行光圈的调整、云台的控制、调取历史视频等。

二、在石油系统的视频模块中用到的视频编码方式、视频流格式。

编码方式:H.264，视频流格式：rtmp。

三、视频中的检测框怎么传输到前端、sei。

后端有一个队列存sei信息，前端每秒轮询60次。或者后端通过websocket的方式主动推送。

四、https握手过程。

五、响应码。

六、vue组件间传值的方式。

七、vue中权限管理怎么做的、动态路由。

腾讯安全项目管理平台中，有不同的角色，比如：超级管理员、腾讯PM、项目组员、合作伙伴等，并且对应不同的id，比如：超级管理员是1。前端只注册基本路由，比如登录页面、403页面、404页面、500页面等，然后定义每个权限（id）对应的路由，在通过手机号注册的时候会确认角色，登录时会返回对应的id。通过id获取路由权限列表，然后通过router.addRoutes()动态添加路由。并且页面上的菜单导航栏也会根据不同的权限来显示。
如果手动输入不在权限范围内的url，跳转到404页面。

八、CSRF攻击如何防范。

csrf攻击是诱导用户进入第三方网站，利用被攻击网站已经获取的注册凭证，绕过后台的验证，冒充用户对被攻击者网站进行操作。
防范：

• 加上验证码；
• 验证Referer，在每一个请求头中都包含了Referer字段，它记录了HTTP请求的来源地址，通过该字段可以验证请求是否合法；
• cookie设置sameSite，将cookie的sameSite设置为stric，这样只有同源网站的请求才会带上cookie。
• 添加token验证，每一个请求都会带上token，带上token和cookie才会被认为是合法的请求。

xss跨站脚本攻击。攻击者向网页注入恶意脚本，通过恶意脚本对网页进行篡改，达到窃取信息的目的。
可注入恶意脚本的地方： HTML的节点内容或属性，存在读取可输入的数据；javascript代码，存在由后台注入的变量和用户输入的信息；富文本。
防范：

• cookie的属性设为HttpOnly。
• 开启CSP内容安全策略，阻止白名单以外的资源加载和运行。
• 对输入的内容进行检查过滤，比如“<”、“>”、“script”等。
• 对富文本输出内容进行转义。
• 对输入内容的长度进行限制。

九、vue数据改变是怎么渲染到页面上的（响应式原理）。

十、render函数返回值是什么。

虚拟节点（VNode）。

十一、使用过websocket吗、原理。

十二、babel的原理。

babel的作用是将ES6语法转化为ES5语法。

• 解析：输入ES6代码，通过babylon解析得到AST（抽象语法树）；
• 转换：plugin利用babel-traverse对AST进行遍历转译，生成新的AST；
• 生成：用babel-generator通过新的语法树生成ES5代码。
  （babylon：js的词法解析器；babel-traverse：用于对AST的遍历，主要给plugin用；babel-generator：根据AST生成代码。）

十三、event loop。

十四、hash模式和history模式。

十五、如何判断一个变量是数组。

let a = [1, 2, 3];

• a instanceof Array;
• Object.prototype.toString.call(a);
• Array.isArray(a);

十六、三个异步任务，怎么按顺序执行。

十七、webpack相关。

十八、算法题

一个数组：[{name: “a”, conut: 12}, {name: “b”, conut: 5}, {name: “c”, conut: 30}]，按照count的大小排序。

十九、写一个API

array = [{key: “a”, value: “”}, {key: “b”, value: “”}, {key: “a”, value: “”}, …]；
object = {“a”: 111, “b”: 222, “c”: 333, …}；
写一个api，调用后返回：
array = [{key: “a”, value: 111}, {key: “b”, value: 222}, {key: “a”, value: 333}, …]；

二面（2021/7/27）

一、介绍一下GB28181。

二、sip平台测试系统的实现。

三、腾讯实习项目（PMS）相关：测试怎么做的，白盒测试、黑盒测试，写测试代码；附件上传下载的流程。

四、应用场景题：大文件上传，怎么保证完整性、怎么保证真实性。

分片上传：

1. 将要上传的大文件按照一定的规则分成多个数据分片；
2. 将数据分片上传（并行或串行）到服务端，并携带一个标志（可以是当前时间戳）用于标识每个数据分片；
3. 上传完成后，服务端根据标志信息将数据分片合并成原始文件，并删除数据分片。

真实性： md5

五、vue父、子组件传值。

六、单页应用和多页应用的区别。

单页应用： 第一次进入页面的时候请求一次HTML文件，跳转到其他页面时，路径发生改变，并没有请求新的HTML文件。
优点：

• 服务器压力小。每次切换页面时，不需要向服务器发送请求，只需通过本地js来切换；
• 页面切换快。不需要服务器来配置路由，前端控制路由跳转，js在做本地路由的时候会非常快。

缺点：

• **首屏时间长。**首屏需要请求一次HTML，还要请求一次js。
• seo效果差。 因为搜索引擎只认识HTML文件里的内容，不认识js里的内容，而单页应用是通过js渲染生长的，搜索引擎不认识这部分内容，也不会给一个好的排名。

七、算法：leetcode第一题，两数之和。

三面（2021/7/28）

一、文件上传，对文件做md5是在哪儿完成的，浏览器还是本地？

二、对docker的理解。

三、开发环境，代码规范。

四、vue中的路由优先级更高还是nginx配置的。

五、反问：弹性打卡（朝九晚六）、主要做业务（toB、toG）