天翼云前端面经帖复习（2721字预警）

编者按：
以下面经题目来自牛客网其他作者，已注明原帖来源。
（原帖作者若不允许搬运，可私聊我进行删除处理）
答案由本人整理，不确保完全正确，有异议可评论区指出，感恩的心

一、原帖：天翼云前端面试

1、性能优化

①降低请求量：减少http请求、 图片懒加载、使用字体图标或css绘制代替图片

②加快请求速度：预解析DNS、使用http2.0、并行加载、CDN分发、压缩图片、gzip压缩

③缓存：http协议缓存请求、离线缓存manifest、本地缓存localStorage

（GET请求可以缓存，POST请求不能缓存。GET请求后退/刷新无害，POST后退/刷新则会致使重新提交数据）

④渲染：

JS优化（防抖、节流、事件委托、减少重排重绘）

CSS优化（提取公共样式、减少选择器嵌套、精灵图）

服务器端渲染

（客户端渲染：获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染
服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML，使首屏渲染快，SEO（搜索引擎优化） 好）

CSS写在头部，JS写在底部

2、缓存控制

HTTP缓存主要分为Last-Modified/Etag和Cache-Control/Expires
其中Cache-Control/Expires属于强缓存，Last-Modified/Etag属于协商缓存

3、hash history 后端需要做哪些处理

hash路径出现在URL中，但是不会出现在HTTP请求中，对后端完全没有影响

history必须要和后端保持一致，路由全覆盖，否则报404

4、闭包

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰，使得私有变量不被JavaScript垃圾回收机制强制回收，直观的讲就是函数里面套函数。

闭包的优点：一个函数可以访问另外一个函数的变量，可以保护私有变量不被全局变量污染。

闭包的缺点：过多使用闭包会造成内存占用过多的问题，滥用闭包会造成内存泄漏即内存不被释放。

5、栈 堆

栈由操作系统自动分配释放 ，用于存放函数的参数值、局部变量等，其操作方式类似于数据结构中的栈。

堆由开发人员分配和释放， 若开发人员不释放，程序结束时由 OS 回收，分配方式类似于链表。
栈与堆区别：

①管理方式不同。栈由操作系统自动分配释放，无需我们手动控制；堆的申请和释放工作由程序员控制，容易产生内存泄漏。
②空间大小不同。每个进程拥有的栈大小要远远小于堆大小。

③生长方向不同。堆的生长方向向上，内存地址由低到高；栈的生长方向向下，内存地址由高到低。
④分配方式不同。堆都是动态分配的；栈有 2 种分配方式：静态分配和动态分配。静态分配是由操作系统完成的，动态分配由alloca()函数分配。
⑤分配效率不同。栈由系统自动分配，速度较快，而堆一般速度比较慢。

⑥底层不同。栈是连续的空间，而堆是不连续的空间。

6、es6新特性

①let const关键字
②扩展运算符...
③模板字符串
④promise
⑤async/await
⑥import export defaultexport
⑦class类（原型链语法糖）
⑧解构（对象or数组）
⑨箭头函数
⑩函数传参可设默认值
⑾新增数据类型 symbol set map weakset weakmap
⑿新增数组方法 from of find findIndex fill flat includes
⒀for...of 迭代器

7、迭代器 可迭代对象 for of

JavaScript 迭代器：迭代器是由 Symbol.iterator() 方法返回的对象。迭代器协议提供了 next() 方法，可以一次访问可迭代对象（数据结构）的每个元素。

JavaScript 可迭代对象：具有 Symbol.iterator() 方法的数据结构称为可迭代对象。例如，数组、字符串、集合等。

for...of 可以迭代数组、类数组以及任何可以迭代的对象。

8、vue3的使用

vue3可以直接在script标签加上setup

vue3的数据和函数是在setup函数中定义的，所以script标签添加了setup后直接定义即可

vue3采用组合式API，可以将特定功能相关的所有东西都放到一起维护

……具体问什么具体分析吧）

