易联众

刀刀

7/24/2025

0 字

0 分钟

一面

Q：数组的 concat 方法会改变原数组么？

我的回答

不会，返回新数组

Q：说一下 Vue 组件通信

我的回答

1. 父子组件通信：props、$emit、Vue2：this.$refs.child、Vue3：ref.value
2. 兄弟组件通信：$emit、Vuex、eventBus

Q：说一下 Vuex 的 state、mutations、actions

我的回答

state：存储数据

mutations：同步修改 state

actions：异步 dispatch 派发修改 state，通过 commit 触发 mutations

Q：说一下路由守卫

我的回答

全局路由守卫：beforeEach，可以做权限处理；afterEach，可以做进度条清楚

组件路由守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

Q：菜单权限怎么处理

我的回答

用户登录后接口会返回用户有权限的路由，通过 addRoute 来添加

Q：element-ui组件库有没有二次封装？怎么封装的？有什么作用？

Q：使用 element-ui 怎么实现按需引入

我的回答

看文档，记得有一个第三方库。

Q：用他的表格组件，一个显示 500 条数据导致卡顿，怎么优化？

我的回答

1. 分页
2. 虚拟滚动
3. 懒加载

Q：rc4加密算法和aes加密算法做前后端加密，怎么做？

我的回答

没听说过。

Deepseek 的回答

RC4已经被认为是不安全的，不推荐在新系统中使用。而AES是当前的安全标准。使用AES加密步骤概览：

1. 前后端约定一个密钥（例如通过HTTPS传输，在用户登录后由后端动态生成一个密钥，用HTTPS传输到前端，然后后续通信使用该密钥加密。但这里为了简化，我们假设一个固定密钥，实际中不能这样用）。

2. 前端加密

   • 生成一个随机的初始向量（IV），每次加密都需要一个新的IV。
   • 用密钥和IV加密数据。
   • 将IV和加密后的数据一起发送给后端（通常将IV放在密文前面，不需要保密，但必须不可预测）。

   // 使用Web Crypto API
   async function encryptAES(data, key) {
     // 生成随机IV（初始向量）
     const iv = crypto.getRandomValues(new Uint8Array(12));
     
     // 导入密钥
     const cryptoKey = await crypto.subtle.importKey(
       "raw",
       new TextEncoder().encode(key),
       { name: "AES-GCM" },
       false,
       ["encrypt"]
     );
   
     // 加密数据
     const encrypted = await crypto.subtle.encrypt(
       { name: "AES-GCM", iv },
       cryptoKey,
       new TextEncoder().encode(data)
     );
   
     // 组合IV+密文
     const combined = new Uint8Array(iv.length + encrypted.byteLength);
     combined.set(iv, 0);
     combined.set(new Uint8Array(encrypted), iv.length);
   
     return btoa(String.fromCharCode(...combined));
   }
   
   // 使用示例
   const apiKey = "secure_key_exchanged_via_tls"; // 实际通过安全通道获取
   const payload = JSON.stringify({ user: "test", password: "123" });
   
   encryptAES(payload, apiKey)
     .then(encrypted => {
       // 发送到后端
       fetch("/api/endpoint", {
         method: "POST",
         body: JSON.stringify({ data: encrypted })
       });
     });

