2023实际面试题2

C公司一面

1自我介绍
2Js单线程还是多线程?事件循环机制?

浏览器执行异步事件时线程却并不会被阻塞，那这是JS之间循环机制的功能，它是一种解决JS单线程运行时不会阻塞的一种机制。那为什么又叫循环机制？那这就跟代码的执行顺序有关的。那我们先要知道以下几个重要的点，那就是执行在同步任务和任务队列。那任务队列又分为红任务，队列和微任务队列。我们知道代码的执行顺序是从上往下执行的，当遇到同步任务的时候，就会将这个同步任务直接推入执行站进行执行。当遇到异步任务的时候，那么如果这个异步任务是微任务，那进入微任务队列等待执行。如果这个异步任务是任务，那么就进入红任务队列等待执行。当所有的同步任务全部执行完成之后，就会去微任务队列里面将里面的任务挨个的推入执行站进行执行，直到微任务队列被清空，然后再会去红任务队列里面将红任务队列面等待执行的任务飞入到执行站进行执行。那如果在执行微任务或者红任务的时候，它里面还有同步任务和一，那么，又会按照上面的步骤同步任务进入执行站执行异步任务，进入对应的任务队列等待执行。那这样一个步骤就是JS世界循环机制。

3，宏任务和微任务都有哪些?

4.ajax请求里面是宏任务还是微任务?

宏任务包括：setTimeout setInterval Ajax DOM事件

微任务：Promise async/await

注意：微任务比宏任务的执行时间要早

5.http和https有啥区别，说一下https的具体做了什么事，有哪些好处，默认对应的端口是多少?

6.有一个场景，如果我用sessionStorage缓存了一个数据，这个时候我打开新的页面，新的页面会带这个数据吗?如果把原来的窗口关闭，新的页面中的数据会丢失么

面试官：说一说localStorage和sessionStorage区别呗？😊

localStorage：本地缓存，没有时间限制，将一直缓存在本地。
sessionStorage：会话缓存，即浏览器关闭的时候清除缓存数据。

面试官：那同域下多窗口间localStorage能共享吗？😯

可以呀，如果页面中出现了串数据的话，很大概率就是localStorage共享导致的呢。

面试官：localStorage既然可以，那sessionStorage在多窗口之间能共享状态吗？😎

sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。与 localStorage 相似，区别在于 localStorage 里面存储的数据没过期时间设置，而存储在 sessionStorage 里的数据在页面会话结束时会被清除并且重新加载或恢复页面仍会保持原来的页面会话。
在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文， 这点和 session cookies 的运行方式不同。
打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage。
关闭对应浏览器标签或窗口，会清除对应的 sessionStorage。
 

我：😭

7.什么是深拷贝，什么是浅拷贝?实现深拷贝有哪些方法?

8.SPA有什么优缺点?首屏加载会慢么，怎么优化?

9，Vuex既然刷新会丢失状态，那你会用什么办法去处理?

1、将vuex中的数据直接保存到浏览器缓存中；

2、在页面刷新的时候再次请求远程数据，使之动态更新vuex数据；

3、在页面刷新前将vuex的数据先保存至sessionStorage

10.Vue的keep-alive有用过么?有哪些属性?

11.子组件和父组件的钩子加载顺序?

12.Vue里的data为啥是一个function而不是data?

13用CSS怎么去画一个0.5px的直线?

C公司二面
1.前端开发项目部署的流程?以及迭代流程?

2.发包，CI/CD流程讲一下? 打包后具体CD执行了什么操作，怎么部署的?

3.期待工资

D公司一面

1.LeetCode402
思想:单调递增栈，从头开始遍历，遇到比当前栈弹出的第一个小的则进行替换

链接: https://eetcode.cn/problems/remove-k-digits/solutions/485036/wei-tu-jie-dan-diao-zhan-dai
ma-jing-iian-402-yi-d/

2.事件循环的题目，输出顺序。微任务和宏任务假如都有多个任务，它会怎么去执行?有哪些可以产生微任务的语句?

3项目中的角色?说一下项目的业务模型和设计?项目进度和项目质量的把控?代码评审会关注哪些方面?测的部分会有哪些，是否有做过单元测试?会关注平台上线的哪些业务指标和性能指标?如何判断业务上线之后是满足需求的?
4.提到页面重构的项目中，从6s到2s起决定性作用的是哪些?无缓存的首次加载、有缓存的首次加载、再次访问的分别的优化点在哪里

