前端面试题总结

html、css面试题

自适应网页布局 （面试不用说这么详细，说要点就可以，我刚转前端的时候，基本不会什么技术，是面试实习岗位的问题，因为实习公司要求写自适应网页布局，交互很少）

一、.宽度自适应 ：

1、元素宽度设置100%（块级元素的默认为100%） 
2、不设置宽度：宽度为父元素的宽度。 

二、.高度自适应

1. height：auto；或不设置高度时，内容高度=盒子高度，子元素浮动，会影响父元素的高度失去，这就是子浮父高塌陷。 

2.子随父变。（开发app页面用的更多一些） 
设置方法：html，body{ height：100%； } 注*全屏页面才推荐使用高度100%的方法去开发。 

三、.元素的最小高度自适应： min-height: 最小高度（ie6不识别）

四、.浮动元素父元素高度自适应（高度塌陷） 当子元素有浮动并且父元素没有高度或者最小高度下，出现高度塌陷，解决方法：

    方法一：overflow：hidden；（bfc在其中，浮动元素也会参与计算。）
    	  弊端：会隐藏一些定位在外面的元素。 
    方法二：在浮动元素下方添加div，并添加申明：div{clear：both；height：0；overflow：hidden；} 
    	  这种声明方式在写网页时，可以有效兼容ie6（ie6即使没有高度也会保留6px的高度）只有height：0；和overflow：hidden；才能解决问题。
          弊端：代码太长，存在不必要的元素。 
   方法三：万能清除浮动法。 
          选择符：after{ content：“ ”；clear：both；display：block；height：0；overflow：hidden；visibility：hidden； } 也可以加上。

• clearfix{*zoom：1；}（解决ie问题）
• visibility：hidden（隐藏元素，但依然占据位置）
• display：none（元素消失，不占据位置）

3.position的属性？

• 定位：
  • position: relative;
  • position: absolute;
  • position: fixed;
  • position: static; 默认值
  • position: sticky 粘性定位 ，粘性定位是相对定位和固定定位的结合体。
    当元素在屏幕范围内，元素的定位相当于是相对定位，而元素脱离屏幕范围，那么元素的定位属性就会类似于固定定位。

！！下面是自己面试当中被问到的问题 ，答案可能不是很全面！！

1、登陆注册怎么做？

注册发送md5之后ajax到后端  后端存到数据库 登陆类似，然后保存登陆状态

2、react高阶组件是什么？

是一个函数       参数是个组件      返回值return也是组件

3、vue-router？

单页面路由跳转   

4、做响应式关注点？

使用媒体查询 @media
让某一个div在手机上显示 pc上不显示？ 使用媒体查询：视口宽度小于400

5、.vue APP适配是怎么写的，用的什么单位？

 rem

6、get和post有什么区别？

get获取数据；post提交数据

get 用于获取信息，是无副作用的，是幂等的，且可缓存
post 用于修改服务器上的数据，有副作用，非幂等，不可缓存

get 传参方式是通过地址栏URL传递，能直接看到get传递的参数，
post传参方式参数URL不可见，

get 把请求的数据在URL后通过？连接，通过&进行参数分割。
post 将从参数存放在HTTP的包体内

get 对传递的数据长度受URL的限制，URL最大长度是2048个字符。
post 没有长度限制

get后退页面不会有影响，post后退会重新进行提交
get请求可以被缓存，post不可以被缓存

get请求只URL编码，post支持多种编码方式
get请求的记录会留在历史记录中，post请求不会留在历史记录
get只支持ASCII字符，post没有字符类型限制

post的缺点：速度比get传输慢，get的效率更高

post优点：安全性比get传参方式好（并不代表post一定安全，因为在HTTP下都是明文传输，post仍然可以被查找到，增加安全性最好使用https协议）

• 为什么get的效率比post高（扩展）
  　　 1.post接收返回的数据：先将请求头发送给服务器确认，然后才真正的发送数据，get则是直接发送数据。
  　　 专业的说法是：get产生一个TCP数据包，post产生两个TCP。
  总结：请求的过程比get更多
  　　 2.get会将数据进行缓存

7、计算属性和监听器有什么区别？

computed、watch
当需要在数据变化时执行异步或开销较大的操作时，用侦听。
模板中显示内容，不做任何复杂的计算（或者逻辑），这个时候就可以用到计算属性

8、v-for渲染列表key是用来做什么的？

为了高效的更新虚拟DOM

9、数据请求在生命周期哪一个阶段？

一般在 created（或beforeRouter）里面就可以，如果需要页面加载完成之后的话就用 
mounted。

在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素
而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点

10、水平垂直居中有哪几种方法？

定位、flex布局

