题目来源：牛客网

自我介绍

动态参数解析的解决方案

对于动态部分使用…args进行接受，可以把动态部分提取成数组

前端安全问题

CDN劫持

内容安全策略CSP

安全沙箱

Iframe

跨站脚本攻击XSS

攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行

跨站请求伪造CSRF

诱导用户进入第三方网站，在第三方网站向被攻击网站发送跨站请求，通过用户的注册凭证，绕过后台的用户验证

点击劫持

HTTP严格传输安全

数据校验在前端还是后端

都需要，前端为了体验，后端为了安全

websocket使用过程中存在的问题

1. 连接的建立与保持
2. 错误处理与短线重连
3. 性能优化与拓展性

echarts的适配性问题

性能优化

浏览器

1. 减少HTTP请求
2. 设置浏览器缓存策略
3. 合理添加加载动画

资源

1. 静态资源CDN
2. 静态资源单独域名
3. GZIP压缩
4. 服务端渲染
5. CSS放在头部、JS放在底部

图片

1. 字体图标代替图片图标
2. 精灵图
3. 图片懒加载
4. 图片预加载
5. 使用PNG格式图片
6. 小于10k的图片转为base64格式

代码

1. 慎用全局变量
2. 缓存全局变量
3. 减少回流与重绘
4. 节流+防抖
5. 少用闭包
6. 减少数据读取次数
7. 文档碎片优化节点
8. 减少判断层级
9. 字面量与构造式

方案

1. 长列表优化
2. web worker
3. 避免iframe

打包

1. 减少代码体积
2. 按需加载

缓存策略

缓存分为强缓存和若缓存。其中强缓存包括Expires和Cache-Control，主要是在过期策略生效时应用的缓存。弱缓存包括Last-Modified和ETag，是在协商策略后应用的缓存。强弱缓存之间的主要区别在于获取资源时是否会发送请求

nextTick的原理

因为Vue采用的异步更新策略，当监听到数据发生变化的时候不会立即去更新DOM，而是开启一个任务队列，并缓存在同一事件循环中发生的所有数据变化，减少DOM操作的次数。nextTick接受一个回调函数作为参数，并将这个回调函数延迟到DOM更新后执行

Vuex的响应式原理

Vue2在组件和实例初始化的时候，会将data里的数据进行数据劫持。被劫持过后的数据会有两个属性，分别是getter和setter

Vue3使用的是ES6中的代理和反射，代理用来拦截对象中任意属性的变化，而反射用于对源对象的属性进行操作

原型在vue中的应用

vue-router的核心

核心是路由隐射，将URL路径隐射到Vue组件上

vue提升渲染性能的工作

前端的项目架构分类

微前端的实现方式

• Nginx路由转发：通过Nginx配置反向代理来实现不同路径映射到不同应用
• Iframe嵌套：父应用单独是一个页面，每个子应用有一个Iframe包裹，父子通过Message进行通信
• WebComponents: 每个子应用需要采用纯WebComponents技术编写组件
• 组合式应用路由分发：每个子应用独立构建和部署，运行时由父应用进行路由管理