前端重点整理集合

时间：2014-07-12 14:19:43 阅读：445 评论：0 收藏：0 [点我收藏+]

一、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、\0：用于IE8，IE9

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

5、\9\0：用于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的各种模式详解

标准和怪异模式

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

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

二、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重点

四、JavaScript重点

一、DOM文档对象模型

二、函数

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

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

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

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

var oTest = function(){ … }

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

2、递归

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

1 function test(n){
2     if(n==1){
3         console.trace();
4         return 1;
5     }
6     return n * test(n-1)
7 }
8 test(5); // 1*2*3*4*5

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、事件类型：

2、事件捕获和冒泡：

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 }

四、对象

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

3、js、jquery将字符串和对象的互转

五、跨域请求

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

　　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，否则返回数组

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