前言

最近这段时间在准备春招面试，结果那是惨不忍睹啊，一个星期五天面试了十场，现在有三个在等通知，其它的都挂了，身体和心灵上遭受双重打击，人都要面碎了，第一家公司面试的时候那是非常的辛酸啊，问一个不会一个，问啥啥不会，最终不出所料，不到10分钟就结束了，悬着的心终于吊死

1.说说uniapp里的生命周期和钩子函数

平常vue的生命周期看的多，突然问unipp直接给我问呆了，就只记得一个onload，直接被这道题秒杀了，这玩意太多了，既包括vue自带的生命周期，还包括uniapp增加的页面生命周期和应用生命周期，话不多说，直接上官方文档，反正下次问道还是记不住
页面生命周期 | uni-app官网 (dcloud.net.cn)
应用生命周期 | uni-app官网 (dcloud.net.cn)

2.前端性能优化

前端性能优化是确保网站或应用程序在加载速度、交互响应和资源利用等方面达到最佳状态的重要工作。以下是一些常用的来优化前端性能的方法：

压缩和合并资源文件：将CSS和JavaScript文件进行压缩和合并，减少HTTP请求次数，从而加快页面加载速度。
使用CDN：使用内容分发网络（CDN）来加速静态资源（如图片、样式表、脚本等）的加载速度。
优化图片：选择合适的图片格式、尺寸和质量，可以通过使用图片压缩工具来减小图片大小，减少加载时间。
减少HTTP请求：尽量减少页面中的资源请求次数，可以通过CSS Sprites、字体图标、内联图片等方式来减少HTTP请求。
延迟加载：对于不是立即需要的资源，可以使用延迟加载技术，比如懒加载图片、按需加载模块等。
优化CSS和JavaScript：避免使用过多的CSS样式和JavaScript库，精简代码并确保代码高效运行。
使用缓存：利用浏览器缓存机制，设置合适的缓存头信息，减少服务器请求次数。
减少重绘和重排：避免频繁的DOM操作、样式改变，尽量减少页面的重绘和重排。

3.虚拟DOM

虚拟 DOM（Virtual DOM）是一种用于在浏览器中高效更新用户界面的技术。它的基本思想是在内存中创建一个虚拟的 DOM 树，而不是直接操作真实的 DOM。

当应用的数据发生变化时，虚拟 DOM 会计算出需要更新的部分，并将这些变化应用到虚拟 DOM 树上。然后，通过比较虚拟 DOM 树和真实 DOM 树的差异，只更新需要改变的部分，而不是整个 DOM 树。

这样做的好处是可以减少 DOM 操作的次数，提高性能，尤其是在处理大量动态数据或复杂的 UI 时。虚拟 DOM 还提供了更好的抽象和可测试性，因为它将 DOM 操作与业务逻辑分离。

4.聊聊promise和promise上的方法

这是唯一一个我能答出来的题目，太艰难了

Promise 是处理异步操作的一种方式。一个 Promise 对象有三种状态：Pending（进行中）、Fulfilled（已成功）和Rejected（已失败）。当一个 Promise 对象处于 Pending 状态时，可以改变为 Fulfilled 或 Rejected 状态，一旦状态改变就不会再变。

Promise 有两个重要的方法：then() 和 catch()。then() 方法用于处理 Promise 对象的成功和失败状态，catch() 方法用于捕获错误。

通过 Promise 构造函数，可以创建一个新的 Promise 对象。Promise 构造函数接受一个带有 resolve 和 reject 两个参数的函数作为参数。在这个函数中，如果异步操作成功，则调用 resolve，并将结果作为参数传递给 then() 方法；如果异步操作失败，则调用 reject，并将错误作为参数传递给 catch() 方法。

这些是从学姐的面经上看到的，还好看了一下，不然一道题都答不出来就很尴尬了
百度一面：细节不容忽视，直戳难点（含面试题）

5.有什么工具或者方法能够判断哪些代码执行效率比较差

这道题直接原地愣了一分钟，然后硬着头皮说了一个用浏览器上的断点执行，手动控制代码一行一行执行来判断，这道题我没搜到答案，如果有知道的读者可以在评论区分享一下

6.事件委托（事件代理）

当多个子容器要绑定相同的事件，但是一个个绑定事件又太麻烦了，性能开销也大，而事件代理（事件委托）就是解决这个情况的一种措施，一般发生在列表

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        let ul = document.querySelector('ul')
        ul.addEventListener('click', (e) => {
            console.log(e.target.innerHTML);    // 事件代理的核心
        })
    </script>
