021.整理几个面试题——关于Vue框架

Posted 2021-07-22 Ruovan

Vue框架

从网上收集整理

01. Vue框架的优点？

• 优点：
  • 性能好，容易优化
  • 体积小
  • 低耦合
  • 可重用
  • 独立开发
  • 可测试
• 核心
  • 数据驱动：ViewModel，保证数据和视图的一致性
  • 组件系统：应用类UI可以看作全部是由组件树构成的

02. 渐进式框架是什么？

• 渐进式框架是：

03. SPA单⻚⾯的优缺点是什么？

• 概念：SPA即 single-page application ，仅在⻚⾯初始化时加载相应的 html、javascript 和 CSS
  • ⼀旦⻚⾯加载完成，SPA 不会因为⽤户的操作⽽进⾏⻚⾯的重新加载或跳转
  • 取⽽代之的是利⽤路由机制实现 HTML 内容的变换，UI 与⽤户的交互，避免⻚⾯的重新加载
• 优点：
  • 1）⽤户体验好、快，内容的改变不需要重新加载整个⻚⾯，避免了不必要的跳转和重复渲染
  • 2）SPA 相对服务器压⼒⼩
  • 3）前后端职责分离，架构清晰，前端进⾏交互逻辑，后端负责数据处理
• 缺点：
  • 1）⾸屏（初次）加载慢：为实现单⻚ Web 应⽤功能及显示效果，需要在加载⻚⾯的时候将JavaScript、CSS 统⼀加载，部分⻚⾯按需加载
  • 2）不利于 SEO：由于所有的内容都在⼀个⻚⾯中动态替换显示，所以在 SEO 上其有着天然的弱势

04. SPA首屏加载慢如何解决

• 安装动态懒加载所需插件
• 使用CDN资源

05. Vue SSR是什么？

• SSR，即服务端渲染

• SSR大致的意思就是

  • vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成
  • 服务端形成的html 片段直接返回给客户端
  • 这个过程就叫做服务端渲染

• 优点

  • 更好的 SEO
    • SPA 页面的内容是通过 Ajax 获取，而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容，所以在 SPA 中是抓取不到页面通过 Ajax 获取到的内容
    • 而 SSR 是直接由服务端返回已经渲染好的页面（数据已经包含在页面中），所以搜索引擎爬取工具可以抓取渲染好的页面
  • 首屏加载更快
    • SPA 会等待所有 Vue 编译后的 js 文件都下载完成后，才开始进行页面的渲染，文件下载等需要一定的时间等，所以首屏渲染需要一定的时间
    • SSR 直接由服务端渲染好页面直接返回显示，无需等待下载 js 文件及再去渲染等，所以 SSR 有更快的内容到达时间；

• 缺点

  • 更多的开发条件限制
    • 例如服务端渲染只支持 beforCreate 和 created 两个钩子函数
    • 服务端渲染应用程序，需要处于 Node.js server 运行环境
  • 更多的服务器负载
    • 大量占用CPU 资源

06. 对Vue的优化？

• 代码层面的优化

  • v-if 和 v-show 区分使用场景
  • computed 和 watch 区分使用场景
  • v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
  • 长列表性能优化
  • 事件的销毁
  • 图片资源懒加载
  • 路由懒加载
  • 第三方插件的按需引入
  • 优化无限列表性能
  • 服务端渲染 SSR or 预渲染

• Webpack 层面的优化

  • Webpack 对图片进行压缩
  • 减少 ES6 转为 ES5 的冗余代码
  • 提取公共代码
  • 模板预编译
  • 提取组件的 CSS
  • 优化 SourceMap
  • 构建结果输出分析
  • Vue 项目的编译优化

• 基础的 Web 技术的优化

  • 开启 gzip 压缩
  • 浏览器缓存
  • CDN 的使用
  • 使用 Chrome Performance 查找性能瓶颈