3. 后端解密（Node为例）
 - 从请求中分离出IV和密文。
 - 用密钥和IV解密密文。

 ```js
 const crypto = require('crypto');

  function decryptAES(encryptedBase64, key) {
    // Base64解码
    const combined = Buffer.from(encryptedBase64, 'base64');
    
    // 提取IV（前12字节）和密文
    const iv = combined.subarray(0, 12);
    const ciphertext = combined.subarray(12);
    
    // 创建解密器
    const decipher = crypto.createDecipheriv(
      'aes-256-gcm',
      Buffer.from(key, 'utf8'),
      iv
    );
    
    // 解密
    let decrypted = decipher.update(ciphertext);
    decrypted = Buffer.concat([decrypted, decipher.final()]);
    
    return decrypted.toString('utf8');
  }

  // Express路由中使用
  app.post('/api/endpoint', (req, res) => {
    const { data } = req.body;
    const apiKey = "server_stored_secret"; // 从安全存储获取
    
    try {
      const decrypted = decryptAES(data, apiKey);
      const payload = JSON.parse(decrypted);
      // 处理业务逻辑...
    } catch (e) {
      res.status(401).send("解密失败");
    }
  });

4. 后端加密响应
   • 同样生成新的IV，用密钥和IV加密响应数据。
   • 将IV和密文一起返回。
5. 前端解密响应。

Q：有没有接触过前端微服务的框架？

我的回答

没有。

Q：那如果有很多个系统想整合到一起你要怎么做？

我的回答

通过链接跳转吧

Deepseek 的回答

方案1：Nginx反向代理 + 路径分发

# nginx.conf
server {
    listen 80;
    server_name portal.com;

    location /app1 {
        proxy_pass https://app1.com; # 代理到子系统A
        proxy_set_header Host $host;
    }

    location /app2 {
        proxy_pass https://app2.com; # 代理到子系统B
        proxy_cookie_domain app2.com portal.com; # 统一域名
    }

    location / {
        root /usr/share/nginx/portal; # 主门户静态资源
    }
}

优点：零前端改造成本 缺点：样式不统一，页面跳转刷新

方案2：Web Components封装

<!-- 主门户HTML -->
<micro-app 
  name="order-system"
  src="https://app1.com/main.js" 
  base-path="/app1"
></micro-app>

<script>
  // 子系统改造：导出Web Component
  class OrderApp extends HTMLElement {
    connectedCallback() {
      const shadow = this.attachShadow({ mode: 'open' });
      const root = document.createElement('div');
      ReactDOM.render(<App />, root); // React挂载
      shadow.appendChild(root);
    }
  }
  customElements.define('micro-app', OrderApp);
</script>

优势：技术栈无关，CSS隔离 要求：子系统支持自定义元素导出

方案3：服务端模板组合（SSI/ESI）

<!-- 主门户index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>统一门户</title>
  <!--#include virtual="/common/header.html" -->
</head>
<body>
  <div class="header"><!--#include virtual="/sso/navbar" --></div>
  
  <div id="app1">
    <!--#include virtual="https://app1.com/content" -->
  </div>

  <!--#include virtual="/common/footer.html" -->
</body>
</html>

适用场景：内容型系统 技术：Nginx SSI或CDN ESI

方案4：客户端动态加载

// 主门户动态加载子系统
function loadSubApp(appId) {
  const container = document.getElementById('app-container');
  
  // 1. 加载CSS
  const css = document.createElement('link');
  css.href = `https://${appId}.com/style.css`;
  document.head.appendChild(css);

  // 2. 加载JS
  const script = document.createElement('script');
  script.src = `https://${appId}.com/main.js`;
  script.onload = () => {
    // 3. 初始化应用
    window[`init${appId}`](container);
  };
  document.body.appendChild(script);
}

// 子系统暴露接口
window.initOrderApp = (container) => {
  ReactDOM.render(<App />, container);
};

Q：如果我要在浏览器缓存大量数据，要怎么实现？主要想问indexDB

我的回答

没怎么了解过

Q：打包后的文件想兼容低版本该用什么工具？

我的回答

babel

Q：你有没有发布过npm包？知道如何改包的版本么？

我的回答

没有

Q：rem怎么使用？

我的回答

html设置font-size，然后使用rem

Q：如何实现可视区域自适应？

我的回答

resize重新计算

二面

Q：最有成就感的项目是哪个？说一下项目背景，你在团队的角色，以及它最后的成果。

Q：回过头来看，如果现在让你来做这个项目，你会怎么优化？怎么能做得更好？

Q：Uniapp和原生开发有啥差异？

Q：如果我要开发一个窗口歌词的功能，你有什么思路？

Q：有一个页面，用户反馈卡慢，你要怎么做？

我的回答

1. 先看网络请求，数据回来的快不快
2. 看进程，有没有阻塞，例如响应式数据绑定
3. 如果涉及动画，用rAF优化
4. 如果涉及计算，用webworker优化
5. 如果样式卡顿，尽量用重绘，避免重排，或者will-change

Q：有没有做过前端监控？

Q：有没有封装过组件？

Q：假设我要做飞书、微信多人协同文档，你要怎么做？用什么技术？

Q：你是通过什么渠道去学习技术的？

Q：有用过什么AI工具？

Q：现在前端浏览器支持几个并发？移动端呢？

Deepseek 的回答

桌面浏览器：

浏览器	最大并发数	额外说明
Chrome	6	所有现代版本一致
Firefox	6	从Firefox 4+开始
Safari	6	macOS/iOS一致
Edge	6	基于Chromium后与Chrome一致
IE	11 13	但只有6个活动连接
IE	9-10	8

移动浏览器：

平台/浏览器	最大并发数	特殊限制
iOS Safari	6	所有iOS版本一致
Android Chrome	6	主流Android设备
低端Android设备	4-5	内存<2GB的设备可能更低
微信内置浏览器	4-6	根据微信版本波动
UC浏览器	4	为节省流量特别限制