行内元素垂直居中：
·单行：父元素子元素高度相等
·多行的行内元素：给父元素设置display:table-cell;和vertical-align: middle;

块级元素垂直居中：·flex布局：给父元素添加属性 display: flex; align-items: center;
 	 		   ·父元素为相对定位，子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

11、flex弹性盒模型？

12、父盒子中子盒子浮动有什么后果？

父元素变成一条线 子元素浮在父元素下面

13、清除浮动有哪些方法？

• a、在最后一个浮动标签后，新加一个标签，给其设置clear：both；

• b、给父级添加overflow属性（父元素添加overflow:hidden）

• c、使用after伪元素清除浮动

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

• d、使用before和after双伪元素清除浮动

.clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

14、定位有哪些属性？相对定位是相对什么定位？

属性参照上文

相对定位的参照物是本身。

绝对定位的参照物就是父级元素，当父级元素中不存在相对定位，那么它的参照物就是body

15、行内元素和行内块元素有什么区别？行内块元素在同一行显示时有默认空隙，如何解决？

	A、区别： (1)display:inline;转换为行内元素
	   	  (2)display:block;转换为块状元素
	      (3)display:inline-block;转换为行内块状元素
	 
	 行内块状元素：
		(1)不自动换行
		(2)能够识别宽高
		(3)默认排列方式为从左到右

	 行内元素：
		(1)设置宽高无效
		(2)对margin仅设置左右有效，上下无效；padding上下左右都有效，撑大空间
		(3)不会自动进行换行
		
	
	B、解决空隙方法：删空格和换行
	   把父级font-size设置为0

16、给DOM元素绑定事件有哪些方法？

a、在DOM元素中直接绑定；
b、在JavaScript代码中绑定；
c、绑定事件监听函数。

17、数组里面有哪些遍历方法？es6

for(){} 遍历
forEach 遍历
for-in 遍历
for-of 遍历
every()、some()、filter()、map()、reduce（）、reduceRight()

18、doctype是做什么用的？

声明文档的解析类型，避免浏览器的怪异模式。

19、用js可以实现的动画 为什么要用css？

css渲染的动画不占用js主线程

20、ajax请求数据重新处理和拦截器？

21、bootstrap中栏栅的24个是怎么做的？

24个col不加数字就可以（答案我也不确定啊，当时是这么回答的！！！）

22、轮播图是怎么考虑的 什么逻辑？

23、git的常用操作？

命令操作、远程Git和local的同步实现流程：

	1 把git上的代码clone到本地
	    $ git clone http:xxxx(地址，可以http也可以ssh)
	2、clone到本地以后、使用branch -a 查看远程所有分支
		$  git branch -a
	3、如若你有分支：master branch1 branch2 ，使用checkout用来切换分支。还可以用第2条指令去创建本地分支目录和远程的保持一致，并且切换远程分支到本地分支目录
		$ git checkout branch1
		$ git checkout -b branch1 origin/branch1 
	4、在本地修改完代码后、保存所有的项目
		$ git add .
	5、保存完成后可以提交到本地
		$ git commit -m '提交说明'
	6、最后提交git服务器，要加上分支的名字，默认master目录不加。
		$ git push origin branch1 

24、const定义对象能否改变？

可以的 。 定义的对象还是存储在堆当中

25、let和var在全局定义的时候有什么区别？

var在全局对象windows中可以找到 ，let不可以

26、闭包是什么？优缺点？

闭包是指有权访问另外一个函数作用域中的变量的函数.可以理解为(能够读取其他函数内部变量的函数)

闭包的作用: 正常函数执行完毕后,里面声明的变量被垃圾回收处理掉,但是闭包可以让作用域里的变量,在函数执行完之后依旧保持没有被垃圾回收处理掉

缺点：闭包会导致内存占用过高,因为变量都没有释放内存

27、盒子上下居中：

定位和弹性盒模型

28、js的本地存储机制：

cookies、 sessionStorage和localstorage

29、cookies中session的了解：

一个存储在客户端 一个存储在服务端

30、 cookies、 sessionStorage和localstorage区别？

相同点：都存储在客户端

不同点： 1.存储大小

	· cookie数据大小不能超过4k。
	
	· sessionStorage和localStorage 也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间

	· localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

	· sessionStorage  数据在当前浏览器窗口关闭后自动删除。

	· cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式

	· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

	· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

31、Promise是一个构造函数，有all、reject、resolve方法，原型上有then、catch等方法。

Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

32、var 一个a; 然后console.log(a) 求结果？原因？

输出：undefind,  a只声明，没有赋值。

33、bootstrap响应式实现的原理？

百分比布局+媒体查询

34、如何优化页面，加快页面的加载速度？

