前端面试题目汇总

关于js

1.原型链
2.AJAX请求数据时解决缓存的办法
3.js的继承
4.简单谈谈事件冒泡和事件捕获
5.闭包什么时候会用到有什么好处
6.三目运算符
7.图表的使用
8.AJAX跨域如何解决
9.谈谈Promise的理解
10.递归
11.ES6

关于前端框架

1.angular和jquery有什么区别
2.三大框架的区别和特性，项目案列VUE REACT ANGULAR
3.三大框架实战演练
4.angular路由
5.俩个angular之间如何传值
6.VUE的写法

关于JAVASCRIPT自动化构建工具

1.GULP GRUNT WEBPACK的了解
2.搭建项目步骤的演示

移动端兼容性问题

1.IE opacity不起作用解决办法
2.Placeholder不起作用解决办法
3.input被键盘遮挡解决办法
4.audio在微信里音乐无法自动播放

关于CSS3 HTML5

1.CSS3 HTML5新属性
2.LESS SASS和css的区别
3.rem和px的区别
4.微信登录第三方支付分享
5.地图 Geolocation
6.WEbsockt

关于版本控制系统

1.GIT

更新/提交代码

cd kake/ 项目名
sh.git
pull／push
update_1／描述用英文并用下划线分割
注：更新之前可使用git status查看是否有修改，git diff查看所修改文件

更新完 source下面 npm run all

修改host文件

sudo vim /ect/hosts
i 键盘修改
Esc :
wq 保存并退出

解决冲突

CONFLICT
cd 目录名
git add 文件冲突路径
kake/frontend/less/detail/index.less

2.SVN

关于数据结构与算法## box-sizing: border-box的作用

当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。
例如：
<div class="box">举个例子</div>
.box {

width: 500px;     
height:100px;  
border: 1px solid #000;
-webkit-box-sizing: border-box;     
    -moz-box-sizing: border-box;
              box-sizing: border-box;

}
如果这时候你加上一个内边距属性，padding: 10px;
这个div不会撑开，即你所见的边框位置没有任何变动，但是“举个例子”这句话会和div边框有10px的间距。
一般在写页面的时候用这个属性就不会再考虑边框和内边距会改变整体所占宽度，即不用再根据盒子模型再去计算，省去很多麻烦。

在不使用第三个变量的情况下使俩个变量的值互换

算术运算
int a,b;
a=10;b=12;
a=b-a; //a=2;b=12
b=b-a; //a=2;b=10
a=b+a; //a=10;b=10
它的原理是：把a、b看做数轴上的点，围绕两点间的距离来进行计算。
具体过程：第一句“a=b-a”求出ab两点的距离，并且将其保存在a中；第二句“b=b-a”求出a到原点的距离（b到原点的距离与ab两点距离之差），并且将其保存在b中；第三句“a=b+a”求出b到原点的距离（a到原点距离与ab两点距离之和），并且将其保存在a中。完成交换。
此算法与标准算法相比，多了三个计算的过程，但是没有借助临时变量。（以下称为算术算法）

this的指向：

1、作为普通函数调用（this指向全局对象window对象）
2、作为对象的方法调用（this指向该对象）
3、构造器调用（this指向用new返回的这个对象）
4、call、apply、bind的调用（this指向第一个参数对象）

new操作符具体干了什么呢?

1、创建一个新对象
2、将构造函数的作用域赋给新对象（因此this就指向了这个新对象）
3、执行构造函数中的代码（为这个新对象添加属性）
4、返回新对象

null和undefined的区别？

1、null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。
2、undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。
3、null表示”没有对象”，即该处不应该有值。

call、apply、bind的区别

三者都是用来改变函数的this对象的指向的。
三者第一个参数都是this要指向的对象，也就是想指定的上下文。
call 传入的参数数量不固定，第二部分参数要一个一个传，用，隔开。
apply 接受两个参数，第二个参数为一个带下标的集合，可以为数组，也可以为类数组。
bind 是返回一个改变了上下文的函数副本，便于稍后调用；apply 、call 则是立即调用。
本地存储

sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
具体参见：本地存储sessionStorage与localStorage

cookie 和session

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗，考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。每次请求一个新的页面的时候Cookie都会被发送过去，与服务器进行交互。

XML和JSON的区别？

