js面试题集锦

2019-11-04 本文已影响0人 townof1997

1. javascript的typeof返回哪些数据类型.

答案：string,boolean,number,undefined,function,object

2. 例举3种强制类型转换和2种隐式类型转换?

答案：强制（parseInt,parseFloat,number）
隐式（== ===）

3. split() join() 的区别

答案：前者是将字符串切割成数组的形式，后者是将数组转换成字符串

4. 数组方法pop() push() unshift() shift()

答案：push()尾部添加 pop()尾部删除
unshift()头部添加 shift()头部删除

5. IE和标准下有哪些兼容性的写法

答案：

var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

6. ajax请求的时候get 和post方式的区别

答案：
一个在url后面，一个放在虚拟载体里面
get有大小限制(只能提交少量参数)
安全问题
应用不同，请求数据和提交数据

7. call和apply的区别

答案：
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

8. ajax请求时，如何解析json数据

答案：使用JSON.parse

9. 事件委托是什么

答案: 利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

10. 闭包是什么，有什么特性，对页面有什么影响

答案：闭包就是能够读取其他函数内部变量的函数,使得函数不被GC回收，如果过多使用闭包，容易导致内存泄露

11. 如何阻止事件冒泡

答案：ie:阻止冒泡ev.cancelBubble = true;非IE ev.stopPropagation();

12. 如何阻止默认事件

答案：(1)return false；(2) ev.preventDefault();

13. 添加删除替换插入到某个接点的方法

答案：

1）创建新节点
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

14. 解释jsonp的原理，以及为什么不是真正的ajax

答案：动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作

15. document load 和document ready的区别

答案：document.onload 是在结构和样式,外部js以及图片加载完才执行js
document.ready是dom树创建完成就执行的方法，原生种没有这个方法，jquery中有 $().ready(function)

16. ”==”和“===”的不同

答案：前者会自动转换类型,再判断是否相等
后者不会自动类型转换，直接去比较

17. 函数声明与函数表达式的区别？

在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。

18. 对作用域上下文和this的理解，看下列代码：

var User = {
 count: 1,
 getCount: function() {
  return this.count;
 }
};
console.log(User.getCount()); // what?
var func = User.getCount;
console.log(func()); // what?
问两处console输出什么？为什么？
答案:是1和undefined。
　　func是在window的上下文中被执行的，所以不会访问到count属性。

19. 看下面代码，给出输出结果。

for(var i = 1; i <= 3; i++){  //建议使用let 可正常输出i的值
  setTimeout(function(){
      console.log(i);   
  },0); 
};
答案：4 4 4。
原因：Javascript事件处理器在线程空闲之前不会运行。

20. 当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做?

box.onlick= function(){}
box.addEventListener("click",function(){},false);
<button onclick="xxx()"></button>

21. Javascript的事件流模型都有什么?

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

22. 看下列代码,输出什么?解释原因。

var a = null;
alert(typeof a);
答案：object
解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。

23. 判断字符串以字母开头，后面可以是数字，下划线，字母，长度为6-30

var reg=/^[a-zA-Z]\w{5,29}$/;

24. 回答以下代码，alert的值分别是多少？

<script>
     var a = 100;  
     function test(){  
        alert(a);  
     a = 10;  //去掉了var 就变成定义了全局变量了
        alert(a);  
}  
test();
alert(a);
</script>
正确答案是： 100， 10， 10

25. javaScript的2种变量范围有什么不同？

全局变量：当前页面内有效

局部变量：函数方法内有效

26. null和undefined的区别？

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

当声明的变量还未被初始化时，变量的默认值为undefined。 null用来表示尚未存在的对象

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2）调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

null表示"没有对象"，即该处不应该有值。典型用法是：

（1）作为函数的参数，表示该函数的参数不是对象。

（2）作为对象原型链的终点。

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

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

2、属性和方法被加入到 this 引用的对象中。

3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

28. js延迟加载的方式有哪些？

defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js

29. Flash、Ajax各自的优缺点，在使用中如何取舍？

Flash ajax对比

(1)Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。

(2)ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。

共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM

30. 写一个获取非行间样式的函数

function getStyle(obj,attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
}else{
getComputedStyle(obi,false)[attr] 
}

}

31. 希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)

var inputs = document.getElementsByTagName("input");//获取所有的input标签对象
var checkboxArray = [];//初始化空数组，用来存放checkbox对象。
for(var i=0;i<inputs.length;i++){
  var obj = inputs[i];
  if(obj.type=='checkbox'){
     checkboxArray.push(obj);
  }
}

32. 写一个function，清除字符串前后的空格。（兼容所有浏览器）

String.prototype.trim= function(){

return this.replace(/^\s+/,"").replace(/\s+$/,"");

}

33. javascript语言特性中，有很多方面和我们接触的其他编程语言不太一样,请举例

javascript语言实现继承机制的核心就是 1 (原型)，而不是Java语言那样的类式继承。Javascript解析引擎在读取一个Object的属性的值时，会沿着 2 (原型链)向上寻找，如果最终没有找到，则该属性值为 3 undefined；如果最终找到该属性的值，则返回结果。与这个过程不同的是，当javascript解析引擎执行“给一个Object的某个属性赋值”的时候，如果当前Object存在该属性，则改写该属性的值，如果当前的Object本身并不存在该属性，则赋值该属性的值。

34. Cookie在客户机上是如何存储的

Cookies就是服务器暂存放在你的电脑里的文本文件，好让服务器用来辨认你的计算机。当你在浏览网站的时候，Web服务器会先送一小小资料放在你的计算机上，Cookies 会帮你在网站上所打的文字或是一些选择都记录下来。当下次你再访问同一个网站，Web服务器会先看看有没有它上次留下的Cookies资料，有的话，就会依据Cookie里的内容来判断使用者，送出特定的网页内容给你。

35. 如何获取javascript三个数中的最大值和最小值？

Math.max(a,b,c);//最大值

Math.min(a,b,c)//最小值

36. javascript是面向对象的，怎么体现javascript的继承关系？

使用prototype原型来实现。

37. .form中的input可以设置为readonly和disable，请问2者有什么区别？

readonly不可编辑，但可以选择和复制；值可以传递到后台
disabled不能编辑，不能复制，不能选择；值不可以传递到后台

38. 列举javaScript的3种主要数据类型，2种复合数据类型和2种特殊数据类型。

主要数据类型：string, boolean, number

复合数据类型：function, object

特殊类型：undefined，null

39. 程序中捕获异常的方法？

try{

}catch(e){

}finally{

}

40. Ajax原理

(1)创建对象

var xhr = new XMLHttpRequest();

(2)打开请求

xhr.open('GET', 'example.txt', true);

(3)发送请求

xhr.send(); 发送请求到服务器

(4)接收响应

xhr.onreadystatechange =function(){}

(1)当readystate值从一个值变为另一个值时，都会触发readystatechange事件。

(2)当readystate==4时，表示已经接收到全部响应数据。

(3)当status ==200时，表示服务器成功返回页面和数据。

(4)如果(2)和(3)内容同时满足，则可以通过xhr.responseText，获得服务器返回的内容。

41. 解释什么是Json:

(1)JSON 是一种轻量级的数据交换格式。

(2)JSON 独立于语言和平台，JSON 解析器和 JSON 库支持许多不同的编程语言。

(3)JSON的语法表示三种类型值，简单值(字符串，数值，布尔值，null),数组，对象

42. js中的3种弹出式消息提醒（警告窗口，确认窗口，信息输入窗口）的命令式什么？

alert
confirm
prompt

43. 以下代码执行结果

var uname = 'jack'
function change() {
    alert(uname) // ?
    var uname = 'lily'
    alert(uname)  //?
}
change()
分别alert出 undefined，lily，（变量声明提前问题）

44. 浏览器的滚动距离：

可视区域距离页面顶部的距离

scrollTop=document.documentElement.scrollTop||document.body.scrollTop

45. 可视区的大小：

(1)innerXXX（不兼容ie）

window.innerHeight 可视区高度，包含滚动条宽度

window.innerWidth 可视区宽度，包含滚动条宽度

(2)document.documentElement.clientXXX(兼容ie)

document.documentElement.clientWidth可视区宽度，不包含滚动条宽度

document.documentElement.clientHeight可视区高度，不包含滚动条宽度

46. 节点的种类有几种，分别是什么？

(1)元素节点：nodeType ===1;

(2)文本节点：nodeType ===3;

(3)属性节点：nodeType ===2;

47. innerHTML和outerHTML的区别

