2017-7-12
1. 盒子模型
网页中的元素都可以看成是一个盒子模型，每个元素占有的空间包括content、padding、border、margin这四部分。盒子模型分为两种：W3C标准盒子模型、IE盒子模型。可通过box-sizing属性选择盒子模型，其属性值有content-box、border-box。其中，默认为content-box属性值，即表示W3C标准盒子模型，其width与height本身不包含padding、border；而border-box表示IE盒子模型，其width与height本身包括padding、border。
2. src与href区别
src是引入，指向外部资源的位置，指向的内容会被嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本、img图片等。
href是引用，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。如a标签、link标签。
3. 同步与异步
同步：同步阻塞模式。发送数据以后，需要等待接收方反馈信息，得到其响应数据才能发送发送下一个。
异步：非阻塞模式。发送数据后，不需要等待对方反馈即可发送下一个，当前面有响应返回时再进行相应处理即可。
4. 创建、添加、移除、移动、复制、查找节点
创建节点：createElement()、createDocumentFragment()、createTextNode()
添加节点：appendChild()、insertBefore()、insertAfter()、
移除节点：removeChild()、
移动节点：replaceChild()
复制节点：cloneNode()
查找节点：getElementsByTagName()、getElementsByClassName()、getElementByIdName()、querySelector()、querySelectorAll()
2017-7-13
1. 一次完整的http事务是怎么样的一个过程？
域名解析 =》 发起tcp的3次握手 =》 建立tcp连接后发起http请求 =》服务器端响应http请求，浏览器得到html代码=》浏览器解析html代码，并请求html代码中的资源=》浏览器对页面进行渲染呈现给用户
2. web攻击技术
XSS：跨站脚本攻击，指通过存在安全漏洞的web网站注册用户的浏览器内运行非法的html标签或JavaScript运行的一种攻击。
SQL注入攻击：web应用程序对用户输入数据的合法性没有判断，攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句，以此来实现欺骗数据库服务器执行非授权的任意查询，从而进一步得到相应的数据信息。
CSRF跨站点请求伪造：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。
3. ajax是什么？ajax的交互模型?如何解决跨域问题？
ajax：异步的JavaScript和XML，通过在后台与服务器进行少量数据交互，实现网页的异步更新，在不重新加载整个界面的情况下，做到网页的部分更新。
ajax的交互模型：用户发出异步请求，创建XMLHttpRequest对象；=》告诉XMLHttpRequest对象哪个函数会处理XMLHttpRequest对象状态的改变，为此要把对象的onReadyStateChange属性设置为响应该事件的JavaScript函数的引用；（即响应http请求状态变化的函数）=》创建请求，用open方法指定是get还是post，url地址，是否异步；=》发送请求，send方法；=》接收结果并分析；=》实现刷新
跨域问题的解决：
使用document.domain+iframe解决子域问题；
使用window.name；
使用flash；
使用iframe+location.hash；
使用h5的postMessage；
使用jsonp（动态创建script标签）；
4. 优雅降级与渐进增强
优雅降级：一开始就构建完整的功能，然后利用css hack等方式对低版本浏览器进行兼容。
渐进增强：先针对低版本浏览器进行构建页面，保证最基本的功能，然后针对高级浏览器进行效果、交互等改进或添加功能等达到更好的用户体验。
2017-7-14
1. javascript中什么是伪数组？如何将伪数组化为标准数组
伪数组：无法直接调用数组方法或属性，但仍可利用真正数组遍历方法对其进行遍历。
转化方法：可以使用Array.prototype.slice.call(fakeArray)方法或者[].slice.call(fakeArray,0)方法或者Array.from(fakeArray)方法将数组转化为真正的Array对象。
2. cookie、session、localStorage、sessionStorage
cookie：cookie数据存放在客户的服务器上。不是很安全，只在cookie存放不敏感数据。数据存储空间小。有一定的有效期。cookie在浏览器与服务器间来回传递。
session：数据放在服务器上。session相对于cookie较安全。
localStorage：持久化的本地存储，除非主动删除数据，否则不会过期。容量比cookie大。localStorage为了在本地存储数据而生。存储空间更大、更多丰富易用接口、独立的存储空间。
sessionStorage：用于本地存储一个会话中的数据，只在同一个会话中的页面才能访问且当会话结束时数据也销毁，即会话级别的本地存储。容量比cookie大。sessionStorage为了在本地存储数据而生。存储空间更大、更多丰富易用接口、独立的存储空间。
3. tcp与udp区别
tcp：基于连接的协议，发送数据前必须建立可靠的连接。一个tcp连接须经历三次对话进行连接。传送大量数据，速度慢。相对安全可靠。
udp：面向非连接的协议，无需事先建立连接，可直接发送数据。一次只发送少量数据，速度快，但安全性不高。
4. 线程与进程区别
进程：具有一定独立功能的程序关于某个数据集合上的一次运行活动。进程是拥有资源的基本单位。
线程：线程是进程的一部分。线程是CPU调度和分配的基本单位，比进程更小的能独立运行的基本单位。
ps：（1）一个线程只能属于一个进程，而一个进程可以拥有多个线程，但至少有一个线程。（2）资源分配给进程，而同一进程的所有线程共享该进程的所有资源。进程是拥有资源的一个独立单位，线程不拥有系统资源，但可以访问隶属于进程的资源。（3）处理机分配给线程，即真正在处理机上运行的是线程。（4）线程在执行过程中，需要协作同步。不同进程的线程间要利用消息通信的办法实现同步。（5）进程间可以并发执行，同一个进程的多个线程之间也可并发执行。（6）进程是CPU资源分配的最小单位，线程是CPU调度的最小单位。（7）进程在执行过程中拥有独立的内存单元，而多个线程共享内存。
5. 减少页面加载时间的方法
减少http请求（图片地图、css精灵、静态资源合并压缩、静态资源文件进行缓存）；
减少DNS查找；
避免重定向；
使用ajax缓存；
延迟载入组件；
预先载入组件；
减少dom元素数量及操作；
缩小cookie；
6. http与https
http是超文本传输协议，用来在网络上传送超文本的传输协议，信息是明文传输；而https是具有安全性的ssl加密传输协议，安全超文本传输协议，对数据进行压缩和解压操作并返回网络上传送回的结果。
http端口号为80；而https端口号为443.
http是面向无连接的、无状态的、不安全的；而https是由ssl+http协议构建的可进行加密传输、身份认证的网络协议，比http安全。
http以http://开头；而https则以https://开头。
http工作在应用层，而https工作在传输层。
http无需证书，而https需要CA机构颁发的的ssl证书。
2017-7-15
1. null、undefined区别
null：表示无的对象，转化为数值时为0；表示空引用，是object类型；
undefined：表示无的原始值，转化为数值时为NaN;当声明变量未初始化时，变量值为undefined；表示未定义，是undefined类型；
ps：（1）undefined表示缺少值，即此处应该有一个值，但还没定义，用法：变量声明但未赋值；调用函数时，应该提供的参数没有提供时，该参数为undefined；对象没有赋值的属性，该属性的值为undefined；函数没有返回值时，默认返回undefined；（2）null表示没有对象，即此处不应该有值，用法：作为函数的参数，表示该函数的参数不是对象；作为对象原型链的终点。
ps：（1）null、undefined都表示没有的、不存在的值，在进行逻辑转换时都说false，两值进行比较时为true
console.log(typeof null);//object console.log(typeof undefined);//undefined console.log(null==undefined);//true console.log(null===undefined);//false
console.log(undefined==Object);//false
console.log(null==Object);//false
2. new操作符具体做了什么？
创建一个空对象，且this变量引用该对象，同时还继承了该函数的原型；
属性和方法被加入到this引用的对象中；
新创建的对象由this所引用，且最后隐式地返回this；
3. 哪些操作会造成内存泄露？如何解决？
内存泄露：指任何对象在您不再需要拥有或需要它之后仍然存在。
setTimeout的第一个参数使用字符串而非函数的话，会引发内存泄露，其他还有闭包、控制台日志、循环、回调函数或计时器、自动类型转换、意外的全局变量等
解决方法：不用的变量手动释放掉null；针对意外的全局变量在声明时使用var，JavaScript文件头部加上“use strict”；避免事件导致的循环引用；采用显示类型转换；
2017-7-16
1. 一个页面从输入URL到页面加载显示完成，这个过程中发生了什么？
（1）当发送一个URL请求时，浏览器会开启一个线程来处理该请求，同时在远程DNS服务器上启动一个DNS查询，这能使浏览器获得请求对应的IP地址；
（2）浏览器与远程web服务器通过tcp三次握手协商建立tcp/ip连接。即同步报文、同步-应答报文、应答报文。这三个报文在浏览器和服务器间传递。该握手首先由客户端尝试建立通信，而服务器应答并接受客户端请求，最后由客户端发出该请求已被接受的报文。
（3）一旦tcp/ip建立，浏览器会通过该连接向远程服务器发送http的get请求，远程服务器找到资源并使用http响应返回该资源，值为200的http状态码表示ok。
（4）此时，web服务器提供资源服务，客户端开始下载资源。
（5）请求返回后，浏览器开始解析html生成dom树，根据css生成css Rule树，JavaScript根据DOM API操作dom。从而呈现页面。
2. http状态码
100：继续，一般在发送http请求时，已发送http header之后服务端将返回此信息，表示确认，之后发送具体参数信息。
200：ok
201：请求成功且服务器创建了新的资源
202：服务器已接受请求，但尚未处理
301：请求的网页已永久移动到新位置
302：临时性重定向
304：自上次请求后，请求的网页未修改过
400：服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发送请求。
401：请求未授权
403：禁止访问
404：找不到如何与URI相匹配的资源
500：最常见的服务器端错误
503：访问器端暂时无法处理请求
3. JavaScript的同源策略
同源策略是一种安全协议，为了防止某个文档或脚本从多个不同源装载，一段脚本只能读取来自同一来源的窗口和文档的属性。同源是指：协议、端口号、域名都相同。
2017-7-17
1. XHTML、HTML区别：
HTML是一种基本的网页设计语言，XHTML是基于XML的置标语言。XHTML比HTML使用起来更严格，如标签必须关闭、标签名必须小写、元素需正确嵌套、XHMTL须有根元素等。
2. 语义化HTML
让页面内容结构化，便于对搜索引擎解析。 在没有css样式渲染的条件下，也可以看出文档结构，且易阅读。便于团队成员之间合作。
3. 常见浏览器内核
Trident内核：IE、360、搜狗 （-ms-）
Gecko内核：Firefox （-moz-）
Presto内核：Opera7+ （-o）
Webkit内核：Safari、Chrome、 （-webkit）
2017-7-18
1. this理解
调用函数的那个对象。（1）纯粹的函数调用，属于全局性调用，因此this代表全局对象global。（2）作为对象方法调用，this指向这个上级对象。（3）作为构造函数调用，通过该函数new一个新对象，this指向这个新对象。（4）apply与call使用，可改变this的指向。
2. JavaScript作用域链
当执行一段JavaScript代码时，JavaScript引擎会为其创建一个作用域，又称执行上下文，在页面加载完成后会首先创建一个全局作用域，然后每执行一个函数，会建立一个相应的作用域，从而形成了一条作用域链。每个作用域都有一条对应的作用域链，链头是全局作用域，链尾是当前函数作用域。
作用域链的作用是用于解析标识符，当函数被创建时，会将this、arguments、命名参数及该参数中的所有局部变量添加到该当前作用域中，当JavaScript需要查找变量X时，首先从作用域链中的链尾即当前作用域进行查找是否具有X属性，若没有，则顺着作用域链继续查找，直到找到或到达链头，即全局作用域链，没找到则抛出参数异常。
3. JavaScript原型链
JavaScript中的每一个对象都有一个prototype属性，称之为原型，而原型的值是一个对象，因此，原型也有自己的原型，从而形成了一条原型链。原型链的链头为object，其prototype为null。
原型链的作用是用于对象继承。函数A的原型属性是一个对象，当这个函数被用作构造函数来创建实例时，该函数的原型属性将被作为原型赋值给所有对象实例，如新建一个数组，则该数组的方法继承于数组的原型。
当访问对象的一个属性时，首先查找对象本身，找到则返回，找不到则沿着原型链查找其原型上的属性，直到找到或到达根，若始终未找到则返回false。
2017-7-19
1. JavaScript继承
原型链
//原型链继承
function SuperType(){
this.prototype = true;
}
SuperType.prototype.getSuperValue=function(){
return this.property = false;
};
function SubType(){
this.subproperty = false;
}
SubType.prototype = new SuperType();//继承了SuperType
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
var instance=new SubType();
console.log(instance.getSuperValue()); //false
借用构造函数
//借用构造函数
function SuperType(){
this.colors=["red","blue","green"];
}
function SubType(){
SuperType.call(this);//继承了SuperType
//在子类型构造函数内部调用超类型构造函数
}
var instance1=new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//[ 'red', 'blue', 'green', 'black' ]
var instance2=new SubType();
console.log(instance2.colors);//[ 'red', 'blue', 'green' ]
原型链+构造函数
//原型链+构造函数
function SuperType(name){
this.name=name;
this.colors=["red","pink","blue"];
}
SuperType.prototype.sayName=function (){
console.log(this.name);
};
function SubType(name,age){
SuperType.call(this,name);//继承属性
this.age=age;
}
SubType.prototype=new SuperType();
SubType.prototype.constructor=SubType;
SubType.prototype.sayAge=function (){
console.log(this.age);
};
var instance1=new SubType("Greg",26);
instance1.colors.push("black");
console.log(instance1.colors);//[ 'red', 'pink', 'blue', 'black' ]
instance1.sayName();//Greg
instance1.sayAge();//26
var instance2=new SubType("NN",25);
console.log(instance2.colors);//[ 'red', 'pink', 'blue' ]
instance2.sayName();//NN
instance2.sayAge();//25
原型式继承
寄生式继承
寄生组合式继承
2. 清除浮动
父级元素定义height；
结尾处加空div标签clear:both；
父级元素定义伪类:after和zoom；
父级div定义overflow:hidden;
父级div定义overflow:auto;
父级浮动，定义宽度；
结尾加br标签，clear:both；
2017-7-20
1. IE与DOM事件流区别
执行顺序不一样：IE是时间冒泡，DOM是先事件捕获后冒泡。ps：NetSpace是事件捕获。
参数不一样：
IE使用:
[Object].attachEvent("eventHandlerName", fnHandler); //绑定函数
[Object].detachEvent("eventHandlerName", fnHandler); //移除绑定
DOM使用：
[Object].addEventListener("eventName", fnHandler, boolValue); //绑定函数
[Object].removeEventListener("eventName", fnHandler, boolValue); //移除绑定
boolValue参数用于设置事件绑定的阶段，true为捕获阶段，false为冒泡阶段。
事件加不加on：
IE：
element.attachEvent('onclick',handlerEvent);
element.detachEvent('onclick',handlerEvent);
DOM：
element.addEventListener('click',handlerEvent, boolValue);
element.removeEventListener('click',handlerEvent, boolValue);
this指向问题：
IE：var oTarget=oEvent.srcElement;
DOM：var oTarget=oEvent.target;
阻止事件默认行为：
IE：oEvent.returnValue=false;
DOM：oEvent.preventDefault();
阻止事件冒泡：
IE：oEvent.cancelBubble=true;
DOM：oEvent.stopPropagation();
function stopBubble(e){
if (e && e.stopPropagation)
e.stopPropagation()
else{
window.event.cancelBubble=true
}
}
function stopDefault(e){
if(e && e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue = false;
}
}
2017-7-21
1. 闭包
函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制回收。
（1）变量常驻内存；（2）避免全局变量的污染；（3）私有成员的存在；（4）可能造成内存泄露；
2. 垃圾回收机制及内存管理
标记清除法：当变量进入环境时，将其标记为“进入环境”，当变量离开时，将其标记为“离开环境”；垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记，然后去掉环境中的变量以及被环境中的变量引用的变量的标记，而在此之后再被加上标记的变量视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量，最后垃圾收集器完成内存清除工作，销毁那些带标记的值并回收它们所占用的内存空间。
引用计数法：跟踪记录每个值被引用的次数。的那个声明了一个变量并将一个引用类型值赋值给该变量时，则这个值的引用次数为1，若同一个值又被赋给另一个变量，则该值的引用次数加1；相反，若包含对这个值引用的变量取得了另外一个值时，则该值的引用减1.当这个值的引用次数变为0时，则说明无法再访问该变量值，则将其占用的内存进行回收。