1、数据体积方面。
JSON相对于XML来讲，数据的体积小，传递的速度更快些。
2、数据交互方面。
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
3、数据描述方面。
JSON对数据的描述性比XML较差。
4、传输速度方面。
JSON的速度要远远快于XML。

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

调用localstorge、cookies等本地存储方式

线程与进程的区别

1、一个程序至少有一个进程,一个进程至少有一个线程.
2、线程的划分尺度小于进程，使得多线程程序的并发性高。
3、进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
4、线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
5、从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

渐进增强和优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

性能优化

网页内容
减少 http请求次数
减少 DNS查询次数
避免页面跳转
缓存 Ajax
延迟加载
提前加载
减少 DOM元素数量
避免 404
服务器
使用CDN(内容分发网络)
添加Expires或Cache-Control报文头
Gzip压缩传输文件
CSS
将样式表置顶
用代替@import
JavaScript
把脚本置于页面底部
使用外部JavaScript和CSS
精简JavaScript和CSS
去除重复脚本
减少DOM访问
图片
优化图像
优化CSS Spirite
不要在HTML中缩放图片
favicon.ico要小而且可缓存

如何解决跨域问题?

jsonp、CORS、document.domain+iframe、window.name、window.postMessage

jsonp的原理就是利用了<script>标签可以链接到不同源的js脚本，来到达跨域目的。利用页面上 script 标签可以跨域，并且其 src 指定的js脚本到达浏览器会执行的特性，我们可以进行跨域取得数据

请解释一下 JavaScript 的同源策略

。

这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。

指一段脚本只能读取来自同一来源的窗口和文档的属性。

哪些操作会造成内存泄漏？

1、内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
2、垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
3、setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

Javascript垃圾回收方法

1、标记清除：这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。

2、引用计数：引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。

事件、IE与火狐的事件机制有什么区别？如何阻止冒泡？

事件处理机制：IE是事件冒泡、firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件。

阻止冒泡：ev.stopPropagation()

说说严格模式的限制

变量必须声明后再使用
函数的参数不能有同名属性，否则报错
禁止this指向全局对象
不能使用with语句
增加了保留字
arguments不会自动反映函数参数的变化
设立”严格模式”的目的：

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

消除代码运行的一些不安全之处，保证代码运行的安全；

提高编译器效率，增加运行速度；

为未来新版本的Javascript做好铺垫。

请解释什么是事件代理

事件代理（Event Delegation），又称之为事件委托。即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能。

Event Loop、消息队列、事件轮询

缓存

浏览器缓存（Browser Caching）是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，

http缓存

http缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下，浏览器可以根据协议头判断从服务器端请求文件还是从本地读取文件
判断expires，如果未过期，直接读取http缓存文件

ES6

ES6的了解

es6是一个新的标准，它包含了许多新的语言特性和库，是JS最实质性的一次升级。比如’箭头函数’、’字符串模板’、’generators(生成器)’、’async/await’、’解构赋值’、’class’等等，还有就是引入module模块的概念。

箭头函数可以让this指向固定化，这种特性很有利于封装回调函数
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作Generator函数。

async/await是写异步代码的新方式，以前的方法有回调函数和Promise。
async/await是基于Promise实现的，它不能用于普通的回调函数。
async/await与Promise一样，是非阻塞的。
async/await使得异步代码看起来像同步代码，这正是它的魔力所在。

说说你对Promise的理解

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件监听——更合理和更强大。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

Promise对象有以下两个特点:

对象的状态不受外界影响，Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和Rejected（已失败）
一旦状态改变，就不会再变，任何时候都可以得到这个结果。
说说你对AMD和Commonjs的理解

CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数。

AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

Gulp、Webpack比较

Gulp
1、Gulp就是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能的一个前端自动化构建工具。
2、Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。
3、Gulp是通过task对整个开发过程进行构建。

Webpack
1、当下最热门的前端资源模块化管理和打包工具
2、可以很好的管理模块以及各个模块之间的依赖
3、对js、css、图片等资源文件都支持打包
4、有独立的配置文件webpack.config.js
5、可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
6、可以生成优化且合并后的静态资源

两大特色：1、代码可以自动完成编译。2、loader 可以处理各种类型的静态文件，并且支持串联操作

CSS

display:none和visibility:hidden的区别？

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

position:absolute和float属性的异同

A：共同点：
对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

