前端经典面试题

Web相关

1.常用浏览器有哪些，内核都是什么？
参考答案：常用浏览器有IE、火狐(firefox)、chrome、safari、360、搜狗等。
内核：IE的是Trident，火狐的是Gecko，safari用的是Webkit，chrome以前是Webkit现在是Blink内核。
360和搜狗这些分极速模式和兼容模式，极速模式用的Webkit的内核，兼容模式用的Trident内核。

2.输入URL到页面加载显示完成发生了什么?
参考答案：DNS解析，TCP连接，发送HTTP请求，服务器处理请求并返回HTTP报文，浏览器解析渲染页面，连接结束。

3.什么是DOM？什么是BOM？
参考答案：DOM全称是Document Object Model，也就是文档对象模型。DOM是W3C的标准，所有浏览器公共遵守的标准。
BOM是Browser Object Model，浏览器对象模型。BOM是各个浏览器厂商根据DOM在各自浏览器上的实现，表现为不同浏览器定义有差别，实现方式不同。

4.简单说一下GET请求和POST请求的区别？
参考答案：
GET参数通过url传递，POST放在request body中。
GET请求在url中传递的参数是有长度限制的，而POST没有。
GET是用来向获取服务器信息的，请求的信息描述所需资源的参数，返回的信息才是数据本身；POST是用来向服务器传递数据的，其请求的信息就是数据本身，返回的信息只是操作的结果。
GET请求会在浏览器的历史记录中找到，所以不安全，而POST不会，所以相对比POST安全

5.div标签和span标签的主要区别是什么？
参考答案：div标签是块级元素，拥有块级元素的特点。
每个div标签里的内容都可以占据一行，不会其他标签在一行显示；div标签总是从新行开始显示；且div标签可以通过css样式来设置自身的宽度、高度，且还可以设置内外边距。
span标签是行内元素，拥有行内元素的特点。
span标签元素会和其他行内标签元素会在一行显示，不会另起一行显示。span标签的宽度、高度都无法通过css样式设置，它的宽高受其本身内容控制，随着内容的宽高改变而改变；span标签无法控制外边距和内边距，虽然可以设置左右的外边距和内边距，但上下的外边距和内边距无法设置。且span标签里只能容纳文本或其他行内元素，不能容纳块级元素。

6.简单说一下两种css盒模型？
参考答案：CSS中的盒模型包括IE盒模型和标准的W3C盒模型。
IE盒模型的width为content宽度，height为content高度。
标准盒模型的width为content宽度 + 左右border + 左右padding，height为content高度 + 上下border + 上下padding。
追问：如何切换这两种盒模型？
参考答案：可以通过设置css中的box-sizing属性可以切换盒模型的表现，border-box为IE盒模型，content-box为标准盒模型。

7.css中有哪几种常见定位方式？
参考答案：默认定位static：默认值。没有定位，元素出现在正常的文档流中。
相对定位relative：如果对一个元素进行相对定位，它将出现在它所在的位置上。可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。
绝对定位absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。absolute定位使元素脱离文档流，因此不占据空间。
固定定位fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素脱离文档流，因此不占据空间。
粘性定位sticky：元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

8.宽高任意的父元素包含一个宽高任意的子元素，如何实现子元素水平垂直居中？
参考答案：
（1）父元素设置弹性布局display: flex，并设置align-items: center; justify-content: center;
（2）父元素设置position：relative，子元素设置position: absolute，top、bottom、left、right均设为0，margin：auto;
（3）父元素设置position：relative，子元素设置position: absolute，top、left均设为50%，transform: translate(-50%, -50%);

9.实现宽高已知元素内的文字内容水平垂直居中？
参考答案：（1）水平居中添加：text-align:center，垂直居中添加line-height为父元素高度。
（垂直居中也可添加vertical-align:middle，但是不推荐，只能作用在inline-block或者inline和table-cell等元素内）
（2）父元素设置弹性布局display: flex，并设置align-items: center; justify-content: center;