9、proxy可以传什么

Proxy(target, handler)

// target目标对象， handler是一个对象，包含 get/set 值处理方法

（按自己的实际条件，只是了解的就不要说了，避免给自己挖坑）

前端：html、css、JavaScript、jQuery、TypeScript…

后端：java、C、C++、C#、python、Node.js…

数据库：SQL…

操作系统：Linux…

2、java和js的区别，继承、重载、多态、作用域

①基于对象和面向对象：Javascript是基于对象的，而Java是面向对象的

②解释和编译：Java在执行前必须先编译；JavaScript是一种解释性编程语言，不需要编译，由浏览器解释和执行。

②强类型语言和弱类型语言：Java是强类型语言，所有变量在使用前必须先声明，编译时会检查变量的类型；JavaScript是弱类型语言，变量不需要在使用前声明，解释器在运行时检查它的数据类型。

③数据类型不同：Java数据类型有整型（byte、short、int、long）、字符型（char）、浮点型（float、double）、布尔型（boolean）；JavaScript数据类型有boolean、string、number、null、undefined、symbol、bigint、object

④执行环境不同：Java应用程序可以在任何虚拟机(JVM)或Web浏览器中运行，执行时会使用更多内存。而JavaScript代码仅在浏览器上运行，因为JavaScript是仅针对浏览器开发的，运行时只需要很少的内存。

⑤……

3、js怎么实现java中的private效果

使用闭包来模拟

三、原帖：天翼云 前端一面 9.20

1、前端构建工具了解哪些？

npm、yarn、webpack…

2、webassembly了解吗

3、传统开发框架有哪些

MVC、MVP、MVVM ？

4、MVVM相比于传统开发最大亮点

①低耦合：视图（View）独立于Model变化和修改
②可重用性：可以把一些视图逻辑放在一个ViewModel里面，让多个view重用这段逻辑
③独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码
④可测试：测试可以针对ViewModel来写

5、HTML5语义化标签（5个以上）

<header>、<nav>、<section>、<article>、<aside>、<figcaption>、<figure>、<footer>

6、em和rem，vh和vw

react生命周期：

vue生命周期：

8、软件更新流程（面试官给的提示：打开软件，提示更新下载）

9、网络七层模型

应用层、表示层、会话层、传输层、网络层、数据链路层、物理层

10、用过哪些应用层协议

DNS域名系统、FTP文件传输协议、HTTP超文本传送协议、SMTP电子邮件协议

Telnet远程终端协议、POP3邮件读取协议、SNMP简单网络管理协议、TFTP简单文件传送协议

11、http和https区别

①端口：http的端口是80，https的端口是443
②传输数据：http是明文传输，https是用ssl进行加密的

③安全性：https更具有安全性
④申请证书：https传输需要申请证书（要钱），http不需要

⑤……（欢迎补充

12、TLS加密流程

13、找到链表倒数第三个节点如何做

法一：从头到尾遍历一遍，得到链表长度L，再遍历一遍，第L-3+1个节点就是倒数第3个节点。

法二：定义两个指针p1和p2，p1先走，等间隔2个节点后，p2再走，当p1移动到尾节点时，p2所在的位置就是倒数第3个节点的位置。

做事件循环（Event Loop）是为了解决JavaScript单线程运行阻塞问题的一种运行机制。

在JavaScript中，所有任务分为同步任务和异步任务，异步任务又分为宏任务和微任务。

同步任务在主线程中执行，遇到宏任务放入宏任务队列，遇到微任务放入微任务队列，执行完同步代码之后，先清空微任务队列，再执行下一个宏任务，依次循环。

双向数据绑定，是指视图 View 的变化能实时地让数据模型 Model 发生变化，而数据的变化也能实时更新到视图层。

vue的双向数据绑定有Object.defineProperty() 和 Proxy 对象（代理）两种方式来实现。

vue2双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式， 通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

vue3使用了ES6的新语法，用Proxy去实现监听。