关于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));
列表项目
}