10.简单说一下什么是BFC（块级格式化上下文）？
参考答案：BFC指的是块级格式化上下文，一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域，和其他区域互不影响。
追问：它的使用场景一般是什么？如何创建一个BFC元素？
参考答案：主要用于清除浮动，防止margin合并、margin塌陷等。
创建BFC：
（1）根元素或包含根元素的元素
（2）浮动元素float＝left|right或inherit（≠none）
（3）绝对定位元素position＝absolute或fixed
（4）display＝inline-block或flex或inline-flex或table-cell或table-caption
（5）overflow＝hidden或auto或scroll(≠visible)

11.css如何实现文本的省略号？

参考答案：
单行省略：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行省略：
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
-webkit-line-clamp: 3;

12.简单说一下css实现一个三角形的原理？
参考答案：采用的是相邻边框连接处的均分原理。 将元素的宽高设为 0，只设置 border ，把任意三条边隐藏掉（颜色设为 transparent），剩下的就是一个三角形。

13.css如何实现一个宽度未知，高度自适应的正方形？
参考答案：设置元素height：0，然后padding-top或者padding-bottom设置为100%；

14.常见的css预处理器有哪些？有没有使用过哪些？
参考答案：Sass（SCSS）、LESS、Stylus等。

15.js中的基本数据类型有哪些？
参考答案：基本数据类型：undefined、null、number、boolean、string、symbol（ES6）
追问：常见的引用数据类型？引用数据类型和基本数据类型在内存中的存放有什么区别？
参考答案：引用数据类型：Object、Array、Function、Date等。
基本数据类型是存放在栈内存中，引用数据类型的数据放在堆内存中，栈内存存放对应的内存地址。

16.js中判断数据类型的方法有哪些？
参考答案：
typeof （可追问，typeof NaN 为number， typeof null 为 object）
instanceof
Object.prototype.toString.call()
typeof返回哪些数据类型？
string，boolean，number，null，undifined，object，function

17.js中实现数组去重
参考回答：
（1）indexOf循环去重
（2）ES6 Set去重；Array.from(new Set(array))
（3）Object 键值对去重；把数组的值存成 Object 的 key 值，比如 Object[value1] = true，在判断另一个值的时候，如果 Object[value2]存在的话，就说明该值是重复的。

18.简单说一下var，let和const有什么区别？
参考答案：主要是以下几点：
（1）var声明的变量属于函数作用域，let和const声明的变量属于块级作用域；
（2）var存在变量提升现象，而let和const没有此类现象；
（3）var变量可以重复声明，而在同一个块级作用域，let变量不能重新声明，const变量不能修改且必须经过初始化。
追问：如果使用const定义一个object，是否可以修改object的属性值？为什么？
参考答案：复合类型const变量保存的是引用。因为复合类型（如数组和对象）的常量不指向数据，而是指向数据所在的地址，所以通过 const 声明的复合类型只能保证其地址引用不变，但不能保证其数据不变。

19.简单说一下null，undefined和undeclared有什么区别？
参考答案：null表示"没有对象"，即空值，转为数值时为0。
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义，转为数值时为NaN。
undeclared:js语法错误，没有声明直接调用，js无法找到对应的上下文。

20.js中如何给一个函数的参数添加默认值？
参考答案：function say(str =‘hello world’) {
console.log(str);
}
追问：如果调用say()，say(’’)，say(null)会输出什么？
参考答案：参数默认值只对undefined参数有效。
say() => ‘hello world’
say(’’) => ‘’
say(null) => ‘null’

21.如何给一个元素绑定点击事件？
参考回答：onclick绑定和addEventListener绑定。
追问：onclick绑定和addEventListener绑定有什么区别？
参考答案：onclick一次只能对一个元素绑定一个事件处理程序，只能使用事件冒泡。
addEventListener可以为一个元素绑定多个事件而不会覆盖之前绑定的处理程序 （按照顺序执行），并可以支持事件处理的捕获阶段，也可以支持时间处理的冒泡阶段。

22.ES6中的箭头函数和普通函数有什么区别？
参考答案：主要有以下几点：
（1）箭头函数语法上比普通函数更加简洁，普通函数存在变量提升。
（2）箭头函数没有自己的this，它里面的this是继承所属上下文中的this。
（3）箭头函数不能使用new生成构造函数，因为箭头函数没有prototype，而construct在prototype里面。
（4）普通函数的参数是arguments，而箭头函数需要接收参数才能使用。

