前端基础面试题-1

1.测试发现问题如何和前端联系？
 ：公司有专门的公共文件夹，里面有专门的记录bug的表格，我们只需要找到自己名下的bug进行修改，然后保存，bug也是分优先级的，优先修改等级高的，等级低的可以靠后或第二天修改。然后测试会根据你修改的bug进行测试功能，通过清理bug单

2.vue组件传值？
 ：vue组件传值的方法：1、父向子传值使用props；2、子向父传值使用“$emit”；3、使用EventBus或Vuex进行兄弟传值；4、使用“provide/inject”或“$attrs/$listeners”方法进行跨级传值。

3.在你项目中，vuex的应用和他的属性？
 ：VueX 是一个专门为 Vue.js 应用设计的状态管理构架，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

Vuex有五个核心概念：
　　state, getters, mutations, actions, modules。
　　1. state：vuex的基本数据，用来存储变量
　　2. geeter：从基本数据(state)派生的数据，相当于state的计算属性
　　3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字      符串的 事件类型 (type) 和 一个 回调函数 (handler)。 回调函数就是我们实际进行状态更改的地方，并       且它会    接受 state 作为第一个参数，提交载荷作为第二个参数。
    4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变      更状态。 2. Action 可以包含任意异步操作。
　　5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常      清晰，方便管理。
Vuex的用法：
　　新建vue项目testApp ==》 在testApp中建store文件 ==》 store文件下又有modules文件夹和getter.js 和       index.js ==》 store文件下建user.js
　　在项目的main.js中引入  import store from './store' 
　　 在store文件下的index.js中引入 

4.如何解决跨域问题？
 ：1.1理解跨域
跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

比如你在www.垃圾网站.com试图通过ajax或者是fetch发起请求访问www.银行.com，并进行某些操作，对比一看主域名不同（垃圾网站/银行），就会被拒绝

   1.2解决跨域问题
但是某些情况下我们需要像后台的服务器请求数据，就不得不涉及跨域，那么如何解决呢?

方式1：跨域资源共享（cors）

浏览器将CORS请求分成两类：简单请求（simple request）和预检请求。

解决方式就是服务端在响应头中加入字段：Access-contro-allowl-origion:Origion,那么该Origion就可以访问了。如果该字段值为’*‘那么所有Origion均可访问

方式
   2：jsonp

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）

于是可以判断，当前阶段如果想通过纯web端跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；

5.sessionStorage，localStorage和cookie的区别？
共同点：都是保存在浏览器端的，且同源的。

区别：

1.cookie数据始终携带在同源的http请求中，即cookie在浏览器和服务器间来回传递，而sessionStorage和Localstorage不会自动把数据发送给服务器，只在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

2.存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所有cookie只适合保存很小的数据。如会话标识。sessionStorage和Localstorage虽然也有大小储存的限制，但比cookie大很多。可以达到5M或更大。

3.数据有效期不同，sessionStorage，仅在当前浏览器窗口关闭之前有效，Localstorage始终有效，窗口或者浏览器关闭也一直保存，除非手动删除，cookie只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭。

4.作用域不同，sessionStorage不能在不同的浏览器中共享，即使是同一个页面，locastorage在所有的同源窗口中都是共享的，cookie也是在所有同源窗口中共享的。

5.web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。

6.web storage 的api接口使用更方便。

6.Es6新增特性？
  1.this指向 2.原型，原型链 3.解构赋值 4.模板字符串 5.数组扁平化 6.箭头函数 7.深拷贝浅拷贝 8.promise
  9.新增symbol数据类型 10.新增了let const关键字 11.新增类class类关键字 12.作用域与作用域链 13.新增数组的操作方法 14.闭包 等。。。

7.promise如何解决同步异步？
 ：promise是js中进行异步编程的新的解决方法
   promise中有 async和await  await方法配合async函数使用，await方法必须要写在async函数里面 

8.自适应布局是什么？
：定义：自适应布局、又称宽度百分比布局或者流式布局。
  优势：在不同的设备上呈现相同的网页
  弊端：在不同的设备上呈现相同的网页，对页面进行压缩。

