前端面试总汇

html/css问题

1 . css权重排序

答： !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

2 . 什么是盒子模型？

答： 在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。

3 . 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

答：

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link

4 . CSS实现垂直水平居中

方法一

.wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid red; 
 }
.content{
    position: absolute;
    width: 200px;
    height: 200px;
    /*top、bottom、left和right 均设置为0*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*margin设置为auto*/
    margin:auto;
    border: 1px solid green;    
} 

方法二： flex 盒子布局

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

方法三： css3 translate属性

.wrapper {
   position: relative;
   width: 500px;
    height: 500px;
    border: 1px solid red; 
}
.content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateZ(-50%, -50%)
    /*margin设置为auto*/
    margin:auto;
    border: 1px solid green;    
} 

5 . link 和import的区别？

答： link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

6 . xhtml和html有什么区别

答：HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

最主要的不同： XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

7 . 前端页面有哪三层构成，分别是什么?作用是什么?

答： 结构层 Html 表示层 CSS 行为层 js

8 . Doctype作用？标准模式与兼容模式各有什么区别?

答: !DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

9 . html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

答： HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

绘画 canvas 用于媒介回放的 video 和 audio 元素

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section

表单控件，calendar、date、time、email、url、search

新的技术webworker, websockt, Geolocation

移除的元素 纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签： IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式

10. 什么是BFC

BFC 全称为 块格式化上下文 (Block Formatting Context) 。 简单来讲就是不在文档流的中的且不内部不受外部布局的影响。

优点： 不受外部布局影响，独立的块。

缺点： 因为脱离了文档流，所以会出现一些奇怪的现象，比如高度不会被子元素撑开，出现塌陷的问题。又或者双边距问题。

js

1 JavaScript中如何检测一个变量是一个String类型？

答：typeof obj === "string"

2 请用js去除字符串空格？

答：去除所有空格: str = str.replace(/\s*/g,"");

去除两头空格: str = str.replace(/^\s*|\s*$/g,"");

去除左空格： str = str.replace( /^\s*/, “”);

去除右空格： str = str.replace(/(\s*$)/g, "");

3 什么是跨域？如何解决？

答: 由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。

1 . porxy代理：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

实现方法：通过nginx代理；

2 . CORS: 是现代浏览器支持跨域资源请求的一种最常用的方式。

使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。

3 . jsonp：通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。

缺点：

  1、这种方式无法发送post请求（这里）

  2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。

4 垃圾回收机制方式的两种方式

答: 垃圾回收策略：标记清除(较为常用)和引用计数。

5 编写一个方法 去掉一个数组的重复元素

方法一：

var arr = [0,2,3,4,4,0,2];
var obj = {};
var tmp = [];
for(var i = 0 ;i< arr.length;i++){
<!--判断对象属性是否存在 否则添加上去并给tmp数组push（arr[i]-->
   if( !obj[arr[i]] ){
      obj[arr[i]] = 1;
      tmp.push(arr[i]);
   }
}
console.log(tmp);

方法二：

var arr = [2,3,4,4,5,2,3,6],
   arr2 = [];
for(var i = 0;i< arr.length;i++){
    <!--判断arr2是否存在该元素 如果返回数小于0 则
    添加进去-->
    if(arr2.indexOf(arr[i]) < 0){
        arr2.push(arr[i]);
    }
}
console.log(arr2);

方法三：

var arr = [2,3,4,4,5,2,3,6];
<!--过滤原数组 判断位置是否与第一次一样-->
var arr2 = arr.filter(function(obj,index,myarr){
return myarr.indexOf(obj) === index;
});
console.log(arr2);

6 jquery中.post()提交的异同点？

答： 相同点：都是异步请求的方式来获取服务端的数据；

异同点：

1、请求方式不同：.post() 方法使用POST方法来进行异步请求的。

2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多

4、安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

7 . 简述同步和异步的区别

答： 同步是阻塞模式，异步是非阻塞模式。 同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

8 . 浏览器的内核分别是什么?

答： IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome：Blink(基于webkit，Google与Opera Software共同开发)

9 sessionStorage 、localStorage 和 cookie 之间的区别

答： 共同点：用于浏览器端存储的缓存数据

不同点：