（1）优化图片格式和大小；
（2）开启网络压缩；
（3）使用浏览器缓存；
（4）减少重定向请求；
（5）使用CDN存储静态资源；
（6）减少DNS查询次数；
（7）压缩css和js内容；

35、h5新增标签

video	表示一段视频并提供播放的用户界面
audio	表示音频
canvas	表示位图区域
code	代码段
main	http://www.w3school.com.cn/tags/tag_main.asp
time	日期和时间值
output	计算值
progress	进度条
menu	菜单
section	
nav	<nav> 标签定义导航链接的部分。
aside	：<aside> 的内容可用作文章的侧栏。
article	标签规定独立的自包含内容。
footer	

36、es6新语法：let与const

let命令：
代码块内有效；
不能重复声明；
迭代计数使用；
无变量提升；

const命令：暂时性死区；
声明一个只读的常量，一旦声明，常量的值就不能改变；

• let是更完美的var，不是全局变量，具有块级函数作用域,大多数情况不会发生变量提升。
• const定义常量值，不能够重新赋值，如果值是一个对象，可以改变对象里边的属性值。

var 和 let的区别:
	 var 是在全局范围内有效、let代码块内有效
	 var 可以声明多次、 let只能声明一次；
	 let 不存在变量提升，var 会变量提升；

示例：

console.log(a);  //ReferenceError: a is not defined
let a = "apple";
 
console.log(b);  //undefined
var b = "banana";

变量 b 用 var 声明存在变量提升，所以当脚本开始运行的时候，b 已经存在了，但是还没有赋值，所以会输出 undefined。

变量 a 用 let 声明不存在变量提升，在声明变量 a 之前，a 不存在，所以会报错。

const 命令
暂时性死区:

var PI = "a";
if(true){
  console.log(PI);  // ReferenceError: PI is not defined
  const PI = "3.1415926";
}

ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量 PI 之前使用它会报错。

37、Promise 对象

定义：是异步编程的一种解决方案。
从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

状态的特点
Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。

状态的缺点：

• 无法取消 Promise ，一旦新建它就会立即执行，无法中途取消。
• 如不设置回调函数，Promise 内部会抛出的错误，不会反应到外部。
• 当处于 pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

then 方法
then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。

then 方法的特点
在 JavaScript 事件队列的当前运行完成之前，回调函数永远不会被调用。

38、vue-router原理

vue-router的原理就是通过对URL地址变化的监听，继而对不同的组件进行渲染。

每当URL地址改变时，就对相应的组件进行渲染。原理是很简单，实现方式可能有点复杂，主要有hash模式和history模式

39、vuex原理

vuex的原理：所有组件共享一份数据，它为什么能实现所有的组件共享同一份数据？

因为vuex生成了一个store实例，并且把这个实例挂在了所有的组件上，所有的组件引用的都是同一个store实例。

store实例上有数据，有方法，方法改变的都是store实例上的数据。由于其他组件引用的是同样的实例，所以一个组件改变了store上的数据，导致另一个组件上的数据也会改变，就像是一个对象的引用。

40、vue怎么实现页面的权限控制

利用 vue-router 的 beforeEach 事件，可以在跳转页面前判断用户的权限（利用 cookie 或 token），是否能够进入此页面，如果不能则提示错误或重定向到其他页面，在后台管理系统中这种场景经常能遇到。

41、keep-alive有什么作用

keep-alive 可以使被包含的组件保留状态，或避免重新渲染

42、计算属性有什么作用

计算属性的定义：
当其依赖的属性的值发生变化时，计算属性会重新计算。反之则使用缓存中的属性值。

计算属性和vue中的其它数据一样，都是响应式的，只不过它必须依赖某一个数据实现，并且只有它依赖的数据的值改变了，它才会更新。

语法：
computed: {
        需要返回的数据: function () {
            return 处理操作
        }
 }

43、请简述JavaScript中的this。

函数的调用方式决定了this的值。

this取值符合以下规则：

1、在调用函数时使用new关键字，函数内的this是一个全新的对象。

2、如果apply、call或bind方法用于调用、创建一个函数，函数内的 this 就是作为参数传入这些方法的对象。

3、当函数作为对象里的方法被调用时，函数内的this是调用该函数的对象。比如当obj.method()被调用时，函数内的 this 将绑定到obj对象。

4、如果调用函数不符合上述规则，那么this的值指向全局对象（global object）。浏览器环境下this的值指向window对象，但是在严格模式下('use strict')，this的值为undefined。

5、如果符合上述多个规则，则较高的规则（1 号最高，4 号最低）将决定this的值。

6、如果该函数是 ES2015 中的箭头函数，将忽略上面的所有规则，this被设置为它被创建时的上下文。

44、箭头函数和普通函数的区别（基本每次面试都问）

