常用面试题

1、利用 XMLHttpRequest 手写 AJAX 实现

const getJSON = function (url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open(“GET”, url, false);
xhr.setRequestHeader(“Content-Type”, “application/json”);
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4) return;
if (xhr.status === 200 || xhr.status === 304) {
resolve(xhr.responseText);
} else {
reject(new Error(xhr.responseText));
}
};
xhr.send();
});
};
2、输入URL回车后的过程
1.读取缓存：
浏览器缓存、系统缓存、路由器缓存、
搜索自身的 DNS 缓存。(如果 DNS 缓存中找到IP 地址就跳过了接下来查找 IP 地址步骤，直接访问该 IP 地址。)
2.DNS 解析:将域名解析成 IP 地址（后迭代查询，按根域服务器 ->顶级域,.cn->第二层域，hb.cn ->子域，www.hb.cn的顺序找到IP地址。）
3.TCP 连接：TCP 三次握手，简易描述三次握手
客户端：服务端你在么？
服务端：客户端我在，你要连接我么？
客户端：是的服务端，我要链接。
连接打通，可以开始请求来
4.发送 HTTP 请求（起始行、请求头部、请求主体三部分）
5.服务器处理请求并返回 HTTP 的response对象，包含状态码，响应头，响应报文三部分
6.浏览器解析渲染页面
7.断开连接：TCP 四次挥手

关于第六步浏览器解析渲染页面又可以聊聊如果返回的是html页面
根据 HTML 解析出 DOM 树
根据 CSS 解析生成 CSS 规则树
结合 DOM 树和 CSS 规则树，生成渲染树
根据渲染树计算每一个节点的信息
根据计算好的信息绘制页面

3、.Vuex和Redux的区别 或vuex与pinia
#相同点
state 共享数据
流程一致：定义全局state，触发，修改state
原理相似，通过全局注入store。
#不同点
vuex定义了state、getter、mutation、action四个对象；redux定义了state、reducer、action。
vuex触发方式有两种commit同步和dispatch异步；redux同步和异步都使用dispatch
vuex中state统一存放，方便理解；reduxstate依赖所有reducer的初始值
vuex有getter,目的是快捷得到state；redux没有这层，react-redux mapStateToProps参数做了这个工作。
vuex中mutation只是单纯赋值(很浅的一层)；redux中reducer只是单纯设置新state(很浅的一层)。他俩作用类似，但书写方式不同
vuex中action有较为复杂的异步ajax请求；redux中action中可简单可复杂,简单就直接发送数据对象（{type:xxx, your-data}）,复杂需要调用异步ajax（依赖redux-thunk插件）。
Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改
Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而Vuex其实和Vue的原理一样，是通过 getter/setter来比较的
view——>commit——>mutations——>state变化——>view变化（同步操作）
view——>dispatch——>actions——>mutations——>state变化——>view（异步操作）
redux的流向：view——>actions——>reducer——>state变化——>view变化（同步异步一样）
4、ref 的作用？
（1）本页面获取dom元素
（2）获取子组件中的data
（3）调用子组件中的方法

4、开发一套组件库上传npm，使用的流程，业务组件库设计以及实现思路
5、uniapp的配置文件、入口文件、主组件、页面管理部分
pages.json 配置文件 main.js 入口文件 App.vue 主组件 pages 页面管理部分

6、uniapp如何监听页面滚动？
使用 onPageScroll 监听
7、vue、小程序、uni-app中的本地存储数据和接受数据是什么？
vue
存储：localstorage.setItem（‘key’，‘value’）
接收：localstorage.getItem（‘key’）
微信小程序
存储：通过wx.setStorage/wx.setStorageSync写数据到缓存
接收：通过wx.getStorage/wx.getStorageSync读取本地缓存，
uniapp
存储：uni.setStorage({key:“属性名”，data:“值”})
接收：uni.getStorage({key:“属性名”,success(e){e.data//这就是你想要取的token}})

8、简述 rpx、px、em、rem、%、vh、vw的区别
rpx 相当于把屏幕宽度分为750份，1份就是1rpx
px 绝对单位，页面按精确像素展示
em 相对单位，相对于它的父节点字体进行计算
rem 相对单位，相对根节点html的字体大小来计算
% 一般来说就是相对于父元素
vh 视窗高度，1vh等于视窗高度的1%
vw 视窗宽度，1vw等于视窗宽度的1%
9、200（强缓存）与304（协商缓存）区别

10、vuex的四个属性，和作用
11、vue2 vue3了解程度，开发过程中最大的区别是什么
响应式api和组合式api
12、性能优化手段
13、option请求
14、webview页面加载慢，可能的原因和解决办法
15、单页应用与多页面应用
单页：全称SPA单页面应用（SinglePage Web Application）。
多页：全称MPA多页面应用（MultiPage Application）。

16、css预编译，特性
17、vue-cli集成了哪些技术
18、nextTick作用是什么？为什么要应用nextTick，应用场景？他的实现原理是什么？
参考答案：
由于Vue的异步更新策略导致我们对数据的修改不会立马体现到都没变化上，此时如果想要立即获取更新后的dom的状态，就需要使用这个方法。nextTick 的回调是在下次 DOM 更新循环结束之后执行的延迟回调。
实现原理：nextTick 主要使用了宏任务和微任务。根据执行环境分别尝试采用
Promise：可以将函数延迟到当前函数调用栈最末端
MutationObserver ：是 H5 新加的一个功能，其功能是监听 DOM 节点的变动，在所有 DOM 变动完成后，执行回调函数
setImmediate：用于中断长时间运行的操作，并在浏览器完成其他操作（如事件和显示更新）后立即运行回调函数
如果以上都不行则采用 setTimeout 把函数延迟到 DOM 更新之后再使用
原因是宏任务消耗大于微任务，优先使用微任务，最后使用消耗最大的宏任务。
19、http相关知识
2.谈谈你对前端性能优化的理解
a. 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
b. 请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体
c. 缓存利用：使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存
d. 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
e. 代码校验：避免CSS表达式，避免重定向

24.请解释一下 JavaScript 的同源策略
同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。

运营端
H5端
小程序
uniapp
微前端
vue3
typescript
组件库

自建库

vue3 webpack vite无项目经验
无基础建设经验
单页面多页面不了解，
nexttick不了解

性能优化：
1、打包
2、按需引入