前端重点－整理集合

时间 2019-12-10

原文原文链接

1、XHTML+CSS重点

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

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

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

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

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

2、布局有哪些方式java

　　一、三列布局中间列自适应node

　　二、让div元素上下左右居中jquery

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

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

3、样式的优化级

一、#：id

二、.：类选择器

三、div：标签选择器

四、h1 + p：相邻选择器

五、div < p：子选择器

六、div < li：后代选择器

七、*：通配符

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

九、a:hover：伪类选择器

4、css hack

一、_ ：用于IE6　

二、*和+：用于IE6,IE7

三、\0：用于IE8，IE9

四、\9：用于 IE6，IE7，IE8，IE9

五、\9\0：用于IE9

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

5、haslayout

IE浏览器下的不少bug都是haslayout = false 引发的：

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

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

触发方法：

一、position:absolute

二、float:left/right

三、display:inline-block

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

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

6、DOCTYPE的各类模式详解

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

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

　　将HTML中的DOCTYPE声明去掉就能够引起怪异模式

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

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

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

7、CSS的权重

权重值：

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

二、id选择符：权值为100

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

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

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

2、HTML5重点

1、新增标签：

2、canvas功能：

3、本地存储：

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

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

获取：localStorage.getItem(key);

所有清除：localStorage.clear();

4、离线存储：

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

5、跨文档消息：

6、多线程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 }

7、获取地理位置：

8、webSocket：

9、video和audio：

3、CSS3重点

1、HTML5定义

　　<!DOCTYPE HTML>

2、兼容不一样适配器

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

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

3、viewport虚拟窗口

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

　　各属性：

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

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

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

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

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

　　六、user-scalable：用户是否能够手动缩放

4、定义缓存

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

content的可选值：
一、public：表示能够在任何地方缓存网页，若是定义为public，一般代理服务器做为一个共享缓存能够缓存到该网页
二、private：表示单个用户所私有，
三、no-cache：表示不缓存该网页，即便相同的客户重复使用，也不会缓存
四、no-store：响应和致使该响应的请求不能存储在任何存区内，
五、no-transform：
六、must-revalidate:
七、proxy-revalidate:
八、max-age:以秒为单位定义缓存的最大过时时间 content="max-age:3600" 将网页缓存存为一个小时3600秒
九、s-maxage:用于代理的共享缓存，它能够 max-age

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

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

5、选择器

　　一、基本选择器：

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

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

　　二、属性选择器：

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

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

　　三、结构性伪类选择器：

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

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

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

　　四、UI元素伪类选择器：

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

　　五、伪类与伪元素

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

　　　　区别：伪元素能够独自使用，伪类不能够　　

6、css3样式

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

　　一、阴影：盒阴影、文字阴影

　　　　格式：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

　　二、边框：

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

　　三、背景：

　　　　背景渐变：linear-gradient：

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

　　　　背景图的尺寸：background-size:

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

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

　　　　背景裁剪：background-clip

　　　　　　指定背景的范围：

　　　　　　border-box：

　　四、文本

　　　　文本换行 web-break：

　　　　word-break的三个值：一、normal：使用浏览器默认换行　　　二、keep-all：只能在半角空格或连字符处换行　　　三、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 */
}

　　五、变型 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为左上角

　　六、3D变形

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

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

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

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

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

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

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

　　七、动画

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

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

四个属性：

执行变换的属性：transition-property

变换延续的时间：transition-duration

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

变换延迟时间transition-delay

　　　　li { width: 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; }

　　　　二、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}

}

4、JavaScript重点

1、DOM文档对象模型

2、函数

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

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

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

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

var oTest = function(){ … }

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

二、递归

　　函数调用函数自身这个过程叫递的动做，在最后一次在判断停止条件，能够执行归的动做，

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

 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>

三、拉圾回收机制：

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

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

闭包的好处：一、但愿一个变量长期的在内存中二、避免全局变量的污染

 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 }

3、事件

一、事件流：

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

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

二、事件捕获和冒泡：

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

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

三、事件处理

　　标准：addEventListener、removeElementListener

　　ie下：attachEvent、detachEvent

三、事件源：无论在哪一个事件中，只要你操做的那个元素就是事件源

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

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

　　好处：一、提升性能二、新添加的元素也会有事件，由于事件是在父级上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 }

五、自定义事件

六、事件类型

　　一、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 }

　　二、焦点事件：

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

　　三、鼠标事件：

　　　　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 })

　　四、滚轮事件：

　　　　IE：mousewheel 向上120、向下-120　　　　FF：DOMMouseScroll　向上-三、向下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 }

　　五、文本事件：

　　六、键盘事件：

　　　　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 })

　　七、菜单事件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 })

　　八、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 })

七、关于事件的其它

　　oBox.onclick(e){ }

　　一、event对象的兼容

　　　　var evt = e || window.event;

　　二、事件目标

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

　　三、获取事件类型

　　　　var getType = evt.type;　　　　// click

　　四、阻止冒泡和默认事件

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

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

4、对象

一、对象引用：

 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

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

 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

5、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的变化

二、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 }

6、跨域请求

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

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

　　二、子域存在跨域

　　三、不一样域也是存在跨域问题

解决跨域的方法：

一、子域了主域之间

方法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>

7、操做iframe:

一、经过ifr.contentWindow来获取iframe的window对象，都兼容，但在chrome下须要有服务器环境才能够，chrome安全沙箱的缘由

二、经过ifr.conentDocument来获取iframe的document对象，但ie六、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这个页面

三、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 }

8、正则表达式

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

str.test(reg)：返回一个布尔值，若是查找到返回true，不然返回false

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

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

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

9、JSON与JSON对象

一、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对象的键能够不是字符串

二、json串与对象的互转

　　json字符串转为json对象：

　　方法一：eval()

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

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

　　IE六、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)

4、DOM

1、览器的渲染方式有关系，通常浏览器的渲染操做：

　　一、解析HTML结构

　　二、加载外部脚本和样式

　　三、解析并执行脚本

　　四、构造DOM模型

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

　　六、页面加载完成

5、jQuery重点

6、javascript性能重点

1、js性能：

一、尽量减小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);

二、使用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;

三、能够减小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");

四、DOM与浏览器的优化

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

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

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

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

　　一、尽可能在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");

　　二、文档碎片

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); // 最后插入的只是袋子

7、前端新技术性能重点

1、css预处理less和sass

2、sea.js

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

3、nodejs

　　服务器端的js，能够处理线程，scoket、并发和数据库的操做

4、前端自动构建工具Grunt

5、新技术

　　一、懒加载lazyload

　　二、预加载