前端常见的面试题整理（二）

时光_静好
62 阅读7分钟

常见的问题整理（二）

学习过程中的简单记录，若问题敬请指教！文章持续更新中...

1. VUE是什么？

Vue.js 是一个用于创建用户界面的框架，也是一个创建单页面应用的web应用框架

2. Vue的核心特性

2.1 数据驱动

采用MVVM模式，表示Model-view-viewModal

  • Model：模型层，负责处理业务逻辑以及和服务器端进行交互
  • View：视图层，负责将数据模型转化UI，展示出来，可以简单的理解为页面
  • ViewModel：视图模型层，用来连接Model 和 View ，是之间的通信桥梁

2.2 组件化

  • 定义：就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式

组件化的好处

  • 降低整个系统的耦合度

  • 调试方便，能够快速定位问题

  • 提高可维护性

2.3 指令系统

解释：指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

  • 常用的指令
    • 条件渲染指令 v-if
    • 列表渲染指令v-for
    • 属性绑定指令v-bind
    • 事件绑定指令v-on
    • 双向数据绑定指令v-model

3. Vue和React对比

相同点

  • 都有组件化思想
  • 都支持服务器端渲染
  • 都有Virtual DOM（虚拟dom）
  • 数据驱动视图
  • 都有支持native的方案：Vue的weex、React的React native
  • 都有自己的构建工具：Vue的vue-cli、React的Create React App

区别

  • 数据流向的不同。react从诞生开始就推崇单向数据流，而Vue是双向数据流
  • 数据变化的实现原理不同。react使用的是不可变数据，而Vue使用的是可变的数据
  • 组件化通信的不同。react中我们通过使用回调函数来进行通信的，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数
  • diff算法不同。react主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。Vue 使用双向指针，边对比，边更新DOM

4. 对SPA单页面首屏加载速度慢怎么解决？

4.1 加载慢的原因？

  • 网络延迟的原因
  • 资源文件体积是否过大的原因
  • 资源是否重复发送请求去加载
  • 加载脚本的时候，渲染内容堵塞

4.2 常见的几种SPA首屏优化方案

  • 减少入口文件积（路由懒加载）
  • 静态资源本地缓存（前端合理利用localStorage）
  • UI框架按需加载（不要全部引入组件，而是用到那个引入那个）
  • 图片资源的压缩（对页面上使用到的icon，可以使用在线字体图标，或者雪碧图，将众多小图标合并到同一张图上，用以减轻http请求压力）
  • 组件重复打包
  • 开启GZip压缩
  • 使用SSR

4.3 总结

减少首屏渲染时间的方法很多，大致可以分为两大部分：资源加载优化和页面渲染优化

5. vue2.0不允许在已经创建的实例上动态加新的响应式属性，若想添加可以采用以下几种形式

  • Vue.set()

    • 通过Vue.set向响应式对象中添加一个property，并确保这个新 property同样是响应式的，且触发视图更新

  • Object.assign()

    • 创建一个新的对象，合并原对象和混入对象的属性
    this.someObject = Object.assign({},this.someObject,{newProperty1:1,newProperty2:2 ...})

  • $fourceUpdated()

如果你发现你自己需要在 Vue中做一次强制更新，99.9% 的情况，是你在某个地方做错了事

$forceUpdate迫使Vue 实例重新渲染

PS：仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

小结

  • 如果为对象添加少量的新属性，可以直接采用Vue.set()
  • 如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象
  • 如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新 (不建议)

PS：vue3是用过proxy实现数据响应式的，直接动态添加新属性仍可以实现数据响应式

6. 项目中有封装过axios吗？

6.1 axios是什么？

axios是一个轻量的HTTP客户端，基于XMLHTTPRequest服务来执行HTTP请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。

特性

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换JSON 数据
  • 客户端支持防御XSRF

6.2如何进行封装

封装的同时，需要和 后端协商好一些约定，请求头，状态码，请求超时时间.......

设置接口请求前缀：根据开发、测试、生产环境的不同，前缀需要加以区分

设置避免多次发送同一请求，主要是在于接口数据没有回来时再次请求

请求头 : 来实现一些具体的业务，必须携带一些参数才可以请求(例如：会员业务)

状态码: 根据接口返回的不同status ， 来执行不同的业务，这块需要和后端约定好

请求方法：根据get、post等方法进行一个再次封装，使用起来更为方便

请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问

响应拦截器： 这块就是根据 后端`返回来的状态码判定执行不同业务

7. SSR主要解决了什么

7.1 SRR的优缺点

优点

  • SEO：搜索引擎爬取优化
  • 首屏呈现渲染：用户无需等待所有页面的js加载完成就可以看到页面

缺点

  • 增加了整个项目的复杂度
  • 库的支持及代码兼容性
  • 服务器的负载变淡

在确定项目是否使用SSR前，需要慎重的考虑：

  1. 需要SEO 的页面是否是少数几个，是否使用预渲染（Prerender SPA Plugin ）来实现
  2. 首页的请求响应逻辑是否复杂，数据返回是否大量且缓慢

7.2 服务器端渲染 与 预渲染的区别

本质：预渲染是编译时提前渲染一次，服务器端渲染SSR是用户每次请求服务器，服务器把相应的内容填进去

8. 事件循环（宏任务与微任务）

在JavaScript中，所有的任务都可以分为

  • 同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行
  • 异步任务：异步执行的任务，比如ajax网络请求，setTimeout定时函数等

同步任务与异步任务的运行流程图如下：

img

从上面我们可以看到，同步任务进入主线程，即主执行栈，异步任务进入任务队列，主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。上述过程的不断重复就事件循环

异步任务还可以细分为微任务与宏任务

微任务微任务

一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前

常见的微任务有：

  • Promise.then
  • MutaionObserver
  • Object.observe（已废弃；Proxy 对象替代）
  • process.nextTick（Node.js）

宏任务

宏任务的时间粒度比较大，执行的时间间隔是不能精确控制的，对一些高实时性的需求就不太符合

常见的宏任务有：

  • script (可以理解为外层同步代码)
  • setTimeout/setInterval
  • UI rendering/UI事件
  • postMessage、MessageChannel
  • setImmediate、I/O（Node.js）

这时候，事件循环，宏任务，微任务的关系如图所示

img

、

后记

本文纯仅属于个人的一些简单的见解，比较浅显，若有不妥之处还请不吝赐教！！！(☆_☆)

如果本文对你有所帮助，欢迎点赞！！！

o(￣▽￣)ｄ

avatar
文章
阅读
粉丝