面试题总结大全

宏任务,微任务

先来了通俗易懂的例子：
去银行办理业务的人就是一个个宏任务，当宏任务P1在柜台办理业务时，其它任务都需等待，当一个宏任务P1办理业务结束时，柜台职员会询问他还有没有其它微任务，如果他还有其他业务，则其他宏任务都需等待。就是微任务是在宏任务之前执行

执行顺序：先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。

宏任务包括：script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。

微任务包括： Promises, Object.observe, MutationObserver

js创建对象

1、new 操作符 + Object 创建对象 

2、字面式创建对象

以上两种方法在使用同一接口创建多个对象时，会产生大量重复代码，为了解决此问题，工厂模式被开发。

3、工厂模式

 工厂模式解决了重复实例化多个对象的问题，但没有解决对象识别的问题

4、构造函数模式

对比工厂模式有以下不同之处：

1、没有显式地创建对象

2、直接将属性和方法赋给了 this 对象

3、没有 return 语句

5、原型模式

原型模式的好处是所有对象实例共享它的属性和方法

6、混合模式（构造函数模式+原型模式）

混合模式共享着对相同方法的引用，又保证了每个实例有自己的私有属性。最大限度的节省了内存。

本地存储

localStorage: localStorage 的生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据，否则数据永远不会消失

sessionStorage: sessionStorage 的生命周期是仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念，sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage 也是不一样的

cookie: cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右, 有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取
 

webpack 的组成部分

入口,出口,插件,装载机(loader),本地服务(devServer)

一次完整的http服务

1.对 www.baidu.com这个网址进行DNS域名解析，得到对应的IP地址
2.根据这个IP，找到对应的服务器，发起TCP的三次握手
3.建立TCP连接后发起HTTP请求
4.服务器响应HTTP请求，浏览器得到html代码
5.浏览器解析html代码，并请求html代码中的资源(如js、css、图片等) (先得到html代码，才能去找这些资源)
6.浏览器对页面进行渲染呈现给用户
7.服务器关闭TCP连接
 

json的常用方法

JSON.stringify() 把 json 对象转换成为 json 字符串
JSON.parse() 把 json 字符串转换成为 json 对象

typeof返回值

1.string类型

typeof(“abc”)

2.number类型

typeof(20);
typeof(NaN);
typeof(Infinity)

3.boolean类型

typeof(true);
typeof(false)

4.undefined类型

typeof(undefined);
typeof(a);//不存在的变量

5.object类型

对象，数组，null返回object
typeof(null);
typeof(window);

6.function

typeof(Array);
typeof(Date);

7.symbol

typeof Symbol() // ES6提供的新的类型

typeof与instanceof的区别

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
使用规则：object instanceof constructor
要求前面是个对象，后面是一个构造函数。而且返回的是布尔型的，不是true就是false。

常用使用：由于typeof只能判断类型，所以，数组和对象返回的都是object，这时就需要使用instanceof来判断是否是 [] instanceof Array //true
 

事件委托

它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件.

js继承

1. 原型链继承

2.构造函数继承

3.组合继承（组合原型链继承和借用构造函数继承）

4.原型式继承

5.寄生式继承

6.寄生组合式继承（常用）

随机数

返回10-20的随机数

Math.random()*(20-10)+10

阻止事件冒泡和阻止事件委托

e.stopPropagation(); //非IE浏览器取消事件冒泡

e.preventDefault(); //非IE浏览器取消事件默认行为

doctype

canvas和svg 

canvas是html5提供的新元素，svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。

在js中数据类型分为几类?它们的类型分别有哪些?

基本数据类型,和引用数据类型

1. Boolean         布尔型

2. Null                空

3. Undefined     未定义

4. Number         数字型

5. String            字符串型

6. Symbol         符号型

1. Ojbect           对象
2. Function        函数

3. Array         数组

如何使用js 给一个按钮绑定多个事件?

addEventListener()方法,on方法会覆盖

给出一个数组去掉重复项?

给出一个对象获取它的key和value

        var key = []
        var value = []
        for (var i in obj) {
            key.push(i)
            value.push(obj[i])
        }

什么是闭包?优缺点有哪些?

闭包就是能够读取其他函数内部变量的函数

优点：1:变量长期驻扎在内存中；

           2:避免全局变量的污染；

           3:私有成员的存在 ；

缺点:常驻内存 会增大内存的使用量 使用不当会造成内存泄露

Dom和Bom是什么?有哪些作用

DOM，文档对象模型                

DOM是独于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
BOM 是浏览器对象模型。

比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。
BOM 就是为了解决这些事情出现的接口。

写出一个对象的解构赋值和数组的解构赋值

vue的v-if和v-show的相同点和不同点