23.说一下js中bind，apply，call的区别？
参考答案：fn.call(this,arg1,arg2,…)，fn.bind(this,arg1,arg2,…)，fn.apply(this,arguments)。
call和apply在绑定this后会直接调用函数，bind是返回绑定this后的函数。

24. 简述Ajax的过程？，主要用到哪些状态码

创建XMLHttpRequest对象,也就是创建一个异步调用对象.
创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
设置响应HTTP请求状态变化的函数.
发送HTTP请求.
获取异步调用返回的数据.
使用JavaScript和DOM实现局部刷新.

当前状态readystate
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
常用状态码status
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改）
————————————————
版权声明：本文为CSDN博主「a_Keri」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/a_Keri/article/details/79411312

面试题

CSS
1.一个盒子垂直水平居中有哪些方法？（2~3种方法）
方法1:宽度和高度已知的。
给父元素相对定位
给子元素绝对定位
left: 50%;top: 50%;
margin-left: 负的宽度一半。
margin-top: 负的高度一半；
方法2：宽度和高度自己未知
意思就是说子盒子本身还是有宽度和高度的，只是自己未知。
思路：
给父盒子相对定位
给子盒子绝对定位
top、right、bottom、left全为0
margin: auto;
2.flex怎么使用，flex:1代表了什么（三个属性）
https://www.cnblogs.com/LangZ-/p/12703858.html
3.使用自适应布局的时候用rem,为什么可以实现自适应布局，在不同的手机端表现得是什么
rem是基于html的字体大小来进行布局的（问：不同的移动端是有不同的html字体大小吗，在拿到设计图是怎么计算的）除以16px(问：16px是基于什么来的)
4.http计算机基础相关
三次握手四次挥手
常见状态码
vue
axios的底层是怎么实现的，用什么实现的（配套AJAX问题）
（1）axios 原理还是属于 XMLHttpRequest， 因此需要实现一个ajax。
（2） 还需要但会一个promise对象来对结果进行处理
5.vue的生命周期
mounted和created的区别：
created的时候，他的html的节点都没有渲染出来
mounted的时候，可以进行数据请求，进行数据绑定（此时HTML的结构已经出来了，可以将数据绑定到DOM结构上）
6.组件传值分为（父传子、子传父、兄弟组件之间传值）
7.keep-alive是怎么使用的
缓存、会多出来几个生命周期
8.VUE双向绑定的原理
数据劫持objectDefinepropotype
数据劫持之后，通过发布订阅模式
JS
9.跨域是有哪几种方式实现的（什么是跨域，限制了什么，不同源的话会进行什么策略）
跨域的方式有：jsonP、nigix的代理、websocket以及php端修改header。
代理设置了location的哪一项？
websocket是怎么进行跨域的？
php修改header为很么修改了就想能跨域了？
10.this指向
普通函数和箭头函数的this，以及怎么改变普通函数里的this指向
11.apply、call、bind,区别
apply怎样实现bind
12. 如何创建一个节点，增加一个节点，删除一个节点，替换一个节点

创建节点：createElement(),该方法的参数是节点名称，比如button就是创建一个按钮，a就是创建一个超链接，以此类推

创建文本节点：createTextNode()

添加节点：appendChild()

删除节点：removeChild()

替换节点：repalceChild()

插入节点：insertBefore()

13. 什么是闭包

js中作用域分两种，全局变量和函数内声明的局部变量，当然如果在函数内没有用var声明变量的话就是全局变量，那么问题来了，如果出了声明局部变量的代码块想使用该局部变量怎么办呢，这时候就需要用到闭包了

所以，简单的说，闭包就是为了能跟读取函数内声明的局部变量。

闭包的形式是一个函数返回另一个函数，而返回的函数使用了该函数内部的变量，然后把外层函数的执行结果赋值给一个变量，再执行该变量。
ES6
12.promise和async await有什么区别
await有什么特点
这两个方法报错了怎么抓取