B：不同点：
float仍会占据位置，position会覆盖文档流中的其他元素。

box-sizing属性

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

position的值

static 默认值。没有定位，元素出现在正常的流中
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
absolute 生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。
fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
CSS3新特性

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器多背景 rgba
在CSS3中唯一引入的伪元素是::selection.
媒体查询，多栏布局
border-image

CSS sprites

CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了http2。
解释下浮动和它的工作原理？清除浮动的技巧

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。
2.使用overflow。
设置overflow为hidden或者auto，给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

box:after{

content:".";
height:0;
visibility:hidden;
display:block;
clear:both;

}
浮动元素引起的问题

1、父元素的高度无法被撑开，影响与父元素同级的元素
2、与浮动元素同级的非浮动元素（内联元素）会跟随其后
3、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

HTML

说说你对语义化的理解

1、去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2、有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4、便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

1、<!DOCTYPE> 告知浏览器的解析器用什么文档标准解析这个文档。
2、严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
3、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4、<!DOCTYPE> 不存在或格式不正确会导致文档以混杂模式呈现。

你知道多少种Doctype文档类型？

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

HTML与XHTML——二者有什么区别

1、所有的标记都必须要有一个相应的结束标记
2、所有标签的元素和属性的名字都必须使用小写
3、所有的XML标记都必须合理嵌套
4、所有的属性必须用引号””括起来
5、把所有<和&特殊符号用编码表示
6、给所有属性赋一个值
7、不要在注释内容中使“–”
8、图片必须有说明文字

html5有哪些新特性

语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
拖拽释放(Drag and drop) API
本地离线存储
表单控件，calendar、date、time、email、url、search

一个完整的URL包括以下几部分

http://www.hzzly.net:8080/new...

1、协议部分
2、域名部分
3、端口部分
4、虚拟目录部分：从域名后的第一个“/”开始到最后一个“/”为止
5、文件名部分：从域名后的最后一个“/”开始到“？”为止
6、参数部分：从“？”开始到“#”为止之间的部分
7、锚部分：从“#”开始到最后

GET和POST的区别

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在1024字节，Get是通过地址栏来传值。

POST：一般用于修改服务器上的资源，对所发送的信息没有限制。（常用于发送表单数据，新建、修改等），Post是通过提交表单来传值。

数组去重

建一个空对象和空数组，循环遍历需要去重的数组，判断对象有没有此属性，没有的话就给对象添加此属性，并向空数组中push这个值。

//es5
function unique(arr){

var obj = {}
var result = []
for(var i in arr){
    if(!obj[arr[i]]){
        obj[arr[i]] = true;
        result.push(arr[i]);
    }
}
return result;

}
//es6
[...new Set(arr)]

冒泡排序

相邻两个对比，最后把最大的排到了最后，重复此过程。

function bubbleSort(arr) {

var len = arr.length;
for (var i = 0; i < len; i++) {
    for (var j = 0; j < len - 1 - i; j++) {
        if (arr[j] > arr[j+1]) {        //相邻元素两两对比
            var temp = arr[j+1];        //元素交换
            arr[j+1] = arr[j];
            arr[j] = temp;
        }
    }
}
return arr;

}

选择排序

寻找最小的数，保存索引，然后与第一层循环其下标对于的值进行交换

function selectionSort(arr) {

var len = arr.length;
var minIndex, temp;
for (var i = 0; i < len - 1; i++) {
    minIndex = i;
    for (var j = i + 1; j < len; j++) {
        if (arr[j] < arr[minIndex]) {     //寻找最小的数
            minIndex = j;                 //将最小数的索引保存
        }
    }
    temp = arr[i];
    arr[i] = arr[minIndex];
    arr[minIndex] = temp;
}
return arr;

}

快速排序

选取一个记录作为中间轴，然后将比‘这个记录值’小的移到‘记录值’之前，大的移到之后，然后递归

function quickSort(arr) {

if(arr.length == 0) {
    return [];    // 返回空数组
}
var cIndex = Math.floor(arr.length / 2);
var c = arr.splice(cIndex, 1);
var l = [];
var r = [];
for (var i = 0; i < arr.length; i++) {
    if(arr[i] < c) {
        l.push(arr[i]);
    } else {
        r.push(arr[i]);
    }
}
return quickSort(l).concat(c, quickSort(r));

列表项目

}