?1.display:none;優于visibility:hidden;前者隱藏不占用物理空間，后者會占用。
2.合并margin,padding,border的-top,-left,-right,-bottom的設置，簡短簡潔。
3.選擇器在滿足效果的基礎上，盡量簡單，減少嵌套，查詢的消耗。
4.如若值為0，則去掉單位，如border-right:0px;可以寫為border-right:0;
5.沒有邊框，用border:none;優于border;0;
6.在保持代碼解耦的前提下，盡量合并重復的代碼。
7.background,font的多個屬性盡可能縮寫。
? ?如背景顏色，背景圖片，背景圖片的重復次數及背景圖片處于左右上下的位置，背景圖片的大小，都可以合在一起寫。background:#333 url(images/a.jpg) no-repeat center 50% 50%;
8.用href="javascript:vold(null)"代替原來的href="#",避免空鏈接點擊后重置到頁面首端。
9.所有內頁指向首頁的鏈接寫成<a href="/">不必寫全。
10.在 body中，盡量少用圖片repeat,且若用，圖片寬和高不少于8px,否則加載背景圖片時候需要重復的次數會影響性能。
11.圖片若小，盡可能使用sprite技術，減少http請求次數。《=200KB圖片所需的加載時間基本是差不多的。客戶端每顯示一張 圖片都會向服務器請求一次。所以圖片越多，請求次數越多，造成的延遲的可能性就越大。

轉載于:https://www.cnblogs.com/BaishangBloom/p/4642457.html

總結

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

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