杂七杂八什么都有（一）

一个页面从输入url到页面加载显示完成，这个过程发生了什么？

1. 浏览器根据请求的url交给DNS域名解析，找到真实的IP，向服务器发起请求
2. 服务器交给后台处理完后返回数据，浏览器接受文件（html, css, js, img等）
3. 浏览器对加载到的资源进行语法解析，建立相应的内部数据结构（如html的dom）
4. 载入解析到资源文件，渲染页面，完成

行内元素、块级元素

行内元素：a b span img input select strong
块级元素： div ul ol li dl dt dd h1...h6
空元素： br hr img input link meta
可继承样式：font-size, font-family, color
不可继承样式： border, padding, margin, width, height

页面导入样式时，使用link和@import有什么区别？

1. link属于XHTML标签，除了加载css外，还用于定义RSS，定义rel连接属性，而@import是css提供的，只能用于加载css
2. 页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载
3. import是css2.1提供的，只有在IE5以上才能被识别，而link的XHTML标签，无兼容问题

js中children和childNodes的区别？

children: 非标准属性，它返回指定元素的子元素集合，只返回html节点，不返回文本节点（在IE中包含注释节点）
childNodes: 标准属性，返回指定元素的子元素集合，包含html节点，所有属性，文本节点，可用nodeType来判断是哪种节点，1表示元素节点，2表示属性，3表示文本

function getFirst(el){
	for (var i = 0, e; e = el.childNodes[i++]) {
		if(e.nodeType == 1){
			return e;
		}
	}
}

prototype和__proto__

1. prototype是函数的一个属性（每个函数都有一个prototype属性），这个属性是一个指针，指向一个对象
2. __proto__是一个对象拥有的内置属性，是js内部用来寻找原型链的属性，指向fn.prototye指向的对象

注：prototype是函数的内置属性，__proto__是对象的内置属性，chrome和firefox都可以访问到对象的__proto__属性，IE不可以

var person = function(){};
var p = new person();
console.log(p.__proto__ == person.prototype) //=>true

Js作用域链

全局函数无法查看局部函数的内部作用域，但局部函数可以查看上层的函数作用域，直至全局作用域。
当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域（原型链）查找，知道全局函数，如果仍未找到，则认为该作用域上不存在该变量或方法，抛出引用错误（referenceError），这种组织形式就是作用域链。
当对象在调用一个方法时，此时的原型链就是实例对象的__proto__属性

原型链

原型链是
针对构造函数的 Object => 构造函数1 => 构造函数2，如果自身没有定义就会继承父元素的方法或变量
原型链的链头是Object, 它的prototype值为Null

disable和readonly区别：

disable为真时，input的值不会随着表单提交
readonly规定输入字段为只读，input内容会随着表单提交
不过两者都可以通过js更改input的value值

值和引用

var a = 2;
var b = a;   //b是a的一个复本
b++;
console.log(a)   //2
console.log(b)   //3
var c = [1,2,3];
var d = c;   //d是[1,2,3]的一个引用，c和d仅仅指向值[1,2,3],并非持有，它们更改的是同一个值
d.push(4);
console.log(c);  //[1,2,3,4]
console.log(d);  //[1,2,3,4]

W3C制定的js标准事件模型的正确顺序是：

先事件捕获（从windows到document往下级直到具体的事件节点），然后进行事件处理，再事件冒泡（从具体节点往上）

addEventListener和on的区别

- 使用on绑定event:
	使用on会把第一个事件覆盖掉

var box = document.getElementById("box");
box.onclick = function() {
	console.log("box1");
}
box.onclick = function() {
	console.log("box2")
}
//=> box2

- addEventListener可以多次绑定同一个事件且不会覆盖上一个事件

var box = document.getElementById("box");
box.addEventListener("click", function() {
	console.log("box1")
});
box.addEventListener("click", function() {
	console.log("box2")
});

//=> box1
//   box2

addEventListener：事件先注册先执行，对相同事件只会注册一次
参数：事件名，处理函数，表示是在冒泡阶段（false）还是捕获阶段（true）
addEventListener (event , function(){}, false)
如：假设child为box的子元素

box.addEventListener("click", function() {
	console.log("box")
});
child.addEventListener("click", function() {
	console.log("child")
});

//=> child
//   box (表示默认情况下事件是按照冒泡的顺序执行的)
// 如果box监听事件函数中第三个参数为true, 则结果为： box child

注：IE中使用attachEvent

addEventListener：事件先注册先执行，对相同的事件只会注册一次
attachEvent：事件执行顺序与注册顺序无关，可将相同事件注册多次，并多次执行

兼容IE：

function addEvent(el, name, fn) {
	if(el.addEventListener) {
		return el.addEventListener(el, name, fn);  //其中事件名name不带on，如click
	}else {
		return el.attach(el, name, fn);   //其中事件名name带on，如onclick
	}
}

伪数组

var obj = {
	0: 'a',
	1: 'b',
	length: 2
}
//伪数组是有一个对象，必须有length属性，且值为number类型，如length不为0，则必须按照下标存储数据（即只有length而没有其他数据也不是伪数组）

伪数组转标准数组

var arr = Array.prototype.slice.call(obj); //["a", "b"]
//ES6内置函数，可把字符串或伪数组转为数组
arr = Array.from(obj);   //["a", "b"]

如何判断是不是数组

var arr = [];
typeof arr;  //=>object
arr instanceof Array  // true
Object.prototype.toString.call(arr) === '[Object Array]' // true
arr.constructor.name   //Array

非惰性求值

只要给函数传递参数它就会进行运算，并不会因为没有使用它

1.
var a = 10;
//a++和++a作为匿名函数的参数传入
(function(){})(a++,++a);
console.log(a) //=>12

2.
var a = 1;
console.log(a+=1, a++);  //=>2 2
console.log(a) //=>3