1.1 HTML面试题
1.行内元素有哪些，块级元素有哪些，空元素有哪些？
行内元素： a, b, span, img, input, strong, select, label, em, button,
textarea 块级元素： div, ul, li, dl, dt, dd, p, h1-h6, blockquote 空元素： br,
meta, hr, link, input, img
2.页面导入样式时，link和@import有什么区别？
1.link不仅可以导入样式表，还可以导入其他如如favicon，但@import只能导入样式表
2.link是XHTML语法，不存在兼容问题，但是@import是在css2.1才提出，在IE5+后才支持，所以对低版本的浏览器不兼容
3.可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
4.link是在页面加载的的同时一起加载的，@import是页面加载完毕后才加载的
3.title和h1的区别，b和strong的区别，i与em的区别？
title和h1的区别 title标签表示的标题是整个网页的名字，即在浏览器顶部的tab栏里显示的 h1标签是网页内容的标题
就相当于是网页中某篇文章或某段文字的标题。b和strong的区别 视觉上一样,但从语义上来说,b只是单纯的粗体,strong是强调内容,一般针对seo会有用处
i与em的区别 i标签的作用：仅仅是为了让字体显示斜体，对于SEO没什么作用。
em标签的作用：不仅可以让字体显示斜体，而且可以加强语气，告诉搜索引擎这里是重要的
4.image的title和alt有什么区别？
alt 是图片加载失败时，显示在网页上的替代文字； title 是鼠标放上面时显示的文字。
这些都是表面上的区别，alt是img必要的属性，而title不是。
5.png、jpg、gif格式，什么时候用？
1.png:无损压缩，尺寸比jpg/jpeg大，只适合做小图标。
2.jpg/jpeg:采用了压缩算法，有一点失真，比png小很多
3.gif:一般只做动图，正在被google的webm格式取代中
4.webm:google提出的一种新的文件格式,在youtube、flash支持都不错,移动设备的流畅度
1.2 CSS面试题
6.介绍一下CSS盒子模型？
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ marginbox-sizing属性？ 用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding +
content部分的高/宽
7.line-height和height的区别？
height是元素自身的高度，line-height则是元素内部文字的行高
如果一个元素的height和line-height相同，意味着这行文字在元素中垂直居中
8.CSS选择符有哪些?哪些属性可以继承?
CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 +
p)、子选择器（ul > li）、后代选择器（li
a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ] !important 比内联优先级高
9.面试题:CSS优先级算法如何计算?
元素选择符： 1 class选择符： 10 id选择符：100 内联样式：1000
!important声明的样式优先级最高，如果冲突再进行计算。
10.面试题:用CSS画一个三角形
宽高设为0 设置border属性 .tran{
width: 0;
height: 0;
border-left: 50px solid red;
border-right: 50px solid red;
border-bottom: 100px solid #000;
}
11.面试题:一个盒子不给宽度和高度如何水平垂直居中?
让其父元素相对定位，内部元素绝对定位，这里的父元素为body。
原理：让未定义宽高的图片上下左右距离都为0.然后给一个margin自适应。可以想象成一个盒子，给了四个方向的相同的力，这样就会形成一种相对的均衡力量让其停留在中间位置了。
.box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
.box2{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #000;
}
}
12.面试题:display有哪些值?说明他们的作用。
block 此元素将显示为块级元素，此元素前后会带有换行符。
none 此元素不会被显示。
inline-block 行内块元素。
list-item 此元素会作为列表显示。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值
13.面试题:对BFC规范(块级格式化上下文: block formatting context)的理解?
BFC 是什么？ 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和
table-captions），
以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。BFC 有一下特性： 内部的 Box 会在垂直方向,从顶部开始一个接一个地放置。 Box 垂直方向的距离由 margin 决定。属于同一个
BFC 的两个相邻 Box 的 margin 会发生叠加, 每个元素的 margin box 的左边, 与包含块 border box
的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。 BFC 的区域不会与 float box 叠加。BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。 计算 BFC 的高度时,浮动元素也参与计算。
如何触发 BFC？ float 除了 none 以外的值 overflow 除了 visible
以外的值(hidden,auto,scroll) display
(table-cell,table-caption,inline-block, flex, inline-flex) position
值为(absolute,fixed) fieldset 元素
14.面试题:清除浮动有哪些方式?
1.为父元素添加overflow：hidden
3.使用clear:both清除浮动，在所有浮动元素下方添加一个该属性，可以消除float的破坏性，但会增加不必要的标签。
4.使用伪元素清除浮动（推荐）
15.面试题:在网页中的应该使用奇数还是偶数的字体?为什么呢?
使用偶数，因为从编码到解析会经历大量的计算，偶数更容易被计算为整数，而奇数往往有时候很难被除尽，需要保留小数，或者舍掉小数
16.面试题:什么是CSS reset?
HTML标签在浏览器中都有默认的样式，不同的浏览器的默认样式之间存在差别。
开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。一开始就将浏览器的默认样式全部覆盖掉，
17.面试题:css sprite是什么,有什么优缺点
将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
优点：
减少HTTP请求数，极大地提高页面加载速度。 增加图片信息重复度，提高压缩比，减少图片大小。
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。 缺点：图片合并麻烦。 维护麻烦，修改一个图片可能需要从新布局整个图片，样式。
18.面试题:display: none;与visibility: hidden;的区别
1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
19.position有哪些值?有什么作用?
static（默认）：按照正常文档流进行排列； relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom,
left, right 定位； absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom,
left, right 定位； fixed(固定定位)：所固定的参照对像是可视窗口
20.面试题:opacity 和rgba区别
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。
opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。
1.3 JavaScript基础面试题
21.面试题:延迟加载JS有哪些方式?
JS延迟加载有助于提高页面加载速度
一般有六种方式；defer属性、async属性、动态创建dom方式、使用jquery的getScript方法、使用setTimeout延迟方法、让js最后加载。
script src="test1.js" defer="defer"
script src="test1.js" async
$.getScript("outer.js",function(){
//回调函数，成功获取文件后执行的函数
console.log("脚本加载完成")
});
22.面试题:JS数据类型有哪些?
简单数据类型（也称为基本数据类型）:
Undefined、Null、Boolean、Number和String。还有1中复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的。其中Undefined、Null、Boolean、Number都属于基本类型。Object、Array和Function则属于引用类型
23.面试题:null和undefined的区别
null表示没有对象，即该处不应该有值
1） 作为函数的参数，表示该函数的参数不是对象
2） 作为对象原型链的终点
undefined表示缺少值，即此处应该有值，但没有定义
1）定义了形参，没有传实参，显示undefined
2）对象属性名不存在时，显示undefined
3）函数没有写返回值，即没有写return，拿到的是undefined
4）写了return，但没有赋值，拿到的是undefined
null和undefined转换成number数据类型
null 默认转成 0
undefined 默认转成 NaN
24.面试题:== 和 ===有什么不同
== 检查值相等, 允许类型转换
=== 检查值和类型相等， 不允许类型转换
25.面试题:JS微任务和宏任务
setTimeout(function(){
console.log('1')
});
new Promise(function(resolve){
console.log('2');
resolve();
}).then(function(){
console.log('3')
});
console.log('4');
2 4 3 1
在执行栈中执行一个宏任务。
执行过程中遇到微任务，将微任务添加到微任务队列中。
当前宏任务执行完毕，立即执行微任务队列中的任务。
当前微任务队列中的任务执行完毕，检查渲染，GUI线程接管渲染。
渲染完毕后，js线程接管，开启下一次事件循环，执行下一次宏任务（事件队列中取）。
微任务：process.nextTick、MutationObserver、Promise.then catch finally
宏任务：I/O、setTimeout、setInterval、setImmediate、requestAnimationFrame
26.面试题︰JS作用域+this指向+原型考题
27.面试题:JS判断变量是不是数组，你能写出哪些方法?
var ary = [1,23,4];
console.log(ary instanceof Array)//true;
var ary = [1,23,4];
console.log(ary.proto.constructorArray);//true
console.log(ary.constructorArray)//true 这两段代码是一样的
var ary = [1,23,4];
function isArray(o){
return Object.prototype.toString.call(o)==’[object Array]’;
}
console.log(isArray(ary));
28.面试题: slice是干嘛的、splice是否会改变原数组
slice不会改变原数组
var arr=[1,2,3,4,5];
var arr2=arr.slice(1,3);
console.log(arr2);//[2,3]
console.log(arr);//[1,2,3,4,5]
splice会改变原数组
var arr=[1,2,3,4,5];
var arr1=arr.splice(1,3);
console.log(arr1);//[2,3,4]
console.log(arr);//[1,5]
29.面试题:JS数组去重
function dedupe(array){
return Array.from(new Set(array));
}
dedupe([1,1,2,3]) //[1,2,3]
30.面试题:new操作符具体做了什么
new操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象
1、创建一个空的对象
2、链接到原型
3、绑定this指向，执行构造函数
4、确保返回的是对象
1、创建一个空对象
var obj = new Object();
2、设置原型链（当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（内部属性），指向构造函数的原型对象）
obj.proto= Func.prototype;
3、让Func中的this指向obj，并执行Func的函数体。（创建新的对象之后，将构造函数的作用域赋给新对象（因此this就指向了这个新对象））
var result =Func.call(obj);
4、判断Func的返回值类型：
如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象
if (typeof(result) == “object”){
func=result;
}
else{
func=obj;;
}
31.面试题:闭包
闭包就是能够读取其他函数内部变量的函数。
①函数嵌套函数②函数内部可以引用函数外部的参数和变量
③参数和变量不会被垃圾回收机制回收
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
32.面试题:原型链
一、原型 ①所有引用类型都有一个proto(隐式原型)属性，属性值是一个普通的对象
②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象 ③所有引用类型的proto属性指向它构造函数的prototypevar a = [1,2,3]; a.proto === Array.prototype; // true
二、原型链
当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的proto隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的proto中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。
33.面试题:JS继承有哪些方式
1. 构造函数继承
封装构造函数，通过new关键字创建实例对象；只有当一个函数以 new 关键字来调用的时候，我们才能说它是一个构造函数。
function Student(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
var s1 = new Student('张三', 11, 0)
var s2 = new Student('李四', 13, 1)
2.原型链继承
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function() {
console.log('Hello');
};
var p1 = new Person('Tom', 18);
var p2 = new Person('Jack', 34);
console.log(p1.say === p2.say); // true
34.面试题︰说一下call、apply、bind区别
在JS中，这三者都是用来改变函数的this对象的指向的，他们有什么样的区别呢。
在说区别之前还是先总结一下三者的相似之处：
1、都是用来改变函数的this对象的指向的。
2、第一个参数都是this要指向的对象。
3、都可以利用后续参数传参。
var xw = {
name : "小王",
gender : "男",
age : 24,
say : function() {
alert(this.name + " , " + this.gender + " ,今年" + this.age);
}
}
var xh = {
name : "小红",
gender : "女",
age : 18
}
xw.say();
本身没什么好说的，显示的肯定是小王 ， 男 ， 今年24。
那么如何用xw的say方法来显示xh的数据呢。
对于call可以这样：
xw.say.call(xh); alert: 小红 , 女 ,今年18
复制代码
对于apply可以这样：
xw.say.apply(xh); alert: 小红 , 女 ,今年18
复制代码
而对于bind来说需要这样：
xw.say.bind(xh)(); alert: 小红 , 女 ,今年18
call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要 ()来进行调用才可以
var xw = {
name : "小王",
gender : "男",
age : 24,
say : function(school,grade) {
alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);
}
}
var xh = {
name : "小红",
gender : "女",
age : 18
}
call后面的参数与say方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的，这就是两者最大的区别。
可以看到say方法多了两个参数，我们通过call/apply的参数进行传参。
对于call来说是这样的
xw.say.call(xh,"实验小学","六年级");
复制代码
而对于apply来说是这样的
xw.say.apply(xh,["实验小学","六年级郑州牛皮癣医院"]);
复制代码
看到区别了吗，call后面的参数与say方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的，这就是两者最大的区别。
那么bind怎么传参呢？它可以像call那样传参。
xw.say.bind(xh,"实验小学","六年级")();
35.面试题:sort背后原理是什么?
36.面试题:深拷贝和浅拷贝
浅拷贝:仅仅复制对象的引用,而不是对象本身。
深拷贝:复制对象所引用的全部对象
//深拷贝
function deepClone(data) {
let _data = JSON.stringify(data),
dataClone = JSON.parse(_data);
return dataClone;
};
//测试
let arr = [1,2,3],
_arr = deepClone(arr);
arr[0] = 2;
console.log(arr,_arr)//[2,2,3] [1,2,3]
lodash 深拷贝
安装依赖
main.js导入
import _ form 'lodash'
Vue.prototype._=_
使用
const res = [{
name:'张三',age:38},{
name:'李四',age:25}];
this.res1= _.cloneDeep(res);
37.面试题: localstorage、sessionstorage、cookie的区别
cookie：保存登陆信息，比如登陆某个网站市场可以看到’记住密码’，这就是通过在cookie中存入一段辨别用户身份的数据来实现的。
sessionStorage：会话，是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但是页面关闭后，sessionStorage中的数据就会被清空。
localStorage：是HTML5标准中新加入的技术，当然早在IE6时代就有一个userData的东西用于本地存储，而当时考虑到浏览器的兼容性，更通用的方案是使用flash。如今localStorage被大多数浏览器所支持。
1）存储大小
cookie：一般不超过4K（因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识）
sessionStorage：5M或者更大
localStorage：5M或者更大 2）数据有效期
cookie：一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置了时间，cookie就会存放在硬盘里，过期才失效
sessionStorage：仅在当前浏览器窗口关闭之前有效，关闭页面或者浏览器会被清除
localStorage：永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久清除，因此用作持久数据
应用场景 cookie：判断用户是否登录过网站，以便实现下次自动登录或记住密码；保存事件信息等
sessionStorage：敏感账号一次性登录；单页面用的较多（sessionStorage 可以保证打开页面时
sessionStorage 的数据为空）localStorage：常用于长期登录（判断用户是否已登录），适合长期保存在本地的数据
第二章面试题进阶篇
2.1 ES6面试题
38.面试题:var、let、const区别
var声明变量可以重复声明，而let不可以重复声明 var是不受限于块级的，而let是受限于块级
var会与window相映射（会挂一个属性），而let不与window相映射
var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错 const声明之后必须赋值，否则会报错
const定义不可变的量，改变了就会报错 const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错
39.面试题:箭头函数和普通函数有什么区别?
1）用了箭头函数，this就不是指向window，而是父级（指向是可变的） （2）不能够使用arguments对象
（3）不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误 （4）不可以使用yield命令，因此箭头函数不能用作
Generator 函数1：写法不一样
2：普通函数存在变量提升的现象
3：箭头函数不能作为构造函数使用
4：两者this的指向不同
5：箭头函数的arguments指向它的父级函数所在作用域的arguments
6：箭头函数没有new.target
40.面试题:Promise有几种状态
Promise的三种状态：
pending、fulfilled、rejected(未决定，履行，拒绝)，同一时间只能存在一种状态，且状态一旦改变就不能再变。promise是一个构造函数，promise对象代表一项有两种可能结果（成功或失败）的任务，它还持有多个回调，出现不同结果时分别发出相应回调。
1.初始化，状态：pending
2.当调用resolve(成功)，状态：pengding=>fulfilled
3.当调用reject(失败)，状态：pending=>rejected