一、代碼優(yōu)化的方法
CSS優(yōu)化：
1澎剥、利用繼承
Css的繼承機(jī)制可以幫我們在一定程度上縮減字節(jié)數(shù)叭首，我們知道css很多屬性可以繼承，即在父容器設(shè)置了默認(rèn)屬性互广，子容器會默認(rèn)也使用這些屬性敛腌。
可繼承的屬性舉例：
所有元素都可以繼承的屬性：visibility 卧土、cursor
內(nèi)聯(lián)元素和塊元素可以繼承的屬性：
Letter-spacing、word-spacing像樊、white-space尤莺、line-height、color生棍、font颤霎、font-family、font-size涂滴、font-style友酱、font-variant、font-weight柔纵、text-decoration粹污、text-transform、direction首量。
塊狀元素可以繼承的屬性：Text-indent壮吩、text-align；
列表元素可以繼承的屬性：
List-style加缘、list-style-type鸭叙、list-style-position、list-style-image
表格元素可以繼承的屬性：Border-collapse
不可以繼承的屬性：
Display拣宏、margin沈贝、border、padding勋乾、background宋下、height、min-height辑莫、max-height学歧、width、min-width各吨、max-width枝笨、overflow、position揭蜒、left横浑、right、top屉更、bottom徙融、z-index、float瑰谜、clear欺冀、table-layout树绩、vertical-align、page-break-after脚猾、page-break-before、unicode-bidi
2砚哗、css放在head中龙助，減少repaint和reflow
Css方法在頁面的頂部，有利于優(yōu)化的原因蛛芥？提鸟？？
當(dāng)瀏覽器從上到下一遍下載html生成dom tree仅淑，一邊根據(jù)瀏覽器默認(rèn)以及現(xiàn)有css生成render tree來渲染頁面称勋。當(dāng)遇到新的css的時候下載并結(jié)合現(xiàn)有css重新生成render tree。則剛才的渲染功能就全廢了涯竟。當(dāng)我們把所有css放在頁面的頂部赡鲜，就沒有重新渲染的過程了。
3庐船、不要用標(biāo)簽或class來限制id银酬。
test .info /div #test這都屬于畫蛇添足
Id已經(jīng)可以唯一而且快速的定位到一個元素了。
JavaScript優(yōu)化總結(jié)
1筐钟、避免全局查找
在一個函數(shù)中盡量將全局對象存儲為局部變量來查找揩瞪，因為訪問局部變量的數(shù)要更快一些。
function(){
alert(window.location.href+window.location.host);
}
修改為：
funciton(){
var location=window.location;
alert(location.href+location.host);
}
2篓冲、使用后測試循環(huán)
在js中李破，我們使用for(;;),while(),for(in)三種循環(huán)。for(in)的效率極差壹将。因為他需要查詢散列鍵嗤攻，只要可以，就應(yīng)該盡量少用诽俯。
for(;;)和while循環(huán)屯曹，while優(yōu)于for（；惊畏；）,可能for（恶耽；；）結(jié)構(gòu)問題颜启，需要經(jīng)常的跳轉(zhuǎn)偷俭。do..while更好。
3缰盏、可以用三目運(yùn)算符替換條件分支涌萤，可以提高效率
4淹遵、把腳本置于頁面底部，可以使頁面加載速度更快一些负溪。
5透揣、使用外部JavaScript和CSS
可以調(diào)用外部的。cdn公共庫：http://www.haorooms.com/post/cdn_all
Web性能優(yōu)化
1川抡、通過css sprites來整合圖像
若頁面中有6個小圖像辐真，那么瀏覽器在顯示時會分別下載，你可以通過css sprites將這些圖像合并成為一個崖堤，可以減少頁面加載所需要的時間侍咱。
Css sprites兩個步驟：整合圖像，定位圖像
2密幔、如果你的css和js較小楔脯，可以將css和js內(nèi)嵌到html頁面中，這樣可以減少頁面加載所需要的文件數(shù)胯甩，從而加快頁面的加載昧廷。
3、指定圖像尺寸
當(dāng)瀏覽器加載頁面的html時偎箫，有時候需要在圖片下載完成前麸粮，對頁面布局進(jìn)行定位。如果hmtl里的圖片沒有指定尺寸镜廉，或者代碼描述的尺寸和實際的圖片尺寸不符合時弄诲，瀏覽器需要在圖片下載完成后在回溯到該圖片，并重新顯示娇唯，這將消耗額外的時間齐遵。
最好的頁面中每一張圖片都指定尺寸，不管在html里的img中塔插，還是在css中梗摇。
二、js(Event)事件：
//點擊添加事件
//它有三個參數(shù)想许，第三個參數(shù)若是true伶授，則表示采用事件捕獲，若是false流纹，則表示采用事件冒泡糜烹。
function addEvent(ele, type, fun) {
if (ele.addEventListener) {
ele.addEventListener(type, fun, false);
} else if (ele.attachEvent) {
ele.attachEvent(type, fun);
}
}
//點擊移除事件
function removeEvent(ele, type, fun) {
if (ele.removeEventListener) {
ele.removeEventListener(type, fun, false);
} else if (ele.detachEvent) {
ele.detachEvent(type, fun);
}
}
//阻止默認(rèn)事件
function prevent(e) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
//阻止冒泡事件
function stop(e) {
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
//點擊事件
function targets(e) {
e = e || window.event;
if (e.target) {
//獲取事件對象
return e.target;
} else {
//獲取事件源
return e.srcElement;
}
}
三、$.get()和$.post()和$.ajax()的區(qū)別和聯(lián)系
區(qū)別：
$.get()：
通過遠(yuǎn)程 HTTP GET 請求載入信息漱凝。這是一個簡單的 GET 請求功能以取代復(fù)雜的$.ajax().請求成功時可調(diào)用回調(diào)函數(shù)疮蹦。
如果需要在出錯時執(zhí)行函數(shù)，請使用$.ajax()
$.post()：
通過遠(yuǎn)程 HTTP POST 請求載入信息茸炒。這是一個簡單的 POST 請求功能以取代復(fù)雜的$.ajax().請求成功時可調(diào)用回調(diào)函數(shù)愕乎。
如果需要在出錯時執(zhí)行函數(shù)阵苇，請使用$.ajax()
$.ajax()：
通過 HTTP 請求加載遠(yuǎn)程數(shù)據(jù)。jQuery 底層 AJAX 實現(xiàn)感论。
聯(lián)系：
前兩者是$.ajax()的簡單易用實現(xiàn)绅项，以方便我們的使用。
當(dāng)把$.ajax()中的參數(shù)type設(shè)為Get或Post比肄，則分別同get()或post()
樣式調(diào)整：
function setFontSize() {
var doc = document,
width = doc.documentElement.clientWidth,
times = width / 320;
doc.documentElement.style.fontSize = (times * 100) + "px";
}
setFontSize();
window.onresize = function() {
setFontSize();
}
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