</body>

我们直接给父容器ul加上监听事件，然后去看它这个事件自带的参数e的打印结果，有个target属性，然后target属性里的innerHTML就是每一个子容器的内容了，所以可以通过这个知道究竟是哪一个子容器触发了事件，这种方式就叫做事件代理（事件委托）

7.跨域

跨域产生的原因

要聊跨域首先就要先知道浏览器有一个机制叫做同源策略。
大家都知道，一个url组成是由协议号+域名+端口号+路径组成的，而协议号-域名-端口号都相同的地址, 浏览器才认为是同源，比如说https://192.168.31.45:8080/user 和 https://192.168.31.45:8080/list 就是同源的。
跨域其实就是后端返回给浏览器的数据会被浏览器的同源策略给拦截下来的这样一种情况。

跨域的解决办法

1. CORS（Cross-Origin Resource Sharing）： CORS是一种跨域资源共享的标准，通过服务端设置响应头中的Access-Control-Allow-Origin字段来允许跨域请求。服务端在收到跨域请求时，检查Origin字段，如果请求的源在白名单内，则在响应头中添加Access-Control-Allow-Origin字段，并设置为允许的源，从而允许跨域请求。

2. JSONP（JSON with Padding）： JSONP是一种利用script标签的src属性没有跨域限制的特性来实现跨域请求的技术。通过动态创建script标签，将跨域请求的数据封装在一个回调函数中，然后由服务端返回，并执行回调函数，从而实现跨域数据的获取。

3. 代理服务器： 在开发环境中，可以通过配置代理服务器来实现跨域请求。代理服务器接收前端请求，然后在后端发起真正的请求，获取数据后再返回给前端，由于请求是由后端发起的，所以不存在跨域问题。

4. iframe跨域通信： 使用iframe标签可以实现跨域通信。父页面和iframe页面属于不同的源，但是它们之间可以通过postMessage方法来进行跨域通信，实现数据的传递和交互。

8.vue中的keep-alive组件

keep-alive 标签是 Vue.js 中的一个组件，用于实现页面缓存和组件缓存的功能。它的主要作用是在组件切换时保留组件的状态，避免不必要的组件重新渲染，从而提高应用的性能。

当使用 keep-alive 包裹一个组件时，该组件在切换时不会被销毁，而是被缓存起来。当下一次访问该组件时，它会直接从缓存中恢复，而不是重新创建和渲染。这可以减少组件初始化和数据获取的开销，提高页面的加载速度和响应性能。

使用场景

页面间的切换
表单数据的保留
避免重复请求数据

9.浏览器上的每一帧都发生了些什么

这道题我也不知道他是问我什么，我就直接扯了一个从url到页面渲染的过程中发生了什么，这道题我是看学姐的文章背下来的，也不知道到底符不符合题目

😎😎（超详细）从输入url到渲染页面发生了什么，你真的知道吗

10.算法

编写一个TrafficLightController类，实现红绿灯状态切换，并在控制台打印输出。要求如下:
(1)start0)方法，实现红绿灯切换，绿灯:30s，黄灯3s，红灯20s
(2)changeDuration0方法，可以改变红绿灯持续时间
(3)stop0方法，停止切换
(4)可以使用Promise、async、await

class TrafficLightcontroller {
    constructor(greenDuration,yellowDuration, redDuration, isstop){
        this.greenDuration = 30;
        this.yellowDuration =3;
        this.redDuration =20;
        this.isStop = false;
    }
    async start(){
        console.log('绿灯亮');
        await this.delay(this.greenDuration);
        console.log('黄灯亮');
        await this.delay(this.yellowDuration);
        console.log('红灯亮');
        await this.delay(this.redDuration);
    }
    async delay(duration){
        return new Promise(resolve =>{
            setTimeout(resolve, duration * 1000);
        })
    }
    changeDuration(duration){
        switch(color)
        case 'green':
        this.greenDuration = duration,
        break;
        case 'yellow':
        this.yellowDuration = duration;
        break;
        case 'red'
        this.redDuration = duration;
        default:
        throw new Error('无效的颜色')
    }
    stop(){
        this.isStop = true
    }
}

10分钟不到就挂了——被面试官怼的哑口无言

前言