“顧客是上帝”，把體驗的細節做好，給使用者更好的體驗。
1.img的 onerror 事件
圖片有時候載入不出來，就會顯示個裂圖，很影響體驗，onerror 事件會在文件或影象載入過程中發生錯誤時被觸發，可以給使用者提示，或者改變圖片的地址為佔點陣圖：
<img src="image.gif" onerror="alert('圖片不能被載入。')">複製程式碼2. css 設定文字不能被選中
有時候點選的時候 會不小心選中文字， 增加這個設定可以避免此問題：
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;複製程式碼3.修改滾動條預設樣式
預設的滾動條樣式太醜了，前端可以進行修改，在用到滾動條的地方可以都用此程式碼，示例程式碼如下
<!DOCTYPE html>
<html>
<head>
<title>修改滾動條樣式</title>
</head>
<body>
<style type="text/css" media="screen">
.inner{
width: 300px;
height: 400px;
overflow:hidden;
margin: 0 auto;
}
.innerbox{
overflow-x: hidden;
overflow-y: auto;
color: #000;
height: 100%;
}
/*滾動條樣式*/
.innerbox::-webkit-scrollbar {/*滾動條整體樣式*/
width: 5px; /*高寬分別對應橫豎滾動條的尺寸*/
height: 5px;
}
.innerbox::-webkit-scrollbar-thumb {/*滾動條裡面小方塊*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.innerbox::-webkit-scrollbar-track {/*滾動條裡面軌道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
</style>
<div class="inner">
<div class="innerbox">
<p style="height:300px;">這是內容111</p>
<p style="height:300px;">這裡是內容222</p>
<p>這裡是內容333</p>
</div>
</div>
</body>
</html>複製程式碼
4.textarea的調整
textarea 右下角會有個拖動的標誌，如果不想讓使用者進行縮放，並去掉這個標誌，可以增加 style="resize:none;" 或者使用 contenteditable="true" 將div變成編輯器進行輸入。
5.禁止重複提交
比如使用者點選一次就是一次提交，那麼多次點選的時候就是多次提交，有可能造成頁面卡主或者長時間沒反應，此時就需要禁止使用者的多次提交
方法一：
給所點選的元素設定 pointer-events: none; 該屬性會讓該元素的所有點選事件失效，請求結束之後 去掉該屬性即可；不過該屬性有相容性限制（大部分瀏覽器都支援了，幾乎可以忽略相容性），如下：
方法二：
點選完之後，給點選區域增加一個透明的遮罩層，再次點選的時候就是在遮罩層上，點選就無效，請求結束之後把遮罩層移除，或者隱藏（display: "none"）。
6.記住賬號密碼
記住密碼，可以方便使用者再次登入的時候不用重新輸入：
方法： 使用cookie，將登入資訊存入cookie，儲存在使用者本地（存入cookie最好加密，不然就是裸奔了）
cookie說明：
如果不設定過期時間，則表示這個cookie生命週期為瀏覽器會話期間，只要關閉瀏覽器視窗，cookie就消失了。這種生命期為瀏覽會話期的cookie被稱為會話cookie。會話cookie一般不儲存在硬碟上而是儲存在記憶體裡。
如果設定了過期時間，瀏覽器就會把cookie儲存到硬碟上，關閉後再次開啟瀏覽器，這些cookie依然有效直到超過設定的過期時間。
儲存在硬碟上的cookie可以在不同的瀏覽器程式間共享，比如兩個IE視窗。而對於儲存在記憶體的cookie，不同的瀏覽器有不同的處理方式。
7.避免自動填充資料
<input>預設是自動填充賬號密碼的，之前就遇到過登入的時候記住密碼，但是網站其他位置的表單填寫區域也有的也出現了自動填充資料了，為了避免此問題，做如下設定：
<input type="text" autocomplete="off" />複製程式碼autocomplete 預設是 on， 開啟狀態， 設定成 off 就關閉了。複製程式碼8.最後就是最重要的——頁面響應速度，效能優化
這是個大工程，而且網上的資料也很多，需要的就自行查詢吧。