前端重点－整理集合

一、XHTML+CSS重点

一、各浏览器兼容问题和解决方法

　　1、3px的Bug：ie6下一个容器的浮动和文字之间会产生3px的间距，

　　　　解决方法：给浮动的盒子添加一个margin-right:-3px;（与浮动方向反方向）。

　　2、浮动双边距Bug：当一个盒子像左浮动的同时有一个向左的margin-left的时候，IE6解析这段代码时就会把margin-left解析为原来的2倍，这个就是所谓的浮动双边距BUG。
　　　　解决方法：浮动盒子添加属性display:inline;将浮动盒子属性改为内联，或单使用“_”来处理ie6

　　3、IE6下多出来的文字：产生的原因，是两个设置了float的元素之间加了个注释
　　　　解决方法：删除注释

二、布局有哪些方式

　　1、三列布局中间列自适应

　　2、让div元素上下左右居中

　　3、两列布局左固定右自适应，或右固定左列自适应布局

　　4、两个列的高度相同，根据内容自适应

三、样式的优化级

1、#：id

2、.：类选择器

3、div：标签选择器

4、h1 + p：相邻选择器

5、div < p：子选择器

6、div < li：后代选择器

7、*：通配符

8、input[type=“text”]：属性选择器

9、a:hover：伪类选择器

四、css hack

1、_ ：用于IE6　

2、*和+：用于IE6,IE7

3、：用于IE8，IE9

4、9：用于 IE6，IE7，IE8，IE9

5、9：用于IE9

6、！important：改变样式的优先级不能算做是hack了，不推荐使用

五、haslayout

IE浏览器下的很多bug都是haslayout = false 引起的：

1.文字消失，截断　　2.边框消失　　3.3像素偏差　　4.绝对元素定位错误　　5.滤镜不生效　　6.滚动页面跳动　7其他（欢迎补充哦~）

使用css来触发haslayout，触发后haslayout=true;

触发方法：

1、position:absolute

2、float:left/right

3、display:inline-block

4、width,height:除“auto”外的任意值

5、zoom:除"normal"外 ...

六、DOCTYPE的各种模式详解

IE有两个渲染方式：（标准标式）和（怪异模式）。

1、处发怪异模式两种方法：

　　将HTML中的DOCTYPE声明去掉就可以引发怪异模式

　　将<!DOCTYPE>前面加一个字符，如：a<!DOCTYPE>

2、怪异模式样式有哪些变化

　　IE下的怪异模式width是padding和border加到一起，而标准模式不会

七、CSS的权重

权重值：

1、内联样式style属性：权值为1000

2、id选择符：权值为100

3、类，伪类、属性选择符：权值为10

4、标签选择符、伪元素：如div p，权值为1

5、其它优先符：通配符选择器等，优先级为0

二、HTML5重点

一、新增标签：

二、canvas功能：

三、本地存储：

存储5MB，分为localStorage永久和sessionStorage临时存储

存储：LocalStorage.setItem(key, val);

获取：localStorage.getItem(key);

全部清除：localStorage.clear();

四、离线存储：

　　就是将要缓存的文件存储在manifest文件中，cache下存储要缓存的文件，在<html lang="en" manifest='test.manifest'>引用manifest文件，还需要在服务器端修改配置文件

五、跨文档消息：

六、多线程webworks：

 1 var oBox = document.getElementById("box");
 2 // 创建个多线程
 3 var oWorks = new Worker("test.js");
 4 oWorks.postMessage(10000);     // 向线程发消息
 5 oWorks.onmessage = function(event){    // 接收消息事件
 6     oBox.innerHTML = event.data;
 7 }
 8 
 9 test.js
10 onmessage = function(event){
11     var num = event.data;
12     var result = 0;
13     for(var i=0; i<num; i++){
14         result += i;
15     }
16 
17 // 向线程创建源送回消息
18     postMessage(result);
19 }

七、获取地理位置：

八、webSocket：

九、video和audio：

三、CSS3重点

一、HTML5定义

　　<!DOCTYPE HTML>

二、兼容不同适配器

　　外部样式：<link media="screen and(min-500px) and(max-100px)" href="main.css" rel="stylesheet">

　　内部样式：@media screen and (min-400px) and (max-800px) {body{background:blue;}} // 可视区大于400并小于800

三、viewport虚拟窗口

　　手机浏览器把页面放在一个虚拟窗口中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

