首页 > 代码库 > 前端重点整理集合
前端重点整理集合
一、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.js10 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,413 alert(a); // 1,2,3,414 15 var a = [1, 2, 3];16 var b = a;17 b = [1,2,3,4]; // 这块相当于b又创建了一个对象，而不是引用a18 alert(b); // 1,2,3,419 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); // 1022 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=http://www.mamicode.com/"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 = http://www.mamicode.com/"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); // 最后插入的只是袋子
六、前端新技术性能重点
一、css预处理less和sass
二、sea.js
用于模块化，对项目模块间依赖关系较强的处理比较好
三、nodejs
服务器端的js，可以处理线程，scoket、并发和数据库的操作
四、前端自动构建工具Grunt
五、新技术
1、懒加载lazyload
2、预加载
七、移动端重点
八、算法重点