前端面试题偷熊计划

一、HTML篇1.语义话的目的是什么？答：用正确的标签做正确的事。

提高代码的可读性，页面内容结构化，便于开发人员的代码编写，同时提高的用户体验；有利于SEO，便于搜索引擎爬虫爬取有效信息。

存储的大小cookie4kb左右session5M

易用性cookie需自己封装session可以接受原生接口

关于storage使用的方式可以查看storage传值

二、CSS篇1.css有哪些基本的选择器，执行先后顺序？类选择器（class）、标签选择器、ID选择器!important>内联样式（非选择器）>ID选择器>类选择器>标签选择器>通配符选择器（*）

4.常用的块与行属性内标签有哪些？有什么特征块标签：div、h1~h6、ul、li、table、p、br、form。特征：独占一行，换行显示，可以设置宽高，可以嵌套块和行行标签：span、a、img、textarea、select、option、input。特征：只有在行内显示，内容撑开宽、高，不可以设置宽、高（img、input、textarea等除外）。

5.清除浮动父级div定义overflow:hidden（如果父级元素有定位元素超出父级，超出部分会隐藏，）给浮动元素父级增加标签（由于新增标签会造成不必要的渲染，不建议使用）伪元素清除浮动：给浮动元素父级增加.clearfix::after（content:‘’;display:table;clear:both;）（不会新增标签，不会有其他影响，）6.CSS3新特征圆角（border-radius）阴影（box-shadow）文字特效(text-shadow)线性渐变（gradient）变换(transform)更多的CSS选择器更多背景设置（background）色彩模式（rgba）伪元素（::selection）媒体查询（@media）多栏布局（column）图片边框（border-image）7.介绍一下盒模型答：

盒模型由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。盒模型分为IE盒模型和W3C标准盒模型。W3C标准盒模型又叫content-box，元素宽度/高度由border+padding+content组成。（属性width,height只包含内容content，不包含border和padding）IE盒模型又叫border-box，元素宽度/高度由content组成。（属性width,height包含border和padding，指的是content+padding+border。）PS：盒模型这个东西需要多理解。。。

8.CSS中有哪些长度单位？绝对长度单位：px百分比:%相对父元素字体大小单位:em相对于根元素字体大小的单位:rem相对于视口*宽度的百分比（100vw即视窗宽度的100%）:vw相对于视口*高度的百分比（100vh即视窗高度的100%）:vh9.display:none和visibility:hidden的区别display:none：隐藏元素，在文档布局中不在给它分配空间（从文档中移除），会引起回流（重排）。visibility:hidden:隐藏元素，但是在文档布局中仍保留原来的空间（还在文档中），不会引起回流（重绘）。

10.用CSS实现长宽为浏览器窗口一半的正方形已知父元素宽高用%width:50%;padding-top:50%;background-color:red;用vwwidth:50vw;height:50vh;background-color:red;11.用CSS实现高度为0.5像素的线条这个可以用伪类来实现