1、箭头函数没有自己的this,继承外层代码块的this。
2、不能当做构造函数，也就是说不可以使用new命令，否则会报错的。
3、不能使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
4、不能使用yield命令，因此箭头函数不能用作 Generator（生成器） 函数。
5、因为没有this,所以不能使用call、bind、apply来改变this的指向。

45、Vue的核心思想:

数据驱动和组件化

46、VUE指令

双向绑定:Vue框架核心的功能就是双向的数据绑定.
双向是指:HTML标签数据绑定到Vue对象,另外反方向数据也是绑定的.

双向绑定的原理:数据劫持和发布者-订阅者模式

v-show:控制切换一个元素的显示和隐藏
v-on:为HTML元素绑定事件监听
v-model:将用户的输入同步到视图上
v-for:遍历data中的数据,并在页面进行数据展示
v-bind:绑定HTML元素的属性

v-show与v-if区别：
v-if有更高的切换消耗（安全性高），v-if也是惰性的
v-show有更高的初始化的渲染消耗（对安全性无要求选择）

47、vue请求数据交互

vue请求数据有Vue-resource、Axios、fetch三种方式。Vue-resource是Vue官方提供的插件，axios与fetch是第三方插件

48、过滤器作用

在不改变数据的情况下，输出前端需要的格式数据
2.0中已经废弃了内置过滤器，需要我们自定义过滤器来使用filter 	

49、什么是实例的生命周期？

实例在被创建前经过的一系列初始化过程叫生命周期 

50、钩子函数有哪些

beforeCreate（创建实例）、
created（创建完成）、
beforeMount（开始创建模板）、
mounted（创建完成）、
beforeUpdate（开始更新）、
updated（更新完成）、
beforeDestroy（开始销毁）、
destroyed（销毁完成）

钩子函数的书写位置在data与methods同级位置书写。	

51、第一次页面加载时会触发哪几个钩子？

 beforeCreate, created, beforeMount, mounted	

52、DOM 渲染在 哪个阶段完成？

mounted 

53、组件传值

父组件通过prop向子组件传值
子组件通过事件向父组件传值
子组件与子组件之间不能直接传值，需要通过父组件来做间接传值，在这种情况下推荐使用vuex

54、如何确定this指向？

如果要判断一个运行中函数的 this 绑定，就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断 this 的绑定对象。
1、由 new 调用？绑定到新创建的对象。
2、由 call 或者 apply （或者 bind ）调用？绑定到指定的对象。
3、由上下文对象调用？绑定到那个上下文对象。
4、默认：在严格模式下绑定到 undefined ，否则绑定到全局对象。

一定要注意，有些调用可能在无意中使用默认绑定规则。如果想“更安全”地忽略 this 绑定，你可以使用一个 DMZ 对象，比如 ø = Object.create(null) ，以保护全局对象。

ES6 中的箭头函数并不会使用四条标准的绑定规则，而是根据当前的词法作用域来决定this ，具体来说，箭头函数会继承外层函数调用的 this 绑定（无论 this 绑定到什么）。这其实和 ES6 之前代码中的 self = this 机制一样

55、bind、call、apply的区别

call和apply其实是一样的，区别就在于传参时参数是一个一个传或者是以一个数组的方式来传。

call和apply都是在调用时生效，改变调用者的this指向。

let name = 'Jack'
const obj = {name: 'Tom'}
function sayHi() {console.log('Hi! ' + this.name)}

sayHi() // Hi! Jack
sayHi.call(obj) // Hi! Tom

bind也是改变this指向，不过不是在调用时生效，而是返回一个新函数。

const newFunc = sayHi.bind(obj)
newFunc() // Hi! Tom

---

想到再更！问到再更！我又在找工作！！唉！！

---

又碰到面试题了 一家上市公司 问到我怀疑人生 因为问的问题基本不会有什么固定答案的那种 全部是做项目过程中 你可能碰到的问题，而且就是那种 你一听就知道这个项目中肯定会碰到这样的。但是就是说不上来答案 也许我们需要一台电脑吧 打开编辑器 就知道应该怎么做了

56、打包流程以及打包过程中会生成什么文件夹？

57、常用的视口大小？

58、适配安卓 iOS等用到的单位？

59、用rem时为什么是除以200？什么原理？

60、Hbuilder打包？

61、怎么跨域？

1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
转载一位博主的跨域链接 写的太全面了跨域链接

62、怎么引用框架？在什么地方写？

1、npm 安装依赖包

 npm i element-ui -S

2、入口文件引入（main.js)。。。。以引入ElementUI为例

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);　　//不要忽略

new Vue({
  el: '#app',
  render: h => h(App)
});

3、以上代码便完成了 Element 的引入。注意!!!样式文件需要单独引入。

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，减小项目体积。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}