1.fetch请求方式
fetch是什么？
fetch是一种http 数据请求的方式，是xml的一种替代方式。
怎么请求？
fetch方法返回一个promise解析response显示状态（成功与否）的方法。
优点：
- 使用Promise，支持链式调用，代码更加简洁和易读。
- 默认不会携带Cookie等身份验证信息，避免了潜在的安全问题。
- 支持跨域请求。
- 更好地处理请求错误。
javascript// 发送GET请求 fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // 解析响应数据为JSON格式 }) .then(data => { console.log(data); // 处理获取到的数据 }) .catch(error => { console.error('Fetch error:', error); });
fetch和XML Http Request（xhr）?
XMLHttpRequest (XHR) 与 fetch_xmlhttprequest和fetch-CSDN博客
fetch支持promise，xhr不支持。
2.保持前后端实时通信的方法
四种：
（1）轮询
轮询是客户端和服务器之间会一直进行连接，每隔一段时间就询问一次。
（2）长轮训
长轮询是对轮询的改进版，客户端发送HTTP给服务器之后，如果没有新消息，就一直等待。有新消息，才会返回给客户端。
（3）websocket
WebSocket是类似Socket的TCP长连接的通讯模式，一旦WebSocket连接建立后，后续数据都以帧序列的形式传输。
（4）SSE
.SSE(Server-Sent Event)是建立在浏览器与服务器之间的通信渠道，然后服务器向浏览器推送信息。
应用：
轮询适用于：小型应用，实时性不高
长轮询适用于：一些早期的对及时性有一些要求的应用：web IM 聊天
iframe适用于：客服通信等
WebSocket适用于：微信、网络互动游戏等
SSE适用于：金融股票数据、看板等
3.浏览器输入url发生了什么
- url解析
- 查找缓存
- dns域名解析
- 三次握手建立tcp连接
- 发起http请求
- 服务器响应并返回结果
- 四次挥手释放tcp连接
- 浏览器渲染
- js引擎解析
4.浏览器如何渲染页面
- 解析html，生成dom树
- 解析css，生成css规则树
- 合并dom树和规则树，生成render渲染树
- 计算每个渲染树的节点位置和大小
- 绘制布局
5.重绘重排（回流）区别？如何避免
重排（回流）：当页面某个元素的位置，尺寸发生变化时，浏览器需要重新计算该元素的几何属性，重新布局页面
重绘：元素的布局不变，仅改变外观样式
如何避免：
1.减少直接操作DOM元素，可以使用ClassName
2.避免使用Table，改变该属性会导致页面的重排
3.多个DOM元素改变时，使用DocumentFragment一次性重排
4.position属性设置为fixed或者absolute，脱离文档流
6.浏览器垃圾回收机制
什么是垃圾回收机制？
浏览器的垃圾回收机制就是我们程序在工作的过程中或者执行之后，会产生一些用不到的内存变量，这些变量会一直占据这内存，所以这时候需要垃圾回收机制帮我清理这些用不到的变量，从而释放内存空间。垃圾回收机制最常见的有两种：1.标记清除算法。2：引用计数算法。
（1）标记清除算法就是执行前将所有的变量打上标记，执行完成后未被打上标记的变量就会当做垃圾回收。浏览器会隔一段时间进行一次标记清除缺点：被释放的内存空间是不连续的，被之前一直占据内存的变量隔开，导致内存空间不连续，会出现分配不一的问题。
（2）引用计数算法：就是对对象的引用次数进行增加或者减少，如果引用次数变为0，那么该对象分配的内存空间立即就会被清除掉。
缺点：会出现相互引用的情况。会导致对象一直被引用无法被清除 。
7.事件循环(event loop)，宏任务与微任务
事件循环？
js是单线程执行的，但不代表会阻塞代码执行，执行js时
（1）同步的任务一般都会进入主线程执行，异步的任务会进入任务队列，同步任务执行完毕，会开始执行异步任务。
（2）异步任务又分为微任务和宏任务。遇到宏任务会把宏任务放到宏任务队列，执行完微任务，在取出宏任务执行，再遇到微任务，先执行微任务，完成在执行宏任务。
就形成了事件循环，就是在宏和微之间循环。
宏任务微任务？
执行顺序：主线程》微任务》宏任务
宏任务：setTimeout setTnterval Ajax Dom事件
微任务：promise async await...
8.跨域是什么？如何解决跨域问题
跨域的概念
受浏览器同源策源（即协议，域名，端口号必须一致是浏览器的一种安全模式）的影响不能执行其他网站的脚本。
解决：
1、jsonp：利用script标签可以听过src发送请求来实现，但是只能发送get请求，不够安全；
2、前端proxy代理和后端设置cros，proxy替代浏览器发送请求，因为同源策略是限制浏览器的，服务器和服务器之前发送请求是允许的；后端设置请求头setHeader(access-control-allow-origin,域名);
3、niginx反向代理、node中间件
4、postMessage：h5的api
9.vue钩子函数
挂载。更新。销毁
vue2中有8个：beforeCreate、created、beforeMount、mounted、beforeUpdate、update、beforeDestroy、destroy
vue3有7个，一进入setUp是创建阶段，接着是onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted
10.组件通信方式
Vue3（五）：组件通信详解（九种方法）_vue3 父组件孙组件 通信-CSDN博客
- 父》子：1.props 2.v-model 3. $ refs 4.默认插槽具名插槽
- 子》父：1.props 2.自定义事件emit 3.v-model 4.parent 5.作用域插槽
- 祖《》孙：1.$attrs 2.provide inject
- 任意组件》通信：1.mitt（接收数据的emitter.on绑定事件 提供数据的emitter.emit触发事件） 2.pinia 3.vuex
11.Computed watch区别
- 功能：computed是计算属性，依赖其他属性值；watch是监听一个值的变化，然后执行对应的回调
- 是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次 监听的时候都会执行回调
- 是否调用return：computed中的函数必须要return，watch中不是必须的
- 监听：computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听：若需要第一次做监听，添加immediate：true
- watch支持异步，computed不支持
- 使用场景：computed---当一个属性受多个属性影响---购物车结算,watch---当一条数据影响多条数据---搜索框
12.V-if v-show区别
相同点：都控制元素显示与隐藏
（1）Vif 本质是动态的向dom树中添加或者删除dom元素 适用于少次操作
（2）Vshow 本质是控制css的display none属性 适用于频繁操作某个节点使用
13.vue的keep-alive
1.keep-alive是vue的内置组件，能在组件切换过程中将状态保留在内存中，相当于缓存，防止重复渲染DOM，减少加载时间，提高性能。
2.使用方法：使用**<keep-alive>** 标签对需要缓存的组件进行包裹，默认情况下被包裹的组件都会缓存
3.keep-alive有三个属性：include（只有名字匹配的组件才会被缓存），exclude（任何名字匹配的组件都不缓存），max（最多可以缓存的组件数量）
4.和路由配合使用：相应组件下规定meta属性，定义keep-alive：true;
5.使用keep-alive导致组件不重新加载，也就不会重新执行生命周期，解决该问题需要两个属性： 进入时触发 activated，退出时触发 deactivated</keep-alive>
14.vue的$nextTick作用与原理
- 1.作用：Vue更新DOM节点是异步执行的，即数据更新之后，视图不会马上更新，所以修改数据之后，从方法中获取的DOM节点是更新前的DOM节点， 只有在$nextTick中才能获取更新后的DOM
- 2.原理：将回调函数推入到一个队列中，在下个事件循环周期中执行这个队列中的所有回调函数。$nextTick的本质是返回一个Promise
- 3.应用场景：在钩子函数created()中想要获取操作DOM，把操作DOM的方法放在$nextTick中
15.vue列表为什么添加key
做一个唯一标识，diff算法可以更准确的识别这个节点，高效的更新dom。
目的是为diff算法添加标识。
1.因为diff算法里判断新旧vnode是否相同的依据是节点的tag和key,
2.如果tag和key 都相同会进行进一步判断，使得尽可能多的节点进行复用。
3.key绑定的值一般是一个唯一的值，比如id，如果用index的话，数组元素进行增删的话就会影响index，导致diff进行多余的更新操作
16.Vue-router实现懒加载的方法
懒加载就是不用到不加载，按需加载。
1.ES6的import方式：component: () => import ('./home.vue');
2.异步组件加载方式：component: resolve => (require(['./home.vue'] , resolve));
17.hashrouter和historyrouter
- 形式上，hash模式中URL存在'#'符号，而history模式的ULR则没有。
- history是H5新增，需要后端协助实现。
- 原理： Hash模式通过监听hashChange事件监听URL的hash值的修改实现对应跳转。 History模式通过H5提供的pushState，replaceState...等实现URL的修改和对应跳转，也可以通过监听popState事件来监听用户点击前进、后退按钮实现对应跳转。
- History模式实际上是利用浏览器的历史记录栈来实现。在项目过程中遇见采用History模式再刷新页面会导致404的问题，因为Hash模式#后面的hash值不会带入请求URL中，所以服务器觉得Hash模式下的URL是不变的；而History模式URL在/a /b 之间不断变化，必须要服务器对这些请求进行重定向，一直返回一个指定页面即可。
18.vuex是什么，每个属性是干嘛的？怎么使用
Vuex是全局状态管理仓库
1.State：数据源
2.Getters：对state数据进行计算，相当于计算属性
3.Mutation：更新State数据的方法，必须是同步方法
4.Action： 提交的是 Mutation，而不是直接变更状态， 可以包含任意异步操作
5.Modules：Vuex的模块化，可以让每一个模块拥有自己的state、mutation、action、getters
19.Vue2的双向绑定原理
采用数据劫持结合发布者订阅者模式的方式来实现响应式。
通过object.defineProperty来劫持数据的getter，setter,在数据变化时发送消息给订阅者，订阅者收到消息后进行相应的处理。
缺点是不能监听新对象的新增属性和删除属性，不能监听通过下标改变数组对应数据
20.Vue3实现数据双向绑定
Vue3.0最主要的改变就是将Object.defineProperty() 替换成为Proxy对象，原理相同:
- 在vue实例初始化的时候（vm._init()执行的时候）调用Observe类的实例方法observe，将其中每个数据（若是对象则发生递归）进行一遍数据劫持（get实现依赖收集，set实现事件派发（这里的模式为发布订阅模式））
可以原生支持数组的响应式，不需要重写数组的原型，解决了Vue2.0无法监听数组变化和不能监听对象的新增属性和删除属性的问题。
关于proxy?
Proxy是ES6中新增的特性，实现的过程是在目标对象之前设置了一层"拦截"，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
Proxy优点：可以劫持整个对象，并返回一个新对象，有13种劫持。
21.前端性能优化手段
按粒度大致可以分为两类：
一类是文件加载更快
让传输的数据包更小（压缩文件/图片）：图片压缩和文件压缩
减少网络请求的次数：雪碧图/精灵图、节流防抖
减少渲染的次数：缓存（HTTP缓存、本地缓存、Vue的keep-alive缓存等）
另一类是文件渲染更快
提前渲染：ssr服务器端渲染
避免渲染阻塞：CSS放在HTML的head中 JS放在HTML的body底部
避免无用渲染：懒加载
减少渲染次数：对dom查询进行缓存、将dom操作合并、使用减少重排的标签
在用户角度前端优化可以让页面加载得更快，对用户的操作响应得更及时，能够给用户提供更为友好的体验，在服务商角度前端优化能够减少页面请求数，减小请求所占带宽，能够节省服务器资源。
22.性能优化的性能指标
...看不懂一点
23.服务端渲染
看不懂
- 服务端渲染（SSR）是一种在服务器上将应用或页面转换为HTML，然后发送到客户端的技术。
服务端渲染过程：
- 当用户在浏览器中访问一个网页时，服务器会接收到这个请求，然后根据用户请求的内容，查询相关数据，并生成包含特定信息的HTML文本，然后返回给浏览器端，浏览器收到后解析并展示出页面内容。
服务端渲染优点：
- 1.SEO友好：服务端渲染的页面在发送到客户端时已经是完整的HTML，搜索引擎可以更容易地爬取信息；
- 2.更快的首屏渲染：HTML已经在服务器端生成，浏览器获取请求后可直接渲染，所以首屏渲染速度更快；
- 3.后端生成静态化文件：服务器端渲染后可以将生成的HTML静态化，可以提高网站加载速度和性能；
服务端渲染缺点：
- 1.技术复杂度较高：服务器端渲染需要处理用户的请求，查询数据，结合HTML模板生成HTML文本等操作，技 术实现相对复杂
- 2.服务器压力较大：服务器需要处理更多的计算和渲染任务，可能会增加服务器的压力，降低性能和响应速度
24.xss攻击
- 1.XSS是跨站脚本攻击(Cross Site Scripting)
- 2.攻击者可以通过向Web页面里面插入script代码，当用户浏览这个页面时，就会运行被插入的script代码，达到攻击者的目的。
3.危害：
- 泄露用户的登录信息cookie；
- 恶意跳转：
- 直接在页面中插入window.location.href进行跳转。
4.防止XSS攻击的方法：
- 1).对输入框内容进行过滤和转码。过滤掉用户输入的与事件有关的回调，如onclick,过滤掉用户输入的style标签，script标签。
- 3).设置cookie的httponly，告诉浏览器不对客户端开放访问权限。
- 1).对用户的输入做Html实体编码
- 3).不对html实体直接进行解码
25.csrf攻击
1.概念：跨域请求伪造。
目标站点仅使用cookie来验证，并且cookie是允许跨域的，这就使得恶意站点的页面能拿到用户的cookie.
目标站点后端没有验证请求的来源，导致任何带有效cookie的请求都被处理。
用户被诱导访问了恶意站点
预防CSRF攻击主要有以下策略：
（1）-使用验证码，在表单中添加一个随机的数字或者字母验证码，强制要求用户和应用进行直接的交互，
（2）-HTTP中Referer字段，检查是不是从正确的域名访问过来，他记录了HTTP请求的来源地址。
（3）-使用token认证，在HTTP请求中添加token字段，并且在服务器建立一个拦截器验证这个token，如果token不对，就拒绝这个请求。
26.diff算法
1.Diff算法主要就是在虚拟DOM树发生变化后，生成DOM树更新补丁的方式，对比新旧两株虚拟DOM树的变更差异，将更新补丁作用于真实DOM，以最小成本完成视图更新；
2.原理
框架会将所有的结点先转化为虚拟节点Vnode，在发生更改后将VNode和原本页面的OldNode进行对比，然后以VNode为基准，在oldNode上进行准确的修改。
3.修改准则：
原本没有新版有，则增加；
原本有新版没有，则删除；
都有则进行比较，都为文本结点则替换值；
都为静态资源不处理；都为正常结点则替换；