题目来源：牛客网
自我介绍
动态参数解析的解决方案
对于动态部分使用…args进行接受，可以把动态部分提取成数组
前端安全问题
CDN劫持
内容安全策略CSP
安全沙箱
Iframe
跨站脚本攻击XSS
攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行
跨站请求伪造CSRF
诱导用户进入第三方网站，在第三方网站向被攻击网站发送跨站请求，通过用户的注册凭证，绕过后台的用户验证
点击劫持
HTTP严格传输安全
数据校验在前端还是后端
都需要，前端为了体验，后端为了安全
websocket使用过程中存在的问题
- 连接的建立与保持
- 错误处理与短线重连
- 性能优化与拓展性
echarts的适配性问题
性能优化
浏览器
- 减少HTTP请求
- 设置浏览器缓存策略
- 合理添加加载动画
资源
- 静态资源CDN
- 静态资源单独域名
- GZIP压缩
- 服务端渲染
- CSS放在头部、JS放在底部
图片
- 字体图标代替图片图标
- 精灵图
- 图片懒加载
- 图片预加载
- 使用PNG格式图片
- 小于10k的图片转为base64格式
代码
- 慎用全局变量
- 缓存全局变量
- 减少回流与重绘
- 节流+防抖
- 少用闭包
- 减少数据读取次数
- 文档碎片优化节点
- 减少判断层级
- 字面量与构造式
方案
- 长列表优化
- web worker
- 避免iframe
打包
- 减少代码体积
- 按需加载
缓存策略
缓存分为强缓存和若缓存。其中强缓存包括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技术编写组件
- 组合式应用路由分发：每个子应用独立构建和部署，运行时由父应用进行路由管理
