前端面试总汇

时间  2019-11-29
标签 前端 面试 总汇 栏目 快乐工作 繁體版
原文   原文链接

前端面试总汇

html/css问题

1 . css权重排序javascript

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

2 . 什么是盒子模型？html

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

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

答：html5

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

块级元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquotereact

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

4 . CSS实现垂直水平居中css3

方法一

.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新标签， 浏览器支持新标签后，还须要添加标签默认的样式

  1. 什么是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的资源引用没有同源限制，同时资源加载到页面后会当即执行（没有阻塞的状况下）。

缺点：

  一、这种方式没法发送post请求（这里）

  二、另外要肯定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中.get()提交和.post()提交的异同点？

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

异同点：

一、请求方式不一样：.get() 方法使用GET方法来进行异步请求的。.post() 方法使用POST方法来进行异步请求的。

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

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

四、安全问题： 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');
	}
```
复制代码
  1. 深拷贝与浅拷贝

浅拷贝

//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 一、语义有误，当前请求没法被服务器理解。401 当前请求须要用户验证 403 服务器已经理解请求，可是拒绝执行它。

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

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

答：

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

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

框架问题

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

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

  1. 双向绑定原理

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

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

```
复制代码
  1. v-if与v-show有什么区别（vue）

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

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

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

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

  1. 子父组件通讯有哪些（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 （状态机管理）

  1. 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会使其成为带命名的模块，这样模块就会有本身专有的名字。其余的参数请看文档。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程