9.有没有独立的搭建过框架？
：前端搭建脚手架的流程 npm install 。。。

10.图片自适应怎么处理？
：.img{ width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
       }
11.浏览器兼容问题
:1.CSS里全局设置  *{margin:0;padding:0;}
 2.超链接访问过后hover样式就不出现的问题
  被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的   排列顺序: L-V-H-A
 3.css3新属性，加浏览器前缀兼容早期浏览器
    -moz- /* 火狐浏览器 /
    -webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
    -o- / Opera浏览器(早期) /
    -ms- / IE */
 4. 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
    问题症状： 设置div高度小于10px，IE6、7和遨游里div的高度，超出自己设置的10px.
    解决方案：

给超出高度的标签设置overflow:hidden;
或者设置行高line-height 小于你设置的高度。

    备注： 这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你    的标签是空的，这个标签的高度还是会达到默认的行高。

12.怎么测试项目，项目上线由谁负责？
：前端写好项目之后在改bug的期间就属于测试项目，修改完bug之后打包成类似apk的形式进行测试数据，项目上线由项目负责人和后台负责人负责

13.项目中出彩的地方？
项目的难点 着重的解释一下

14.页面很大，加载很慢，组件很多怎么解决卡顿提高效率？
 1.优化图像
 2.去掉不必要的插件
 3.使用内容分发网络
 4.把CSS文件放在页面顶部，而JS文件放在底部
 5.利用浏览器缓存
 6.压缩CSS和JavaScript
 7.按需加载 JavaScript 文件 。。。
15.标准盒模型和IE盒模型？
：标准盒模型的width/height 不包含padding和border。
  

ie 盒子模型的width/height 包含了padding和border。

  设置 box-sizing: border-box；是ie 盒模型。

box-sizing: content-box;是默认值，为标准盒模型。
  

标准盒模型会因为padiing被撑大，如果    不想盒子因为padding被撑大就可以设置盒子box-sizing为border-box;

16.H5语义化标签？
：<article>、<section>、<nav>、<aside>、<header>、<footer>、<time>等等...
优点：为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构比<div>标签有更加丰富的含义，方便开发与维护

17.uni-app做的项目简单说一下？
可以通用v2的写法，组件。。
18.flex布局，flex布局的缺点？
：display:flex,
缺点：
1.兼容性
flex布局在pc端，移动端，小程序等都可以使用，但是针对各个浏览器有兼容性问题，主要是IE浏览器的兼容性问题，IE浏览器版本需要IE9以上才能使用flex布局
2.垂直方向的布局属性失效
 当盒子的高度不确定（由内容的高度把盒子挤开时），即不设置盒子的高度时，此时不适合使用flex布局
19.vue生命周期？第一次加载走哪几个钩子，渲染数据走那几个钩子？
vue的八大生命周期状态：1、beforeCreate；2、created；3、beforeMount；4、mounted；5、beforeUpdate；6、updated；7、beforeDestroy；8、destroyed。   第一次加载走前四个，渲染数据走2-4

20.v-if和v-show的区别，v-if和v-for的优先级，可以一起使用吗？
1.主要区别

（1）“v-show”只编译一次；而“v-if”不停地销毁和创建
（2）“v-if”更适合于带有权限的操作，渲染时判断权限数据
（3）v-show更适合于日常使用，可以减少数据的渲染，减少不必要的操作

2、
2.本质区别

（1）vue-show本质就是标签display设置为none，控制隐藏
（2）vue-if是动态的向DOM树内添加或者删除DOM元素

3.编译区别

v-show其实就是在控制css；v-show都会编译，初始值为false，只是将display设为none，但它也编译了。
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-if初始值为false，就不会编译了。

4.性能

v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

vue2中v-for的优先级是高于v-if的，放在一起，会先执行循环在判断条件，并且如果值渲染列表中一小部分元素，也得再每次重渲染的时候遍历整个列表，比较浪费资源。
vue3中v-if的优先级是高于v-for的，所以v-if执行时，它调用相应的变量如果不存在，就会导致异常