如何進行前端優化

（1） 減少http 請求次數：css spirit（多張小圖放一個大圖上，用定位選擇不同小圖）,data uri（壓縮圖片大小），

圖片大小控制合適；網頁Gzip，CDN托管，data緩存 ，圖片服務器。

background: url(圖片地址) no-repeat 10px 20px; ???????
10px 20px代表著橫向和縱向坐標。
以容器的左上角為原點，圖片向右或向下移動，數值就是正，向左或向上就是負。

（2） JS，CSS 源碼壓縮
（3） 前端模板JS+數據，減少由于HTML 標簽導致的帶寬浪費，前端用變量保存AJAX 請求結果，每
次操作本地變量，不用請求，減少請求次數
（4） 用innerHTML 代替DOM 操作，減少DOM 操作次數，優化javascript 性能
（5） 用setTimeout 來避免頁面失去響應
（6） 用hash-table 來優化查找
（7） 當需要設置的樣式很多時設置className 而不是直接操作style
（8） 少用全局變量
（9） 緩存DOM 節點查找的結果

（10） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。
（11） 圖片預加載，將樣式表放在頂部，將腳本放在底部，加上時間戳。
（12） 避免在頁面的主體布局中使用table，table 要等其中的內容完全下載之后才會顯示出來，顯
示比div+css 布局慢

（13）圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）

（14）網址后加斜杠（如www.campr.com/目錄，會判斷這個“目錄是什么文件類型，或者是目錄。）

（15）標明高度和寬度（如果瀏覽器沒有找到這兩個參數，它需要一邊下載圖片一邊計算大小，如果圖片很多，瀏覽器需要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。當瀏覽器知道了高度和寬度參數后，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然后繼續加載后面的內容。從而加載時間快了，瀏覽體驗也更好了。）

jQuery 中(′.class′)和('div.class') 在IE 8 下哪個效率更高?
這題是關于selector 的性能問題，$(".class")在查找和遍歷頁面的元素時，會遍歷所有帶有class 類的元素，不管
是div、p、span 或者是其他元素；而$("div.class")首先會查找出div 元素，然后在所有的div 中查詢帶有class 類的相
關div，所以在效率方面，當然是div.class 選擇器高于.class。
jQuery 選擇一個元素最快的方法就是用ID 選擇器;
jQuery 中第二快的選擇器就是tag 選擇器（如$(‘head’)），因為它和直接來自于原生的Javascript 方法
getElementByTagName()。所以最好總是用tag 來修飾class(并且不要忘了就近的ID)

轉載于:https://www.cnblogs.com/shenyanran/p/6106466.html

總結

以上是生活随笔為你收集整理的【前端优化】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。