前端高频面试题-场景题

1、一般vue开发用什么库来辅助

vantUI elementUI js-cookie socket.io  axios  ECharts

2、页面刚开始出现一片空白的原因

1、网络设置的问题,有可能是IP、端口等出现问题了
2、网速比较慢导致(加载速度慢)
3、浏览器本身出现问题了
4、网络防火墙的问题,设置安全级别过高
5、病毒导致
6、打包路径不对

3、vue的项目如何做首屏的优化

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

4、在浏览商品时,点击商品详情,然后返回,要求进度条还在之前的位置,怎么做

1、App.vue页面中使用keep-alive缓存组件
2、在离开商品详情页记录进度条的高度,返回商品详情的重新给进度条进行赋值

5、localstorage能实现token的存储需求,为啥还要存储在vuex中呢

1、因为localstorage里面存储的类型只能是字符串,如果存储的内容不是字符串,还需要转换,有额外的性能消耗
2、localstorage里面的数据变化不能进行监控,如果有需求是根据token的变化进行的操作的,那localstorage就实现不了
3、localstorage是磁盘操作,vuex是内存操作,其实性能比vuex去数据慢的多

6、项目中后台接口没有写好你怎么做,有几种方式

可以模拟假数据
方式:组件内写死
	  mock.js
      json-serve

7、cookie为什么不能存储token或存储在cookie有什么问题

1、cookie每次请求都会携带,比较消耗性能
2、防止CSRF攻击,CSRF主要就是攻击浏览器的cookie,这样如果存储token就容易被劫持到

8、如果任务分配不合理你会怎么办

看能不能在规定的时间内完成,如果能完成,完成后找老大说明这个问题。如果完成不了,及时找老大协商,不能耽误项目的开发进程。

9、axios挂到原型上有什么作用

各个组件内,可以直接拿到用axios,就不需要各个组件进行引入了

13、怎么知道自己项目所处的环境是什么

1、看ip和端口地址
2、启动项目方式

14、cli用的是那个版本和src里面都有哪些文件

版本:
    Vue      2.6.10 版本
    vuex     3.1.0  版本
    Vue-cli  4.4.4  版本
    webpack  4.4.0  版本
    
 src:
	api         接口请求
    assets      静态图片
    components  公共组件
    icons		字体图标
    router		路由配置
    store		vuex
    utils		axios封装
    views		页面级路由 

15、你封装过组件吗,有什么,说一下怎么封装的

我用vue开发的所有项目,都是采用组件化的思想开发的。一般我在搭建项目的时候,会创建一个views目录和一个components目录,views目录中放页面级的组件,components中放公共组件(如:head(公共头组件),foot(公共底部组件)等)
例如:1、评论组件里面有很多小的功能点,为了后期维护,就把他提取成了一个单独的组件
      然后再文章组件中引入注册,使用就行了
	  2、头部组件抽离
      	1)抽离一个headerTop
        2) 组件内容接受标题或标签
        	<template>
          		<slot name="left"></slot>
                <div>{{title}}</div>
                <slot name="right"></slot>
            </template>
                props:['title']
         3) 其他组件引入
         	 components:{HeaderTop}
		 4) 组件内使用
         	 <HeaderTop title="标题">
               	<div slot='left'>左边内容</div>
                <div slot='right'>右边内容</div>
             </HeaderTop>

16、怎么做项目的权限控制

项目背景:现有一个后台管理系统,共存在两种类型的人员
1、超级管理员(称作admin)
2、普通用户(称作editor)
每种类型的人看到的操作栏并不一样,可以进行的操作也不尽相同,于是就需要程序处理一下各个权限问题。

具体实现思路
1、在路由router.js里面声明权限为admin的路由,通过meta标签来标示改页面能访问的权限有哪些。如meta: { role: [‘admin’,’super_editor’] }表示该页面只有admin和超级编辑才能有资格进入
2、当用户登录后,获取用roles,将roles和路由表每个页面的需要的权限作比较,调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由,生成最终用户可访问的路由表。路由表存在vuex里面
3、使用vuex管理路由表,根据vuex中可访问的路由渲染侧边栏组件(菜单)

17、axios是怎么封装的

1、在Utils中的request.js里面,引入axios,配置基础路径、请求拦截器和响应拦截器,并返回axios
2、在api文件里面,引入request.js,根据各组件需要,配置各个组件的接口请求文件

18、PC端的兼容问题你遇到那些

1、img下的留白
	解决方案:给img设定display:block。

2、如果图片加a标签在IE9-中会有边框
	解决方案:给img设定border:none。

3、rgba不支持IE8
	解决方案:可以用 opacity

4、标签最低高度设置min-height不兼容ie6/7
	解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}

5、图片加a标签在IE9中出现边框
	解决方案: img{border: none;}

19、移动端的兼容问题你遇到那些

1、在ios和andriod中,audio元素和video元素在无法自动播放
    应对方案:触屏即播
    $('html').one('touchstart',function(){
        audio.play()
    })
2、iOS 系统中文输入法输入英文时,字母之间可能会出现一个六分之一空格
	可以通过正则去掉: this.value = this.value.replace(/\u2006/g, '');

3IOS移动端click事件300ms的延迟响应
	引入第三方插件fastclick可以解决在手机上点击事件的300ms延迟
 
4、 h5底部输入框被键盘遮挡问题
    h5页面有个很蛋疼的问题就是,当输入框在最底部,点击软键盘后输入框会被遮挡。可采用如下方式解决
    1)定义一个class:
		.focusState {position: absolute;}
	2)利用监听键盘的收起展开事件来添加移除定义的focusState 样式
    	 created(){
    		var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    		window.onresize = function() {
              // onresize 事件会在窗口或框架被调整大小时发生
        	var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        	if (clientHeight - nowClientHeight > 60 ) {//因为ios有自带的底部高度
            	//键盘弹出的事件处理
            	document.getElementById("apply").classList.add("focusState");
                // classList 该属性用于在元素中添加, 移除及切换 CSS 类
        	}
       		else {
            	//键盘收起的事件处理
        		document.getElementById("apply").classList.remove("focusState");
        	} 
    	};
	},

20、移动端如何做真机测试

方式1、公司有测试服务器,代码放到测试服务器上,进行手机访问测试
方式2、自己电脑上搭服务器,保证自己手机和电脑处于同一个局域网,然后用手机进行访问测试

21、H5和app的区别

1H5是通过链接进行访问,而APP是通过应用程序进行访问
2H5在应用商店里面没有,而APP是有的
3H5不需要审核就可以上线,而APP是需要审核的
4H5的响应速度没有APP5H5的开发成本比APP

你可能感兴趣的:(场景,前端,面试)