　　各属性：

　　1、width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

　　2、height：和 width 相对应，指定高度。

　　3、initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

　　4、maximum-scale：允许用户缩放到的最大比例。

　　5、minimum-scale：允许用户缩放到的最小比例。

　　6、user-scalable：用户是否可以手动缩放

四、定义缓存

　　1、手机缓存一般通过meta元素来设置，<meta http-equive="Cache-Control" content="">

content的可选值：
1、public：表示可以在任何地方缓存网页，如果定义为public，通常代理服务器作为一个共享缓存可以缓存到该网页
2、private：表示单个用户所私有，
3、no-cache：表示不缓存该网页，即使相同的客户重复使用，也不会缓存
4、no-store：响应和导致该响应的请求不能存储在任何存区内，
5、no-transform：
6、must-revalidate:
7、proxy-revalidate:
8、max-age:以秒为单位定义缓存的最大过期时间 content="max-age:3600" 将网页缓存存为一个小时3600秒
9、s-maxage:用于代理的共享缓存，它可以 max-age

　　2、定义网页到期
　　　　<meta http-equiv="Expires" content="Ture, 20 Aug 1996 14:25:27 GMT">

　　3、定义应用程序名
　　　　<meta http-equiv="application-name" content="WWW聊天室">

五、选择器

　　1、基本选择器：

　　　　*：通配符　　　　. 类选择符　　　　#id选择符　　　　li元素选择符　　　　.nav li 后代选择符　　　　.nav < li 子选择符

　　　　.nav + li 相邻选择符　　　　.nav ~li 兄弟选择符　　　　.nav li， .header li组合选择符

　　2、属性选择器：

　　　　[attr] 属性名匹配　　　　[attr=value] 指定属性值匹配　　　　[name*='s'] 属性中包括指定值的匹配

　　　　[data-attr^='obj'] 属性值中以obj开头的匹配　　　　[data-attr$='obj'] 属性值中以obj结尾的匹配

　　3、结构性伪类选择器：

　　　　:first-line 元素中第一行的样式　　　　:first-letter 元素中第一个字母　　　　:before 指定元素之前插入内容　　　　

　　　　:after 指定元素之后插入内容　　　　 :first-child 指定第一个元素　　　　　:last-child 指定最后一个元素

　　　　:nth-child(n) 指定第几个元素　　　　 :nth-last-child(n) 指定从后数的第几个元素　　　　:only-child 获取元素中只有一个子元素

　　4、UI元素伪类选择器：

　　　　:hover 鼠标移上去　　　　:active 鼠标按下未放开触发　　　　:foucs 处于当前状态　　　　

　　5、伪类与伪元素

　　　　伪类使用一个：，如a:hover 　　　　伪元素使用两个：: 如 .box::first-child

　　　　区别：伪元素可以独自使用，伪类不可以　　

六、css3样式

　　兼容开头：-o 、-webkit、-moz

　　1、阴影：盒阴影、文字阴影

　　　　格式：box-shadow：投影方式，横向长度，垂直长度，阴影模糊半径，阴影扩展半径，阴影颜色

　　　　box-shadow：2px 2px 1px 3px rgba(0,0,0,0.5);　　　　// 内阴影加入inset

　　　　text-shadow：2px 2px 1px 3px rgba(0,0,0,0.5);　　　　// 内阴影加入inset

　　2、边框：

　　　　圆角样式：border-radius：4px;　　　// 四个角的弧度为4px

　　3、背景：

　　　　背景渐变：linear-gradient：