innerHTML(元素内包含的内容）

outerHTML(自己以及元素内的内容）

48. offsetWidth offsetHeight和clientWidth clientHeight的区别

(1)offsetWidth （content宽度+padding宽度+border宽度）

(2)offsetHeight（content高度+padding高度+border高度）

(3)clientWidth（content宽度+padding宽度）

(4)clientHeight（content高度+padding高度）

49. 闭包的好处

(1)希望一个变量长期驻扎在内存当中(不被垃圾回收机制回收)

(2)避免全局变量的污染

(3)私有成员的存在

(4)安全性提高

50. 冒泡排序算法

冒泡排序
var array = [5, 4, 3, 2, 1];
var temp = 0;
for (var i = 0; i <array.length; i++){
for (var j = 0; j <array.length - i; j++){
if (array[j] > array[j + 1]){
temp = array[j + 1];
array[j + 1] = array[j];
array[j] = temp;
 }
}

51、js 实现一个函数对javascript中json 对象进行克隆

var oldObject ="sdf";
   var newObject = JSON.parse(JSON.stringify(oldObject));
   console.log(newObject);
或者
    var a = 'dddd';
    function cp(a){return JSON.parse(JSON.stringify(a))}
    console.log(cp(a));

52、js 实现 ajax 请求或者submit请求时锁屏功能以及开锁功能（请求时界面Loading以及元素不能点击，请求完成即消除Loading）

function(url, fn) {
var obj = new XMLHttpRequest(); // XMLHttpRequest对象用于在后台与服务器交换数据
obj.open('GET', url, true);
obj.onreadystatechange = function() {
if(obj.readyState == 4 && obj.status == 200||obj.status == 304) {

               loading.style.display = "none"

            } else {

               alert("不能点击,哈哈哈!");

            }

   };

obj.send(null);
}

53、js 实现一个函数获得url参数的值

function getQueryString(name) { 
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
  var r = window.location.search.substr(1).match(reg); 
  if (r != null) return unescape(r[2]); return null; 
}

54、请用js计算1-10000中出现的0 的次数

new Array(10000).fill('').map((_, index) => index + 1).filter(item => /0/.test(item)).reduce((count, item) => { return count + (String(item).match(/0/g) || []).length}, 0)

55、写一个function，清除字符串前后的空格。（兼容所有浏览器）

function trim(str) {
    if (str & typeof str === "string") {
        return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符
    }
}

56、降维数组

var arr=[[1,2],[3,4]];
function Jw(obj){
     return Array.prototype.concat.apply([],obj);
}
Jw(arr);

57、将url的查询参数解析成字典对象

···
function getQueryObject(url) {
url = url == null ? window.location.href : url;
var search = url.substring(url.lastIndexOf("?") + 1);
var obj = {};
var reg = /([^?&=]+)=([?&=]*)/g;
search.replace(reg, function (rs, [图片上传失败...(image-22575b-1572849341634)]

{
var name = decodeURIComponent([图片上传失败...(image-d832f6-1572849341634)]

2);
val = String(val);
obj[name] = val;
return rs;
});
return obj;
}
···

58、判断一个字符串中出现次数最多的字符，统计这个次数

···
var str = 'asdfssaaasasasasaa';
var json = {};

for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = '';
for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
alert('出现次数最多的是:'+iIndex+'出现'+iMax+'次');
···

59、编写一个方法求一个字符串的字节长度;

···
//假设一个中文占两个字节
var str = '22两是';

alert(getStrlen(str))

function getStrlen(str){
var json = {len:0};
var re = /[\u4e00-\u9fa5]/;
for (var i = 0; i < str.length; i++) {
if(re.test(str.charAt(i))){
json['len']++;
}
};
return json['len']+str.length;
}
···

60、编写一个方法去掉一个数组的重复元素

···
var arr = [1,2,3,1,43,12,12,1];
var json = {};
var arr2 = [];
for (var i = 0; i < arr.length; i++) {
if(!json[arr[i]]){
json[arr[i]] = true;
}else{
json[arr[i]] = false;
}

    if(json[arr[i]]){
            arr2.push(arr[i]);
    }

};

for (var i = 0; i < arr.length; i++) {
if(!aa(arr[i], arr2)){
arr2.push(arr[i])
}
};
function aa(obj, arr){
for (var i = 0; i < arr.length; i++) {
if(arr[i] == obj) return true;
else return false;
};
}
alert(arr2)
···

61、写出3个使用this的典型应用

事件：如onclick this->发生事件的对象
构造函数 this->new 出来的object
call/apply 改变this

62、如何深度克隆

···
var arr = [1,2,43];
var json = {a:6,b:4,c:[1,2,3]};
var str = 'sdfsdf';

var json2 = clone(json);

alert(json['c'])
function clone(obj){
var oNew = new obj.constructor(obj.valueOf());
if(obj.constructor == Object){
for(var i in obj){
oNew[i] = obj[i];
if(typeof(oNew[i]) == 'object'){
clone(oNew[i]);
}
}
}
return oNew;
}
···

63、JavaScript中如何检测一个变量是一个String类型？请写出函数实现

···
typeof(obj) == 'string'
obj.constructor == String;
···

64、网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”

···
var oDate = new Date();
var oYear = oDate.getFullYear();

var oNewDate = new Date();
oNewDate.setFullYear(oYear, 11, 31, 23, 59, 59);
var iTime = oNewDate.getTime()-oDate.getTime();

var iS = iTime/1000;
var iM = oNewDate.getMonth()-oDate.getMonth();
var iDate =iS
···

65、请解释一下什么是语义化的HTML。

内容使用特定标签，通过标签就能大概了解整体页面的布局分布

66、为什么利用多个域名来存储网站资源会更有效？

确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他郁闷访问网站

67、请说出三种减低页面加载时间的方法

1、压缩css、js文件
2、合并js、css文件，减少http请求
3、外部js、css文件放在最底下
4、减少dom操作，尽可能用变量替代不必要的dom操作

68、什么是FOUC？你如何来避免FOUC？

由于css引入使用了@import 或者存在多个style标签以及css文件在页面底部引入使得css文件加载在html之后导致页面闪烁、花屏
用link加载css文件，放在head标签里面

69、文档类型的作用是什么？你知道多少种文档类型？

影响浏览器对html代码的编译渲染
html2.0
xHtml
html5

70、浏览器标准模式和怪异模式之间的区别是什么？

盒模型解释不同

71、闭包

子函数能被外部调用到，则该作用连上的所有变量都会被保存下来。

72、请解释什么是Javascript的模块模式，并举出实用实例。

js模块化mvc（数据层、表现层、控制层）
seajs
命名空间

73、你如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？

对内：模块模式
对外：继承

74、你如何优化自己的代码？

代码重用
避免全局变量（命名空间，封闭空间，模块化mvc..）
拆分函数避免函数过于臃肿
注释

75、你能解释一下JavaScript中的继承是如何工作的吗？

子构造函数中执行父构造函数，并用call\apply改变this
克隆父构造函数原型上的方法

76、请尽可能详尽的解释AJAX的工作原理。

创建ajax对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
判断数据传输方式(GET/POST)
打开链接 open()
发送 send()
当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行回调函数

77、最简单的一道题

···
var a = 2, b = 3;
var c = a+++b; // c = 5
···

78、var和function的预解析问题,以及变量和function的先后顺序的问题

···
// 以下代码执行输出结果是什么
function b () {
console.log(a);
var a = 10;
function a() {};
a = 100;
console.log(a);
}
b();

function c () {
    console.log(a);
    function a() {};
    var a = 10;
    a = 100;
    console.log(a);
}
c();

(function d (num) {
    console.log(num);
    var num = 10;
}(100))

(function e (num) {
    console.log(num);
    var num = 10;
    function num () {};
}(100))

(function f (num) {
    function num () {};
    console.log(num);
    var num =10
    console.log(num);
}(100))

//仍然是预解析(在与解析过程中还要考虑一下当前变量的作用于)
function m () {
    console.log(a1); // underfined
    console.log(a2); // underfined
    console.log(b1); // underfined
    console.log(b2); // underfined
    if(false) {
        function b1 (){};
        var a1 = 10;
    }
    if(true) {
        function b2 (){};
        var a2 = 10;
    }
    console.log(a1); // underfined
    console.log(a2); // 10
    console.log(b1); // underfined
    console.log(b2); // function
}
m();

function n() {
    if(2>1) {
        arr = 10;
        brr = 10;
        let arr;
        var brr;
        console.log(arr);
        console.log(brr);
    }
}
n(); // ReferenceError

···

79、dom事件委托什么原理，有什么优缺点

事件委托原理:事件冒泡机制

优点

1.可以大量节省内存占用，减少事件注册。比如ul上代理所有li的click事件就很不错。
2.可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为合适

缺点

事件代理的常用应用应该仅限于上述需求，如果把所有事件都用事件代理，可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

80、http的cache机制，以及200状态下怎么实现 from cache（表示接触最多的就是304的from cache）（用于优化，没有接触过，需要理解）

含义

定义：浏览器缓存（Browser Caching）是为了加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。

作用

cache的作用：
1、减少延迟，让你的网站更快，提高用户体验。
2、避免网络拥塞，减少请求量，减少输出带宽。

实现手段

Cache-Control中的max-age是实现内容cache的主要手段，共有3种常用策略：max-age和Last-Modified（If-Modified-Since）的组合、仅max-age、max-age和ETag的组合。

对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。
对于比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

81、一个原型链继承的问题

    // 有一个构造函数A，写一个函数B，继承A
    function A (num) {
        this.titileName = num;
    }
    A.prototype = {
        fn1: function () {},
        fn2: function () {}
    }

这个问题的关注点是B继承的A的静态属性，同时B的原型链中不存在A实例的titleName属性

82、什么是虚拟dom

React为啥这么大？因为它实现了一个虚拟DOM（Virtual DOM）。虚拟DOM是干什么的？这就要从浏览器本身讲起

如我们所知，在浏览器渲染网页的过程中，加载到HTML文档后，会将文档解析并构建DOM树，然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树，然后将RenderObject树渲染成页面（当然中间可能会有一些优化，比如RenderLayer树）。这些过程都存在与渲染引擎之中，渲染引擎在浏览器中是于JavaScript引擎（JavaScriptCore也好V8也好）分离开的，但为了方便JS操作DOM结构，渲染引擎会暴露一些接口供JavaScript调用。由于这两块相互分离，通信是需要付出代价的，因此JavaScript调用DOM提供的接口性能不咋地。各种性能优化的最佳实践也都在尽可能的减少DOM操作次数。

而虚拟DOM干了什么？它直接用JavaScript实现了DOM树（大致上）。组件的HTML结构并不会直接生成DOM，而是映射生成虚拟的JavaScript DOM结构，React又通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更，再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在，计算性能会比较好，而且由于减少了实际DOM操作次数，性能会有较大提升

83、js基础数据类型和引用类型分别是什么？这个前提条件下写一个getType，返回相应的类型

1.基本数据类型（自身不可拆分的）：Undefined、Null、Boolean、Number、String
2.引用数据类型（对象）：Object （Array，Date，RegExp，Function）
ES6基本数据类型多了个symbol 据说这道题刷了百分之二十的人感谢Abbyshen提出

function gettype(nm){
    return Object.prototype.toString.call(nm);
}

84、 dom选择器优先级是什么，以及权重值计算（一道老问题了）

1.行内样式 1000
2.id 0100
3.类选择器、伪类选择器、属性选择器[type="text"] 0010
4.标签选择器、伪元素选择器(::first-line) 0001
5.通配符*、子选择器、相邻选择器 0000

85、vue双向数据绑定的原理是什么

首先传输对象的双向数据绑定 Object.defineProperty(target, key, decription),在decription中设置get和set属性（此时应注意description中get和set不能与描述属性共存）
数组的实现与对象不同。
同时运用观察者模式实现wather，用户数据和view视图的更新

86、 react和vue比较来说有什么区别

1 component层面，web component和virtual dom
2 数据绑定（vue双向，react的单向）等好多
3 计算属性 vue 有，提供方便；而 react 不行
4 vue 可以 watch 一个数据项；而 react 不行
5 vue 由于提供的 direct 特别是预置的 directive 因为场景场景开发更容易；react 没有
6 生命周期函数名太长 directive

87、git使用过程中，如果你在开发着业务，突然另一个分支有一个bug要改，你怎么办

git stash       //将本次修改存到暂存区（紧急切换分支时）
git stash pop   //将所有暂存区的内容取出来

88、网页布局有哪几种，有什么区别

静态、自适应、流式、响应式四种网页布局
静态布局：意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；
自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化；
流式布局：你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
自适应布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

89、执行下面代码

var a = {};
var b = {key: 'b'};
var c = {key: 'c'};
var d = [3,5,6];
a[b] = 123;
a[c] = 345;
a[d] = 333;
console.log(a[b]);  // 345
console.log(a[c]);  // 345
console.log(a[d]);  // 333

90、

    var R = (function() {
        var u = {a:1,b:2};
        var r = {
            fn: function(k) {
                return u[k];
            }
        }
        return r;
    }());
    R.fn('a');  // 1

上述代码中如何获取匿名函数中的u

91、不适用循环语句（包括map、forEach方法）实现一个100长度的数组，索引值和值相同的数组[0,1,2,3,4,5........99]

var arr = new Array(100);
//方法1
[...arr.keys()];
//方法二
Array.from(arr.keys());

//方法三
Array.from({length: 100});

// 方法四 借助string
var arr1 = new Array(101);
var str = arr1.join('1,');
str = str.replace(/(1\,)/g, function ($0, $1, index) {
    var start = '' + Math.ceil(index/2);
    if(index < str.length - 2) {
        start += ','
    }
    return start;
});
return str.split(',');

// 方法五（函数式，参考网络）
function reduce(arr, val) {
    if(Object.prototype.toString.apply(val)){
        return;
    }
    if(val >= 100) {
        return arr;
    }
    arr.push(val);
    return reduce(arr, val+1);
}
var res = reduce([], 0)

92、下面语句执行结果输出

var a = function (val, index) {
    console.log(index);
    return {
        fn: function (name) {
            return a(name, val);
        }
    }
}

var b = a(0); // underfined
b.fn(1); // 0
b.fn(2); // 0
b.fn(3); // 0

93、科普

dom节点的根节点是不是body
回答：不是，dom节点的根节点是html(包含head和body，head中分为meta、title等。body又分为一组)

2）dom元素都会有offsetParent吗
回答： offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性返回 null。

[1,3,5]转译成字符串是什么
回答： '1,3,5'
调用toString方法，生成该字符串

4）li标签的祖级元素可以为li，父级元素也可以为例
回答：错误

94、 jsonp原理，jquery是怎么实现的，这样实现有什么好处和坏处

原理

在同源策略下;在某个服务器下的页面是无法获取到该服务器以外的数据的;Jquery中ajax 的核心是通过 XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加 <script>标签来调用服务器提供的 js脚本
当我们正常地请求一个JSON数据的时候，服务端返回的是一串 JSON类型的数据，而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ，所以我们只能把参数通过 url的方式传递, 所以jsonp的 type类型只能是get ！

$.ajax({
    url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
    type: 'GET', // jsonp模式只有GET 是合法的
    data: {
        'action': 'aaron'
    },
    dataType: 'jsonp', // 数据类型
    jsonp: 'backfunc', // 指定回调函数名，与服务器端接收的一致，并回传回来
})
其实jquery 内部会转化成
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron
然后动态加载
<script type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc=>
然后后端就会执行backfunc(传递参数 )，把数据通过实参的形式发送出去。

在jquery 源码中， jsonp的实现方式是动态添加<script>标签来调用服务器提供的 js脚本。jquery 会在window对象中加载一个全局的函数，当 <script>代码插入时函数执行，执行完毕后就 <script>会被移除。同时jquery还对非跨域的请求进行了优化，如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。

95、 http协议属于七层协议中的哪一层，下一层是什么

七层结构：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层
tcp属于传输层；http属于应用层。
表现层

96、 js垃圾回收机制知道哪些，v8引擎使用的哪一种

js的两种回收机制

1 标记清除（mark and sweep）
2 引用计数（reference counting）

javascript与V8引擎

垃圾回收机制的好处和坏处

好处：大幅简化程序的内存管理代码，减轻程序猿负担，并且减少因为长时间运转而带来的内存泄露问题。

坏处：自动回收意味着程序猿无法掌控内存。ECMAScript中没有暴露垃圾回收的借口，我们无法强迫其进行垃圾回收，更加无法干预内存管理。

V8 自动垃圾回收算法
https://segmentfault.com/a/11...

97、作用域什么时候生成的？

页面加载-->创建window全局对象，并生成全局作用域-->然后生成执行上下文，预解析变量(变量提升)，生成全局变量对象；
$scope

98、 websocket长连接原理是什么

含义

Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说。

原理

类似长轮循长连接 ; 发送一次请求 ; 源源不断的得到信息

28. http缓存知道哪些

http://blog.csdn.net/yzf91321...

99、讲一下事件循环机制

执行上下文(Execution context)
函数调用栈(call stack)
队列数据结构(queue)
Promise

https://zhuanlan.zhihu.com/p/...

100、理解web安全吗？都有哪几种，介绍以及如何预防

1.XSS，也就是跨站脚本注入

攻击方法：
1\. 手动攻击:
编写注入脚本，比如”/><script>alert(document.cookie());</script><!--等，
手动测试目标网站上有的input, textarea等所有可能输入文本信息的区域
2\. 自动攻击
利用工具扫描目标网站所有的网页并自动测试写好的注入脚本，比如：Burpsuite等
防御方法：
1\. 将cookie等敏感信息设置为httponly，禁止Javascript通过document.cookie获得
2\. 对所有的输入做严格的校验尤其是在服务器端，过滤掉任何不合法的输入，比如手机号必须是数字，通常可以采用正则表达式
3\. 净化和过滤掉不必要的html标签，比如：<iframe>, alt,<script> 等
4\. 净化和过滤掉不必要的Javascript的事件标签，比如：onclick, onfocus等
5\. 转义单引号，双引号，尖括号等特殊字符，可以采用htmlencode编码 或者过滤掉这些特殊字符
6\. 设置浏览器的安全设置来防范典型的XSS注入

2.SQL注入

攻击方法：
编写恶意字符串，比如‘ or  1=1--等，
手动测试目标网站上所有涉及数据库操作的地方
防御方法：
1\. 禁止目标网站利用动态拼接字符串的方式访问数据库
2\. 减少不必要的数据库抛出的错误信息
3\. 对数据库的操作赋予严格的权限控制
4\. 净化和过滤掉不必要的SQL保留字，比如：where, or, exec 等
5\. 转义单引号，上引号，尖括号等特殊字符，可以采用htmlencode编码 或者过滤掉这些特殊字符

3.CSRF，也就是跨站请求伪造

就是攻击者冒用用户的名义，向目标站点发送请求
防范方法：
1\. 在客户端进行cookie的hashing，并在服务端进行hash认证
2\. 提交请求是需要填写验证码
3\. 使用One-Time Tokens为不同的表单创建不同的伪随机值

101、 sessionStorage和localstorage能跨域拿到吗？比如我在www.baidu.com设置的值能在m.baidu.com能拿到吗？为什么

localStorage会跟cookie一样受到跨域的限制，会被document.domain影响

102、 localstorage不能手动删除的时候，什么时候过期

除非被清除，否则永久保存 clear()可清楚
sessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除

103、cookie可以设置什么域？可以设置.com吗

可以通过设置domin来实现

104、登录状态的保存你认为可以保存在sessionstorage或者localstorage或者cookie或者你知道的哪种方式，存在了哪里？？为什么保存在那里

105、 flux -> redux -> mobx 变化的本质是什么

存储结构将对象加工可观察函数式 vs 面向对象
https://zhuanlan.zhihu.com/p/...

106、按需加载路由怎么加载对应的chunk文件的？换句话说浏览器怎么知道什么时候加载这个chunk，以及webpack是怎么识别那个多个经过hash过的chunk文件

107、get和post有什么区别？get可以通过body传递数据吗

把数据放到 body 里面，必须用 POST 方式取，这是 HTTP 协议限制的。

108、右边宽度固定，左边自适应

第一种：

<style>
body{
    display: flex;
}
.left{
    background-color: rebeccapurple;
    height: 200px;
    flex: 1;
}
.right{
    background-color: red;
    height: 200px;
    width: 100px;
}
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

第二种

<style>
    div {
        height: 200px;
    }
    .left {
        float: right;
        width: 200px;
        background-color: rebeccapurple;
    }
    .right {
        margin-right: 200px;
        background-color: red;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

109、水平垂直居中

第一种

#container{
    position:relative;
}

#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

第二种

#container{
    position:relative;
}

#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}

第三种

#container{
    position:relative;
}

#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

第四种 flex

#container{
    display:flex;
    justify-content:center;
    align-items: center;
}

109、.四种定位的区别

static 是默认值
relative 相对定位相对于自身原有位置进行偏移，仍处于标准文档流中
absolute 绝对定位相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照基准, 完全脱离了标准文档流。
fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。

110、封装一个函数，参数是定时器的时间，.then执行回调函数。

function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

111、一行代码实现数组去重？

[...new Set([1,2,3,1,'a',1,'a'])]

112、使用addEventListener点击li弹出内容，并且动态添加li之后有效

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
var ulNode = document.getElementById("ul");
    ulNode.addEventListener('click', function (e) {
        if (e.target && e.target.nodeName.toUpperCase() == "LI") {
            alert(e.target.innerHTML);
        }
    }, false);

113、怎么判断两个对象相等

JSON.stringify(obj)==JSON.stringify(obj);//true

114、Vue router 除了 router-link 怎么实现跳转?

router.go(1)
router.push('/')

115、Vue router 跳转和 location.href 有什么区别？

router 是 hash 改变
location.href 是页面跳转，刷新页面

116、重排和重绘

部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。
由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新。这样的更新被称为重绘。

117、什么情况会触发重排和重绘

添加、删除、更新 DOM 节点
通过 display: none 隐藏一个 DOM 节点-触发重排和重绘
通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化
移动或者给页面中的 DOM 节点添加动画
添加一个样式表，调整样式属性
用户行为，例如调整窗口大小，改变字号，或者滚动。

118、js bind 实现机制？手写一个 bind 方法？

function bind(fn, context){
  return function (){
     return fn.apply(context, arguments);
  }
}
// 柯理化函数思想   感谢pursuitTom的提出
Function.prototype.bind = function (context) {
    var args = Array.prototype.slice.call(arguments, 1);
    var _this = this;
    return function () {
        var thisArgs = [].slice.call(arguments);
        return _this.apply(context, args.concat(thisArgs))
    };
}
// ES6写法 感谢waterc的提出
Function.prototype.bind = function(context, ...res) {
    let self = this
    return function(...arg) {
        return self.apply(context, [...res,...arg])
    }
}

119、多个函数

var a = (function(){return '1';}, function(){return 1;})();
console.log(typeof a); //number

120、proto、prototype、Object.getPrototypeOf()

__proto__是指内部原型，和Object.getPrototypeOf()结果等价
function f(){}
f.__proto__ === Object.getPrototypeOf(f); //true
f.prototype === Object.getPrototypeOf(f); //false

121、浏览记录前后跳转（尚未试验）

<a href="javascript:history.go(-1)">backward</a>
<a href="javascript:history.go(1)">forward</a>

122、setTimeout 和 setInterval 细谈

常问的点，前者是在一定时间过后将函数添加至执行队列，执行时间=延迟时间+之前函数代码执行时间+执行函数时间。
后者是不管前一次是否执行完毕，每隔一定时间重复执行，用于精准执行互相没有影响的重复操作。
如果需要控制前后执行顺序，最好使用setTimeout模拟setInterval

var time = 400, times = 0, max = 10;
function func(){
  times++;
  if(times < max){
    //code here
    setTimeout(func, time);
  } else {
    console.log("finished");
  }
}
setTimeout(func, time);

123、判断多图片加载完毕

注：用jQueryObject.ready()只能判断dom结构加载完毕
好像描述的不是很清楚，这里写一下代码。
方法1：

var counter = 0;
var queryInterval = 30; //ms
var pics = document.getElementsByClassName("pics");

function singleQuery(i){
  if(pics[i].complete){
    counter++;
    console.log(i + " is loaded");
  } else {
    setTimeout(singleQuery, queryInterval, i);
  }
}

function allQuery(callback){
  if(counter < pics.length){
    console.log("current number of loaded pics: " + counter);
    setTimeout(allQuery, queryInterval, callback);
  } else {
    console.log("All pics are loaded.");
    callback();
  }
}

for(var i = 0; i < pics.length; i++){
  setTimeout(singleQuery, queryInterval, i);
}

setTimeout(allQuery, queryInterval, callback);

主要也是采用setTimeout模拟轮询，判断方式是img标签dom的complete属性（布尔值），缺点是定时器太多。

方法2：

var counter = 0, queryInterval = 50;
var pics = document.getElementsByClassName("pics");
for(var i = 0; i < pics.length; i++){
  pics[i].onload = function(){
    counter++;
    console.log(this.id + " is loaded");
  }
}

function queryPictures(callback){
  if(counter < pics.length){
    console.log("current number of loaded pics: " + counter);
    setTimeout(queryPictures, queryInterval, callback);
  } else {
    console.log("All pics are loaded");
    callback();
  }
}

setTimeout(queryPictures, queryInterval, callback);

利用onload绑定图片加载成功后的回调，通过计数器判断是否加载完毕。

124、CSS margin重叠问题

块元素在垂直方向上的margin是很奇怪的，会有重叠现象。
如果display都是block，有三种情况：
外间距均为正数，竖直方向上会选择最大的外边距作为间隔
一正一负，间距 = 正 - |负|
两个负，间距 = 0 - 绝对值最大的那个
设置display: inline-block的盒子不会有margin重叠，position: absolute的也不会出现。

125、CSS选择器优先级 && CSS选择器效率

ID > 类 > 标签 > 相邻 > 子选择器 > 后代选择器 > * > 属性 > 伪类

object.propertyIsEnumerable(xxx)

判断对象中是否有xxx属性，并且能通过for in枚举，如Array对象的length是不可枚举的

126、判断数组

function isArray(arr){
    return Object.prototype.toString.call(arr) === '[Object Array]';
}

127、git fetch && git pull

git pull自动完成了fetch最新远程版本，并且和本地进行merge
git fetch获得远程分支，要继续手动merge合并

128、WebSocket

HTML5带来的新协议，通过类似HTTP的请求建立连接。主要目的是可以获取服务端的推送。
原来的方式可能是使用long poll（即不中断连接一直等待数据），或者是ajax轮询的方式（每隔一段时间发送请求，建立连接，询问是否有新的数据）。这两种方式的缺点在于long poll的阻塞，以及ajax轮询的冗余连接。
WebSocket的设计思想有点类似于回调，在发送请求升级服务端的协议并收到确认信息后，服务端一有新的信息/数据就会主动推送给客户端，至于要一次HTTP握手便可以建立持久连接

129、跨域相关

只要协议、域名、端口有不同，则视为不同的域。（域名和域名对应的IP也是跨域）

1.CORS: Cross-Origin Resource Sharing

基于服务器支持的跨域，服务器设置Access-Control-Allow-Origin响应头，浏览器可允许跨域

2.设置domain

能从子域设到主域，如a.b.c.com—>b.c.com—>c.com
具体情况：在页面中用iframe打开了另一个页面（前提：两个页面主域是相同的）
利用frameElement.contentWindow.document.domain设置frame子页面的主域，document.domain设置主页面的主域，之后就能互相获取dom中的数据。
缺点是只能用于不同子域间的交互。

3.例如拥有src属性的img标签，每次改变src属性，都会发起http请求。

var img = new Image();
img.onload = function(){
  //code here
};
img.onerror = function(){
  //code here
};
img.src="http://server.com/data?query=3";

缺点是只能使用GET请求，不能获取数据，一般用于提交统计信息什么的。
script、link、iframe只有在添加到DOM中才会发起请求

4.HTML5 postMessage

支持IE8+和主流浏览器，写法也简单..

//source: http://test.org:4000
//get the window object of target origin
var win = window.open("http://target.com");
//or this, when a frame is used
var win = document.getElementById("targetId").contentWindow;
win.postMessage("data here", "http://target.com/rest");

//target: http://target.com/tiny
function handleMessage(event){
  if(event.orgin!="http://test.org:4000")
    return;
  var data = event.data;
  //code here

  //event.source is window.opener
  event.source.postMessage("response data here", event.origin);
}
window.addEventListener("message", handleMessage, false);

5.window.name

即使在页面打开多层iframe后，每个iframe中window.name 属性值都是相同的，以此用作数据传输的工具。
但由于跨域的限制，是无法获取另一个frame中的window.name数据，所以要使用一个同域的代理(proxy.html)：

6. jsonp

目前主流跨域方法
调用其他域的脚本获取数据，前提是另一个域能知道回调函数名，这个可以通过请求发送给目标域。
直接写jQuery封的jsonp

$.getJSON("http://target.com/data?callback=callbackFunctionName", function(data){});

$.getJSON会把获取的responseText转为json，如果url中有callback参数，数据会以script标签形式获取。

130、闭包相关

什么是闭包

闭包是指有权访问另一个函数作用域中变量的函数

怎么创建闭包

在函数内部嵌套使用函数

function fn() {
           for (var i = 0; i < 2; i++) {
               (function () {
                   var variate = i;
                   setTimeout(function () {
                       console.log("setTimeout执行后:"+variate);
                   }, 1000);
               })();//闭包,立即执行函数,匿名函数

           }
          console.log(i);//2
          console.log(variate);//variate is not defined
       }
       fn();

为什么用闭包

因为在闭包内部保持了对外部活动对象的访问,但外部的变量却无法直接访问内部,避免了全局污染;
可以当做私有成员,弥补了因js语法带来的面向对象编程的不足;
可以长久的在内存中保存一个自己想要保存的变量.

闭包的缺点

可能导致内存占用过多,因为闭包携带了自身的函数作用域
闭包只能取得外部包含函数中得最后一个值

详见https://segmentfault.com/a/11...

131、a:active 移动端实现

有时候一些按钮的简单点击交互可以通过css伪类来实现；必须点击了更改颜色；松开恢复；IOS手机会出现伪类无效的情况；iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。

document.body.addEventListener('touchstart', function () { //...空函数即可});

132、ios滑动卡顿

-webkit-overflow-scrolling:touch 可能会在IOS系统低的情况出现滚动条；尝试溢出解决

133、forEach和map的区别

相同点

都是循环遍历数组中的每一项
forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组）
匿名函数中的this都是指向window
只能遍历数组
都有兼容问题

不同点

map速度比foreach快
map会返回一个新数组，不对原数组产生影响,foreach不会产生新数组，
map因为返回数组所以可以链式操作，foreach不能

134、浅拷贝和深拷贝

jQuery.extend第一个参数可以是布尔值，用来设置是否深度拷贝的

jQuery.extend(true, { a : { a : "a" } }, { a : { b : "b" } } );
jQuery.extend( { a : { a : "a" } }, { a : { b : "b" } } );

最简单的深拷贝

aa = JSON.parse( JSON.stringify(a) )

浅复制--->就是将一个对象的内存地址的“”编号“”复制给另一个对象。深复制--->实现原理，先新建一个空对象，内存中新开辟一块地址，把被复制对象的所有可枚举的(注意可枚举的对象)属性方法一一复制过来，注意要用递归来复制子对象里面的所有属性和方法，直到子子.....属性为基本数据类型。总结，深复制理解两点，1,新开辟内存地址，2,递归来刨根复制。

135、外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

136、js加载位置区别优缺点

html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。
所以，大部分网上讨论是将script脚本放在<body>之后，那样dom的生成就不会因为长时间执行script脚本而延迟阻塞，加快了页面的加载速度。

但又不能将所有的script放在body之后，因为有一些页面的效果的实现，是需要预先动态的加载一些js脚本。所以这些脚本应该放在<body>之前。

其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效

script放置位置的原则“页面效果实现类的js应该放在body之前，动作，交互，事件驱动，需要访问dom属性的js都可以放在body之后

1、js用什么函数判断一个变量的类型

一般简单的用typeof 和instanceof 检测， typeof 检测数组和对象时候，返回object,

instanceof 检测用来检测数组或者对象返回true/false

console.log(typeof({"name":'789'}))
typeof //判断数字
instanceof //判断对象和数组的
// 判断 foo 是否是 Foo 类的实例
function Foo(){}
var foo = {
"name":'999'
};
console.log(foo instanceof Array)//false

2、typeof（数字）返回值是什么 (number)

3、js 闭包的作用

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

4、怎么提高网页的加载速度

1、使用精灵图

2、css 放在文件的头部 js 放在文件的底部

3、减少http 的请求（封装公共的函数）

4、不用的代码可以删掉，不要注释

5、CDN缓存（content deliverly network 内容分发网络）当代码上传到服务器，使

用CDN缓存，用户访问的时候，就会使用用户最近的位置的（边缘服务器）响应用户的操

作，这样距离短，响应的时间就会短，用户很快会看到操作的结果

5、js怎么遍历对象

1、使用 for in

2、object.keys(obj) object.values(obj)

3、object.GetOwnPropertyNames(obj)

6、浏览器加载资源（html、图片、js、css）的顺序

html 图片 css js

7、css选择器的优先级，假设有一个元素<div id="test" class="test"></div>

test {width:100px}

.test {widht:200px}

width结果是100px

Div{width:100px}

div.test {widht:200px}

width结果是200px

8、 css 定位，悬浮在右下角

position: fixed,设置z-index

9、jsonp原理

JSONP (json with padding) 通过javascript callback 实现跨域访问的一种机制

由于同源策略的机制，XMLhttpRequest只允许访问同域名同协议同端口下的资源，所

以使用带有src 属性的标签能够使浏览器返回数据，从而解决跨域请求问题

10、Ajax的原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得

数据，然后用javascript来操作DOM而更新页面。

11、jQuery选择器，选择页面所有的name=hello的input框，并且给所有的input框赋

值"test"

$("input[name='hello']").val("test") 选择所有的name属性等于'hello'的input元素

12、http请求流程

1、web服务器和浏览器服务器建立连接

2、web服务器向浏览器服务器发送命令

3、web服务器向浏览器服务器发送请求头

4、浏览器服务器向web服务器应答

5、浏览器服务器向web服务器发送应答头

6、web服务器向浏览器服务器发送数据

7、web服务器向浏览器服务器断开连接

1、js的数据类型
js的数据类型分为基本类型跟引用类型
基本数据类型（5个）：undefined，boolean，number，string，null.基本类型的访问是按值访问的，就是说你可以操作保存在变量中的实际的值
基本数据类型的特点：
1.基本类型的值是不可变得：
任何方法都无法改变一个基本类型的值，比如一个字符串：
var name = 'jozo';
name.toUpperCase(); // 输出 'JOZO'
console.log(name); // 输出 'jozo'
会发现原始的name并未发生改变，而是调用了toUpperCase()方法后返回的是一个新的字符串。
再来看个：
var person = 'jozo';
person.age = 22;
person.method = function(){//...};
console.log(person.age); // undefined
console.log(person.method); // undefined
通过上面代码可知，我们不能给基本类型添加属性和方法，再次说明基本类型时不可变得；
2.基本类型的比较是值的比较：
只有在它们的值相等的时候它们才相等。
但你可能会这样：
var a = 1;
var b = true;
console.log(a == b);//true
它们不是相等吗？其实这是类型转换和 == 运算符的知识了，也就是说在用==比较两个不同类型的变量时会进行一些类型转换。像上面的比较先会把true
转换为数字1再和数字1进行比较，结果就是true了。这是当比较的两个值的类型不同的时候==运算符会进行类型转换，但是当两个值的类型相同的时候，
即使是==也相当于是===。
var a = 'jozo';
var b = 'jozo';
console.log(a === b);//true
3.基本类型的变量是存放在栈区的（栈区指内存里的栈内存）
假如有以下几个基本类型的变量：
var name = 'jozo';
var city = 'guangzhou';
var age = 22;
那么它的存储结构如下图：

栈区.png
2.引用类型
引用类型会比较好玩有趣一些。
javascript中除了上面的基本类型(number,string,boolean,null,undefined)之外就是引用类型了，也可以说是就是对象了。对象是属性和方法的集合。
也就是说引用类型可以拥有属性和方法，属性又可以包含基本类型和引用类型。来看看引用类型的一些特性：
1.引用类型的值是可变的
我们可为为引用类型添加属性和方法，也可以删除其属性和方法，如：
var person = {};//创建个控对象 --引用类型
person.name = 'jozo';
person.age = 22;
person.sayName = function(){console.log(person.name);}
person.sayName();// 'jozo'
delete person.name; //删除person对象的name属性
person.sayName(); // undefined
上面代码说明引用类型可以拥有属性和方法，并且是可以动态改变的。
2.引用类型的值是同时保存在栈内存和堆内存中的对象
javascript和其他语言不同，其不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间，那我们操作啥呢？实际上，是操作对象的引用，
所以引用类型的值是按引用访问的。
准确地说，引用类型的存储需要内存的栈区和堆区（堆区是指内存里的堆内存）共同完成，栈区内存保存变量标识符和指向堆内存中该对象的指针，
也可以说是该对象在堆内存的地址。
假如有以下几个对象
var person1 = {name:'jozo'};
var person2 = {name:'xiaom'};
var person3 = {name:'xiaoq'};
则这三个对象的在内存中保存的情况如下图：

栈区和堆区.png
3.引用类型的比较是引用的比较
var person1 = '{}';
var person2 = '{}';
console.log(person1 == person2); // true
上面讲基本类型的比较的时候提到了当两个比较值的类型相同的时候，相当于是用 === ，所以输出是true了。再看看：
var person1 = {};
var person2 = {};
console.log(person1 == person2); // false
可能你已经看出破绽了，上面比较的是两个字符串，而下面比较的是两个对象，为什么长的一模一样的对象就不相等了呢？
别忘了，引用类型时按引用访问的，换句话说就是比较两个对象的堆内存中的地址是否相同，那很明显，person1和person2在堆内存中地址是不同的：

栈区和堆区2.png
所以这两个是完全不同的对象，所以返回false;
3.简单赋值
在从一个变量向另一个变量赋值基本类型时，会在该变量上创建一个新值，然后再把该值复制到为新变量分配的位置上：
var a = 10;
var b = a;
a ++ ;
console.log(a); // 11
console.log(b); // 10
此时，a中保存的值为 10 ，当使用 a 来初始化 b 时，b 中保存的值也为10，但b中的10与a中的是完全独立的，该值只是a中的值的一个副本，此后，
这两个变量可以参加任何操作而相互不受影响。

image
也就是说基本类型在赋值操作后，两个变量是相互不受影响的。
4.对象引用
当从一个变量向另一个变量赋值引用类型的值时，同样也会将存储在变量中的对象的值复制一份放到为新变量分配的空间中。前面讲引用类型的时候提到，
保存在变量中的是对象在堆内存中的地址，所以，与简单赋值不同，这个值的副本实际上是一个指针，而这个指针指向存储在堆内存的一个对象。那么赋值操作后，
两个变量都保存了同一个对象地址，则这两个变量指向了同一个对象。因此，改变其中任何一个变量，都会相互影响：
var a = {}; // a保存了一个空对象的实例
var b = a; // a和b都指向了这个空对象
a.name = 'jozo';
console.log(a.name); // 'jozo'
console.log(b.name); // 'jozo'
b.age = 22;
console.log(b.age);// 22
console.log(a.age);// 22

console.log(a == b);// true
它们的关系如下图：

image

因此，引用类型的赋值其实是对象保存在栈区地址指针的赋值，因此两个变量指向同一个对象，任何的操作都会相互影响。

2、jquery的链式调用原理

原理是因为jquery是用了原型链然后是通过return this；返回这个对象，所以可以连着调用即连着写入，但是不能连着读取。

3、判断数据类型

使用typeof判断数据类型，但是对于obj没办法进行判断（obj包括array、obj、function）。

所以我们可以通过使用constructor来判断，对象的constructor属性用于返回创建该对象的函数，也就是我们常说的构造函数。

// 字符串：String()
var str = "张三";
document.writeln(str.constructor); // function String() { [native code] }
document.writeln(str.constructor === String); // true // 数组：Array()
var arr = [1, 2, 3];
document.writeln(arr.constructor); // function Array() { [native code] }
document.writeln(arr.constructor === Array); // true // 数字：Number()
var num = 5;
document.writeln(num.constructor); // function Number() { [native code] }
document.writeln(num.constructor === Number); // true // 自定义对象：Person()
function Person(){ this.name = "CodePlayer";
} var p = new Person();
document.writeln(p.constructor); // function Person(){ this.name = "CodePlayer"; }
document.writeln(p.constructor === Person); // true // JSON对象：Object()
var o = { "name" : "张三"};
document.writeln(o.constructor); // function Object() { [native code] }
document.writeln(o.constructor === Object); // true // 自定义函数：Function()
function foo(){
    alert("CodePlayer");
}
document.writeln(foo.constructor); // function Function() { [native code] }
document.writeln(foo.constructor === Function); // true // 函数的原型：bar()
function bar(){
    alert("CodePlayer");
}
document.writeln(bar.prototype.constructor); // function bar(){ alert("CodePlayer"); }
document.writeln(bar.prototype.constructor === bar); // true</pre>

4、js继承之原型链继承
每创建一个函数，该函数就会自动带有一个 prototype 属性。该属性是个指针，指向了一个对象，我们称之为 原型对象。什么是指针？指针就好比学生的学号，原型对象则是那个学生。我们通过学号找到唯一的那个学生。假设突然，指针设置 null, 学号重置空了，不要慌，对象还存在，学生也没消失。只是不好找了。

原型对象上默认有一个属性 constructor，该属性也是一个指针，指向其相关联的构造函数。

通过调用构造函数产生的实例，都有一个内部属性，指向了原型对象。所以实例能够访问原型对象上的所有属性和方法。

所以三者的关系是，每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。通俗点说就是，实例通过内部指针可以访问到原型对象，原型对象通过constructor指针，又可以找到构造函数。

 function Dog (name) { this.name = name; this.type = 'Dog'; 
}
Dog.prototype.speak = function () {
　　alert('wang');
} var doggie = new Dog('jiwawa');
doggie.speak(); //wang

以上代码定义了一个构造函数 Dog(), Dog.prototype 指向的原型对象，其自带的属性construtor又指回了 Dog，即 Dog.prototype.constructor == Dog. 实例doggie由于其内部指针指向了该原型对象，所以可以访问到 speak方法。

image

Dog.prototype 只是一个指针，指向的是原型对象，但是这个原型对象并不特别，它也只是一个普通对象。假设说，这时候，我们让 Dog.protptype 不再指向最初的原型对象，而是另一个类（Animal）的实例，情况会怎样呢？

image

二、原型链

前面我们说到，所有的实例有一个内部指针，指向它的原型对象，并且可以访问原型对象上的所有属性和方法。doggie实例指向了Dog的原型对象，可以访问Dog原型对象上的所有属性和方法；如果Dog原型对象变成了某一个类的实例 aaa，这个实例又会指向一个新的原型对象 AAA，那么 doggie 此时就能访问 aaa 的实例属性和 AA A原型对象上的所有属性和方法了。同理，新的原型对象AAA碰巧又是另外一个对象的实例bbb，这个实例bbb又会指向新的原型对象 BBB，那么doggie此时就能访问 bbb 的实例属性和 BBB 原型对象上的所有属性和方法了。
　　这就是JS通过原型链实现继承的方法了。看下面一个例子：

//定义一个 Animal 构造函数，作为 Dog 的父类
function Animal () { this.superType = 'Animal';
}

Animal.prototype.superSpeak = function () {
    alert(this.superType);
}

function Dog (name) { this.name = name; this.type = 'Dog';  
} //改变Dog的prototype指针，指向一个 Animal 实例
Dog.prototype = new Animal(); //上面那行就相当于这么写 //var animal = new Animal(); //Dog.prototype = animal;
 Dog.prototype.speak = function () {
　　alert(this.type);
} var doggie = new Dog('jiwawa');
doggie.superSpeak(); //Animal </pre>

解释一下。以上代码，首先定义了一个 Animal 构造函数，通过new Animal()得到实例，会包含一个实例属性 superType 和一个原型属性 superSpeak。另外又定义了一个Dog构造函数。然后情况发生变化，代码中加粗那一行，将Dog的原型对象覆盖成了 animal 实例。当 doggie 去访问superSpeak属性时，js会先在doggie的实例属性中查找，发现找不到，然后，js就会去doggie 的原型对象上去找，doggie的原型对象已经被我们改成了一个animal实例，那就是去animal实例上去找。先找animal的实例属性，发现还是没有 superSpeack, 最后去 animal 的原型对象上去找，诶，这才找到。

image
这就说明，我们可以通过原型链的方式，实现 Dog 继承 Animal 的所有属性和方法。
总结来说：就是当重写了Dog.prototype指向的原型对象后，实例的内部指针也发生了改变，指向了新的原型对象，然后就能实现类与类之间的继承了。（但是如果在重写原型对象之前，产生的实例，其内部指针指向的还是最初的原型对象。这个我下次再发篇文章讲。js 继承之借用构造函数继承）
加深 http://www.cnblogs.com/sarahwang/p/6879161.html
5、JavaScript设计模式
6、怎么减少dom操作
7、var let const
var可以变量提升而另外2个不能，另外两个不能重复声明，有块作用域
8、cankaolianjie 事件委托详解

基本信息

1.你觉得前端工程师的价值体现在哪？

为简化用户使用提供技术支持（交互部分）
为多个浏览器兼容性提供支持
为提高用户浏览速度（浏览器性能）提供支持
为跨平台或者其他基于webkit或者其他渲染引擎的应用提供支持
为展示数据提供支持（数据接口）

HTML/HTML5

1.知道语义化吗？说说你理解的语义化，如果是你，平时会怎么做来保证语义化？
像html5的新的标签header,footer,section等就是语义化
一方面，语义化就是让计算机能够快读的读懂内容，高效的处理信息，可以对搜索引擎更友好
另一方面，便于与他人的协作，他人通过读代码就可以理解你网页标签的意义
去掉或者丢失样式的时候能够让页面呈现出清晰的结构
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义方式来渲染网页
便于团队开发和维护，语义化更具有可读性，是下一步把网页的重要动向，遵循W3C标准的团队都要遵循这个标准，减少差异化

2.介绍HTML5的新特性

新的DOCTYPE声明<!DOCTYPE html>
完全支持css3
video和audio
本地存储
语义化表圈
canvas
新事件如 ondrag onresize

3.如果解决ajax无法后退的问题？

html5里引入了新的API，即：history.pushState,history.replaceState
可以通过pushState和replaceSate接口浏览器历史，并且改变当前页面的URL
onpopstate监听后退

4.websocket和ajax轮询

websocket是html5中提出的新的协议，可以实现客户端与服务器的通信，实现服务器的推送功能
优点是，只要简历一次连接，就可以连续不断的得到服务器推送消息，节省带宽和服务器端的压力。
ajax轮询模拟常连接就是每隔一段时间（0.5s）就向服务器发起ajax请求，查询服务器是否有数据更新
缺点就是，每次都要建立HTTP连接，即使需要传输的数据非常少，浪费带宽

5.web worker和websocket

worker主线程：
通过worker = new worker(url)加载一个js文件来创建一个worker，同时返回一个worker实例
通过worker.postMessage(data)方法来向worker发送数据。
绑定worker.onmessage方法来接收worder发送过来的数据
可以使用worker.terminate()来终止一个worder的执行。
　　websocket
是web应用程序的传输协议，它提供了双向的，按序到达的数据流。他是一个HTML5协议，websocket链接是持久的，通过在客户端和服务器之间保持双向链接，服务器的更新可以被及时推送给客户端，而不需要客户端以一定的时间去轮询

6.Doctype作用？严格模式与混杂模式如果区分？意义？

<!DOCTYPE>声明位于文档的最前面，处于标签之前。告知浏览器以何种模式来渲染文档
严格模式的排版和js运作模式是以该浏览器支持的最高标准运行
在混杂模式中，页面已宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

7.Doctype多少种文档类型？

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

8.HTML与XHTML，有什么区别？

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

1、介绍JavaScript的基本数据类型
　　Number、String 、Boolean 、Null、Undefined
　　Object 是 JavaScript 中所有对象的父对象
　　数据封装类对象：Object、Array、Boolean、Number 和 String
　　其他对象：Function、Arguments、Math、Date、RegExp、Error
　　新类型：Symbol
　　2 、说说写JavaScript的基本规范?
　　1) 不要在同一行声明多个变量
　　2) 使用 ===或!==来比较true/false或者数值
　　3) switch必须带有default分支
　　4) 函数应该有返回值
　　5) for if else 必须使用大括号
　　6) 语句结束加分号
　　7) 命名要有意义，使用驼峰命名法
　　3 、jQuery的使用建议
　　1) 尽量减少对dom元素的访问和操作
　　2) 尽量避免给dom元素绑定多个相同类型的事件处理函数，可以将多个相同类型事件
　　处理函数合并到一个处理函数，通过数据状态来处理分支
　　3) 尽量避免使用toggle事件
　　4 、Ajax使用
　　全称： Asynchronous Javascript And XML
　　所谓异步，就是向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。
　　创建Ajax的过程：
　　1) 创建XMLHttpRequest对象(异步调用对象)
　　var xhr = new XMLHttpRequest();
　　2) 创建新的Http请求(方法、URL、是否异步)
　　xhr.open(‘get’,’example.php’,false);
　　3) 设置响应HTTP请求状态变化的函数。
　　onreadystatechange事件中readyState属性等于4。响应的HTTP状态为200(OK)或者304(Not Modified)。
　　4) 发送http请求
　　xhr.send(data);
　　5) 获取异步调用返回的数据
　　注意：
A、页面初次加载时，尽量在web服务器一次性输出所有相关的数据，只在页面加载完成之后，用户进行操作时采用ajax进行交互。
　　B、同步ajax在IE上会产生页面假死的问题。所以建议采用异步ajax。
　　C、尽量减少ajax请求次数
　　D 、ajax安全问题，对于敏感数据在服务器端处理，避免在客户端处理过滤。对于关键业务逻辑代码也必须放在服务器端处理。
　　5 、JavaScript有几种类型的值?你能画一下他们的内存图吗?
　　基本数据类型存储在栈中，引用数据类型(对象)存储在堆中，指针放在栈中。
　　两种类型的区别是：存储位置不同;原始数据类型直接存储在栈中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储;引用数据类型存储在堆中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能
　　引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。
　　6 、栈和堆的区别?
　　栈(stack)：由编译器自动分配释放，存放函数的参数值，局部变量等;
　　堆(heap)：一般由程序员分配释放，若程序员不释放，程序结束时可能由操作系统释放。
　　7、 Javascript作用链域
　　作用域链的原理和原型链很类似，如果这个变量在自己的作用域中没有，那么它会寻找父级的，直到最顶层。
　　注意：JS没有块级作用域，若要形成块级作用域，可通过(function(){｝)();立即执行的形式实现。
　　8、谈谈this的理解
　　1) this总是指向函数的直接调用者(而非间接调用者)
　　2) 如果有new关键字，this指向new出来的那个对象
　　3) 在事件中，this指向目标元素，特殊的是IE的attachEvent中的this总是指向全局对象window。
　　9、 eval是做什么的?
　　它的功能是把对应的字符串解析成JS代码并运行;应该避免使用eval，不安全，非常耗性能(2次，一次解析成js语句，一次执行)。
　　10、什么是window对象? 什么是document对象?
　　window对象代表浏览器中打开的一个窗口。document对象代表整个html文档。实际上，document对象是window对象的一个属性。
　　11、 null，undefined的区别?
　　null表示一个对象被定义了，但存放了空指针，转换为数值时为0。
　　undefined表示声明的变量未初始化，转换为数值时为NAN。
　　typeof(null) -- object;
　　typeof(undefined) -- undefined
　　12、 ["1", "2", "3"].map(parseInt) 答案是多少?
　　[1,NaN,NaN]
　　解析：
　　Array.prototype.map()
　　array.map(callback[, thisArg])
　　callback函数的执行规则
　　参数：自动传入三个参数
　　currentValue(当前被传递的元素);
　　index(当前被传递的元素的索引);
　　array(调用map方法的数组)
　　parseInt方法接收两个参数
　　第三个参数["1", "2", "3"]将被忽略。parseInt方法将会通过以下方式被调用
　　parseInt("1", 0)
　　parseInt("2", 1)
　　parseInt("3", 2)
　　parseInt的第二个参数radix为0时，ECMAScript5将string作为十进制数字的字符串解析;
　　parseInt的第二个参数radix为1时，解析结果为NaN;
　　parseInt的第二个参数radix在2—36之间时，如果string参数的第一个字符(除空白以外)，不属于radix指定进制下的字符，解析结果为NaN。
　　parseInt("3", 2)执行时，由于"3"不属于二进制字符，解析结果为NaN。
　　13 、关于事件，IE与火狐的事件机制有什么区别? 如何阻止冒泡?
　　IE为事件冒泡，Firefox同时支持事件捕获和事件冒泡。但并非所有浏览器都支持事件捕获。jQuery中使用event.stopPropagation()方法可阻止冒泡;(旧IE的方法 ev.cancelBubble = true;)
　　14、什么是闭包(closure)，为什么要用它?
　　闭包指的是一个函数可以访问另一个函数作用域中变量。常见的构造方法，是在一个函数内部定义另外一个函数。内部函数可以引用外层的变量;外层变量不会被垃圾回收机制回收。
　　注意，闭包的原理是作用域链，所以闭包访问的上级作用域中的变量是个对象，其值为其运算结束后的最后一个值。
　　优点：避免全局变量污染。缺点：容易造成内存泄漏。
　　例子：
　　function makeFunc() {
　　var name = "Mozilla";
　　function displayName() {
　　console.log(name);
　　}
　　return displayName;
　　}
　　var myFunc = makeFunc();
　　myFunc(); //输出Mozilla
　　myFunc 变成一个闭包。闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。在我们的例子中，myFunc 是一个闭包，由 displayName 函数和闭包创建时存在的 "Mozilla" 字符串形成。
　　15、 javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么?
　　除了正常模式运行外，ECMAscript添加了第二种运行模式：“严格模式”。
　　作用：
　　1) 消除js不合理，不严谨地方，减少怪异行为
　　2) 消除代码运行的不安全之处，
　　3) 提高编译器的效率，增加运行速度
　　4) 为未来的js新版本做铺垫。
　　16、如何判断一个对象是否属于某个类?
　　使用instanceof 即if(a instanceof Person){alert('yes');}
　　17、 new操作符具体干了什么呢?
　　1) 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
　　2) 属性和方法被加入到 this 引用的对象中。
　　3) 新创建的对象由 this 所引用，并且最后隐式的返回 this 。
　　18、Javascript中，执行时对象查找时，永远不会去查找原型的函数?
　　Object.hasOwnProperty(proName)：是用来判断一个对象是否有你给出名称的属性。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。
　　19、对JSON的了解?
　　全称：JavaScript Object Notation
　　JSON中对象通过“{}”来标识，一个“{}”代表一个对象，如{“AreaId”:”123”}，对象的值是键值对的形式(key：value)。JSON是JS的一个严格的子集，一种轻量级的数据交换格式，类似于xml。数据格式简单，易于读写，占用带宽小。
　　两个函数：
　　JSON.parse(str)
　　解析JSON字符串把JSON字符串变成JavaScript值或对象
　　JSON.stringify(obj)
　　将一个JavaScript值(对象或者数组)转换为一个 JSON字符串
　　eval('('+json+')')
　　用eval方法注意加括号而且这种方式更容易被攻击
　　JS的延迟加载有助与提高页面的加载速度。
　　defer和async、动态创建DOM方式(用得最多)、按需异步载入JS
　　defer：延迟脚本。立即下载，但延迟执行(延迟到整个页面都解析完毕后再运行)，按照脚本出现的先后顺序执行。
　　async：异步脚本。下载完立即执行，但不保证按照脚本出现的先后顺序执行。
　　21、同步和异步的区别?
　　同步的概念在操作系统中：不同进程协同完成某项工作而先后次序调整(通过阻塞、唤醒等方式)，同步强调的是顺序性，谁先谁后。异步不存在顺序性。
　　同步：浏览器访问服务器，用户看到页面刷新，重新发请求，等请求完，页面刷新，新内容出现，用户看到新内容之后进行下一步操作。
　　异步：浏览器访问服务器请求，用户正常操作，浏览器在后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。
　　22、页面编码和被请求的资源编码如果不一致如何处理?
　　若请求的资源编码，如外引js文件编码与页面编码不同。可根据外引资源编码方式定义为 charset="utf-8"或"gbk"。
　　比如：http://www.yyy.com/a.html 中嵌入了一个http://www.xxx.com/test.js
　　a.html 的编码是gbk或gb2312的。而引入的js编码为utf-8的，那就需要在引入的时候
　　23、模块化开发怎么做?
　　模块化开发指的是在解决某一个复杂问题或者一系列问题时，依照一种分类的思维把问题进行系统性的分解。模块化是一种将复杂系统分解为代码结构更合理，可维护性更高的可管理的模块方式。对于软件行业：系统被分解为一组高内聚，低耦合的模块。
　　1）定义封装的模块
　　2）定义新模块对其他模块的依赖
　　3）可对其他模块的引入支持。在JavaScript中出现了一些非传统模块开发方式的规范。 CommonJS的模块规范，AMD(Asynchronous Module Definition)，CMD(Common Module Definition)等。AMD是异步模块定义，所有的模块将被异步加载，模块加载不影响后边语句运行。
　　24、 AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)规范区别?
　　AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
　　区别：
　　1) 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行(根据写法不同，处理方式不同)。
　　2) CMD 推崇依赖就近，AMD 推崇依赖前置。
　　3) AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。
　　// CMD
　　define(function(require, exports, module) {
　　var a = require('./a')
　　a.doSomething()
　　// 此处略去 100 行
　　var b = require('./b') // 依赖可以就近书写
　　b.doSomething()
　　})
　　// AMD 默认推荐
　　define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
　　a.doSomething();
　　// 此处略去 100 行
　　b.doSomething();
　　})
　　25、 requireJS的核心原理是什么?(如何动态加载的?如何避免多次加载的?如何缓存的?)
　　核心是js的加载模块，通过正则匹配模块以及模块的依赖关系，保证文件加载的先后顺序，根据文件的路径对加载过的文件做了缓存。
　　26、 call和apply
　　call()方法和apply()方法的作用相同，动态改变某个类的某个方法的运行环境。他们的区别在于接收参数的方式不同。在使用call()方法时，传递给函数的参数必须逐个列举出来。使用apply()时，传递给函数的是参数数组。
　　27、回流与重绘
　　当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树。完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘
　　28、DOM操作
　　1）创建新节点
　　createDocumentFragment() //创建一个DOM片段
　　createElement() //创建一个具体的元素
　　createTextNode() //创建一个文本节点
　　2）添加、移除、替换、插入
　　appendChild()
　　removeChild()
　　replaceChild()
　　insertBefore() //在已有的子节点前插入一个新的子节点
　　3）查找
　　getElementsByTagName() //通过标签名称
　　getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
　　getElementById() //通过元素Id，唯一性
　　29、数组对象有哪些原生方法，列举一下
　　pop、push、shift、unshift、splice、reverse、sort、concat、join、slice、toString、indexOf、lastIndexOf、reduce、reduceRight
　　forEach、map、filter、every、some
　　30、那些操作会造成内存泄漏
　　全局变量、闭包、DOM清空或删除时，事件未清除、子元素存在引用
　　31、什么是Cookie 隔离?(或者：请求资源的时候不要带cookie怎么做)
　　通过使用多个非主要域名来请求静态文件，如果静态文件都放在主域名下，那静态文件请求的时候带有的cookie的数据提交给server是非常浪费的，还不如隔离开。因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。同时这种方式不会将cookie传入server，也减少了server对cookie的处理分析环节，提高了server的http请求的解析速度。
　　32、响应事件
　　onclick鼠标点击某个对象;onfocus获取焦点;onblur失去焦点;onmousedown鼠标被按下
　　33、flash和js通过什么类如何交互?
　　Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback，call的作用是让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。
　　34、 Flash与Ajax各自的优缺点?
　　Flash：适合处理多媒体、矢量图形、访问机器。但对css、处理文本不足，不容易被搜索。
　　Ajax：对css、文本支持很好，但对多媒体、矢量图形、访问机器不足。
　　35、有效的javascript变量定义规则
　　第一个字符必须是一个字母、下划线(_)或一个美元符号($);其他字符可以是字母、下划线、美元符号或数字。
　　36、 XML与JSON的区别?
　　1) 数据体积方面。JSON相对于XML来讲，数据的体积小，传递的速度更快些。
　　2) 数据交互方面。JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
　　3) 数据描述方面。JSON对数据的描述性比XML较差。
　　4) 传输速度方面。JSON的速度要远远快于XML。
　　37、 HTML与XML的区别?
　　1）XML用来传输和存储数据，HTML用来显示数据;
　　2）XML使用的标签不用预先定义
　　3）XML标签必须成对出现
　　4）XML对大小写敏感
　　5）XML中空格不会被删减
　　6）XML中所有特殊符号必须用编码表示
　　7）XML中的图片必须有文字说明
　　38、渐进增强与优雅降级
　　渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进，达到更好的用户体验。
　　优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
　　39、 Web Worker和Web Socket?
　　web socket：在一个单独的持久连接上提供全双工、双向的通信。使用自定义的协议(ws://、wss://)，同源策略对web socket不适用。
　　web worker：运行在后台的JavaScript，不影响页面的性能。
　　创建worker：var worker = new Worker(url);
　　向worker发送数据：worker.postMessage(data);
　　接收worker返回的数据：worker.onmessage
　　终止一个worker的执行：worker.terminate();
　　40、JS垃圾回收机制?
　　1) 标记清除：
　　这个算法把“对象是否不再需要”简化定义为“对象是否可以获得”。
　　这个算法假定设置一个叫做根(root)的对象(在Javascript里，根是全局对象)。定期的，垃圾回收器将从根开始，找所有从根开始引用的对象，然后找这些对象引用的对象。从根开始，垃圾回收器将找到所有可以获得的对象和所有不能获得的对象。
　　2) 引用计数：
　　这是最简单的垃圾收集算法。此算法把“对象是否不再需要”简化定义为“对象有没有其他对象引用到它”。如果没有引用指向该对象(零引用)，对象将被垃圾回收机制回收。
　　该算法有个限制：无法处理循环引用。两个对象被创建，并互相引用，形成了一个循环。它们被调用之后不会离开函数作用域，所以它们已经没有用了，可以被回收了。然而，引用计数算法考虑到它们互相都有至少一次引用，所以它们不会被回收
　　41、 web应用从服务器主动推送data到客户端的方式?
　　JavaScript数据推送：commet(基于http长连接的服务器推送技术)。
　　基于web socket的推送：SSE(server-send Event)
　　42、如何删除一个cookie?
　　1) 将cookie的失效时间设置为过去的时间(expires)
　　document.cookie = ‘user=’+ encodeURIComponent(‘name’) + ';
　　expires=’+ new Date(0);
　　2) 将系统时间设置为当前时间往前一点时间
　　var data = new Date();
　　date.setDate(date.getDate()-1);
　　43、 attribute与property的区别?
　　attribute是dom元素在文档中作为html标签拥有的属性
　　property是dom元素在js中作为对象拥有的属性。
　　所以，对于html的标准属性来说，attribute和property是同步的，是会自动更新的。但对于自定义属性，他们不同步。
　　44、Ajax请求的页面历史记录状态问题?
1）通过location.hash记录状态，让浏览器记录Ajax请求时页面状态的变化。
　　2）通过HTML5的history.pushstate，来实现浏览器地址栏的无刷新改变。