v-if是真正的条件渲染，当条件为true时，元素被渲染，为false时元素被销毁。切换开销比较大
v-show不管为true还是false，元素都被渲染，是利用css属性display来控制元素的显示和隐藏，当为true时，display的值为block，为false时，dispaly的值为none。初始渲染开销比较大
 

vue中父子组件传参

vue中如何正确使用计时器

  created() {
    // 如果不加 window ，则会使用 vue实例的方法，将无法清除定时器
    this.timer = window.setInterval(() => {
      // 要执行的函数
      this.init()
    }, 5000)
  },
 
 
  beforeDestroy() {
    window.clearInterval(this.timer)
    this.timer = null
  },

HTML

html的常用标签.行内元素有哪些?块元素有哪些?css盒模型

• 块级元素：div p h1 h2 h3 h4 form ul

• 行内元素：a b br i span input select

• Css盒模型：内容，border,margin，padding

HTML5的新特性有哪些

1.语义化标签        2.增强型表单        3.新增视频 <video> 和音频 <audio> 标签        

4.Canvas绘图        5.SVG绘图        6.地理定位        7.拖放API

常用的布局方式

一、静态布局        二、流式布局        三、自适应布局        四、响应式布局     

五、弹性布局（rem/em布局）

img标签中的title和alt的区别

　    alt属性的特点：

　　图片加载不成功未能显示出来，就会在图片未显示的地方出现一段文字。

这一作用是为了给未加载出来的图片提供信息，方便用户浏览网页，同时也方便开发人员维护网页。

　　title属性的特点：

　　title属性可以用在任何元素上，当用户把鼠标移动到元素上时，就会出现title的内容，起到对图片说明的作用，其实质就是对图片的一种备注或者注释

css的选择符有哪些?那些属性可以继承?优先级算法?内联和!important哪个优先级更高?

基本可以分为通配选择器，标签选择器，类选择器，ID选择器，简单属性选择，具体属性选择，根据部分属性值选择，特定属性选择，从结构上来分还有后代选择器，子元素选择器，相邻兄弟选择器以及伪类。
font-size,height,weight,color,
!important级别最高

css的引入方式?import和link的区别

　　区别1：link是XHTML标签，除了加载CSS外，还可以加载其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。
 

css的新特性

1.媒体查询         2.过渡    transition        3.动画    animation        4.形状转换   transform        

5.阴影    box-shadow        6.边框    border-image        7.背景  background-clip

在响应式页面布局中那些需要注意?

优点：

1. 跨平台和终端且不需要分配子域。
2. 兼容当前及未来设备。
3. 节约成本。

缺点：

1. 兼容性 不兼容低版本浏览器
2. 移动带宽增多
3. 加载事件长、无用代码太多。

Vue.js的两个核心是什么?

 1、数据驱动        2、组件

Vue中一个元素如何绑定多个事件?

vue中如何跨组件传值以及方法调用

vue路由有几种方法?它们的异同点是什么?

hash模式：
1、url路径会出现 # 字符
2、hash值不包括在 HTTP 请求中，它是交由前端路由处理，所以改变hash值时不会刷新页面，也不会向服务器发送请求
3、hash值的改变会触发hashchange事件

history模式：
1、整个地址重新加载，可以保存历史记录，方便前进后退
2、使用 HTML5 API（旧浏览器不支持）和 HTTP服务端配置，没有后台配置的话，页面刷新时会出现404
 

tcp的三次握手都是什么?

 A->B 在吗;        B->A在的;         A->B 内容

Doctype作用?严格模式与混乱模式如何区分?他们有什么意义?

<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。 

意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

意义总结:严格用统一的但旧网站受影响,混乱用的都是浏览器自己的会回到以前.

如何居div?如何居中一个浮动元素?

给div设置一个宽度，margin:0px auto。

position:absolute top:50%,left:50% transform:translate(-50%，-50%)

弹性盒居中 justify-content:center align-items:center

居中一个浮动元素：

居中一个浮动元素（套一个大盒子给它margin:0px auto。）

设置当前div的宽度，然后设置margin-left:50%; position:relative; left:-250px;其中的left是 宽度的一半.

box-sizing常用的属性有哪些?分别有什么作用

content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 (怪异盒模型)

如何禁止页面缩放?

 把user-scalable 设置成no。

当页面内容超出显示区域有哪些解决方法? 

 溢出换行,溢出隐藏

js有哪些方法可以获取元素节点,获取和设置元素节点的方法?

document.getElementsBy(TagName,Name,ClassName) 

document.getElementById

querySelector与querySelectorAll()

分别表示满足条件的第一个元素或者所有元素。括号内的写法与CSS选择器的写法一样。

js怎样判断一个变量是否null/undefined?

var exp = undefined;
if (typeof(exp) == "undefined")
{
    alert("undefined");
}

var exp = null; 
if (!exp && typeof(exp)!=”undefined” && exp!=0) 
{ 
alert(“is null”); 
}　

