web前端面试100问.docx
《web前端面试100问.docx》由会员分享，可在线阅读，更多相关《web前端面试100问.docx（47页珍藏版）》请在冰点文库上搜索。
web前端面试100问
面试造火箭，工作拧螺丝！
在技术圈毕竟只有百分之一的人能进入BAT，百分之九九的小伙伴只能在普通公司做这普通的事情，厌烦哪些标题党，我们抛开那些高大上的台词，回归到面试的本质。
本课程帮助小伙伴们快速梳理知识，不会设计到具体的很细节的知识点，关注面试本身。
公司一般会从以下5个方面考察一个人的能力，本课程的100问是总结了最近2-3年常问的面试题，适合初中级前端工程师。
1、HTML（5）和CSS3方面
1.前端与后端数据交互的格式有哪些，为什么大部分现在都用json而不用xml。
答：
XML：
知了堂3岁
JSON：
{name:
”知了堂”,age:
3}
JSON书写方便节省字节，更轻量，前后台都有直接解析JSON的方法（JSON.stringfity/parse）使用方便。
2.Flex布局熟悉吗，说几个常用的属性。
答：
这个几乎每天都在用，还是挺熟悉的。
display：
flex
align-items多个
align-content：
单个
justify-content
justify-items
flex-direction
flex-wrap：
flex-basic：
初始盒子宽度flex
flex-grow：
增长因子2004*40=1601,1,1,21/5*40flex
flex-shrink:
缩减因子20060*4=240
3.说一下CSS盒模型
答：
CSS的盒模型包含了一下几个内容margin,padding,border,content。
在计算盒子宽高的时候，IE和Chrome会有一些区别，IE算到border，Chrome的宽度只包含content区域，因此CSS3提供了box-sizing这个属性来修改。
4.CSS常用选择器，选择器权重问题。
答：
*（has，not，target，root。
。
。
。
）通配符，ID，class，attr属性，element，子代（>+~）,
UI状态伪类选择器（hover,active,link,seceted..，checked），
结构性伪类选择器（nth-child,fist-child,last,nth-of-type...before,after....）
!
important>style>id>class>elemnet>伪类和属性
5.请用5种方式实现元素垂直居中。
答：
1、flex
2、Tranform
3、定位+margin负值（知道子节点宽高）
4、定位+margin:
auto
5、JS动态计算top、left值
6.什么是BFC？
垂直margin重叠是为什么？
怎么解决这个问题？
答：
概念：
BFC全称BlockFormattingContext，中文意思为块级格式上下文。
通俗的来说：
BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子内部的元素无论如何翻江倒海，都不会影响到外部。
转换为BFC的理解则是：
BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。
比如清除浮动）并且在一个BFC中，块元素与行元素都会垂直的沿着其父元素的边框排列。
如何触发BFC
1.浮动元素，float除none以外的值
2.position的值不为static或者relative
3.display不为none
4.overflow除了visible以外的值
BFC的应用
1.解决浮动塌陷问题
2.自适应两栏布局（我们还可以运用BFC可以阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。
方法：
给没有浮动的元素加overflow：
hidden。
）
3.解决设置margin值重叠问题。
总结：
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
它规定了元素与其他元素的关系和相互作用。
7.什么是浮动，有什么作用，有何副作用，以及如何清除浮动？
答：
浮动是使用给节点添加float属性，最初的设计是用来实现文字环绕的。
添加了float的节点脱离文档流，同时触发节点的BFC，让节点往一个方向靠，并排成一行。
当一个父节点的子节点全部浮动，就会造成父节点高度塌陷，
解决的办法首先是可以给父节点主动添加高度值，再者利用只要有一个子节点不浮动原理来添加一个不浮动的节点（通常使用伪元素before，after），再者还可以触发父节点的bfc，常用的定位，或者overflow：
hidden。
8.CSS里面有哪些相对单位？
都是相对什么的？
答：
REM,EM,VW,VH等
REM：
相对于根节点html的font-size
EM：
父节点的font-size
VW：
视口的宽度为100VW，相对于把视口分为100份。
VH：
视口高度为100VH，同理
以上单位都可以在移动端做页面适配，但通常使用REM和VW
9.fixed是相对于谁定位的？
如果加上transform会出现问题吗？
答：
fixed定位相对于浏览器视口来定位的
添加上transform以后，fixed定位会失效。
如果fixed元素的祖先有transform属性,则fixed元素会相对与这个祖先计算,而不是视口。
10.为什么不推荐用style内联元素？
内联元素有什么缺点？
（css文件可以缓存）
答：
首先是style是节点的属性，不能被缓存；代码的可读性和可维护性相对弱一些，特别是多人协作开发的时候。
但是如果一个页面的style样式足够少的时候，可以使用style元素，因为一次请求最多携带14K的数据，如果足够小，还可以节约一次请求。
11.简单描述http与https协议，以及为什么要三次握手？
什么是长链接
答：
http与https都是目前主流传输协议。
目前http协议已经发展到2.0阶段，支持长链接，断点续传，cache缓存策略，多路复用，服务器推送等。
https相对于http更安全，增加了证书SSL加密，端口是433。
客户端SYN=1,Seq=x，服务端接受到后，服务端就知道了，有一个客户端要链接我
，然后服务器就会开启一个TCPsocket的端口，然后返回数据给前端也是SYN=1,SEQ=Y,ACK=x+1，客户端接受到后，在发一个seq，和ACK+1.主要是为了防止开启无用的链接，或者网络延迟丢包，服务器无法确定到底客户端有没有收到消息
在使用长连接的情况下，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，客户端再次访问这个服务器时，会继续使用这一条已经建立的连接。
Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。
实现长连接需要客户端和服务端都支持长连接。
为何需要长链接?
长连接可以省去较多的TCP建立和关闭的操作，减少浪费，节约时间。
12.http常见状态码有哪些？
301和302的区别是什么？
304是指什么？
答：
404：
找不到资源；
500：
服务器内部错误；
200：
请求成功，并返回数据；
301：
永久重定向；
302：
临时移动，可使用原有URI；
304：
资源未修改，可使用缓存；
400：
请求语法错误（一般为参数错误）；
403：
没有权限访问。
。
。
等
13.浏览器页面渲染的流程是什么（输入url后页面发生什么）？
答：
首先dns解析IP，建立tcp链接下载资源，构建dom树，当遇到link标签，会下载并执行解析css（不会阻止dom树的构建）当遇到script标签的是，dom树构建会暂停，下载并执行完js才会继续（defer（下载延迟执行），async（异步下载并执行））然后再布局和绘制（layout,paint）最后在render
14.什么是reflow与repain？
哪些操作会触发reflow，如何避免
答：
reflow：
回流，当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。
repain：
重绘，当元素的样式（布局不发生）发生改变的时候。
以下常见操作都会触发：
浏览器窗口大小改变
元素尺寸、位置、内容发生改变
元素字体大小变化
添加或者删除可见的dom元素
激活CSS伪类（例如：
:
hover）等
尽量减少DOM操作。
15.HTML5常用的API有哪些？
你用过哪些？
答：
video、audio，获取dom的方式（queryselector），websocket
Canvas，svg，requestAnimationFrame，Geolocation，stroage，notification，OrientationAPI用于检测手机的摆放方向等
16.请列举出几个常见的浏览器兼容性问题？
答：
现在市面上IE678基本已经停止使用了，所以尽量不要说这方面的兼容性。
1、不同浏览器的默认margin和padding不一致
2、图片的默认间距不一致
3、获取视口的宽高window.innerheight/width
4、CSS3的动画，过渡，渐变，flex也有
5、Canvas，SVG
6、IE9以下不能的opacity，使用filter:
alpha（opacity=50）;
7、event.offsetX/Y
8、绑定事件IE9才支持
17.什么是浏览器缓存（知道什么是 强缓存 和 协商缓存）？
答：
当浏览器访问过后的资源，会被浏览器缓存的本地，当下次在访问页面的时候，如果没有过期，直接读取缓存，加快浏览器的加载效率。
http缓存机制：
1、Expires：
通过设置最大缓存时间，当时间超过了就去服务器下载，
2、http1.1，cache-control：
max-age=time，当time过期后，检测etag带上etag往服务器发请求，如果etag没变，直接告诉浏览器读本地缓存，如果没有etag就会检测Last-Modified，判断如果上一次更改的时候，距离本次访问时间比较久，说明文件没有发生改变，返回304。
强缓存就是当前访问时间还在设置的最大时间范围内。
协商缓存就是时间过了，通过检查etag或者last-modifed来使用缓存的机制。
18.说一下浏览器垃圾回收机制
答：
老：
标记清除算法，GC会检测当前对象有没有被变量所引用，如果没有就回收。
新：
Scavenge，把内存空间分为两部分，分别为From空间和To空间。
当一个空间满了以后，会把空间中活动对象转移到另外一个空间，这样互换。
2、JS方面（ES6/ES7）
1.在JS中什么是面向对象程序设计，面向对象设计优点?
答：
在JS中面向对象更多说的是通过构造函数或者class封装一个独立的功能，以达到代码的复用。
面向对象的三个特点：
封装：
通过对象把属性和方法封装起来，相似对象的话采用构造函数或者类new得到。
继承：
通过混合继承（构造函数和原型）的方式，可以达到属性和方法的复用。
多态：
通过对象属性覆盖，可以让继承的对象拥有更多行为。
面向对象设计更多的是组织代码的方式，能提升开发效率与代码的可维护性。
2.什么是原型、原型链，有什么作用？
答：
原型：
每一个对象都与另一个对象相关联，那个关联的对象就称为原型。
例如：
函数Person有一个属性prototype，指向一个对象，对于普通函数来说没多意义，对于构造函数就有作用了，当使用new操作符时，会把Person.prototype（原型对象）赋值给实例的__proto__（原型实例）属性。
JS有一个原型查找机制，把原来定义在实例上的方法，放到原型对象上去，通过构造函数的new操作，会把原型对象赋值给实例的__proto__属性，那么当使用返回的实例去调用某一个方法的时候，如果实例本身上没有，就去自动去实例的__proto__上去查找，这样达到方法的复用，减少内存开销。
原型链：
每一个对象，都有一个原型对象与之关联，这个原型对象它也是一个普通对象，这个普通对象也有自己的原型对象，这样层层递进，就形成了一个链条，这个链条就是原型链。
通过原型链可以实现JS的继承，把父类的原型对象赋值给子类的原型，这样子类实例就可以访问父类原型上的方法了。
1
2Person.prototype.constructor==Person
3
4Person.prototype.__proto__.constructor==Object
5
6Person.prototype.__proto__==Object.prototype
7
8Object.prototype.__proto__==null
9
3.如何实现继承（ES5/ES6）？
答：
10functionAnima（name）{//父类
11this.name=name;
12}
13
14Anima.prototype.sayName=function（）{
15console.log（this.name）
16}
17
18functionPerson（name,age）{//子类
19Anima.call（this,name）;
20this.age=age;
21}
22
23Person.prototype=Object.create（Anima.prototype,{
24constructor:
{
25value:
Person,
26enumerable:
false
27}
28}）
29
30
31varp=newPersion（"haha",12）;
32
33Extends//ES6
4.什么是作用域以及作用域链？
答：
作用域是指程序源代码中定义变量的区域，限定一个变量可访问的范围的，作用域的本质是对象。
在JS采用的词法作用域，在书写代码的时候（定义函数的时候），作用域就已经确定好了。
在ES6环境下，包含3个作用域，全局globel，函数作用域，快级作用域（{}）（eval）
作用域链：
由多级作用域对象，逐级引用的链式结构。
本质为执行上下文的scope属性，存储所有的变量，包括局部与全局，控制变量的使用顺序。
varb=10;//1：
输出？
2：
改造代码输出10或20
（functionb（）{
b=20;
console.log（b）;
}）（）;
varb=10;
（functionb（b）{在这个函数b是一个常量，在函数b内部是可以使用的，但是不能修改，如果加上usestrict严格模式就会报错。
window.b=20;
console.log（b）//输出10
}）（b）
vara=10;
（function（）{
console.log（a）
a=5
console.log（window.a）
vara=20;
console.log（a）
}）（）
5.什么是闭包，闭包的好处和坏处分别是?
答：
当函数可以记住并访问外部作用域时，就产生了闭包，那个外部作用域就称为闭包。
形成的原因：
外层函数的作用域对象无法释放。
作用：
保护一个变量，重用一个变量。
坏处：
使用不当，会造成内存泄漏。
大白话来解释：
函数A和函数B，当内部函数B引用了A的局部变量时，函数A称为闭包
原因是：
JS是词法作用域，B的作用域链上有对A执行环境的引用（这个执行环境用函数来表示），A的执行环境AO就不会回收。
for（vari=0;i<5;i++）{//改造代码，每间隔一秒输出0-4
setTimeout（（）=>{
console.log（i）;
},1000）
}
6.什么是this，this的常用方式有哪些？
如何改变this的指向？
答：
JS在运行过程中会产生执行上下文环境（context），context记录了包含函数在哪里被调用，作用域scope，this等信息。
this就是context的其中一个属性，会在函数的执行过程中使用。
This是在运行时候绑定的，它指代的上下文对象取决于函数调用的各种条件。
this提供了一种优雅的方式来隐式的传递一个对象的引用，所以在函数中使用this可以更加方便的复用函数。
1、全局使用this===window很少使用
2、函数当中在全局调用这个fn（）this===window
3、在方法当中使用this===调用当前这个函数的所在的对象啊
4、构造函数this执向的是new创建出来的实例对象啊
5、DOM事件处理函数中的this，指向当前的DOM节点
6、通过bind，call，apply操作符来显示的设置this的指向
bind：
绑定函数里面的this，返回新函数，
call，apply：
绑定并执行这个函数，前者传参是“，”隔开，后者是数组
7、ES6的箭头函数箭头函数没有自己的this，父作用域的this
varx=3;
varfoo={
x:
2,
baz:
{
x:
1,
bar:
function（）{
returnthis.x;
}
}
}
vargo=foo.baz.bar;
go（）?
foo.baz.bar（）?
//综合面试题
functionFoo（）{
Foo.a=function（）{
console.log
（1）
}
this.a=function（）{
console.log
（2）
}
}
Foo.prototype.a=function（）{
console.log（3）
}
Foo.a=function（）{
console.log（4）
}
Foo.a（）;
letobj=newFoo（）;
obj.a（）;
Foo.a（）;
7.手写bind，call，apply函数
答案：
以上都是Function原型上的方法。
Function.prototype.myCall=function（context,...args）{//绑定并执行
//执行函数
varfn=this;
context.fn=fn;
context.fn（...args）;
deletecontext.fn
}
Function.prototype.myBind=function（context）{//绑定返回新的执行函数
//判断调用者是不是函数
if（typeofthis!
='function'）{
thrownewError（"Error"）
}
//截取传递的参数
letargs=[...arguments].slice
（1）;
var_this=this;//保存一下当前的调用者
returnfunctionF（）{
return_this.apply（context,args.concat（[...arguments]））
}
}
8.什么是深、浅拷贝，请写出代码
答：
浅拷贝，就是复制一个对象，当对象的属性值没有引用类型的时候。
Object.assign迭代（for..infor..ofobject.enteries）扩展运算符等
反之如果对象中还有引用类型，连着引用类型一并拷贝称为深拷贝。
JSON对象的方法（会忽略到值为函数和null的属性），递归
functiondeepCopy（obj）{
//判断对象的类型
varnewObj=Array.isArray（obj）?
[]:
{};
if（obj&&typeofobj=="object"）{
//迭代
for（varkeyinobj）{
if（typeofobj[key]=='obj'）{
newObj[key]=deepCopy（obj[key]）
}else{
newObj[key]=obj[key]
}
}
}
returnnewObj
}
9.什么是Ajax，如何封装一个Ajax？
Get请求与Post请求的区别？
答：
Ajax的全称是异步的js与xml技术，通过它与后台服务器进行数据交换，可以使网页实现异步更新，言外之意是在不重新加载整个页面的情况下，对网页进行局部更新。
1.nexxmlhttprequset对象
2.open（method，url，false）
3.绑定redaystatechange事件
4.调用send方法，如果是post请求，可以传递参数
前端的请求方式除了常用Get和Post，还有update，delete，put等（restfulapi设计）
GET请求可被缓存，保留在浏览器历史记录中，请求的参数是直接跟在URL上，因此不应传递敏感数据。
GET请求有长度限制（2048字符）,IE和Safari浏览器限制2k;Opera限制4k;Firefox，Chrome限制8k。
GET请求通常只应当用于从后台获取数据。
POST请求不会被缓存，不会保留在浏览器历史记录中
POST请求对数据长度没有要求。
POST请求通常用于往后台提交数据。
10.说一些ES6、ES7新特性。
答：
let，count快级作用域；解构，从对象和数组中提取值；箭头函数；字符串模版；扩展运算符...；对象的简写；module；promise（async）；class；对原生对象的扩展（新增加了很多方法）；for-of（Object.keys,values,entries等）；Symbal（）；
不常用的proxy，reflect，generate函数
11.什么是Promise对象，如何使用？
答：
Promise是解决异步回调的ES语法的标准，通常用来解决异步嵌套和多异步同时完成回调等问题。
Promise是一个构造函数，相当于一个容器，把异步代码包裹在里面，promise有三个状态（pending（进行中）、fulfilled（已成功）和rejected（已失败））初始化为pending，当异步请求成功后调用resolve函数，状态从pending--->fulfilled，失败的时候调用reject，状态从pending--->rejected。
状态不可逆。
缺点：
书写麻烦，不能实现异步代码，同步执行的需求（配合async函数使用即可）
12.什么是跨域，解决跨域常用的方式有哪些？
答：
跨域是浏览器端行为，根据同源策略，当请求的协议、域名、端口只有一个不同，就会跨域，跨域是浏览器为了安全存在的机制，浏览
升级会员 