.line::before{display:block;content:"";height:1px;left:-50%;position:absolute;background-color:#333333;width:200%;//设置为插入元素的两倍宽高-webkit-transform:scale(0.5);transform:scale(0.5);box-sizing:border-box;}12.用CSS实现三角形向上

width:0;height:0;border-left:30pxsolidtransparent;border-right:30pxsolidtransparent;border-bottom:30pxsolidred;13.伪类和伪元素的区别伪类

伪元素

区别

伪类只能使用“：”，伪元素既可以使用“:”，也可以使用“::”伪元素其实相当于伪造了一个元素，伪类没有伪造元素，例如first-child只是给子元素添加样式而已。（本质区别就是是否抽象创造了新元素）13.重绘和重排是什么？如何避免？重排：当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。重绘：当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，所以重绘跳过了创建布局树和分层的阶段。

重排需要重新计算布局树，重绘不需要，重排必定发生重绘，但是涉及到重绘不一定要重排。涉及到重排对性能的消耗更多一些。

触发重排的方法：页面初始渲染、添加/删除可见的DOM元素、改变元素位置、改变元素尺寸、改变元素内容、改变元素字体大小、改变浏览器窗口尺寸、设置style属性的值等。避免重排的方式：样式集中改变、使用absolute或fixed脱离文档流。

三、JS篇1.ES6新特性？新增块级作用域let定义变量和const定义常量变量的解构赋值模板字符串（‘${}’）默认参数（key=value）箭头函数（=>）扩展运算符（…）模块（import/export）类（class/extends）PromiseProxySymbol了解关于es6的更多知识可以看阮一峰——ES6入门教程2.闭包的理解理解：主要是为了设计私有的方法和变量。优点：可以避免全局变量造成污染。缺点：闭包会常驻内存，增加内存使用量，使用不当会造成内存泄漏。特征：（1）函数嵌套函数。（2）在函数内部可以引用外部的参数和变量。（3）参数和变量不会以垃圾回收机制回收。

3.call()、apply()、bind（）的区别详情请看call()、apply()、bind（）重新定义this的区别

4.原型，原型链主要是还是实现继承与扩展对象。每个函数对象都有一个prototype属性，这个属性就是函数的原型对象。原型链是JavaScript实现继承的重要方式，原型链的形成是真正是靠__proto__而非prototype。

所有的引用类型（包括数组，对象，函数）都有隐性原型属性（proto）,值也是一个普通的对象。所有的引用类型的proto属性值都指向构造函数的prototype属性值。构造函数new出来一个对象，而每个对象都有一个constructor属性，该属性指向创建该实例的构造函数。实例对象通过__proto__或者object.getPrototype的方法获取原型。原型链其实就是有限的实例对象和原型之间组成有限链，就是用来实现共享属性和继承的。

后退/刷新：GET无害，POST数据会被重新提交。书签：GET产生的URL地址可以被收藏为书签，而POST不可以。数据：GET一般是用来获取数据，POST提交数据。数据类型：GET只允许ASCII字符,POST无限制。数据大小：GET大小有限制（一般来说1024字节）,POST理论上来说没有大小限制。安全性：GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。可见性：GET参数通过URL传递对所有人可见，POST数据不可见。历史保留：GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。9.forEach和map的区别forEach没有返回值，map返回新的数组。map创建新数组，forEach不修改原数组。

10.JS基本数据类型的比较

11.对象的继承常见的：

原型链继承借用构造函数继承原型链+借用构造函数的组合继承（使用call或applay方法）ES6中class的继承（class可以通过extends关键字实现继承）12.简述一下你理解的面向对象面向对象是基于万物皆对象这个哲学观点.把一个对象抽象成类，具体上就是把一个对象的静态特征和动态特征抽象成属性和方法，也就是把一类事物的算法和数据结构封装在一个类之中,程序就是多个对象和互相之间的通信组成的。

面向对象具有封装性,继承性,多态性。

封装：隐蔽了对象内部不需要暴露的细节,使得内部细节的变动跟外界脱离,只依靠接口进行通信.封装性降低了编程的复杂性。继承：使得新建一个类变得容易,一个类从派生类那里获得其非私有的方法和公用属性的繁琐工作交给了编译器。多态：继承和实现接口和运行时的类型绑定机制所产生的多态，使得不同的类所产生的对象能够对相同的消息作出不同的反应,极大地提高了代码的通用性.。

13.==和===的区别相同点：都是判定两个值是否相等不同点：==只比较值不比较类型，而===会判断类型

14.数组有哪些方法详细可以看数组一些常用的方法

15.普通的数组去重（笔试一般都会有）在不涉及去重对象、NaN等情况下。

IndexOf()双重for循环es6的[…newSet()]filter()sort()面试随便写一两种就行、项目直接用newSet()（方便）注：如果有多维数组如[1,[2],[3,[2,3,4,5]]]先扁平化再去重,用Array.flat(Infinity)实现扁平化。

16.Promise含义：异步编程的一种解决方案，用来解决回调地狱。三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）（Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。）

resolved函数作用：将Promise对象的状态从“未完成”变为“成功”（即从pending变为resolved）。reject函数的作用：将Promise对象的状态从“未完成”变为“失败”（即从pending变为rejected）。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。then:Promise实例添加状态改变时的回调函数。可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。

缺点：无法取消Promise，一旦新建它就会立即执行，无法中途取消。如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。

更多详情请看Promise对象

21.排序方式冒泡排序：比较所有相邻元素,如果第一个比第二个大，则交换它们。选择排序：找到数组中的最小值，选中它并将其放置在第一位。插入排序：从第二个数开始往前比，比它大就往后排。归并排序：把数组劈成两半，再递归地对数组进行“分”操作，直到分成一个个单独的数。快速排序：从数组中任意选择一个基准，所有比基准小的元素放到基准前面，比基准大的元素放到基准的后面。22.数组操作方法会改变原数组会改变：push()，pop(),shift(),unshift(),splice(),sort(),reverse()。不变：concat(),split(),slice()。

24.如何判断一个对象是否存在？直接!XXX这样会报错，因为没有定义

建议使用typeof运算符，判断XXX是否有定义。

4.如何解决跨域什么是跨域？浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域常见的：1、JSONP跨域原理：利用script标签可以跨域请求资源，将回调函数作为参数拼接在url中。后端收到请求，调用该回调函数，并将数据作为参数返回去，注意设置响应头返回文档类型，应该设置成javascript。2、跨域资源共享（CORS）目前最常用的一种解决办法，通过设置后端允许跨域实现。3、nginx反向代理跨域限制的时候浏览器不能跨域访问服务器，node中间件和nginx反向代理，都是让请求发给代理服务器，静态页面面和代理服务器是同源的，然后代理服务器再向后端服务器发请求，服务器和服务器之间不存在同源限制。4、WebSocket协议跨域5、proxy前端配置一个代理服务器（proxy）代替浏览器去发送请求:因为服务器与服务器之间是可以通信的不受同源策略的影响。详细可看九种常见的前端跨域解决办法

5.网页从输入url到页面加载发生了什么DNS解析TCP连接发送HTTP请求服务器处理请求并返回HTTP报文浏览器解析并渲染页面————>1.解析文档构建dom树。2.构建渲染树。3.布局与绘制渲染树。连接结束6.HTTP传输过程含义：从建立连接到断开连接一共七个步骤，就是三次招手四次挥手

TCP建立连接浏览器发送请求命令浏览器发送请求头服务器应答服务器回应信息服务器发送数据断开TCP连接7.浏览器如何渲染页面的？浏览器解析html源码，将HTML转换成dom树，将CSS样式转换成stylesheet（CSS规则树），浏览器会将CSS规则树附着在DOM树上，并结合两者生成渲染树（RenderTree）生成布局（flow），浏览器通过解析计算出每一个渲染树节点的位置和大小，在屏幕上画出渲染树的所有节点合成绘制生成页面。8.对MVC和MVVM的理解M:model(数据模型)，V：view(视图)，C：controller(逻辑处理)，VM：(连接model和view)MVC:单向通信。必须通过controller来承上启下。MVVM：数据双向绑定，数据改变视图，视图改变数据。

9.深拷贝，浅拷贝浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

深拷贝：将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

总而言之，浅拷贝改动拷贝的数组原数组也会变（慎用！项目中很多地方共用的数组都会变）。深拷贝修改新数组不会改到原数组。实现方法浅拷贝：

Object.assign()函数库lodash的_.clone方法es6的展开运算符…Array.prototype.concat()Array.prototype.slice()letarr=[{name:"uzi"}]1.letarr1=Object.assign({},arr);arr1[0].name="xiaoming"2.letarr2=_.clone(arr);arr2[0].name="mlxg"3.letarr3=[...arr]arr3[0].name="xiaohu"4.letarr4=arr.concat()arr4[0].name="zitai"5.letarr5=arr.slice();arr5[0].name="clearLove"console.log(arr[0].name==arr[1].name==arr[2].name==……);//truearr[0].name="clearLove"深拷贝：

节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。应用场景：window对象的resize、scroll事件拖拽时候的mousemove射击游戏中的mousedown、keydown事件文字输入、自动完成的keyup事件

vue中使用详情可以看vue中使用防抖和节流

11.性能优化举例：

babel将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法。

13.git和svn的区别SVN是集中式版本控制系统，版本库是集中放在中央服务器的，首先要从中央服务器哪里得到最新的版本，干完活后，需要把自己做完的活推送到中央服务器。集中式版本控制系统是必须联网才能工作（如果在局域网还可以，带宽够大，速度够快，如果在互联网下，如果网速慢的话，就纳闷了）

Git是分布式版本控制系统，没有中央服务器的，每个人的电脑就是一个完整的版本库，这样，工作的时候就不需要联网了，因为版本都是在自己的电脑上。自己在电脑上改了文件A，其他人也在电脑上改了文件A，这时，只需把各自的修改推送给对方，就可以互相看到对方的修改了。

14.webSocketwebSocket：可以让服务器主动向客户端发送消息，适合开发聊天室，多人游戏等协作应用。

WebSocket协议是基于TCP的一种新的网络协议。在WebSocketAPI中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

ES6模块语法是JavaScript模块的标准写法，坚持使用这种写法，取代Node.js的CommonJS语法。使用import取代require()。

//CommonJS的写法constmoduleA=require('moduleA');constfunc1=moduleA.func1;constfunc2=moduleA.func2;//ES6的写法import{func1,func2}from'moduleA';使用export取代module.exports。

//commonJS的写法varReact=require('react');varBreadcrumbs=React.createClass({render(){return