使用正则匹配手机号和邮箱格式

怎样判断一个变量是否为object?

 instanceof

arr instanceof Array

constructor

[].constructor == Array

Array.isArray()

Array.isArray(obj)

请用js方法写出'awewaew'字符串的反转

jq中的$的作用?可以把$换做其他的吗?

jq获取某个元素子元素数量方法?

什么是跨域?跨域请求资源的方法?

同源策略,域名,协议,端口

window.name         JsonP         cors          代理跨域

TCP和UDP的区别?

let,vat,const的区别?   

var 变量提升,let暂时性死区,const必须要有常驻值.

var可以改变赋值,let不能重复声明,const不能重复声明,不能改变赋值

forEach,map,filter,some,every的区别

forEach循环，循环数组中每一个元素并采取操作， 没有返回值， 可以不用知道数组长度

map函数，遍历数组每个元素，并回调操作，需要返回值，返回值组成新的数组，原数组不变

filter函数， 过滤通过条件的元素组成一个新数组， 原数组不变

some函数，遍历数组中是否有符合条件的元素，返回Boolean值

every函数， 遍历数组中是否每个元素都符合条件， 返回Boolean值 

 0.

for in 和 for of的区别

for...in 循环：只能获得对象的键名，不能获得键值

for...of 循环：允许遍历获得键值

undefined和null 的区别 

 null表示"没有对象"，即该处不应该有值。典型用法是：

（1） 作为函数的参数，表示该函数的参数不是对象。push

（2） 作为对象原型链的终点。

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

写出Array的常用方法

push,pop,shift,unshift,splice

如何实现深拷贝

JSON.parse(JSON.stringify());

循环

介绍promise的异常捕获

第一种单独对 .then() 中指定异常处理函数

第二种使用.catch来实现全部捕获

src和href的区别

1、请求资源类型不同
（1） href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；

2、作用结果不同
（1）href 用于在当前文档和引用资源之间确立联系；

（2）src 用于替换当前内容；

3、 浏览器解析方式不同
（1）若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

（2）当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

css如何实现阴影

box-shadow

常用的es6新特性

类        模块化        箭头函数        函数参数默认值        模板字符串        解构赋值        

延展操作符        对象属性简写        Promise        Let与Const

提升前端性能的方法

尽量减少HTTP请求        使用外部JS和CSS文件       css sprit雪碧图，减少首屏http请求

懒加载、预加载        函数防抖        ajax 缓存

数组的遍历方法

forEach,map,filter,some,every

列出vue-router的导航守卫

• router.beforeEach 全局前置守卫 进入路由之前
• router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
• router.afterEach 全局后置钩子 进入路由之后

简述路由的生命周期及使用场景

vue组建通信方法?

• props和$emit(常用)
• $attrs和$listeners
• 中央事件总线（非父子组件间通信）
• v-model
• provide和inject
• $parent和$children
• vuex

vuex的属性

state, getters, mutations, actions, modules。

webpack的常用loader

postcss -loader,        css-loader,        url-loader,        html-withimg-loader,        style-loader

数组去重

 什么是盒子模型?

 CSS盒子模型由内容区、填充、边框和空白边四部分组成。

空元素有哪些?

<br>、<hr>、<img>、<input>、<link>、<meta>

统计字符串中出现最多的项?

split()和join()的区别

Split()方法是切割成数组的形式，

Join()方法是将数组转换成字符串。

数组的push,pop,unshift,shift分别属性是什么?

call,apply,bind的区别

call是序列传参,apply是数组传参,bind要调用

浏览器内核有什么

 Trident、 Gecko、 Webkit、 Presto、 Blink五种

html5提供了那些新的api

position的属性值有哪些?

absolute    生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed    生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative    生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 left 位置添加 20 像素。
sticky    CSS3 新增，粘性定位，相对于最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto 或 overlay时，即不是 visible 时）。 它的行为就像 position:relative 而当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置。
static    默认值。没有定位，元素出现在正常的流中 （忽略 left、top、right、bottom 或者 z-index 声明）。
inherit    规定应该从父元素继承 position 属性的值。
 

如何实现浏览器多个标签页之间的通信?

 localStorage、Cookie

浏览器HTML5的离线工作原理?

 HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

HTML5应用程序缓存和浏览器缓存有什么区别?

 HTML5 的应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括 HTML、CSS、图像和 JavaScript 脚本并存在本地.

与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。

瀑布流实现的原理

先通过计算出一排能够容纳几列元素，然后寻找各列之中所有元素高度之和的最小者，并将新的元素添加到该列上，然后继续寻找所有列的各元素之和的最小者，继续添加至该列上，如此循环下去，直至所有元素均能够按要求排列为止；

Array和ArrayBuffer的区别?