【持续更新】JavaScript常见面试题整理
【重点提早说】这篇博客里的问题涉及到了JS中常见的的基础知识点，也是面试中常见的一些问题，建议初入职场的园友Mark收藏，本文会持续更新~
一、 引入JS的三种方式
一、在HTML标签中直接使用，直接内嵌JS（可是不提倡使用）；
>>>不符合W3C关于内容和行为分离的要求；
二、在HTML页面中使用<scrip> </script>标签包裹JS代码；
>>>script标签能够放到页面的各类位置；
三、引入外部的JS文件使用<script> </script>标签；
二、 JS中的变量声明
三、 JS中变量的数据类型
四、 经常使用的数值函数
parseInt()只能转字符串，转其余的类型都是NAN；而Number（）能转全部的数据类型；javascript
五、 运算符注意事项
六、 判断水仙花数
七、 If结构，循环结构，支持的判断结果：
八、 循环控制语句：
九、 斐波那契数列:1,1,2,3,5,8,13,21……
十、 JS中函数的调用方式/事件的绑定方式
十一、 window对象的经常使用方法
十二、 DOM操做的相关方法
1三、 键盘事件&肯定键盘按键
1四、 DOM2 兼容写法：
1五、 事件冒泡&事件捕获&阻止默认事件
1六、 数组经常使用方法：
1七、 引用数据类型&基本数据类型：
1八、 Number类经常使用方法：
1九、 String类经常使用方法：
20、 Date类：
2一、 杨辉三角：
2二、 正则表达式声明：
2三、 正则表达式经常使用规则：
2四、 正则中的test与exec方法：
2五、 foreach与each的区别？
forEach是js中的方法（针对数组），而each是jquery中的方法（针对jquery对象，即$( )；
1.forEach方法：以下图所示
输出结果：php
2.each方法：以下图所示css
输出结果：
2六、document load 和document ready的区别
Document.onload
是在结构和样式加载完才执行js
window.onload
：不只仅要在结构和样式加载完，还要执行完全部的样式、图片这些资源文件，所有加载完才会触发window.onload事件
Document.ready原生种没有这个方法，jquery中有 $().ready(function)
2七、什么是CSS Hack？怎么表示？
CSS hack因为不一样厂商的
浏览器，好比Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不一样版本，如IE6和IE7，对CSS的解析认识不彻底同样，所以会致使生成的页面效果不同，得不到咱们所须要的页面效果。 这个时候咱们就须要针对不一样的浏览器去写不一样的CSS，让它可以同时兼容不一样的浏览器，能在不一样的浏览器中也能获得咱们想要的页面效果。
简单的说，CSS hack的目的就是使你的CSS代码兼容不一样的浏览器。固然，咱们也能够反过来利用CSS hack为不一样版本的浏览器定制编写不一样的CSS效果。
方式一 条件注释法 方法二 类内属性前缀法 方式三：选择器前缀法
2八、Javascript中callee和caller的做用？
arguments.callee：得到当前函数的引用
caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。
2九、简述建立函数的几种方式
第一种（函数声明）：
function sum1(num1,num2){ return num1+num2; }
第二种（函数表达式）：
var sum2 = function(num1,num2){ return num1+num2; }
匿名函数：
function(){}:
只能本身执行本身
第三种（函数对象方式）：
var sum3 = new Function("num1","num2","return num1+num2");
30、把 Script 标签 放在页面的最底部的body封闭以前 和封闭以后有什么区别？浏览器会如何解析它们？
若是说放在body的封闭以前，将会阻塞其余资源的加载
若是放在body封闭以后，不会影响body内元素的加载
3一、iframe的优缺点？
优势：
1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
2. Security sandbox安全沙盒
3. 并行加载脚本
缺点：
1. iframe会阻塞主页面的Onload事件
2. 即便内容为空，加载也须要时间
3. 没有语意
3二、请你谈谈Cookie的弊端？
缺点：
1.`Cookie`数量和长度的限制。
每一个domain最多只能有20条cookie，每一个cookie长度不能超过4KB，不然会被截掉。
2.安全性问题。
若是cookie被人拦截了，那人就能够取得全部的session信息。即便加密也与事无补，由于拦截者并不须要知道cookie的意义，他只要原样转发cookie就能够达到目的了。
3.有些状态不可能保存在客户端。
例如，为了防止重复提交表单，咱们须要在服务器端保存一个计数器。若是咱们把这个计数器保存在客户端，那么它起不到任何做用。
3三、js延迟加载的方式有哪些？
1. defer和async
2. 动态建立DOM方式（建立script，插入到DOM中，加载完毕后callBack）
3. 按需异步载入js
3四、documen.write和 innerHTML 的区别？
document.write 只能重绘整个页面
innerHTML 能够重绘页面的一部分
3五、哪些操做会形成内存泄漏？
内存泄漏指任何对象在您再也不拥有或须要它以后仍然存在。
垃圾回收器按期扫描对象，并计算引用了每一个对象的其余对象的数量。若是一个对象的引用数量为 0（没有其余对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的内存便可回收。
1. setTimeout 的第一个参数使用字符串而非函数的话，会引起内存泄漏。
2. 闭包
3. 控制台日志
4. 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
3六、JS是一门什么类型的语言?
JS能够模拟实现继承和封装，可是不能模拟实现多态，故js是基于事件的，基于对象的轻量级脚本语言。
3七、语言有哪几种类型？各有什么特色？
一、语言的分类：
①、面向机器：汇编语言。
②、面向过程：C语言
③、面向对象：Java、C++、PHP等。
二、面向过程与面向对象：
①、面向过程：专一于如何去解决一个问题的过程步骤，编程的特色是由一个个的函数去实现每一步的过程步骤，没有类和对象的概念。
②、面向对象：专一于由哪个对象来解决这个问题，编程特色是出现了一个个的类，从类中拿到对象
【面向对象的三大特征】 继承、封装、多态
【区别】
对于调用者来讲，面向过程须要调用者本身去实现各类函数，
而面向对象，只须要告诉调用者对象中具体方法的功能，不须要调用者去了解方法中的实现细节。
3八、JavaScript中类和对象的关系：
类是抽象的，对象是具体的
类是对象的抽象化，对象是类的具体化；
★类是一个抽象的概念，只能说类有属性和方法，可是不能给属性和方法赋具体的值。
例如:人类有身高，可是不能说出具体数值
★对象是一个具体的个例，是将类中的属性进行具体赋值而来的个体；
例如：张三是人类中的一个个体，身高180cm。
3九、实现继承的三种方式？
一、使用call bind apply来实现继承。
二、经过扩展object来实现继承。
三、使用原型实现继承。
40、 什么叫封装？有什么方法和特色？
① 方法的封装： 将类内部的函数进行私有化处理，不对外提供调用接口，没法在类外部使用的方法，称为私有方法，即方法的封装。
② 属性的封装： 将类中的属性进行私有化处理，对外不能直接使用对象名访问(私有属性)。 同时，须要提供专门用于设置和读取私有属性的set/get方法，让外部使用咱们提供的方法，对属性进行操做。 这就叫属性的封装。
封装不是拒绝访问，而是限制访问。 要求调用者，必须使用咱们提供的set/get方法进行属性的操做，而不是直接拒绝操做。
所以，单纯的属性私有化，不能称为封装！必需要私有化以后，提供对应的set/get方法。
4一、 原生JS对象与JQuery对象之间的相互转化方式有哪些？
① 使用$("")选中的是JQuery对象，只能调用JQuery函数，而不能使用元素的JS事件与函数；
② 原生的JS对象转为 JQuery对象
可使用$() 包裹便可以转为JQuery对象
var p = document.getElementsByTagName("p");
$("p").click(); √ 原生的JS对象已经转为 JQuery对象；
③ JQuery转为原生JS对象：
使用get(index)或者[index]
$("#p").get(0).onclick() = function () {}; √
$("#p").[0].onclick() = function () {}; √
4二、JS经常使用的内置对象有哪些？它们各自的一些方法有哪些？：
一、Boolean类、Number类:、String类、Date日期类、
二、经常使用方法：
Number类：
.toString() 将数值类型转换成字符串类型；
.toLocaleString()将数值按照本地格式顺序转换成字符串，通常从右开始，三个一组加都好分隔开；
.toFixed(n)；将数字保留n位小数，并将其转换为字符串格式；
.toPrecision(n):将数字格式化为指定长度。n表示不含小数点的位数长度。若是n<原数字长度，则用科学计数法表示。
.valueOf() 返回Number对象的基本数字值；
String类：
str.length 返回字符串的长度，即为字符数；
str.toLowerCase()将字符串全部的字符转成小写；
str.UpLowerCase()将字符串全部的字符转成大写；
str.charAt(N)截取数组的第N个字符，至关于str[N]；
str.indexOf("srt",index)查找子串在字符串中出现的位置，若是没有找到返回-1，其余同数组的indexOf方法；
str.lastIndexOf()同数组。
str.subString (begin,end) 截取数组中的某一部分并返回截取的字符串
>>>传入一个参数，表示是开始的区间，默认将截取到字符串末尾；
>>>传入两个参数，表示开始和结束的下标，是一个左闭右开区间；
str.split(分隔符)将字符串以指定分隔符分隔存入数组中，
str.replace(old，new)将字符串中的字符进行替换；
Date日期类：
一、new Date();返回当前最新时间；
new Date("2017,08,29,12:33:29") 返回指定时间；
4三、什么是Jquery中的文档就绪函数？
文档就绪函数防止文档在未彻底加载以前，运行JQuery代码；
$(document).ready(function() {
//JQuery代码
})；
简写形式以下：
$(function(){});
[文档就绪函数&window.onload的区别]
① window.onload必须等到网页中的全部内容(包括图片视频)加载完成后才能执行代码；
文档就绪函数只须要在 网页DOM结构加载完成以后，就能够执行代码；
② window.onload只能写一个，写多个以后只会执行最后一个；
文档就绪函数能够写多个，并且不会覆盖。
4四、经常使用的CSS的预处理器有哪些？
less
sass 经常使用的编译方式
它们之间的区别：
SCSS中的嵌套：选择器嵌套 属性嵌套 伪类嵌套
混合宏、继承、占位符：
① 混合宏:使用@mixin声明混合宏，在其余选择器中使用@include调用混合宏
② 继承 ：声明一个普通的class，在其余的选择器中使用extend 继承这个class；
③ 占位符 ：使用%声明%占位符，在其余选择器中使用@extend 继承占位符；
4五、简述下JS中的事件分类
一、鼠标事件： click/dblclick/onmouseon/onmouseover.....
二、HTML事件： onload/onscroll/onsubmit/onchange/onfocus....
三、键盘事件：
keydown:键盘按下时触发
keypress:键盘按住时触发
keyup:键盘抬起时触发
【肯定触发的按键】
① 在触发的函数中传入一个参数e，表示键盘事件；
② 使用e.keyCode，取到按键的Ascii码值，进而肯定触发按键；
③ 全部浏览器的兼容写法(通常并不须要)
4六、浅谈JavaScript的优势和缺点：
优势：
- 性能：因为JavaScript运行在客户端，节省了web服务器的请求时间和带宽
- 轻量级的脚本语言，比较容易学习
- 运行在用户机器上，运行结果和处理相对比较快。
- 可使用第三方附加组件来检查代码片断。
缺点：
- 安全问题：因为JavaScript在客户端运行，可能被用于黑客目的。
- 渲染问题：在不一样浏览器中的处理结果可能不一样。
4七、浅谈jQuery的优势和缺点：
使用jQuery最大的好处是少许的代码作更多的事情。
Write Less Do More
看个简单例子，获取元素的值，使用JavaScript：
Javascript代码
- document.getElementById(‘elementid').value
使用jQuery：
Jquery代码
- $(‘#elementid').val();
与JavaScript相比，jQuery的语法更加简单。
经过jQuery，能够很容易地浏览文档、选择元素、处理事件以及添加效果等，同时还容许开发者定制插件。
优势：
- jQuery消除了JavaScript跨平台兼容问题。
- 相比其余JavaScript和JavaScript库，jQuery更容易使用。
- jQuery有一个庞大的库/函数。
- jQuery有良好的文档和帮助手册。
- jQuery支持AJAX。
缺点：
- 因为不是原生JavaScript语言，理解起来可能会受到限制。
- 项目中须要包含jQuery库文件。若是包含多个版本的jQuery库，可能会发生冲突。
4八、浅谈angular优缺点
简介：angularjs是一个javascript框架。经过script脚本引入，他是一个用Javascript编写的库。angularjs经过指令扩展了HTML，经过表达式绑定数据到HTML中。AngularJS主要考虑的是构建CRUD（增删改查）应用。幸运的是，至少90%的WEB应用都是CRUD应用。
优势：
1. 改变操做dom的方式
将传统的JQuery的先选择元素，在操做的方式改变成了直接对于元素自己的操做。
这依赖于强大的Html Parser的能力和directive灵活。
2. 后端MVC前端化
3. 数据操做
缺点：
一、框架略笨重
二、不适合页面复杂的网站类型开发：
内容网站，须要SEO的。(SEO目前也有了prerender解决方案) https//
prerender.io
交互频繁的，如游戏之类交互体验网站。
4九、什么叫作事件委派？有什么做用？（优势）
Jq中的事件委派on
>>>将本来须要绑定到子元素上的事件，绑定到其祖先节点乃至根节点上面，再委派给子元素节点，生效！
eg: $("p").on("click",function(){});
事件委派 以下：
$(document).on("click","p",function(){});
>>>做用：
不使用事件委派的绑定方式，只能将事件绑定到初始化时的子元素标签上，
当页面新增同类型标签时，这些新增的标签上，没有以前绑定的事件。
而使用 事件委派时 ，当页面新增更同类型标签时,这些新增的事件也具备之同类型前标签所绑定的事件！
off()取消事件绑定
$("p").off("click"):取消单事件绑定
$("p").off("click mouseover dbclick"):取消多事件绑定
$(document).off("click"，"p"):取消委派事件绑定
$("p").off()取消全部的事件绑定
50、详细介绍下 CSS的动画
一、 css的transition transition抓住了所设置变化属性的起始态和完成态，经过设定的速度曲线来完成动画。能够涉及到各类变化的css属性，默认为all，则全部变化的属性都会在出发时，以动画的形式展示出来。
tips：transform是一种变化属性，该属性容许咱们对元素进行旋转、缩放、移动或倾斜。能够做为transition中须要变化的属性。
2.css3的animation属性
使用animation属性制做动画能够更加灵活的设置动画帧，经过不一样keyframe（动画帧）的设置，实现不少优雅的效果，keyframe中的百分数是动画完成总时间的比例。
animation是设置总的动画效果，而keyframe中设置上相应的动画名字，而后在keyframe中设置具体的动画效果。
JS中的动画
3.原生js动画
原生js动画利用js代码，将动画一步以函数的方式写出来，能够实现多种动画样式，并且能够本身作兼容性处理，本身设立每一步的动画效果，而且可以完成比较复杂的效果，可是代码量很大。
5一、Jquery与jQuery UI 有啥区别？
*jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
*jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。
提供了一些经常使用的界面元素，诸如对话框、拖动行为、改变大小行为等等
5二、jquery 中如何将数组转化为json字符串，而后再转化回来？
jQuery中没有提供这个功能，因此你须要先编写两个jQuery的扩展：
$.fn.stringifyArray = function(array) { return JSON.stringify(array) } $.fn.parseArray = function(array) { return JSON.parse(array) } 而后调用： $("").stringifyArray(array)
5三、函数实现阻止冒泡函数的功能？
5四、什么是闭包？ 写一个简单的闭包？
个人理解是，闭包就是可以读取其余函数内部变量的函数。在本质上，闭包就是将函数内部和函数外部链接起来的一座桥梁。
JS中提供了一种闭包的概念：在函数中，定义一个子函数，子函数能够访问父函数的私有变量，
能够在子函数中进行操做，最后将子函数经过return返回。
闭包的做用:
① 能够在函数外部访问函数的私有变量；
② 让函数内部的变量，能够始终存在于内存中，不会在函数调用完成以后当即释放！
5五、call和apply的区别是什么？
参数形式不一样，call(obj, pra, pra)后面是单个参数。apply(obj, [args])后面是数组。
5六、为何不能定义1px左右的div容器？
IE6下这个问题是由于默认的行高形成的，解决的方法也有不少，例如：
overflow:hidden | zoom:0.08 | line-height:1px
5七、bind(), live(), delegate()的区别
bind： 绑定事件，对新添加的事件不起做用，方法用于将一个处理程序附加到每一个匹配元素的事件上并返回jQuery对象。
live： 方法将一个事件处理程序附加到与当前选择器匹配的全部元素（包含现有的或未来添加的）的指定事件上并返回jQuery对象。
delegate： 方法基于一组特定的根元素将处理程序附加到匹配选择器的全部元素（现有的或未来的）的一个或多个事件上。
5八、简述link和import的区别？
区别1：link是XHTML标签，除了加载CSS外，还能够定义RSS等其余事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import须要页面网页彻底载入之后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。
5九、你如何优化本身的代码？
一、代码重用
二、避免全局变量（命名空间，封闭空间，模块化mvc..）
三、拆分函数避免函数过于臃肿：单一职责原则
四、适当的注释，尤为是一些复杂的业务逻辑或者是计算逻辑，都应该写出这个业务逻辑的具体过程
内存管理，尤为是闭包中的变量释放
60、使用js实现这样的效果：在文本域里输入文字时，当按下enter键时不换行，而是替换成“{{enter}}”,(只须要考虑在行尾按下enter键的状况).
textarea.
onkeydown=function(e){
e.preventDefault();//
为了阻止enter键的默认换行效果
if(e.keycode==”enter
键码”){
testarea.value+=”{{enter}}”;
}
6一、请简要描述web前端性能须要考虑哪方面，你的优化思路是什么？html
参见雅虎14web优化规则
减小http请求：
1、小图弄成大图，
2、合理的设置缓存
3
、资源合并、压缩
将外部的js文件置底
6二、简述readyonly与disabled的区别
readonly
只针对input(text / password)和textarea有效，
而disabled对于全部的表单元素都有效，当表单元素在使用了disabled后，当咱们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去
6三、请尽量详尽的解释ajax的工做原理
思路：先解释异步，再解释ajax如何使用
Ajax的原理简单来讲经过XmlHttpRequest对象来向服务器发异步请求，从服务器得到数据，而后用javascript来操做DOM而更新页面。这其中最关键的一步就是从服务器得到请求数据。要清楚这个过程和原理，咱们必须对 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript能够及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
6四、为何扩展javascript内置对象不是好的作法？
由于扩展内置对象会影响整个程序中所使用到的该内置对象的原型属性
6五、浏览器标准模式和怪异模式之间的区别是什么？
标准模式是指，浏览器按W3C标准解析执行代码；
怪异模式则是使用浏览器本身的方式解析执行代码，由于不一样浏览器解析执行的方式不同，因此咱们称之为怪异模式。
浏览器解析时到底使用标准模式仍是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式。
6六、若是设计中使用了非标准的字体，你该如何去实现？
先经过font-face定义字体，再引用
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
6七、简述.trigger与.triggerHandler的区别
.trigger()自动 触发某元素事件；
第一个参数：是须要触发的事件类型；
第二个参数：(可选)数组格式，表示传递给事件函数的参数；
>>>传递进来的参数，能够在事件函数中，定义形参进行获取
(形参第一个必须是event事件，因此从第二个开始为所传递的参数！)
>>> 也能够直接在函数中，使用arguements对象数组，读取参数;
.triggerHandler()：功能同上，区别以下：
① .triggerHandler()不能触发浏览器默认的HTML事件，如submit等；
② .trigger()能够触发页面中全部匹配元素的事件；
而.triggerHandler()只能触发第一个匹配元素的事件；
③ .trigger()的返回值，返回的是调用当前函数的对象，符合JQuery的可链式语法；
.triggerHandler()返回的是事件函数的返回值，若是事件函数没有返回值，则返回的是Undefined；
6九、call bind apply 这三个函数有什么共同的做用？
经过函数名调用这三个函数，能够强行将函数中的this指定为某一个对象
三个函数的惟一区别，在于接受func的
参数列表的形式不一样，除此以外，功能上没有差异！
三个函数的写法(区别)
① call写法：func.call(func的this指向的obj,func参数1,func参2,....);
② apply写法：func.apply(func的this指向的obj,[func参数1,func参2,....]);
③ bind写法：func.bind(func的this指向的obj),(func参数1,func参2,....);
70、扩展Object实现继承
① 声明一个父类函数
function Parent (){}
声明一个子类函数
function Son (){}
② 经过prototype给Object类添加一个扩展方法：
Object.prototype.extend = function (parent) {
for(var i in parent){
this[i] = parent[i];
}
}
③ 分别拿到父类对象和子类对象: 实例化
var p = new Parent();
var s = Son();
④ 用子类对象调用扩展方法，实现从继承操做：
s.extend(p)
实现继承的原理：
经过循环将父类对象的全部属性和方法，所有赋给子类对象。
关键点在于for-in循环，即便不扩展Object，也能经过简单的循环实现操做；
7一、详细解释下JS中的this指向问题
谁最终调用函数，this就指向谁！
this指向的规律 ：(跟函数的调用方式息息相关！)
① 经过 【 函数名() 】 调用的，this永远指向window；
② 经过 【 对象.方法 】调用的，this永远指向对象。obj.func();
③ 函数做为数组中的 一个元素，经过数组下标调用的 【 arr[i]() 】，this指向数组arr。
④ 函数做为window内置函数的回调函数使用，this指向widow；
setTimeout() setInterval()等
⑤ 函数做为构造函数，使用new关键字调用，this指向新new出的对象。
7二、BootStrap的优势和缺点:
优势：
流媒体网格布局
响应式设计
自定义表单元素
页面排版
JavaScript交互性
跨浏览器兼容性
BT栅格系统的本质就是经过CSS3的媒体查询实现的
BootStrap的缺点:
兼容性可能不太好
7三、什么是渐进加强（progressive enhancement）、优雅降级（graceful degradation）呢？
渐进加强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（
从被全部浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥做用。）
优雅降级（graceful degradation）：一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。（
Web站点在全部新式浏览器中都能正常工做，若是用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工做。因为IE独特的盒模型布局问题，针对不一样版本的IE的hack实践过优雅降级了，为那些没法支持功能的浏览器增长候选方案，使之在旧式浏览器上以某种形式降级体验却不至于彻底失效。）
区别：优雅降级是从复杂的现状开始，并试图减小用户体验的供给，而渐进加强则是从一个很是基础的、可以起做用的版本开始，并不断扩充，以适应将来环境的须要。
7四、常见的浏览器状态码
200--请求成功！
500--内部服务器错误！
404--请求失败！
7五、详述jQuery中Ajax的写法以及get和post的区别
$.ajax() 经过 HTTP 请求加载远程数据。jQuery 最底层 AJAX 实现函数。
接受一个大的对象。对象里面的属性和方法，表示ajax请求的相关设置：
① url:被请求的远程文件的路径。
② Ajax请求的类型，可选值get/post.
回调函数：
•success： 请求成功的回调函数。接受一个参数data，表示后台返回的数据。
•dataType：预期服务器返回的数据类型。
"json": 返回 JSON 数据 。
"text": 返回纯文本字符串
•data：对象格式。向后台发送一个对象，表示传递的数据。
经常使用于type为post的请求方式。
若是type为get,可使用？直接追加载URL后面。
•error:请求失败时的回调函数
•statusCode:接受一个对象，对象的键值对是status状态码和对应的回调函数，
表示当请求状态码是对应数字时，执行具体的操做函数.
$.get(); $.post(); 这两个函数，是在$.ajax()的基础上进行封装而来。能够直接默认发送get请求或post请求；
*
* 接受四个参数：
* ① 请求的URL路径。 至关于$.ajax()里面的url；
* ② 向后台传递的数据。 至关于$.ajax()里面的data；
* ③ 请求成功的回调函数。 至关于$.ajax()里面的success；
* ① 预期返回的数据类型。 至关于$.ajax()里面的dataType；
7六、IE和DOM事件流的区别
IE9之前：attachEvent(“onclick”)、detachEvent(“onclick”)
IE9开始跟DOM事件流是同样的，都是addEventListener
7七、IE跟DOM事件流有什么区别
① 阐述事件绑定方式：
IE9之前：attachEvent(“onclick”)、detachEvent(“onclick”)
IE9开始:跟DOM事件流是同样的，都是addEventListener
② 这两种绑定方式的区别：
写法上的区别：
attachEvent两个参数、事件带on
addEventListener 三个参数、事件不带on、true/false表示捕获/冒泡
功能上的区别：
attachEvent绑定的事件所有冒泡、addEventListener根据第三个参数是true仍是false决定冒泡仍是捕获。
③ 事件冒泡和事件捕获。
冒泡： 当触发一个事件时，会从当前节点开始，依次触发其祖先节点的同类型事件。
捕获： 从根节点开始，依次触发其祖先节点同类型事件，直到节点自身。
7八、IE和标准下有哪些兼容性的写法？
一、获取事件对象(事件因子)： ev = e || window.event;
二、DOM2
添加事件： if(dom.attachEvent){
Dom. attachEvent(“onclick”,function);
}else{
Dom.
addEventListener(“click”,function);
}
三、取消事件冒泡： if (e.stopPropagation) {
e.stopPropagation(); //IE之外
} else {
e.cancelBubble = true; //IE8以前
}
四、取消默认事件：if (e.preventDefault) {
e.preventDefault(); //IE之外
} else {
e.returnValue = false; //IE
}
7九、API是什么？
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工做机制的细节。
在编程语言中，API一般指语言中内置的函数、接口、类等系统工具。咱们编程人员无需关心这些函数的实现细节，只须要按照API文档的要求，给函数传入指定参数接受返回值便可。
在先后台传递数据，API也是后台提供给前台的接口，前台只须要按照要求请求接口并发送指定参数，结课接受JSON字符串。例如：https://api.douban.com/v2/book/1220562
80、Javascript事件处理器在线程空闲以前不会运行是什么意思？
JS
是一个单线程应用，也就是说，当某一段代码正在执行的时候，其余代码若是须要执行也必须等到这个线程结束后，才能执行。
代码执行到for循环时，当for循环执行第一次，遇到第一个setTimeout时并不会当即触发，由于for循环还有结束，如今的线程被for循环阻塞。setTimeout必须等到for循环的线程结束之后，也就是线程空闲以后，才能执行，而这时候i已经变成了4.
因此最终打印三个4. 解决的办法能够将var改为let，或者for循环中嵌套自执行函数。 原理。。。。。
8一、js中callee和caller的做用
写法不一样：
callee是Arguments的一个属性，在函数中使用Arguments.callee调用。
C
aller在函数中，直接使用函数名调用。 Func. Caller
功能不一样：
Arguments.callee 返回的是，当前函数自身的引用！！
F
unc. Caller 返回的是，当前函数在哪一个函数中调用。 若是函数时顶层调用，则返回null
function func(){
console.log(func.caller);
}
func(); // null
function func1(){
func();
}
func1(); // 返回func1
8二、js中的保留字是什么？
程序中预约义的关键字(函数名、类名、属性名、方法名等标识符)都是js中的保留字。 这些保留字，不容许用户再次声明为变量、方法、函数
保留字在编译器中会变色。
8三、工厂方式建立js对象是啥方式 （JS中建立对象的多种方式）
① 字面量模式： var obj = {}
混合模式就是咱们所说的将属性添加到成员属性(构造函数模式)，将方法添加到原型方法（原型模式）
8四、js延迟加载的方式有哪些？
+
将JS代码放在文档最后也是延迟加载的方式之一。
8五、documen.write和 innerHTML 的区别？
documen.write 是直接在整个文档中，写入代码。会覆盖掉其余已有代码。
innerHTML 是选中一个节点后，修改节点里面的代码，只影响当前节点。
8六、解释jsonp的原理，以及为何不是真正的ajax
后续讲解
8七、javascript 中的垃圾回收机制？闭包中的内存释放？
Js
中的垃圾回收机制，函数中的变量，会在函数执行完成后，被回收处理。
可是，若是函数中使用了闭包，那么函数中的变量将始终被内部的函数持有，而不会在函数执行完成后释放。
闭包的两个重要做用：
① 可让函数外部，可以访问函数内部的变量。
② 让函数内部的变量在函数执行完成后，不会被释放，而始终保持在内存中
8八、哪些操做会形成内存泄漏
大量使用全局变量
大量使用闭包
清除DOM节点时，只清除节点，而没有删除事件
8九、js中的精度问题
JS
中在浮点数运算或者大整数运算的时候，可能致使不许确的结果出现。 例如0.7+0.1=0.7999999999999 解决办法能够将数字*10相加，而后再除以10
90、简述defer和async的区别
1.默认引用 script:<script type="text/javascript" src="x.min.js"></script>
当浏览器遇到 script 标签时，文档的解析将中止，并当即下载并执行脚本，脚本执行完毕后将继续解析文档。
2.async模式 <script type="text/javascript" src="x.min.js" async="async"></script>
当浏览器遇到 script 标签时，文档的解析不会中止，其余线程将下载脚本，脚本下载完成后开始执行脚本，脚本执行的过程当中文档将中止解析，直到脚本执行完毕。
3.defer模式 <script type="text/javascript" src="x.min.js" defer="defer"></script>
当浏览器遇到 script 标签时，文档的解析不会中止，其余线程将下载脚本，待到文档解析完成，脚本才会执行。
9一、业界经常使用的优化WEB页面加载速度的方法（能够分别从页面元素展示，请求链接，css,js,服务器等方面介绍）
9二、解释什么是sql注入，xss漏洞？
9三、解释下这个css选择器发生什么？ [role=nav]>ul a:not([href^=mailto]){}
[role=nav] 选中页面中 role属性等于nav的元素. 也就是导航栏
[role=nav]>ul 导航栏中的子节点 ul
[role=nav]>ul a UL里面的a标签
a:not([href^=mailto]) 选中a标签，除了href属性使用mailto开头的。
选中导航栏中的ul里面的不是mailto的a标签。
9四、有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c= e &d=xxx，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不肯定)，将其按key-value形式返回到一个json结构中，如{a:’1′,?b:’2′,?c:”,?d:’xxx’,?e:undefined}。
9五、如下哪一个单词不属于javascript保留字 B
A.with
B.parent
C.class
D.void
9六、 动态建立DOM方式（建立script，插入到DOM中，加载完毕后callBack）
9七、 按需异步载入js
9九、简单的介绍下JS面向对象中的__proto__与prototype
一、prototype:函数的原型对象
① 只有函数才有prototype，并且全部的函数必然有prototype!
② prototype自己也是一个对象！
③ prototype指向了当前函数所在的引用地址！
二、__proto__：对象的原型
① 只有对象才有__proto__，并且全部的对象必有__proto__；
② __proto__也是一个对象，因此也有本身的__proto__，顺着这条线向上找的顺序，就是原型链。
③ 数组都是对象，也都有本身的__proto__；
三、实例化一个类，拿到对象的原理：
实例化一个类的时候，其实是将新对象的__proto__，指向构造函数所在的prototype；
也就是说：zhangsan.__proto__ ==Person.prototype √
四、全部对象的__proto__沿着原型链向上查找都将指向Object的prototype;
Object的prototype的原型，指向null；
100、简述下什么是CSShack以及其表现形式有哪些？
CSS hack因为不一样厂商的
浏览器，好比Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不一样版本，如IE6和IE7，对CSS的解析认识不彻底同样，所以会致使生成的页面效果不同，得不到咱们所须要的页面效果。 这个时候咱们就须要针对不一样的浏览器去写不一样的CSS，让它可以同时兼容不一样的浏览器，能在不一样的浏览器中也能获得咱们想要的页面效果。
简单的来讲：
CSS hack的目的就是使你的CSS代码兼容不一样的浏览器。
表现形式：
（1）方式一 条件注释法
（2）方式二 类内属性前缀法
（3）CSS hack方式三：选择器前缀法
10一、Require.js有什么做用？
一、实现了文件的异步加载，避免网页失去响应。
二、管理模块之间的依赖性，便于代码的编写和维护。
10二、怎么检测一个对象是否是一个类的实例？
instanceof：A instanceof B 检测一个对象(A)是否是一个类(B)的一个实例；
louver instanceof Person;√ louver是函数Person的实例化；
louver instanceof Object;√ 全部对象都是Object的一个实例；
Person instanceof Object;√ 函数自己也是一个对象；
constructor：返回当前对象的构造函数；
10三、zepto和jQuery的不一样之处有哪些？
一、zepto不支持IE浏览器；
二、zepto增长了一些基本的触摸事件：如tap，swip事件’
三、DOM操做的区别：添加ID时jQuery不会生效，而zepto会生效！
四、使用zepto时，load事件的处理函数会执行，使用jQuery时，load事件的处理函数不会执行。
五、事件委派的不一样：
在zepto中，当a被点击以后，一次性弹出内容为a事件和b事件，可是在jQuery中只会触发委托弹出a事件，再点击一次才会触发b事件！
六、offse:zepto：返回left top width heigth
jQuery:只会返回left top
七、zepto没法隐藏元素的宽高，jQuery能够；
八、zepto不支持的选择器：
① 基本伪类：first last eq(index)
② 内容伪类：contains(text) :empty :has(selector)
③ 可见性伪类：hidden visible
④ 属性选择器：[attribute = value]
⑤ 表单伪类：input :text :password :submit
⑥ 表单对象属性：selected
10四、使用JS跳转页面的方法：
Window.location="http://www.baidu.com";
细分几种使用location跳转页面的类型：
location.replace("http://www.baidu.com"); 使用新的文档替换当前文档，替换之后，不能退回。
location.assign("http://www.baidu.com");加载新的文档，加载以后，能够退回。
location.repload();从新加载当前页面，即刷新页面；
①、 location.repload(true) 强制刷新页面，从服务器端从新加载页面----Ctrl+f5;
②、 location.repload() 在本地刷新当前页面---f5
10五、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
图片懒加载，在页面上的未可视区域能够添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，若是前者小于后者，优先加载。
若是为幻灯片、相册等，可使用图片预加载技术，将当前展现图片的前一张和后一张优先下载。
若是图片为css图片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
若是图片过大，可使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提升用户体验。
若是图片展现区域小于图片的真实大小，则因在服务器端根据业务须要先行进行图片压缩，图片压缩后大小与展现一致。
更换最新的图片格式 谷歌的webp腾讯的tpg
合成雪碧图
大图分割加载
10六、CSS3新增伪类有那些？
p:first-of-type 选择属于其父元素的首个 <p> 元素的每一个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每一个 <p> 元素。
p:only-of-type 选择属于其父元素惟一的 <p> 元素的每一个 <p> 元素。
p:only-child 选择属于其父元素的惟一子元素的每一个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每一个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
10七、如何在 HTML5 页面中嵌入音频、视频?
HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP三、Wav 和 Ogg：
<audio controls>
<source src="jamshed.mp3" type="audio/mpeg">
Your browser does'nt support audio embedding feature.
</audio>
和音频同样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP四、WebM 和 Ogg：
<video width="500px" height="500px" autoplay="autoplay" loop="loop">
<source src="binzhiliang1.mp4" type="video/mp4" >
Your browser does'nt support video embedding feature.
</source>
</video>
10八、怎么取到一个网址并转化为字符串格式存储？
console.log(location.href);//返回当前完整路径；
/*将js中的对象、数组，转化*/
var str1 = JSON.stringify(jsonObj);
console.log(str1);
var obj = JSON.parse(str1);
console.log(obj);
10九、如何优化网页加载速度？
1.减小css，js文件数量及大小(减小重复性代码，代码重复利用)，压缩CSS和Js代码
2.图片的大小
3.把css样式表放置顶部，把js放置页面底部
4.减小http请求数
5.使用外部 Js 和 CSS
1十、知道css有个content属性吗？有什么做用？有什么应用？
知道。css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。最多见的应用是利用伪类清除浮动。
//一种常见利用伪类清除浮动的代码
.clearfix:after {
content:"."; //这里利用到了content属性
display:block;
height:0;
visibility:hidden;
clear:both; }
.clearfix {
*zoom:1;
}
after伪元素经过 content 在元素的后面生成了内容为一个点的块级素，再利用clear:both清除浮动。
1十一、简述下web storage和cookie的区别
一、
Web Storage相对于cookie来讲，拥有更大的容量储存。
二、Cookie的大小是受限的，而且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形 中浪费了带宽。
三、cookie还须要指定做用域，不能够跨域调用。
四、Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开发者本身封装setCookie，getCookie。
五、可是Cookie也是不能够或缺的：Cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
1十二、为何利用多个域名来存储网站资源会更有效？
CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的链接数，优化页面响应速度
防止没必要要的安全问题
11三、HTML5 Canvas 元素有什么用？
答：Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于能够直接在 HTML 上进行图形操做。
11五、请用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。
var iArray = []; funtion getRandom(istart, iend){ var iChoice = istart - iend +1; return Math.floor(Math.random() * iChoice + istart; } for(var i=0; i<10; i++){ iArray.push(getRandom(10,100)); } iArray.sort();
11六、如何消除一个数组里面重复的元素？
方法一： var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4]; function deRepeat(){ var newArr=[]; var obj={}; var index=0; var l=arr.length; for(var i=0;i<l;i++){ if(obj[arr[i]]==undefined){ obj[arr[i]]=1; newArr[index++]=arr[i]; }else if(obj[arr[i]]==1) } return newArr; } var newArr2=deRepeat(arr); alert(newArr2); //输出1,2,3,4,5,6,9,25 方法二： var arr = [1,2,2,3,3,3,4,5,6]; function func (arr){ var newArr = new Array; newArr.push(arr[0]); for (var i=0;i<=arr.length;i++) { if (newArr.indexOf(arr[i])==-1) { newArr.push(arr[i]); } } document.write(newArr); } func(arr);
11七、闭包：下面这个ul，如何点击每一列的时候alert其index？
<ul id="test"> <li>这是第一条</li> <li>这是第二条</li> <li>这是第三条</li> </ul> 非闭包实现 var lis=document.querySelectorAll('li'); document.querySelector('#test').onclick=function(e){ for (var i = 0; i < lis.length; i++) { var li = lis[i]; if(li==e.target){ alert(i); } } }; //闭包实现 var lis=document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) { var li = lis[i]; li.onclick=(function(index){ return function(e){ alert(index); }; })(i); }
11八、JavaScript数组元素添加、删除、排序等方法有哪些？
Array.concat( ) 链接数组
Array.join( ) 将数组元素链接起来以构建一个字符串
Array.length 数组的大小
Array.pop( ) 删除并返回数组的最后一个元素
Array.push( ) 给数组添加元素
Array.reverse( ) 颠倒数组中元素的顺序
Array.shift( ) 将元素移出数组
Array.slice( ) 返回数组的一部分
Array.sort( ) 对数组元素进行排序
Array.splice( ) 插入、删除或替换数组的元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串
11九、简述remove和detach异同
* 一、相同点：
* ① 都会把当前标签，以及当前标签的全部子节点，所有删除；
* ② 均可以在删除时，把当前节点返回。并可使用变量接受返回的节点，以便后期恢复；
* 二、 不一样点：
* 使用接受的节点，恢复原节点时。
* remove只能恢复节点的内容，可是事件绑定，不能再恢复；
* detach不但恢复节点的内容，还能再恢复 事件的绑定；
120、Ajax 是什么? 如何建立一个Ajax？
Ajax并不算是一种新的技术，全称是asynchronous javascript and xml，能够说是已有技术的组合，主要用来实现客户端与服务器端的异步通讯效果，实现页面的局部刷新，带来更好的用户体验；按需获取数据，节约带宽资源；早期的浏览器并不能原生支持ajax，可使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持
使用ajax原生方式发送请求主要经过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通讯效果
12一、举例简述同步和异步的区别?
同步：阻塞的
-张三叫李四去吃饭，李四一直忙得不停，张三一直等着，直到李四忙完两我的一块去吃饭
=浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示页面
异步：非阻塞的
-张三叫李四去吃饭，李四在忙，张三说了一声而后本身就去吃饭了，李四忙完后本身去吃
=浏览器向服务器请求数据，服务器比较忙，浏览器能够自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新
12二、如何解决跨域问题?
理解跨域的概念：协议、域名、端口都相同才同域，不然都是跨域
出于安全考虑，服务器不容许ajax跨域获取数据，可是能够跨域获取文件内容，因此基于这一点，能够动态建立script标签，使用标签的src属性访问js文件的形式获取js脚本，而且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，须要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案
12三、页面编码和被请求的资源编码若是不一致如何处理？
对于ajax请求传递的参数，若是是get请求方式，参数若是传递中文，在有些浏览器会乱码，不一样的浏览器对参数编码的处理方式不一样，因此对于get请求的参数须要使用 encodeURIComponent函数对参数进行编码处理，后台开发语言都有相应的解码api。对于post请求不须要进行编码
12四、简述ajax 的过程。
1. 建立XMLHttpRequest对象,也就是建立一个异步调用对象
2. 建立一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求
5. 获取异步调用返回的数据
6. 使用JavaScript和DOM实现局部刷新
写法以下：
$.ajax() 经过 HTTP 请求加载远程数据。jQuery 最底层 AJAX 实现函数。
接受一个大的对象。对象里面的属性和方法，表示ajax请求的相关设置：
① url:被请求的远程文件的路径。
② Ajax请求的类型，可选值get/post.
回调函数：
•success： 请求成功的回调函数。接受一个参数data，表示后台返回的数据。
•dataType：预期服务器返回的数据类型。
"json": 返回 JSON 数据 。
"text": 返回纯文本字符串
•data：对象格式。向后台发送一个对象，表示传递的数据。
经常使用于type为post的请求方式。
若是type为get,可使用？直接追加载URL后面。
•error:请求失败时的回调函数
•statusCode:接受一个对象，对象的键值对是status状态码和对应的回调函数，
表示当请求状态码是对应数字时，执行具体的操做函数.
404 - 页面没有找到！
403 - 服务器收到请求，可是拒绝提供服务！
200 - 请求成功！
500 - 内部服务器错误！
503 - 服务器当前不能处理客户端的请求，一段时间后可能恢复正常
301 - 资源（网页等）被永久转移到其它URL！
12五、阐述一下异步加载。
1. 异步加载的方案： 动态插入 script 标签
2. 经过 ajax 去获取 js 代码，而后经过 eval 执行
3. script 标签上添加 defer 或者 async 属性
4. 建立并插入 iframe，让它异步执行 js
12六、请解释一下 JavaScript 的同源策略。
所谓同源指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。
在先后台进行数据交互时，两个文件必须处于同一域名同一端口号同一协议名之下，不然跨域请求
12七、ajax的缺点
一、ajax不支持浏览器back按钮。
二、安全问题 AJAX暴露了与服务器交互的细节。
三、对搜索引擎的支持比较弱。
四、破坏了程序的异常机制。
12八、解释jsonp的原理，以及为何不是真正的ajax
Jsonp并非一种数据格式，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，具体是经过动态建立script标签，而后经过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，须要事先在页面定义好回调函数，本质上使用的并非ajax技术
12九、什么是Ajax和JSON，它们的优缺点。
Ajax是全称是asynchronous JavaScript andXML，即异步JavaScript和xml，用于在Web页面中实现异步数据交互，实现页面局部刷新。
优势：可使得页面不重载所有内容的状况下加载局部内容，下降数据传输量，避免用户不断刷新或者跳转页面，提升用户体验
缺点：对搜索引擎不友好；要实现ajax下的先后退功能成本较大；可能形成请求数据的增长跨域问题限制；
JSON是一种轻量级的数据交换格式，ECMA的一个子集
优势：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）
130、分别介绍下javascript的本地对象，内置对象和宿主对象
本地对象为独立于宿主环境的ECMAScript提供的对象，包括Array Object RegExp等能够new实例化的对象
内置对象为Gload，Math 等不能够实例化的(他们也是本地对象，内置对象是本地对象的一个子集)
宿主对象为全部的非本地对象，全部的BOM和DOM对象都是宿主对象，如浏览器自带的document,window 等对象。
图解：
13一、为何利用多个域名来存储网站资源会更有效？
一、速度保证：
确保用户在不一样地区能用最快的速度打开网站。
二、安全保障：
其中某个域名崩溃用户也能经过其余域名问网站，
三、服务端：
而且不一样的资源放到不一样的服务器上有利于减轻单台服务器的压力。
13二、请说出三种减低页面加载时间的方法
一、压缩css、js文件
二、合并js、css文件，减小http请求
三、外部js、css文件放在最底下
四、减小dom操做，尽量用变量替代没必要要的dom操做
五、优化图片加载的方式。
13三、 知道什么是webkit么? 知道怎么用浏览器的各类工具来调试和debug代码么?
Webkit是浏览器引擎，包括html渲染和js解析功能，手机浏览器的主流内核，与之相对应的引擎有Gecko（Mozilla Firefox 等使用）和Trident（也称MSHTML，IE 使用）。
对于浏览器的调试工具要熟练使用，主要是页面结构分析，后台请求信息查看，js调试工具使用，熟练使用这些工具能够快速提升解决问题的效率.
一、Elements 功能标签页：用来查看，修改页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息
二、Console控制台：用于打印和输出相关的命令信息，经常使用于JS错误调试。
三、Sources js资源页面：这个页面内咱们能够找到固然浏览器页面中的js 源文件，方便咱们查看和调试(打断点调试)
四、.Network 网络请求标签页：能够看到全部的资源请求，包括网络请求，图片资源，html,css，js文件等请求，能够根据需求筛选请求项，通常多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看
五、.Timeline标签页能够显示JS执行时间、页面元素渲染时间，不作过多介绍
六、.Profiles标签页能够查看CPU执行时间与内存占用，不作过多介绍
七、.Resources标签页会列出全部的资源，以及HTML5的Database和LocalStore等，你能够对存储的内容编辑和删除 不作过多介绍
八、.Security标签页 能够告诉你这个网站的安全性，查看有效的证书等
九、.Audits标签页 能够帮你分析页面性能，有助于优化前端页面，分析后获得的报告
13四、简述一下 Handlebars 的基本用法？
Handlebars 是 JavaScript 一个语义模板库，经过对view和data的分离来快速构建Web模板。
13五、详解在AngualrJS中使用$http进行数据请求的方法？
$http({ method: 'GET', /*请求的方法*/ url: 'h51701.json' /*请求的地址*/ }).then(function(obj){ /*请求成功的回调函数*/ alert("请求成功！"); $scope.data = obj.data; },function(){ /*请求失败的回调函数*/ alert("请求失败！"); }); [简写方式] 能够直接简写为get或者post方式： $http.get('/someUrl').then(successCallback, errorCallback); $http.post('/someUrl', data).then(successCallback, errorCallback);
13六、如何让一个标签块级显示？
一、给该元素添加浮动属性
二、给该元素添加绝对定位属性
三、 给父元素添加display:flex属性设置为弹性盒子（弹性盒子内部全是块级标签）
四、给其自己添加display:block/ inlineblock属性
13七、利用原生JS实现Ajax请求后台数据的步骤？
// 第一步： 得到XMLHttpRequest对象 var ajax = new XMLHttpRequest(); // 第二步： 设置状态监听函数 ajax.onreadystatechange = function(){ console.log(ajax.readyState); console.log(ajax.status); // 第五步：在监听函数中，判断readyState=4 && status=200表示请求成功 if(ajax.readyState==4 && ajax.status==200){ // 第六步： 使用responseText、responseXML接受响应数据，并使用原生JS操做DOM进行显示 console.log(ajax.responseText); console.log(ajax.responseXML);// 返回不是XML，显示null console.log(JSON.parse(ajax.responseText)); console.log(eval("("+ajax.responseText+")")); } } // 第三步： open一个连接 ajax.open("GET","h51701.json",false);//true异步请求，false同步 // 第四步： send一个请求。 能够发送对象和字符串，不须要传递数据发送null ajax.send(null);
13八、实现Ajax的跨域请求有哪些方法？
【跨域请求处理】
因为JS中存在同源策略，当请求不一样协议名，不一样端口号，不一样主机名下面的文件时，将会违背同源策略，没法请求成功！须要进行跨域处理！
一、后台PHP进行设置，在后台请求的PHP文件中，写入一条header:
header( "Access-Control-Allow-Origin:*");
表示容许哪些域名请求这个PHP文件，*表示全部的域名都容许。
二、使用src属性+JSONP实现跨域
① 拥有src属性的标签自带跨域功能，因此可使用<script>标签的src属性请求后台属性。
<script type="text/javascript" src="http://127.0.0.1/json.php"> </ script>
② 因为src在加载数据成功以后，会直接将加载内容放入到script标签中，
因此后台直接返回JSON字符串将不能在script标签中解析。
所以，后台应该返回给前台一个回调函数名，并将JSON字符串做为参数传入，
后台PHP文件中返回 ： echo "callBack($str)";
③ 前台接收到返回的回调函数，将直接在script标签中调用。所以须要声明这样的一个回调函数，做为请求成功的回调函数。
* function callBack(data) {
alert("请求成功！");
}
三、jQuery的Ajax实现JSONP
① 在Ajax请求时设置dataType:"jsonp"
② 后台返回时，依然须要返回回调函数，可是，在ajax发送请求时，会默认使用get请求将回调函数名发给后台，
后台可使用$_GET['callback']取出回到函数名。
echo "{$_GET['callback']}({$str})";
③ 后台返回以后，Ajax依然可使用succes做为成功的回调函数：
success:function(data){
console.log(data);
}
固然后台也能够随便返回一个回调函数名： echo "callBack($json)";
前台只要请求成功就会自动调用这个函数。相似于上面的第2条的② ③ 步；
13九、js中捕获异常是啥？
Js中的异常捕获用try{}catch(){} 结构进行捕获。
将程序中可能出现异常错误的代码，用try块包裹，当代码真正出现异常时，程序流将进入carch块捕获异常，try块中从异常语句开始下面的代码将再也不执行，转而执行catch块中的代码！！！！
JS
中常见的异常类型：
EvalError: raised when an error occurs executing code in eval() RangeError: raised when a numeric variable or parameter is outside of its valid range ReferenceError: raised when de-referencing an invalid reference SyntaxError: raised when a syntax error occurs while parsing code in eval() TypeError: raised when a variable or parameter is not a valid type URIError: raised when encodeURI() or decodeURI() are passed invalid parameters
全部异常都继承自Error类
用户能够自定义异常： throw new Error() ; throw new TypeError(“错误信息”);
Catch
块的小括号中能够接受异常对象e, e.name表示错误名，e.message表示错误信息。
140、事件委派的原理是啥？事件冒泡吗？
事件委派的原理就是事件冒泡！
当你点击一个元素时，这个点击事件是会冒泡的，事件依次从该元素向父级元素依次触发，事件委托就是在父级元素上统一监听和处理事件，而不是在具体的元素上，而后经过判断事件源来肯定是哪一个元素触发的。
这样作的好处是：
咱们不须要为每一个元素添加事件，更节省资源；而且后来新增的元素直接能够一样得到事件，不须要再为其添加监听。
14一、前端代码优化的方法？
1. 避免坏请求
4. 合并多个外部CSS文件
九、 利用浏览器缓存
14二、详细解释一下关于伪数组与数组？（在Javascript中什么是伪数组？如何将伪数组转化为标准数组？）
伪数组：
具备length属性；
按索引方式存储数据；
不具备数组的push()、pop()等方法；
var fakeArray01 = {0:'a',1:'b',length:2};//这是一个标准的伪数组对象
var arr01 = Array.prototype.slice.call(fakeArray01);
14三、Javascript做用域链?
函数做用域的嵌套就组成了所谓的函数做用域链
14四、什么是JSOPN？
jsonp：JSON with padding，是JSON的 一种“
使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
14五、如何利用Ajxa实现跨域请求？
因为JS中存在同源策略，当请求不一样协议名，不一样端口号，不一样主机名下面的文件时，将会违背同源策略，没法请求成功！须要进行跨域处理！
一、后台PHP进行设置，在后台请求的PHP文件中，写入一条header:
header( "Access-Control-Allow-Origin:*");
表示容许哪些域名请求这个PHP文件，*表示全部的域名都容许。
二、使用src属性+JSONP实现跨域
① 拥有src属性的标签自带跨域功能，因此可使用<script>标签的src属性请求后台属性。
* <script type="text/javascript" src="http://127.0.0.1/json.php"> </ script>
② 因为src在加载数据成功以后，会直接将加载内容放入到script标签中，
* 因此后台直接返回JSON字符串将不能在script标签中解析。
* 所以，后台应该返回给前台一个回调函数名，并将JSON字符串做为参数传入，
后台PHP文件中返回 ： echo "callBack($str)";
③ 前台接收到返回的回调函数，将直接在script标签中调用。所以须要声明这样的一个回调函数，做为请求成功的回调函数。
* function callBack(data) {
alert("请求成功！");
}
三、利用jQuery的Ajax实现JSONP
① 在Ajax请求时设置dataType:"jsonp"
② 后台返回时，依然须要返回回调函数，可是，在ajax发送请求时，会默认使用get请求将回调函数名发给后台，
后台可使用$_GET['callback']取出回到函数名。
echo "{$_GET['callback']}({$str})";
③ 后台返回以后，Ajax依然可使用succes做为成功的回调函数：
success:function(data){
console.log(data);
}
固然后台也能够随便返回一个回调函数名： echo "callBack($json)";
前台只要请求成功就会自动调用这个函数。相似于上面的第2条的② ③ 步；
14六、 JavaScript window.onload 事件和 jQuery ready 函数有何不一样？
1.执行时间
window.onload必须等到页面内包括图片的全部元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，没必要等到加载完毕。
2.编写个数不一样
window.onload不能同时编写多个，若是有多个window.onload方法，只会执行一个
$(document).ready()能够同时编写多个，而且均可以获得执行
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})能够简写成$(function(){});
14七、$(this) 和 this 关键字在 jQuery 中有何不一样?
一、this表示javascript的
dom对象
二、$(this)表示把
dom对象转换为jquery对象
三、jquery包的方法只能由jquery对象调用，不能用javascript的
Dom对象使用
$("input").click(function(){
//这里的this表示被点击的输入框对象,可使用javascript对该对象进行操做
var value=this.value;
//jquery对象与
dom对象取值方法不同，要用jquery方法必须使用$(dom对象)转换
var val=$(this).val();
）}
14八、简单介绍下JavaScript中的做用域与变量声明提高？
一、一个变量的做用域表示这个变量存在的上下文。一个变量的做用域表示这个变量存在的上下文。javascript有拥有函数级别的做用域，也就是说，在一个函数内定义的变量只能在函数内部访问或者这个函数内部的函数访问（闭包除外）每个在函数外部声明或者定义的变量都是一个全局对象，因此这个变量能够在任何地方被使用。
二、变量声明提高就是在函数内部不用var 声明的一个变量，想要访问的时候，会在当前函数中寻找，发现当前函数中没有，继续往上层函数找，一直到全局做用下尚未找到，就会将这个变量在全局范围内进行声明。
14九、jquery.extend 与 jquery.fn.extend的区别？
jQuery为开发插件提拱了两个方法，分别是：
jQuery.fn.extend();
jQuery.extend();
jquery.extend：用于声明全局插件/方法。声明插件/方法使用$.func();直接调用
query.fn.extend：用于声明局部插件/方法。声明插件/方法使用$(“选择器”).func();
150、常见的浏览器内核有哪些？
1，使用Trident的是internet explorer，国产的绝大部分浏览器。Trident是就是
ie内核
2，使用Gecko的是Mozilla Firefox，使用 Gecko 内核的浏览器也有很多，如 Netscape MozillaSuite/SeaMonkey 等
3，使用Presto的是opera，这是目前公认网页浏览速度最快的
浏览器内核
4，使用WebKit的有
苹果的safari，谷歌的chrome，还有国产的大部分双核浏览器其中一核就是WebKit
15一、margin和padding分别适合什么场景使用？
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。 margin用于布局分开元素使元素与元素互不相干； padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段
15二、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的做用。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器须要同时支持旧的已经存在的伪元素写法，
好比:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的伪元素则不容许再支持旧的单冒号的写法。 想让插入的内容出如今其它内容前，使用::before，否者，使用::after；
在代码顺序上，::after生成的内容也比::before生成的内容靠后。
若是按堆栈视角，::after生成的内容会在::before生成的内容之上
15三、 li与li之间（display:inline-block）有看不见的空白间隔是什么缘由引发的？有什么解决办法？
浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，
15四、解释一下JavaScript中的this指针、闭包、做用域？
This指向：JS函数中的this，永远指向函数调用语句所在的对象(谁调用函数，this指向谁)。(2分)
闭包： 在函数中，写一个子函数。内层函数能够访问外层函数中的变量。(2分)
做用域： 变量生效的范围称为做用域。JS中只有全局做用域和函数做用域。(2分)
15五、使用jQuery操做元素的属性attr()方法和val()有什么区别?
Attr():用于读取或者设置元素的属性；
Val(): 用于读取或者设置表单元素的value；
15六、JavaScript怎样建立节点、删除节点、替换节点、复制节点？
建立节点： .creatElement();
删除节点： .removeChild();
替换节点： .replaceChild();
复制节点： .cloneNode(true/false);
15七、CSS中的link和@import有什么区别？经常使用哪一种？
① link属于标准的HTML标签，而@import不是标准标签；
② link能够兼容全部低版本浏览器，而@import只在CSS2以后能用；
③ link是将两个文件连接起来，起桥梁做用； 而@import至关于将CSS文件复制到HTML文件中；
④ link会在HTML文件边加载的过程当中，边连接CSS文件；
@import会在HTML文件所有加载完之后，再导入CSS文件；
相关文章
- 1. JavaScript常见笔试题（持续更新）
- 2. [面试]Java常见面试题,持续更新...
- 3. Javascript之常见算法整理（持续更新）
- 4. 面试题持续更新
- 5. 面试题:持续更新
- 6. 常见js笔试面试题（持续更新）
- 7. TS 常见问题整理（60多个，持续更新ing）
- 8. js常见编程题整理（持续更新中）
- 9. python爬虫常见的一些面试题(持续更新)
- 10. java和C常见技术面试题2015（持续更新中。。。）
- 更多相关文章...
- • ADO 更新记录 - ADO 教程
- • C# 异常处理 - C#教程
- • Docker 清理命令
- • 常用的分布式事务解决方案
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