微前端选择的原因是什么?包括什么样的部分的才叫微前端?了解的微前端框架?聊一下qiankun的沙箱机
(1)独立部署、可维护性强、局部/增量升级、框架技术栈自由可兼容
(2)一个基座应用和若干个微应用。基座应用大多数是一个SPA项目，负责应用注册、路由映射、消息下发等内容。而微应用独立注册到基座应用中，由基座应用进行管理，脱离基座也可以单独进行访问，
(3)single-spa、icestark、qiankun、EMP等
(4)有三种不同的沙箱:snapshotSandbox、proxySandbox、legacySandboxspanshotSandbox:快照沙箱，将window里面的内容进行快照保存，激活期间可能修改window的数据，然后退出沙箱之后，将window的数据还原。优点是可以兼容低版本不支持

6.Hooks为什么必须在函数组件里面使用，为什么不能放在条件语句里面?

react为了追求纯函数的理念，在纯函数中添加副作用，这些use副作用本质上都是声明语句，为了声明与调用的一致性，不可避免地要强调顺序。而条件和循环会破坏这种顺序一致性。

vue3并不追求纯函数，因此在view=render(state)之外单独定义各种use特性，自然不受顺序影响，也就可以支持条件和循环

(1)在函数内和函数外对应的useState是不一样的，在函数内对应的是
ReactCurrentDispatcher.current.useState(而这个分为创建和更新状态，对应的是
HooksDispatcherOnMount或者HooksDispatcherOnUpdate)，当函数组件执行完，马上转换为
ContextOnlyDispatcher (会抛错的Dispatcher)
(2)React用链表来保证Hooks的顺序。需要将hook相关的信息收敛在一个链表里面。 (mountState首次渲染阶段)，然后在更新的时候，需要依次遍历链表进行更新。如果两次链表读取的顺序出现差异，所以自然是不可控制的。

7.React的虚拟dom和diff算法?

跟 Vue 一致， React 通过引入 Virtual DOM 的概念，极大地避免无效的 Dom 操作，使我们的页面的构建效率提到了极大的提升 而 diff 算法就是更高效地通过对比新旧 Virtual DOM 来找出真正的 Dom 变化之处

8.了解SSR么?React18里面提出了StreamingSSR，这个和普通的SSR有啥区别么?
(1)分段传输HTML到浏览器，而不是需要等服务端渲染完毕整个页面后再返回给服务器，这样浏览器可以更快的启动HTML的渲染，以提高FP、FCP等指标。(2)在浏览器端注水阶段(hvdration)，可以只对已经染的页面进行注水，不需要等待整个页面染完成，所有的SBundle加载完成，才能开始hydration。这样可以使得对已经染的部分做事件绑定从而使得页面获得更好的交互性。
9.平时你是怎么提高自己的技术能力的?
10.未来的职业规划?
反问:
1.平常沟通会用英文么?
2.工作的业务有哪些，会做哪些内容?
3.内部分享及技术论坛的具体形式?

E公司一面

1.转行原因?

2.Hooks使用规则?

3.有哪些用的比较多的hooks? 分别怎么用?

4.useMemo和useCallback的区别?

5.封装过哪些Hooks?

6，脚手架是怎么搭建的?以及是否使用过Antd?

7.说一下函数的作用域和自由变量?

8.说一下原型和原型链?

9.说一下this的理解

new绑定优先级 > 显示绑定优先级 > 隐式绑定优先级 > 默认绑定优先级

10.防抖和节流的场景，以及怎么做?

11说一下事件循环机制?哪些语句能创造微任务?

13.对于强缓存和协商缓存怎么理解?分别有哪些标识?强缓存和协商缓存的优先级?
14.对于跨域的理解?通常你们是对跨域怎么处理的? iframe和父窗口是怎么通信的?知道代码的情况下，两个相关的页面要怎么通信?说一下webSocket的建立过程?

在子页面中获取父页面（parent）或顶层页面（top）的window元素，然后再根据兄弟iframe的name或id获取兄弟页面的window对象，得到window对象后就可以随意操作了

websocket的连接建立过程:
1、客户端发送GET 请求， upgrade
2、服务器给客户端 switching protocol
3、就进行了webSocket的通信了

15.localStorage和sessionStorage的区别，存储空间大概是多少?cookie有哪些特征?