　　　　background-image:-webkit-linear-gradient(left , #ffff00, #000);　　　　// 线性渐变从左开始，黄色到黑色

　　　　背景图的尺寸：background-size:

　　　　　　contain：与cover相反，是把背景图缩小到适合容器的

　　　　　　cover：背景图片自己会放大到适合容器的尺寸

　　　　背景裁剪：background-clip

　　　　　　指定背景的范围：

　　　　　　border-box：

　　4、文本

　　　　文本换行 web-break：

　　　　word-break的三个值：1、normal：使用浏览器默认换行　　　2、keep-all：只能在半角空格或连字符处换行　　　3、break-all：允许在单词内换行

　　　　字体图标 @font-face：　　　　

@font-face {
　　font-family: 'YourWebFontName';

　　src: url('YourWebFontName.eot'); /* IE9 Compat Modes */

　　src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

　　url('YourWebFontName.woff') format('woff'), /* Modern Browsers */

　　url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */

　　url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}

　　5、变型 transform

　　　　旋转 transform：rotate(45deg);　　　　// 顺时针和负为逆时针

　　　　移动 transform：translate(x, y);　　　　// x、y轴移动，如果单独对x轴移动transform：translateX(val);

　　　　缩放 transform：salce(1.5);　　　　　　// 放大1.5倍

　　　　扭曲 transform：skew(30deg,10deg);　//

　　　　改变元素的基点位置 transform-origin：20% 20%;　　　　// 正常是以元素的中心来作为基点 0 0为左上角

　　6、3D变形

　　　 transform-style：preserve-3d或flat　　　　// flat将所有子元素转为2D元素

　　　　.box { 200px; height: 200px; background: #ccc; -webkit-transform-style:preserve-3d; -webkit-transform:rotate3d(.2, 1, .6, 69deg); position: absolute; left: 50%; top: 50%; }

1、translate3d(tx, ty, tz) 3D移动

tx：代表横向坐标位移向量的长度；
ty：代表纵向坐标位移向量的长度；
tz：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。

2、scale3d(sx,sy,sz) 3D缩放

3、rotate3d(x,y,z,a) 3D旋转（.6，1，.6，45deg）

x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

　　7、动画

　　　　1、transition：将动画在一定的时间内执行一次　　　　

　　　　　　-webkit-transition: all .5s ease-in-out 1s; // 简单点说这四个值要执行的事，多长时间执行完，运动的效果，延迟多长时间开始执行　　

四个属性：

执行变换的属性：transition-property

变换延续的时间：transition-duration

在延续时间段，变换的速率变化transition-timing-function

变换延迟时间transition-delay

　　　　li { 200px; height: 200px; background: #ccc; position: absolute; left: 50%; top: 50%; display: block; margin-left:-100px; margin-top: -100px; box-shadow:4px 4px 2px rgba(0, 0, 0, .4);

　　　　li:active{ -webkit-transform-style:preserve-3d; -webkit-transform:rotate3d(.2, 1, .6, 69deg); -webkit-transition:all 3s ease-in-out 1s; }

　　　　2、animate

　　　　　　-webkit-animation：pic_2_ico1 5.5s ease infinite; 　　　　// 动画名执行时间动画频率延迟时间循环次数(infinite为无限次)

@-webkit-keyframes pic_2_ico1{

0%{-webkit-transform:rotate(0deg);}

50%{opacity:1}

100%{-webkit-transform:rotate(360deg);opacity:0.6}

}

四、JavaScript重点

一、DOM文档对象模型

二、函数

1、函数声明和函数表达式

函数声明：function test(){ … }

函数表达式：function test（函数名可写可不写）(){ … }，如果不写名为匿名函数表达式

将匿名函数表达式赋给变量：

var oTest = function(){ … }

(function(w){ … })(winow);

2、递归

　　函数调用函数自身这个过程叫递的动作，在最后一次在判断中止条件，可以执行归的动作，

　　当一个函数调用递归，函数的计算结果暂时被挂起.

 1 <script>
 2     function recursive(num){
 3         if(num == 1){
 4             return num;
 5         }
 6         else{
 7             return num * recursive(num-1);
 8         }
 9     }
10 
11     var s = recursive(5);       // 210
12     
13     /*
14     * 调用方式
15     * 5 * recursive(4)
16     * 5 * 4 * recursive(3)
17     * 5 * 4 * 3 * recursive(2)
18     * 5 * 4 * 3 * 2 *recursive(1)
19     * 5 * 4 * 3 * 2 *1
20     * 5 * 4 * 3 * 2
21     * 5 * 4 * 6
22     * 5 * 24 
23     * */
24     console.log(s);
25 </script>

3、拉圾回收机制：

在执行完函数后，内部变量将会从内存中自动删除，除闭包外，因为闭包的一个函数还引用着外层函数的变量。

闭包：函数嵌套函数，内部函数调用外部函数的变量，导致拉圾回收机制不能回收，变量一直存在内存中，IE下容易内存泄露。

闭包的好处：1、希望一个变量长期的在内存中 2、避免全局变量的污染

 1 function fn1(){
 2     var a1 = 5;
 3     function fn2(){
 4         alert(a1);
 5     }
 6     return fn2;
 7 }
 8 var temp = fn1();
 9 temp();
10 // 这个闭包会导致内存泄露，无论跳转到哪个页面oBox都存在，导致内存不断累加，cpu负载加重
11 window.onload = function(){
12     var oBox = document.getElementById("box");
13     oBox.onclick = function(){
14         oBox.innerHTML = "aaa";
15     }
16 
17 // 解决方法，离开页面时将对象释放
18     window.onunload = function(){
19         oBox = null;
20     }
21 }

三、事件

1、事件流：

　　事件流就是描述页面中接收事件的顺序，IE事件流是事件冒泡流，Netscape是事件捕获流。

　　DOM事件流包括三个阶段：事件捕获、处理目标阶段、事件冒泡

2、事件捕获和冒泡：

　　冒泡：如果点击box，会沿着DOM树一直向上传播直到document对象

　　捕获：与冒泡相反，先从document对象向下传播直到找到box为止

3、事件处理

　　标准：addEventListener、removeElementListener

　　ie下：attachEvent、detachEvent

3、事件源：不管在哪个事件中，只要你操作的那个元素就是事件源

1 oUl.onmouseover = function(event){
2     var ev = event || window.event;
3     var target = ev.target || ev.srcElement; // 获取到事件源
4     console.log(target.innerHTML);
5 }

4、事件委托：利用冒泡原理，把事件加到父级上，触发执行元素

　　好处：1、提高性能 2、新添加的元素也会有事件，因为事件是在父级上jquery里的live和delegate()事件都是通过事件委托原理

 1 var oBox = getId("box1");
 2 oBox.onmouseover = function(event){
 3     var evt = event || window.event;
 4     var target = evt.target || evt.srcElement;
 5 // 判断一下处理的标签是否正确
 6     if(target.tagName.toLowerCase() == "li"){
 7         target.style.backgroundColor = "#ffff00";
 8     }
 9 }
10 oBox.onmouseout= function(event){
11     var evt = event || window.event;
12     var target = evt.target || evt.srcElement;
13     if(target.tagName. toLowerCase() == "li"){
14         target.style.backgroundColor = "#fff";
15     }
16 }

5、自定义事件

6、事件类型

　　1、UI事件：

　　　　　load、unload：当页面、图像、框架、<object>加载完后触发和卸载后触发

　　　　　resize、scroll：窗口大小改变和滚动条滚动时触发。　　

 1 // 页面加载完成
 2 window.onload = function(){
 3     
 4     // 创建图像对象
 5     var oImg = new Image();
 6     oImg.src = "...";
 7     oImg.onload = function(){
 8         // 图像加载完成
 9     }
10 }

　　2、焦点事件：

　　　　blur：失去焦点　　focus：获取焦点　　

　　3、鼠标事件：

　　　　onclick：点击　　dblclick：双击事件　　mousedown：按下鼠标　　mouseup：抬起鼠标

　　　　mouseover、mouseenter：按下鼠标左健但mouseenter不冒泡

　　　　mouseout、mouseleave：鼠标离开目标触发，mouseleave不冒泡

　　　　button属性

　　　　返回鼠标按下的键：1为左键　　2为右键　　3为中间滚轮键

 1 var oBox = document.getElementById("box");
 2 
 3 function addEvent(obj, type, fn){
 4     if(obj.addEventListener){
 5         obj.addEventListener(type, fn, true);
 6     }
 7     else{
 8         obj.attachEvent("on"+type, fn);
 9     }
10 }
11 
12 addEvent(document.body, "mousedown", function(e){
13     var evt = e || window.event;
14     var but = evt.button ? evt.button : evt.which;
15     switch (but){
16         case 1:
17             console.log("左键");
18             break;
19         case 2:
20             console.log("右键");
21             evt.preventDefault  ?  evt.preventDefault() :  evt.returnValue = true;
22             break;
23         case 3:
24             console.log("中键");
25             break;
26         default : break;
27     }
28 })

　　4、滚轮事件：

　　　　IE：mousewheel 向上120、向下-120　　　　FF：DOMMouseScroll　向上-3、向下3

　　　　返回滚动向上和向下的值

　　　　detail：支持FF

　　　　wheelDelta：支持/IE/Opera/Chrome

 1 var oBox = document.getElementById("box");
 2 var isIE = navigator.userAgent;
 3 var eDtail, evt;
 4 
 5 function addEvent(obj, type, fn){
 6     if(obj.addEventListener){
 7         obj.addEventListener(type, fn, true);
 8     }
 9     else{
10         obj.attachEvent("on"+type, fn);
11     }
12 }
13 
14 if(isIE.indexOf("Firefox") > -1){  // ff
15     addEvent(document, "DOMMouseScroll", function(e){
16         evt = e || window.event;
17         eDtail = evt.detail ? evt.detail : evt.wheelDelta;
18         oBox.innerHTML = "ff"+ eDtail;
19     })
20 }
21 else{   // ie、chrome、opera、Safari
22     addEvent(document, "mousewheel", function(e){
23         evt = e || window.event;
24         eDtail = evt.detail ? evt.detail : evt.wheelDelta;
25         oBox.innerHTML = "ie" + eDtail;
26     })
27 }

　　5、文本事件：

　　6、键盘事件：

　　　　keydown：按下按键，按住不放会重复事件　　keypress：按下字符键触发，按住不放会重复事件　　　keyup：抬盘按键

　　　　按键码keyCode、which、charCode属性：

 1 addEvent(document, "keypress", function(e){
 2     var e = e || window.event;
 3     /*
 4     * 在IE下：支持keyCode，不支持which和charCode,二者值为 undefined
 5     * 在Firefox下：支持keyCode，除功能键外，其他键值始终为 0， 支持which和charCode，二者的值相同
 6     * 在Opera下：支持keyCode和which，二者的值相同，不支持charCode，值为 undefined
 7     */
 8     var curKey = e.keyCode || e.which || e.charCode;
 9     console.log(curKey);
10     if(curKey === 13){
11         console.log("已经按下回车");
12     }
13 })

　　7、菜单事件contextmenu

 1 var oBox = document.getElementById("box");
 2 
 3 function addEvent(obj, type, fn){
 4     if(obj.addEventListener){
 5         obj.addEventListener(type, fn, true);
 6     }
 7     else{
 8         obj.attachEvent("on"+type, fn);
 9     }
10 }
11 
12 // 停闭浏览器默认的菜单
13 addEvent(window, "contextmenu", function(e){
14     var e = e || window.event;
15     if(e.preventDefault){
16         e.preventDefault();
17     }
18     else{
19         e.returnValue = true;
20     }
21 })
22 
23 // 右击oBox时打开自定义菜单
24 addEvent(oBox, "contextmenu", function(e){
25     // 自定义菜单
26 })

　　8、DOMContentLoaded和readystatechange

　　　　DOMContentLoaded：在DOM树加载完就会触发，不会理会javascript、图像、css或其它资源是否下载完　　

 1 function addEvent(obj, type, fn){
 2     if(obj.addEventListener){
 3         obj.addEventListener(type, fn, true);
 4     }
 5     else{
 6         obj.attachEvent("on"+type, fn);
 7     }
 8 }
 9 
10 addEvent(window, "load", function(){
11     console.log("a");    // 后输出
12 })
13 
14 addEvent(document, "DOMContentLoaded", function(){
15     console.log("b");    // 先输出
16 });

　　　　readystatechange：对返回文档或元素的加载信息的状态，每个对象都有一个readyState和complete属性;

　　　　IE下使用readyState 标准浏览器complete

　　　　0：未初始化 uninitialized　　1：正在加载 loading　　2：加载完毕 loaded

　　　　3：可以操作但未加载完成 interactive　　4：加载完毕可以对数据进行操作 complete

 1 var oImg = new Image();
 2 oImg.src = "http://zcimg.zcool.com.cn/zcimg/d49653a64c47000001791f12a170.jpg";
 3 
 4 addEvent(oImg, "load", function(){
 5     // IEreadyState是否等于complete，其它浏览器是通过complete是否为true来判断是否加载完成
 6     console.log("complete:" + oImg.complete + "，readyState：" + oImg.readyState);
 7     if(oImg.complete == true || oImg.readyState == "complete"){
 8         console.log("图片预加载成功");
 9         var timer = setTimeout(function(){
10             document.getElementsByTagName("body")[0].appendChild(oImg);
11         }, 3000);
12     }
13 })

7、关于事件的其它

　　oBox.onclick(e){ }

　　1、event对象的兼容

　　　　var evt = e || window.event;

　　2、事件目标

　　　　var oTarget = evt.target || evt.srcElement;

　　3、获取事件类型

　　　　var getType = evt.type;　　　　// click

　　4、阻止冒泡和默认事件

　　　　阻止冒泡：evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;

　　　　取消默认事件：evt.preventDefault ? evt.preventDefault() : evt.returnValue = true;

四、对象

1、对象引用：

 1 // 变量的赋值关系
 2 var a = 10;
 3 var b = a;
 4 b += 10;
 5 alert(b); // 20
 6 alert(a); // 10
 7 
 8 // 对象的引用
 9 var a = [1, 2, 3];
10 var b = a;
11 b.push(4);
12 alert(b); // 1,2,3,4
13 alert(a); // 1,2,3,4
14 
15 var a = [1, 2, 3];
16 var b = a;
17 b = [1,2,3,4]; // 这块相当于b又创建了一个对象，而不是引用a
18 alert(b); // 1,2,3,4
19 alert(a); // 1,2,3

2、克隆对象但不引用对象

 1 // 如果这种方法克隆对象，改变obj2的时候obj属性也会改变
 2 /*
 3  var obj2 = obj;
 4  obj2.test = 20;
 5 
 6  alert("obj:" + obj.test); // 20
 7  alert("obj2:" + obj2.test); // 20
 8  */
 9 
10 // 克隆方法，不改变obj，将每个键和值复制过去而不是对象
11 function extend(o){
12     var oObj = {};
13     for(var key in o){
14         console.log(o[key]);
15         oObj[key] = o[key];
16     }
17     return oObj;
18 }
19 var obj2 = extend(obj);
20 obj2.test = 20;
21 alert("obj:" + obj.test); // 10
22 alert("obj2:" + obj2.test); // 20

五、ajax

　　XMLHttpRequest对象：标准下创建 new XMLHttpRequest()、iE下使用new ActiveXObject.

　　open("get", "data.php", false)：调用open并不会真正发送请求，参数：请求方式get或post，请求地址，是否异步请求.

　　setRequestHeader()：传入头字段名称.

　　send(null)：请求主体发送的数据，不需要传入Null.

　　responseText：响应以为文本返回.

　　responseXML：响应以xml格式返回.

　　status：响应的HTTP状态，如果为200响应成功，404请求地址不存在.

　　statusText：HTTP说明.

　　readyState：表示请求或响应过程的阶段变化。

　　　　　　　　0：未初始化，未调用open　　　　1：启动，已调用open，未调用send();

　　　　　　　　2：发送，已调用send，但未接到数据　　3：接收：已经接收到部分响应数据

　　　　　　　　4：完成，已接收全部响应数据，可以使用

　　onreadystatechange事件：检测readyState的变化

2、HTTP头信息

Accept：浏览器能够处理的内容类型。

Accept-Charset：浏览器能够显示的字符集。

Accept-Encoding：浏览器能够处理的压缩编码。

Accept-Language：浏览器当前设置的语言。

Connection：浏览器与服务器之间连接的类型。

Cookie：当前页面设置的任何Cookie。

Host：发出请求的页面所在的域。

Referer：发出请求的页面的URI。注意，HTTP规范将这个头部字段拼写错了，而为保证与规范一致，也只能将错就错了。（这个英文单词的正确拼法应该是referrer。）

User-Agent：浏览器的用户代理字符串。

 1 // 创建XMLHttpRequest对象
 2 function newRequest(){
 3     var ajax = false
 4     if(window.XMLHttpRequest) {
 5         ajax = new XMLHttpRequest();
 6     }
 7     else if (window.ActiveXObject) {
 8         try {
 9             ajax = new ActiveXObject("Msxml2.XMLHTTP");
10         }
11         catch (e) {
12             try {
13                 ajax = new ActiveXObject("Microsoft.XMLHTTP");
14             } catch (e) {}
15         }
16     }
17     return ajax;
18 }
19 
20 // GET请求
21 function ajaxGet(url, data, asyn, fn){
22     var xhr = newRequest();
23     if(!xhr){ return false; }
24 
25     xhr.open("get", url + "?" + data, asyn);
26     xhr.send(null);
27     xhr.onreadystatechange = function(){
28         if(xhr.status == 200 && xhr.readyState == 4){
29             if(fn){
30                 fn(xhr.responseText);
31             }
32             else{
33                 return xhr.responseText;
34             }
35         }
36     }
37 }
38 
39 // POST请求
40 function ajaxPOST(url, data, asyn, fn){
41     var xhr = newRequest();
42     if(!xhr){ return false; }
43 
44     xhr.open("post", url, asyn);
45     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
46     xhr.setRequestHeader("If-Modified-Since","0");
47     xhr.send(data);
48     xhr.onreadystatechange = function(){
49         if(xhr.status == 200 && xhr.readyState == 4){
50             if(fn){
51                 fn(xhr.responseText);
52             }
53             else{
54                 return xhr.responseText;
55             }
56         }
57     }
58 }

六、跨域请求

存在跨域和不存在跨域的问题：

　　1、同域下和同域不同文件夹下，不存在跨域

　　2、子域存在跨域

　　3、不同域也是存在跨域问题

解决跨域的方法：

1、子域了主域之间

方法1：将主域和子域都设置document.domain = “www.365.com”;

方法2：使用script标签的src，也就是jsonp的形式Jsonp=json+padding()

方法3：通过loaction.hash值

方法4：通过iframe、

方法5：window.name

方法6：flash

方法7：HTML5 postMessage

Jsonp：请求服务器端文件，服务器将函数和返回的值都打印到页面中，showBox来调用这个方法

1 <script>
2 function showBox(json){
3 console.log(json.data);
4 }
5 </script>
6 <script src="jsonp.php?callback=showBox"></script>

七、操作iframe:

1、通过ifr.contentWindow来获取iframe的window对象，都兼容，但在chrome下需要有服务器环境才可以，chrome安全沙箱的原因

2、通过ifr.conentDocument来获取iframe的document对象，但ie6、7都不支持

例：父页面操作iframe页面

1 var oIfr = document.getElementById("ifr");
2 var oBtn = document.getElementById("btn");
3 oBtn.onclick = function(){
4     var docIfr = oIfr.contentWindow.document.getElementById("listNum");
5     docIfr.style.backgroundColor = "#ff0000";
6 }

例：iframe页面操作父页面

通过window.parent()，返回的是父页面的window对象

1 var oSelectBtn = document.getElementById("selectBtn");
2 selectBtn.onclick = function(){
3     var parentIfr = window.parent.document.getElementById("ifr");
4     parentIfr.style.width = "500px";
5     parentIfr.style.height = "300px";
6 }

　　通过window.top为找到最顶层，例如：index页面嵌套一个iframe为demo1.html，demo1中又嵌套一个iframe为demo2，这样如果在demo2中使用window.parent，其实找到的demo1这个页面，如果使用window.top就可以直接找到index.html这个页面

3、iframe的onload事件

 1 window.onload = function(){
 2     var oIfr = document.getElementById("ifr");
 3     oIfr.src = "index.html";
 4     addEvent(oIfr, "load", function(){
 5         alert("aa");
 6     })
 7 
 8     function addEvent(obj, type, fn){
 9         if(obj.addEventListener){
10             obj.addEventListener(type, fn, true);
11         }
12         else{
13             obj.attachEvent("on"+type, fn);
14         }
15     }
16 }

八、正则表达式

1、 test()、search()、replace()、Match()：

str.test(reg)：返回一个布尔值，如果查找到返回true，否则返回false

str.search(reg)：查找匹配的位置，如果没有找到返回-1

str.replace(reg, str1)：匹配字符并替换

str.match(reg)：若匹配不到返回null，否则返回数组

九、JSON与JSON对象

1、json的三种定义：

　　var jsonStr = '{"name": "haha", "age": 20}';　　// 注意js中定义json串里面key要使用""，如果使用单引号会报错

　　简单值：{"name": "haha", "age": 20}可以在json中使用字符串、数字、布尔、null，但不能在json中使用undefined;

　　json对象：{"data": {"name": "haha", "age": 20}， "data1": {"name": "haha1", "age": 21}}

　　json数组：[ {"name": "haha", "age": 20}， {"name": "haha1", "age": 21}]

　　json与js对象的区别：json是没有变量的，果断json的键只能是字符串，而js对象的键可以不是字符串

2、json串与对象的互转

　　json字符串转为json对象：

　　方法一：eval()

　　　　var data = eval("('+ d +')");

　　方法二：stringify()：将对象转成json串、parse()：将json串转成对象

　　IE6、7不支持这两个方法，只在ECMAScript5中才被引入，所以需要下载：https://github.com/douglascrockford/JSON-js/blob/master/json2.js

 1 if(JSON.parse){
 2     var str = '{"name":"haha","age":20}';
 3     var oJson = JSON.parse(str);
 4     console.log(oJson.name);
 5 }
 6 
 7 if(JSON.stringify){
 8     var jsonStr = JSON.stringify(oJson);
 9     console.log(typeof jsonStr, jsonStr);
10 }

　　方法三：jquery将json串转成json对象$.parseJSON(jsonStr)

四、DOM

一、览器的渲染方式有关系，一般浏览器的渲染操作：

　　1、解析HTML结构

　　2、加载外部脚本和样式

　　3、解析并执行脚本

　　4、构造DOM模型

　　5、加载外部图片等外部文件

　　6、页面加载完成

五、jQuery重点

六、javascript性能重点

一、js性能：

1、尽可能减少Javascript与DOM的操作

1 var str = ""
2 var oBox = $("#box");
3 for(var i= 0,len=5000; i<len; i++){
4     str += "s";
5 }
6 oBox.html(str);

2、使用innerHTML要比appendChild要快

 1 /* webkit内核：DOM的innerHTML性能要好 */
 2 var str = ""
 3 var oBox = document.getElementById("box");
 4 for(var i= 0,len=5000; i<len; i++){
 5     str += "<li>"+ i +"</li>";
 6 }
 7 oBox.innerHTML = str;
 8 
 9 var str = ""
10 var oBox = document.getElementById("box");
11 for(var i= 0,len=5000; i<len; i++){
12     var oLi = document.createElement("li");
13     oBox.appendChild(oLi);
14 }
15 oBox.innerHTML = str;

3、可以减少DOM操作的几个方法

 1 // 第一种方法：cloneNode克隆节点
 2 var oBox = document.getElementById("box");
 3 var oLi = document.createElement("li");
 4 oLi.innerHTML = "aa";
 5 
 6 console.time("a");
 7 for(var i= 0,len=5000; i<len; i++){
 8     var oCreateLi = oLi.cloneNode(true);
 9     oBox.appendChild(oLi);
10 }
11 console.timeEnd("a");
12 
13 // 第二种方法：访问元素集合，尽量使用局部变量
14 // 获取两个节点，但都使用了document对象
15 var obox = document.getElementById("box");
16 var oLis = document.getElementsByTagName("li");
17 
18 // 可以改成
19 var oDoc = document;
20 var obox = oDoc.getElementById("box");
21 var oLis = obox.getElementsByTagName("li");

4、DOM与浏览器的优化

重排：改变页面的内容，当js改变了页面一个元素的位置、宽、高，这个过程叫重排。

重绘：浏览器显示的内容，当执行完重排后浏览器会把内容显示出来，这个过程叫重绘，重排和重绘都会消耗浏览器的性能。

如果比如改变元素的背景颜色文字颜色，这样只触发了重绘的过程不会进行操作重排

减少重排、重绘的几个方法：

　　1、尽量在appendChild之前添加操作

 1 var oBox = document.getElementById("box");
 2 var oLi = document.createElement("li");
 3 oLi.innerHTML = "aa";
 4 console.time("a");
 5 for(var i= 0,len=5000; i<len; i++){
 6     var oLi = document.createElement("li");
 7     oLi.innerHTML = "哈哈";
 8 
 9 // 如果将innerHTML放到appendChild下执行就会先执行重排在执行重绘
10 // 如果放到appendChild之前执行，只执行重排，不会执行重绘
11     oBox.appendChild(oLi);
12 }
13 console.timeEnd("a");

　　2、文档碎片

1 var oBox = document.getElementById("box");
2 var oFrg = document.createDocumentFragment(); // 创建一个文档碎片
3 for(var i= 0,len=5000; i<len; i++){
4     var oLi = document.createElement("li");
5     oFrg.appendChild(oLi); // 将创建的元素都放到文档碎片中，相当于放到这个袋子中
6 }
7 oBox.appendChild(oFrg); // 最后插入的只是袋子

七、前端新技术性能重点

一、css预处理less和sass

二、sea.js

　　用于模块化，对项目模块间依赖关系较强的处理比较好

三、nodejs

　　服务器端的js，可以处理线程，scoket、并发和数据库的操作

四、前端自动构建工具Grunt

五、新技术

　　1、懒加载lazyload

　　2、预加载