VUE基础面试题(三)vue最后补充+部分JavaScript面试题
VUE部分
Vue的优点
- 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十 kb ;
- 双向数据绑定:保留了 angular 的特点,在数据操作方面更为简单;
- 组件化:保留了 react 的优点,实现了 html 的封装和重用,在构建单页面应用方面有着独特的优势;
- 视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;
- 虚拟DOM:dom 操作是非常耗费性能的, 不再使用原生的 dom 操作节点,极大解放 dom 操作,但具体操作的还是 dom 不过是换了另一种方式;
- 运行速度更快:相比较于 react 而言,同样是操作虚拟 dom ,就性能而言, vue 存在很大的优势;
- 简单易学:由国人开发,中文文档,不存在语言障碍 ,易于理解和学习。
什么是单页应用?
- 单页应用的全称是 Single Page Application,简称 SPA,通过路由的变更,局部切换网页内容取代整个页面的刷新操作;
- 三大框架 React、Vue、Angular 均采用单页应用模式;
- 优点:用户操作体验好,用户不用刷新页面;局部更新, 对服务器压力小;良好的前后端分离,后端不再负责页面渲染和输出工作。
- 缺点:首次加载耗时长, 速度慢;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
具体优化方法:
- 将公用的JS库通过script标签外部引入,减小app.bundel的大小,让浏览器并行下载资源文件,提高下载速度;
- 在配置路由时,页面和组件使用懒加载的方式引入,进一步缩小 app.bundel 的体积,在调用某个组件时再加载对应的js文件;
- 添加首屏 loading图,提升用户体验。
Vue权限管理
整体思路:
后端返回用户权限,前端根据用户权限处理得到左侧菜单;所有路由在前端定义好,根据后端返回的用户权限筛 选出需要挂载的路由,然后使用 addRoutes 动态挂载路由。
具体思路:
- 路由定义,分为初始路由和动态路由,一般来说初始路由只有 login,其他路由都挂载在 home 路由之下 需要动态挂载;
- 用户登录,登录成功之后得到 token,保存在 sessionStorage,跳转到 home,此时会进入路由拦截根 据 token 获取用户权限列表;
- 全局路由拦截,根据当前用户有没有 token 和 权限列表进行相应的判断和跳转,当没有 token 时跳到 login,当有 token 而没有权限列表时去发请求获取权限等等逻辑;
- 使用 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的区别
区别主要在于按顺序调用多个异步函数时的写法和错误获取:
-
Promise
ajax().then(func1).then(func2).then(func3).then(func4)
-
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… 方式抓取报错。
这里是万物之恋,我门下次再见了!