VUE基础面试题(三)vue最后补充+部分JavaScript面试题

VUE基础面试题(三)vue最后补充+部分JavaScript面试题

  • VUE部分
    • Vue的优点
    • 什么是单页应用?
    • 说说对SPA单页面的理解,它的优缺点分别是什么?
    • vue的单页面应用(SPA)的优缺点
    • SPA首屏加载速度慢的怎么解决?
    • Vue权限管理
  • JavaScript部分
    • JQuery一个对象可以同时绑定多个事件,这是如何实现的?
    • 什么是webkit, 怎么用浏览器的各种工具来调试代码
    • 前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
    • Promise 和async/await的区别

VUE部分

Vue的优点

  • 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十 kb ;
  • 双向数据绑定:保留了 angular 的特点,在数据操作方面更为简单;
  • 组件化:保留了 react 的优点,实现了 html 的封装和重用,在构建单页面应用方面有着独特的优势;
  • 视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;
  • 虚拟DOM:dom 操作是非常耗费性能的, 不再使用原生的 dom 操作节点,极大解放 dom 操作,但具体操作的还是 dom 不过是换了另一种方式;
  • 运行速度更快:相比较于 react 而言,同样是操作虚拟 dom ,就性能而言, vue 存在很大的优势;
  • 简单易学:由国人开发,中文文档,不存在语言障碍 ,易于理解和学习。

什么是单页应用?

  1. 单页应用的全称是 Single Page Application,简称 SPA,通过路由的变更,局部切换网页内容取代整个页面的刷新操作;
  2. 三大框架 React、Vue、Angular 均采用单页应用模式;
  3. 优点:用户操作体验好,用户不用刷新页面;局部更新, 对服务器压力小;良好的前后端分离,后端不再负责页面渲染和输出工作。
  4. 缺点:首次加载耗时长, 速度慢;SEO不友好, 需要采用 prerender 服务进行完善。

说说对SPA单页面的理解,它的优缺点分别是什么?

  • SPA( single page application )仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS;
  • 一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转;
  • 而页面的变化是利用路由机制实现 HTML 内容的变换,避免页面的重新加载。

优点:

  • 用户体验好,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染;
  • 减少了不必要的跳转和重复渲染,这样相对减轻了服务器的压力;
  • 前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理。

缺点:

  • 初次加载耗时多;
  • 不能使用浏览器的前进后退功能,由于单页应用在一个页面中显示所有的内容,所以,无法前进后退;
  • 不利于搜索引擎检索:由于所有的内容都在一个页面中动态替换显示,所以在 SEO 上其有着天然的弱势。

vue的单页面应用(SPA)的优缺点

  • 优点:Vue是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,核心是一个响应的数据绑定系统;组件化开发、轻量、简洁、高效、快速、模块友好。
  • 缺点:不支持低版本的浏览器,最低只支持到IE9;不利于SEO的优化(如果要支持SEO,建议通过服务端来进行渲染组件);第一次加载首页耗时相对长一些;不可以使用浏览器的导航按钮需要自行实现前进、后退。

SPA首屏加载速度慢的怎么解决?

首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容;

加载慢的原因:

  • 网络延时问题
  • 资源体积是否过大
  • 资源是否重复发送请求进行了多次加载
  • 加载脚本的时候,渲染内容堵塞了

优化方式:

  • 减小入口文件体积
  • 静态资源采用本地缓存
  • UI框架按需加载
  • 图片资源压缩,或者使用精灵图
  • 组件重复打包
  • 开启GZip压缩
  • 使用SSR

具体优化方法:

  1. 将公用的JS库通过script标签外部引入,减小app.bundel的大小,让浏览器并行下载资源文件,提高下载速度;
  2. 在配置路由时,页面和组件使用懒加载的方式引入,进一步缩小 app.bundel 的体积,在调用某个组件时再加载对应的js文件;
  3. 添加首屏 loading图,提升用户体验。

Vue权限管理

整体思路:

​ 后端返回用户权限,前端根据用户权限处理得到左侧菜单;所有路由在前端定义好,根据后端返回的用户权限筛 选出需要挂载的路由,然后使用 addRoutes 动态挂载路由。

具体思路:

  1. 路由定义,分为初始路由和动态路由,一般来说初始路由只有 login,其他路由都挂载在 home 路由之下 需要动态挂载;
  2. 用户登录,登录成功之后得到 token,保存在 sessionStorage,跳转到 home,此时会进入路由拦截根 据 token 获取用户权限列表;
  3. 全局路由拦截,根据当前用户有没有 token 和 权限列表进行相应的判断和跳转,当没有 token 时跳到 login,当有 token 而没有权限列表时去发请求获取权限等等逻辑;
  4. 使用 Vuex 管理路由表, 根据 Vuex 动态渲染侧边栏组件。

JavaScript部分

JQuery一个对象可以同时绑定多个事件,这是如何实现的?

jQuery可以给一个对象同时绑定多个事件,底层实现方式是使用addEventListner或attachEvent兼容不同的浏览器实现事件的绑定,这样可以给同一个对象注册多个事件。

什么是webkit, 怎么用浏览器的各种工具来调试代码

Webkit是浏览器引擎,包括html渲染和js解析功能,手机浏览器的主流内核,与之相对应的引擎有Gecko(Mozilla Firefox 等使用)和Trident(也称MSHTML,IE 使用)。

对于浏览器的调试工具要熟练使用,主要是页面结构分析,后台请求信息查看,js调试工具使用,熟练使用这些工具可以快速提高解决问题的效率。

前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

Web模板引擎是为了使用户界面与业务数据(内容)分离而产生的;

  • Mustache 是一个 logic-less (轻逻辑)模板解析引擎,它的优势在于可以应用在JavaScript、PHP、Python、Perl 等多种编程语言中。
  • Underscore封装了常用的JavaScript对象操作方法,用于提高开发效率。
  • Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。

Promise 和async/await的区别

区别主要在于按顺序调用多个异步函数时的写法和错误获取:

  1. Promise

    ajax().then(func1).then(func2).then(func3).then(func4)
    
  2. async/await方式

    
    async function demo(){
     await res = ajax();
     await res = func1(res);
     await res = func2(res);
     await res = func3(res);
     await res = func4(res);
     }
    
  • 当遇到多个异步函数时 Promise 方式需要很多 .then,这样会导致代码不易读且结构复杂;
  • await/async 方式让异步代码的格式与同步代码一样更易读。
  • 报错读取 Promise 使用 .catch 捕获异常,await/async 使用 try…catch… 方式抓取报错。

这里是万物之恋,我门下次再见了!

你可能感兴趣的:(前端面试题,javascript,vue.js,前端)