一.減少http請求消耗資源
1.Css Sprites
css sprites是將多幅圖融合到一張圖片裏，這樣可以減少圖片的請求數量，再通過css技術把想要的圖片樣式展示在瀏覽器頁面上，雖然合成的圖片會比較大，但這樣做確實可以減少請求資源的消耗。
2.Inline Image
使用 data: URL scheme的方式將圖片嵌入到頁面或 CSS中，scheme有：data:image/gif;base64,base64編碼的gif圖片數據，
data:image/png;base64,base64編碼的png圖片數據，data:image/jpeg;base64,base64編碼的jpeg圖片數據，data:image/x-icon;base64,base64編碼的icon圖片數據。
這個方法不利於資源管理，卻可以減少圖片的請求，URL經過base64編碼，內聯在頁面中。
3.設置http緩存
頁面中存在許多不經常改變的靜態資源，http緩存可以減少許多請求，合理設置緩存和長的過期時間。
（這裏補充原理）
4.資源合理壓縮
在服務器端對資源進行壓縮，在瀏覽器端進行解壓，對js，css，images文件儘可能進行合併（利用webpack和gulp等工具）。但壓縮解壓對服務器和瀏覽器有一定的壓力，服務器資源不足時謹慎使用。
二.DOM方面的優化
1.儘量減少頁面的重繪重排
通常在文檔初次加載時，瀏覽器引擎會解析HTML文檔來構建DOM樹，之後根據DOM元素的幾何屬性構建一棵用於渲染的樹。渲染樹的每個節點都有大小和邊距等屬性，類似於盒子模型（由於隱藏元素不需要顯示，渲染樹中並不包含DOM樹中隱藏的元素）。當渲染樹構建完成後，瀏覽器就可以將元素放置到正確的位置了，再根據渲染樹節點的樣式屬性繪製出頁面。由於瀏覽器的流佈局，對渲染樹的計算通常只需要遍歷一次就可以完成。但table及其內部元素除外。
重繪：通常是DOM節點的外觀樣式如背景色等改變時，引起的瀏覽器對該節點樣式的重新繪製，呈現新的外觀。重繪不一定帶來重排
重排：渲染樹需重新計算，重排一定會引起重繪。當DOM節點的尺寸改變時對這一節點的重新構建也會引起相關節點的重新構建；DOM元素的增刪移動也會帶來重排。如果在body最前面插入一個元素，會導致整個文檔的重新渲染，而在其後插入一個元素，則不會影響到前面的元素；
減少重排重繪：
- 將多次改變樣式屬性的操作合併成一次操作。結合css和js中元素的className進行改變一系列樣式。
- 將需要多次重排的元素，position屬性設爲absolute或fixed，這樣此元素就脫離了文檔流，它的變化不會影響到其他元素。例如有動畫效果的元素就最好設置爲絕對定位。
- 在內存中多次操作節點，完成後再添加到文檔中去。例如要異步獲取表格數據，渲染到頁面。可以先取得數據後在內存中構建整個表格的html片段，再一次性添加到文檔中去，而不是循環添加每一行。
- 由於display屬性爲none的元素不在渲染樹中，對隱藏的元素操作不會引發其他元素的重排。如果要對一個元素進行復雜的操作時，可以先隱藏它，操作完成後再顯示。這樣只在隱藏和顯示時觸發2次重排。
- 在需要經常獲取那些引起瀏覽器重排的屬性值時，要緩存到變量。在進行某些屬性的獲取時，爲了得到準確的值可能會進行重排，如offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)等，多次使用的話要進行緩存。
三.JavaScript代碼
1.慎用 with，減少作用域鏈查找
with(obj){ p = 1}; 代碼塊的行爲實際上是修改了代碼塊中的執行環境 ，將obj放在了其作用域鏈的最前端，在 with代碼塊中訪問非局部變量是都是先從 obj上開始查找，如果沒有再依次按作用域鏈向上查找，因此使用 with相當於增加了作用域鏈長度。而每次查找作用域鏈都是要消耗時間的，過長的作用域鏈會導致查找性能下降。 因此，除非你能肯定在 with代碼中只訪問 obj中的屬性，否則慎用 with，替代的可以使用局部變量緩存需要訪問的屬性。儘量使用局部變量代替全局變量，減少在作用域鏈上搜索標識符的時間
2.避免使用 eval和 Function
每次 eval 或Function 構造函數作用於字符串表示的源代碼時，腳本引擎都需要將源代碼轉換成可執行代碼。這是很消耗資源的操作 ，eval 函數效率特別低，由於事先無法知曉傳給 eval 的字符串中的內容，eval在其上下文中解釋要處理的代碼，也就是說編譯器無法優化上下文，因此只能有瀏覽器在運行時解釋代碼。這對性能影響很大。 Function 構造函數比 eval略好，因爲使用此代碼不會影響周圍代碼 ;但其速度仍很慢。 此外，使用 eval和 Function也不利於Javascript 壓縮工具執行壓縮。
3.數據訪問
Javascript中的數據訪問包括直接量 (字符串、正則表達式 )、變量、對象屬性以及數組，其中對直接量和局部變量的訪問是最快的，對對象屬性以及數組的訪問需要更大的開銷。當出現以下情況時，建議將數據放入局部變量： a. 對任何對象屬性的訪問超過 1次 ；b. 對任何數組成員的訪問次數超過 1次 。另外，還應當儘可能的減少對對象以及數組深度查找。
4.事件代理
在javascript中，在頁面渲染時添加到頁面上的事件處理程序數量直接關係到頁面的整體運行性能。最直接的影響是頁面的事件處理程序越多，訪問DOM節點的次數也就越多。另外函數是對象，會佔用內存。內存中的對象越多，性能就越差。