阿里智能信息前端实习面经

一面挂，四十五分钟。

• ✔ 编程题：URL combo - 字符串分割
• ✔ 编程题：统计网页中出现了几种HTML元素
• ❌ Array如何转化为Set
• ✔ 自我介绍，说一下学习和项目经历
• ✔ 为什么学习Flutter？Flutter优势何在？
• ✔ Flutter三棵树分别起什么作用？
• ❌ Flutter状态管理相关，子组件如何与父组件通信？
• ❌ Flutter如何与底层原生通信，如image_picker调用系统相机的原理？
• ❌ 说一下MQTT协议？有什么特性？为什么物联网用MQTT？MQTT是基于TCP还是UDP？
• ❌ 说一下 HTTP1.0 和 HTTP2.0 的区别
• ❌ 说一下前端工程化？Vite有什么优势？
• ✔ 为什么没有选择客户端开发？
• ✔ 未来规划读研还是就业？

编程题：URL combo - 字符串分割

// 以下是天猫首页一个经过 combo 的 js 资源 url，请找出 combo 规律并用 js 写一个可复用的函数来解该 url，得到每个 combo 前的 url 地址。

const urlStr = 'https://g.alicdn.com/??code/npm/web-rax-framework/0.6.5/dist/framework.web.min.js,mtb/lib-windvane/2.1.8/windvane.cmd.js,mtb/lib-promise/3.1.3/polyfillB.js,mtb/lib-mtop/2.4.0/mtop.js,mtb/lib-login/1.5.3/login.js';

function unComboUrl(url) {
    // 以'/'分割，还原出baseUrl
    // 再以逗号分割，将每一项与baseUrl合并
    const l = url.split('/')
    const baseUrl = l[0] + '//' + l[2] + '/'
    var list = url.split(',')
    for (let i = 0; i < list.length; i++) {
        if (i == 0) {
            console.log(list[0])
            continue
        }
        list[i] = baseUrl + list[i]
        console.log(list[i])
    }
}

unComboUrl(urlStr)

编程题：统计网页中出现了几种HTML元素

一开始没写出来，因为我没法用DOM操作提取出HTML标签，后来面试官改成字符串：

// 在一个网页中，用尽可能少的代码，计算出当前网页用了多少种 HTML 元素。

// 遍历字符串，遇到`<`则开始识别HTML标签，`>`或空格前的即为标签，将其入栈
// 遇到`</`则为闭标签，识别后将栈顶对应标签出栈，若栈顶不匹配，则说明栈顶是非闭合标签，同样出栈，直到匹配为止
// 若是形如`<img />`的标签，则不用入栈进入下一步
// 将出栈的标签加入集合，得到无重复的标签，集合大小即HTML种类数量

HTTP1.0 和 HTTP2.0的区别：

HTTP1.0：

• 单一请求-响应模式：每次请求-响应都需要建立一个新的TCP连接，这个过程包括三次握手，增加了延迟
• 无状态连接：每个请求都是独立的，服务器不维护客户端的状态
• 请求头和响应头冗余：每次请求都会发送完整的头部信息，导致数据冗余和效率低下
• 文本协议：所有的请求和响应都是基于文本的，解析速度相对较慢
• 有限的并发：因为每个请求都需要一个单独的TCP连接，浏览器通常限制同一域名下的并发连接数，通常是4到6个

HTTP2.0：

• 多路复用：实现了多路复用，允许在单个TCP连接上并发多个请求-响应对，从而减少了连接的数量和延迟
• 二进制协议：相对于HTTP/1.0的文本协议，HTTP/2.0采用二进制格式，解析更高效
• 头部压缩：使用HPACK压缩算法来减少头部信息的大小，从而减少带宽消耗
• 服务器推送：服务器可以主动向客户端推送资源，而无需客户端明确请求，这样可以减少延迟并提高性能
• 流优先级：客户端和服务器可以通过设置流优先级来优化资源的传输顺序
• 连接管理：更有效的连接管理机制，通过单个连接处理多个并发请求，减少了连接建立和维护的开销
• 改进的安全性：虽然HTTP/2.0可以在明文（HTTP）和加密（HTTPS）下工作，但通常与TLS（传输层安全协议）结合使用，以提供更好的安全性