前端面试题目汇总

关于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

更新/提交代码

1. cd kake/ 项目名

2. sh.git

3. pull／push

4. update_1／描述用英文并用下划线分割
   注： 更新以前可以使用git status查看是否有修改，git diff查看所修改文件

更新完 source下面 npm run all

修改host文件

1. sudo vim /ect/hosts

2. i 键盘修改

3. Esc :

4. 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的指向：

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

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

一、建立一个新对象
二、将构造函数的做用域赋给新对象（所以this就指向了这个新对象）
三、执行构造函数中的代码（为这个新对象添加属性）
四、返回新对象

null和undefined的区别？

一、null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。
二、undefined表示”缺乏值”，就是此处应该有一个值，可是尚未定义。
三、null表示”没有对象”，即该处不该该有值。

call、apply、bind的区别

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

sessionStorage和localStorage的区别

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

cookie 和session

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

XML和JSON的区别？

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

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

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

线程与进程的区别

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

渐进加强和优雅降级

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

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

性能优化

网页内容
减小 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 的同源策略

。

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

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

哪些操做会形成内存泄漏？

一、内存泄漏指任何对象在您再也不拥有或须要它以后仍然存在。
二、垃圾回收器按期扫描对象，并计算引用了每一个对象的其余对象的数量。若是一个对象的引用数量为 0（没有其余对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的内存便可回收。
三、setTimeout 的第一个参数使用字符串而非函数的话，会引起内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

Javascript垃圾回收方法

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

二、引用计数：引用计数的策略是跟踪记录每一个值被使用的次数，当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加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
一、Gulp就是为了规范前端开发流程，实现先后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能的一个前端自动化构建工具。
二、Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上咱们能够对产品进行管理。
三、Gulp是经过task对整个开发过程进行构建。

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

两大特点：一、代码能够自动完成编译。二、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;

}
浮动元素引发的问题

一、父元素的高度没法被撑开，影响与父元素同级的元素
二、与浮动元素同级的非浮动元素（内联元素）会跟随其后
三、若非第一个元素浮动，则该元素以前的元素也须要浮动，不然会影响页面显示的结构

HTML

说说你对语义化的理解

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

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

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

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

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

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

一、全部的标记都必需要有一个相应的结束标记
二、全部标签的元素和属性的名字都必须使用小写
三、全部的XML标记都必须合理嵌套
四、全部的属性必须用引号””括起来
五、把全部<和&特殊符号用编码表示
六、给全部属性赋一个值
七、不要在注释内容中使“–”
八、图片必须有说明文字

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...

一、协议部分
二、域名部分
三、端口部分
四、虚拟目录部分：从域名后的第一个“/”开始到最后一个“/”为止
五、文件名部分：从域名后的最后一个“/”开始到“？”为止
六、参数部分：从“？”开始到“#”为止之间的部分
七、锚部分：从“#”开始到最后

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));

1. 列表项目

}