参考链接：https://www.jianshu.com/p/f1f39d5b2a2e
参考链接：https://blog.csdn.net/qq_37481512/article/details/88310386
参考链接：(https://www.cnblogs.com/qdlhj/p/10644470.html)
参考链接：(https://www.cnblogs.com/sunmyboke/p/10364507.html)
参考链接：(http://www.bjpowernode.com/javacjwt/1038.html)
参考链接：https://www.jianshu.com/p/b034663019a9

js面试题集锦

1. javascript的typeof返回哪些数据类型.

2. 例举3种强制类型转换和2种隐式类型转换?

3. split() join() 的区别

4. 数组方法pop() push() unshift() shift()

5. IE和标准下有哪些兼容性的写法

6. ajax请求的时候get 和post方式的区别

7. call和apply的区别

8. ajax请求时，如何解析json数据

9. 事件委托是什么

10. 闭包是什么，有什么特性，对页面有什么影响

11. 如何阻止事件冒泡

12. 如何阻止默认事件

13. 添加 删除 替换 插入到某个接点的方法

14. 解释jsonp的原理，以及为什么不是真正的ajax

15. document load 和document ready的区别

16. ”==”和“===”的不同

17. 函数声明与函数表达式的区别？

18. 对作用域上下文和this的理解，看下列代码：

19. 看下面代码，给出输出结果。

20. 当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做?

21. Javascript的事件流模型都有什么?

22. 看下列代码,输出什么?解释原因。

23. 判断字符串以字母开头，后面可以是数字，下划线，字母，长度为6-30

24. 回答以下代码，alert的值分别是多少？

25. javaScript的2种变量范围有什么不同？

26. null和undefined的区别？

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

28. js延迟加载的方式有哪些？

29. Flash、Ajax各自的优缺点，在使用中如何取舍？

30. 写一个获取非行间样式的函数

31. 希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)

32. 写一个function，清除字符串前后的空格。（兼容所有浏览器）

33. javascript语言特性中，有很多方面和我们接触的其他编程语言不太一样,请举例

34. Cookie在客户机上是如何存储的

35. 如何获取javascript三个数中的最大值和最小值？

36. javascript是面向对象的，怎么体现javascript的继承关系？

37. .form中的input可以设置为readonly和disable，请问2者有什么区别？

38. 列举javaScript的3种主要数据类型，2种复合数据类型和2种特殊数据类型。

39. 程序中捕获异常的方法？

40. Ajax原理

41. 解释什么是Json:

42. js中的3种弹出式消息提醒（警告窗口，确认窗口，信息输入窗口）的命令式什么？

43. 以下代码执行结果

44. 浏览器的滚动距离：

45. 可视区的大小：

46. 节点的种类有几种，分别是什么？

47. innerHTML和outerHTML的区别

48. offsetWidth offsetHeight和clientWidth clientHeight的区别

49. 闭包的好处

50. 冒泡排序算法

51、js 实现一个函数对javascript中json 对象进行克隆

52、js 实现 ajax 请求或者submit请求时 锁屏功能以及开锁功能（请求时界面Loading以及元素不能点击，请求完成即消除Loading）

53、js 实现一个函数 获得url参数的值

54、请用js计算1-10000中出现的0 的次数

55、写一个function，清除字符串前后的空格。（兼容所有浏览器）

56、降维数组

57、将url的查询参数解析成字典对象

58、判断一个字符串中出现次数最多的字符，统计这个次数

59、编写一个方法 求一个字符串的字节长度;

60、编写一个方法 去掉一个数组的重复元素

61、写出3个使用this的典型应用

62、如何深度克隆

63、JavaScript中如何检测一个变量是一个String类型？请写出函数实现

64、网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”

65、请解释一下什么是语义化的HTML。

66、为什么利用多个域名来存储网站资源会更有效？

67、请说出三种减低页面加载时间的方法

68、什么是FOUC？你如何来避免FOUC？

69、文档类型的作用是什么？你知道多少种文档类型？

70、浏览器标准模式和怪异模式之间的区别是什么？

71、闭包

72、请解释什么是Javascript的模块模式，并举出实用实例。

73、你如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？

74、你如何优化自己的代码？

75、你能解释一下JavaScript中的继承是如何工作的吗？

76、请尽可能详尽的解释AJAX的工作原理。

77、最简单的一道题

78、var和function的预解析问题,以及变量和function的先后顺序的问题

79、dom事件委托什么原理，有什么优缺点

13. 添加删除替换插入到某个接点的方法

52、js 实现 ajax 请求或者submit请求时锁屏功能以及开锁功能（请求时界面Loading以及元素不能点击，请求完成即消除Loading）

53、js 实现一个函数获得url参数的值

59、编写一个方法求一个字符串的字节长度;

60、编写一个方法去掉一个数组的重复元素

88、网页布局有哪几种，有什么区别

97、作用域什么时候生成的？

99、讲一下事件循环机制

100、理解web安全吗？都有哪几种，介绍以及如何预防

106、按需加载路由怎么加载对应的chunk文件的？换句话说浏览器怎么知道什么时候加载这个chunk，以及webpack是怎么识别那个多个经过hash过的chunk文件