比较深度的面试题

前端架构方面问题

a. 分层架构
b. 模块化开发
c. 组件化开发
d. 性能优化
  i. 减少资源加载
        1) 优化图片
	  a) 对于图片资源，可以采用压缩、优化图片大小和格式等方式来减少资源体积。
	  b) 合理使用图片懒加载技术，避免一次性加载大量图片导致页面加载缓慢。
        2) 懒加载/base64/雪碧图
        3) 压缩代码/gzip/合理利用缓存机制，将经常访问的资源缓存起来，减少重复的请求和下载
	  a) 浏览器缓存cache
	  b) CDN缓存
        4) 异步加载
	  a) 对于非关键资源，可以采用异步加载的方式，避免阻塞主线程。例如，可以将JavaScript文件放在底部或使用异步加载技术，以避免阻塞页面渲染。
        5) 优化CSS渲染
	  避免使用过度复杂的选择器和嵌套结构，以减少浏览器的渲染时间。
	  避免使用过度大的背景图片或复杂的动画效果，这些都会增加渲染时间。
        6) 使用Web Workers
	  a) 对于需要大量计算的JavaScript任务，可以使用Web Workers将任务放在后台线程中执行，避免阻塞主线程，提高页面响应速度。	
   ii. 代码优化-提高页面渲染速度
        1) 优化JavaScript代码，避免不必要的计算和操作。
        2) 使用事件代理、懒加载等技术来减少DOM操作和事件绑定。
        3) 避免在页面渲染过程中执行复杂的计算和操作。
   iii. 监控和日志
        1) 建立监控和日志系统，实时监控网站性能和用户行为。通过分析日志数据，找出性能瓶颈和问题所在，及时进行优化和调整。
e. 前端安全
   i. 通过转义用户输入和输出，可以防止XSS攻击。
   ii. 使用经过良好维护和广泛使用的安全API和库，可以减少安全漏洞的风险。
   iii. 在前端应用程序中，限制对文件、数据库和其他资源的访问权限，以减少潜在的安全风险。只授予必要的权限，并定期审查和更新权限设置。
   iv. 保持前端框架、库和工具的更新，及时修补已知的安全漏洞。定期检查第三方依赖项的安全性，并遵循最佳实践来更新它们。
   v. 定期进行安全审计和代码审查，以发现潜在的安全漏洞和问题。使用静态代码分析工具、动态分析工具和其他安全审计工具来帮助识别和修复问题。
   vi. 通过定义允许加载的资源来源，可以限制浏览器加载哪些资源，从而保护应用程序免受恶意攻击。
f. 清晰的代码文档说明
g. 定期检查和重构，汇总通用方法

webpack如何优化

a. 代码分离分包chunks
b. prefetch 预获取
     i. Prefetch的实现方式是通过添加rel="prefetch"属性来实现
c. preload 预加载
     i. PreloadWebpackPlugin参数include/fileWhitelist/priority(优先级)
d. Tree Shaking移除 JavaScript 上下文中的死代码

vite的性能优化

a. 服务热更新更快
 i. 在 Vite 中，HMR 是在原生 ESM 上执行的。
        当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活（大多数时候只是模块本身）
        使得无论应用大小如何，HMR 始终能保持快速更新。
b. 对于Ts的友好支持

SPA与SSR的理解

a. 单页面应用（SPA）
  i. 整个web项目只有一个页面，使用路由机制进行组件之间的切换；
  ii. 优点：客户端渲染、数据传输量小、减少服务器端压力、交互/响应速度快、前后端完全分离；
  iii. 缺点：首屏加载慢、对SEO不友好，不利于百度，360等搜索引擎收录快照
b. 服务端渲染（SSR）
  i. 将组件或页面通过服务器端生成HTML字符串，再发送到浏览器端渲染；
  ii. 优点：对于SEO友好、首屏加载速度快；
  iii. 缺点：页面重复加载次数高、开发效率低、数据传输量大、服务器压力大；
c. SPA和SSR的适用场景
  i. SPA：对项目性能要求高、页面加载速度快、要求客户端渲染、对SEO要求低；
  ii. SSR：对项目SEO要求高、首次打开响应速度快；
d. SPA与SSR比较
  i. 数据请求
        1) 由服务端请求首屏数据，而不是客户端请求首屏数据，这是“快”的一个主要原因。
        2) 服务端在内网进行请求，数据响应速度快。
        3) 客户端在不同网络环境进行数据请求，且外网http请求开销大，导致时间差。
  ii. HTML渲染
        1) 服务端渲染是先向后端服务器请求数据，然后生成完整首屏html返回给浏览器；
        2) 而客户端渲染是等js代码下载、加载、解析完成后再请求数据渲染，等待的过程页面是什么都没有的，就是用户看到的白屏。
        3) 阶段一：浏览器请求url --> 服务器路由分析、执行渲染 --> 服务器返回index.html(实时渲染的内容，字符串) --> 浏览器渲染
        4) 阶段二：浏览器请求bundle.js --> 服务器返回bundle.js --> 浏览器路由分析、生成虚拟DOM --> 比较DOM变化、绑定事件 --> 二次渲染
  iii. 传输数据
        1) 客户端渲染：传递JSON对象，由浏览器渲染视图

qiankun方面的问题

a. 为什么拆分qiankun,优缺点
    技术兼容性好、子应用可以基于不同的技术框架
    拆分后体积变小，代码内聚性更强，每个子应用只是一个业务模块
    能够独立开发、编译、部署
    耦合性低，可独自开发，互不干扰
    可维护和扩展性好，可专门升级某一个功能
b. 如何拆分qiankun，注意事项
    registerMicroApps 注册子应用
c. 对于拆分后的主体基座应用与子应用如何通讯，子应用间如何通讯
    主应用
    提供了一种基于 props 的通信机制。你可以在主应用中通过 props 传递数据给子应用，然后在子应用中通过 props.onGlobalStateChange 和 props.setGlobalState 来监听和修改全局状态。
    子应用直接通过
d. 对于qiankun拆分后，有什么观点
      1. 例如 以配置化的参数设置子应用的读取，可以解决子应用独立运行时的便携性
      2. 通过私服npm可以挂载通用的系统请求以及通用组件

如何优化vue项目

uniapp的相关使用

后台管理系统的大数据量如何渲染

tab标签页缓存问题

vue项目keep-alive 点击tab标签(tagsView)缓存页面

includs 包含属性

vue+qiankun -- 多tab标签页切换缓存

结合localstore监听includs的参数变化