16.new一个新的对象发生了什么?
17for...in和for...of的区别?一个对象能用for...o么?for..in和for...of遍历数组出来的分别是什么?
18你对Vue的MVVM是怎么理解的?
19.你对Vue和React的diff算法有了解么?
20.有看过什么书籍，平常怎么学习的?有没有自己的社区主页?

F公司一面

G公司(腾讯某子公司)一面

1.自我介绍
2.Vue的生命周期函数?都做了什么?
3.ts和js的区别和理解?

相比于JavaScript ，它还增加了静态类型、类、模块、接口和类型注解方面的功能，更易于大项目的开发。

4v-if和v-show的区别?

5vue如何做组件样式隔离?你对样式隔离的方案有所了解?

在<style> 标签加上scoped就可以实现样式隔离，只会作用在当前组件

6.less和sass有了解吗?7.谈一下vue的组件传值有哪些方案?

8.谈一下自适应布局你会怎么做，有哪几种方案?

9.水平垂直居中有哪几种方案? (手写)

外包公司

1.浏览器缓存https://www.cnblogs.com/lizhiyaun/p/16048415.html

浏览器缓存（Browser Caching）为了节约网络资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，加速页面的阅览。 浏览器缓存主要有两类：缓存协商：Last-modified ，Etag 和强缓存：cache-control，Expires。

浏览器缓存分为强缓存与协商缓存，浏览器请求资源时，会先判断该资源是否设置了强缓存，如设置了强缓存，且强缓存时间没有失效，则执行强缓存，强缓存不会向服务器发送请求，直接从缓存中读取资源，但是会返回200的状态码。

如果强缓存设置的时间失效，且设置了协商缓存，则执行协商缓存，协商缓存会发送请求询问服务器文件是否有变动

刷新对于强缓存和协商缓存的影响

1. 当ctrl+f5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存。

2. 当f5刷新网页时，跳过强缓存，但是会检查协商缓存。

3. 浏览器地址栏中写入URL，回车 浏览器发现缓存中有这个文件了，不用继续请求了，直接去缓存拿。（最快）

 2.父子组件，其中子组件是第三方的，不改里面代码如何监听他执行了某些钩子

 3.Set 和map的区别

Set 用于数据的存储

1、每一项不能有重复值

2、只有值的集合，更像一个数组

3、可以遍历，方法add、delete、has

Map数据的存储

1、本质上是键值对的集合，类似于对象，key可以是任意值

2、可以遍历，可以跟各种数据格式进行转化

 4. 0.1➕0.2问题怎么解决我说用了一个插件他问底层实现原理

1. 使用字符串来表示数字，而不是使用浮点数。你可以使用数字格式化工具，如 toFixed() 方法，将数字转换为指定位数的字符串：

let num = 0.1 + 0.2;
console.log(num.toFixed(2)); // 0.3

2. 使用精确的数学库，比如 BigNumber.js 或 decimal.js。 以下是BigNumber.js的简单使用介绍：

let a = new BigNumber(1.1);
let b = new BigNumber(2.2);
let c = a.plus(b); 
console.log(c.toString()); // 3.3 

3. 使用整数来表示小数，比如将 0.1 表示为 10，将 0.2 表示为 20，以此类推（注意，0.1与10相差了一百倍，这会导致其运算相应地增大100倍，所以在运算时需要将其相应地缩小100倍）。

let num1 = 0.1 * 100;
let num2 = 0.2 * 100;
let result = (num1 + num2) / 100;
console.log(result); // 0.3 

4. 使用科学计数法来表示数字，比如将 0.1 表示为 1e-1，将 0.2 表示为 2e-1，以此类推。

5. 使用四舍五入的方法来处理小数，比如使用 Math.round() 来四舍五入小数。

5.浏览器内存清理机制
东呈前端面试题：
项目这方面问的比较少，主要都是原理
数据类型、闭包   闭包使用场景、 
防抖节流逻辑及区别 
问原型、原型链、
call、Vue2和Vue3区别   
响应式原理以及试图更新变化驱动  、兄弟组件传值方式、
移动端适配方案、es6 新增的有哪些
Promise原理  场景  解决了啥
宏任务，微任务、事件循环、深拷贝浅拷贝分别有哪些 
computed和watch的原理
数组的使用（说代码），数组的去重
uni-app和VUE的区别，uni-app的组件
小程序支付机制，更新原理，启动机制
小程序登录流程

微前端的路由分发，模块之间的通信，模块优化（项目中涉及到会问）