(1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费；

web storage,会将数据保存到本地，不会造成宽带浪费；

(2)、数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M;

(3)、数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器；

sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；

(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

10 Ajax的优缺点及工作原理

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

优点：

1.减轻服务器的负担,按需取数据,最大程度的减少冗余请求

2.局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验

3.基于xml标准化,并被广泛支持,不需安装插件等,进一步促进页面和数据的分离

缺点：

1.AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.

2.AJAX只是局部刷新,所以页面的后退按钮是没有用的.

3.对流媒体还有移动设备的支持不是太好等

AJAX的工作原理：

1.创建ajax对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）

2.判断数据传输方式(GET/POST)

3.打开链接 open()

4.发送 send()

5.当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行回调函数

11 . 例举3种强制类型转换和2种隐式类型转换?

答：强制（parseInt,parseFloat,number） 隐式（== or ===）

12 . 什么是闭包？优缺点

闭包就是将函数内部和函数外部连接起来的一座桥梁。

官方”的解释是：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

优点： 变量私有化，防止全局变量污染

缺点 ： 会将变量储存在内存中，消耗内存

13 . 函数节流和函数防抖

```
    // 函数节流   设定一个时间周期，周期性的执行一个函数；
    /*
        函数防抖会执行最后一次操作，在渲染上可能会造成突然一下的大变化
        所以想相对平缓的操作，使用节流会好很多。
    */
	function throttling(fn, wait) {
		var timer;
		var args = ''; // 参数集合对象
		
		function run() {
		    // 开启定时器
			timer = setTimeout(function() {
				// 调用自定义函数  传入参数
				fn.apply(this, args);
				//  清除定时器
				clearTimeout(timer);
				// 重新设置定时器
				timer = null;
			}, wait)
		}
		
		return function () {
		    // 设置参数集合
			args = arguments;
			// 如果定时器为false
			if(!timer) {
				run();
			}else {
				
			}
		}
	}
	
	
	/*
	函数防抖策略是当事件被触发时，设定一个周期延迟执行动
	作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。
	*/
	/*
	主要用于高频率的触发事件，比如通过input来获取用户输入去进行
	一个计算价格的操作，我能可以把操作延迟，当用户停止输入时我们再
	计算可以优化性能 
	*/
	function debounce(fn, wait) {
		var timer;    // 定时器
		var initTime = 0; // 初始化时间
		var args = '';  // 参数集合
		
		function run() {
		    // 创建定时器
			timer = setTimeout(function() {
				// 执行自定义函数
				fn.apply(this, args);
			}, wait);
		}
		
		
		return function () {
		    // 获取调用的时间
			var nowTime = new Date().getTime();
			args = arguments;
            
            /*
                如果两次操作间隔小于定时器时间 
                清除定时器
                重新设置定时器
            */
			if(nowTime - initTime < wait) {
				clearTimeout(timer);
				run();
			}else {
				run();
			}
			
			// 记录上一次操作时间
			initTime = nowTime;
		}
	}
	
	function a(name) {
		console.log('*************', name);
	}
	
	var b = debounce(a, 1000);
	var c = throttling(a, 3000);
	
	document.body.onclick = function() {
		//b('jack');
		c('hello');
	}
```

14. 深拷贝与浅拷贝

浅拷贝

//1
var newObj = Object.assign({}, obj);
//2
var newObj = $.extend({}, obj);

深拷贝

//1
var newObj = JSON.parse(JSON.stringify(obj));
//2
var newObj = $.extend(true, {}, obj);
//3
_.cloneDeep(obj);
//4
function deepClone(obj){
    if(typeof obj !== "object") return;    
    let newObj = obj instanceof Array ? [] : {};
    for(let key in obj){
        if(obj.hasOwnProperty(key)){
            newObj[key] = typeof obj[key] === "object" ?
            deepClone(obj[key]) : obj[key];
        }      
    }  
    return newObj;  
}

理论性问题

1 . web前端开发，如何提高页面性能优化？

答： 1.减少 HTTP 请求 (Make Fewer HTTP Requests)

2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)

3.使得 Ajax 可缓存 (Make Ajax Cacheable)

4 . 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

5 . 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

6 . 优化图片 使用 CSS Sprites 技巧对图片优化

7 . 把 CSS 放到代码页上端 (Put Stylesheets at the Top)

2 . http状态码有那些？分别代表是什么意思？

答： 100-199 用于指定客户端应相应的某些动作。

200-299 用于表示请求成功。

300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。

400-499 用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。

500-599 用于支持服务器错误。 503 – 服务不可用

3 . 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

答：

• 查找浏览器缓存
• DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
• 进行HTTP协议会话
• 客户端发送报头(请求报头)
• 文档开始下载
• 文档树建立，根据标记请求所需指定MIME类型的文件 文件显示
• 浏览器这边做的工作大致分为以下几步：
• 加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
• 解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）

4. http与https区别

https是明文传输，https是加密传输的走的SSL协议， http默认端口是80，https默认端口是443

框架问题

1 . react虚拟DOM运行机制是什么？

答： 在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为virtual DOM。虚拟dom

2. 双向绑定原理

答： 双向绑定是通过Object.definePropety()实现的。 实现原理：通过方法重写set和get方法，当用户触发set或者get方法的时候，会有一个Obsever 监听对象监听到属性改变， 然后会告诉订阅者 watcher 看看是否需要更新，如果需要更新则执行相应的函数更新视图。更新视图则由解析器compile 去关联dom节点与解析指令。当指令执行的时候，去更新dom节点。

```
    // 流程图
    observe （监听器，监听数据对象所有属性，如果发生改变就通知订阅者）
    ↓
    Dep（订阅器,会对新旧数据对象进行浅比较，当数据发生改变时，会遍历观察者列表，
    通知所有的watch）
    ↓
    watcher （订阅者，连接数据监听器 和指令解析器， 订阅每个属性的变化，接收更新通知，
    执行回调函数）
    ↓
    compile （指令解析器,  对指令进行解析，解析后去更新视图）

```

3. v-if与v-show有什么区别（vue）

v-show主要是控制元素的显示与隐藏，这时元素是已经渲染在页面上了。

v-if是控制是否将元素渲染在页面上，这时元素并不会直接渲染在页面上

4. 属性发生改变视图却不刷新（vue）

介绍其中一个造成的原因，因为vue对象会在初始化的时候对data对象属性绑定监听器，当你通过点击之类的事件去向vue对象添加新的值，虽然值会添加进去，可是视图并不会更新，这时候可以通过Vue.$set(Vue.data, newVal);

5. 子父组件通信有哪些（vue）

• props(父传值子)

      <parent>
          <child :name="content"></child> 
      </parent>
      // child.vue
      
      export default {
          props: [name]
      }
      
  

• $emit(子触发父函数)

      //parent.vue
      <child @showbox="toshow" :msg="msg"></child> 
      
      {    
          methods: {
              toshow(msg) {
                  this.msg = msg;
              }
          }
      }
      
      // child.vue
      <template>
          <div @click="open"></div>
      </template>
      
      {
          methods: {
             open() {
                  // 触发父组件方法
                  this.$emit('showbox','the msg'); 
              }
          }
      }
  

• new Vue()(创新一个vue对象)

      let vm = new Vue(); //创建一个新实例
      
      // one.vue
      {
          created() {
              // 像vue对象添加方法
              vm.$on('blur', (arg) => { 
                  this.test= arg; // 接收
              });
          }
          
      }
      // two.vue
      {
          // 触发vue对象的方法
          methods: {
              ge() {
                  vm.$emit('blur','sichaoyun'); //触发事件
              }
          }
      }
  

• Vuex （状态机管理）

6. Vuex状态机

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

流程： actions(发起请求)---Mutations(处理请求)---State(更新状态)---View(更新视图)

State(状态)

```
    import Vuex from 'vuex' 
    import Vue from 'vue'
    
     Vue.use(Vuex)
    
    const moduleA ={
    	namespaced: true,
    	state: {
    		name: '小明',
    		age: 18
    	},
    	getters: {
    		getNewName: state => {
    			return () =>  state.name + '同学' 
    		}
    	},
    	mutations: {
    		changeName(state, back) {
    			state.name = '小红';
    			back ? back : '';
    		}
    		
    	},
    	actions: {
    		asyncChangeName(context) {
    			setTimeout(() => {
    				context.commit('changeName')
    			}, 1000)
    		}
    	}
    };
    
    
    const store = new Vuex.Store({
    	modules: {
    		moduleA,
    	}
    })
    
    export default store
```

vuex主要由5个属性组成。

state主要初始化你需要的变量，。最近发现通过函数改变state之后，你拿到state的值如果放在vue.$data中是不会触发更新的。

getters主要用于计算你最终的值，那跟state有啥区别呢？一它可以对值做改变，其二它会在你改变值得时候同时触发

mutations 以同步的方式调用函数，调用时使用this.$store.commit('函数名')，因为是同步所以他会依次执行。不适合处理异步任务。

actions 以异步的方式调用函数，调用时使用this.$store.dispath('函数名'),主要用于处理异步任务。

modules主要用于管理多个模块之间的属性，里面有许多的有用的参数，比如namespaced会使其成为带命名的模块，这样模块就会有自己专有的名字。其他的参数请看文档。