前端體驗優化小貼士

閆亞龍發表於2019-02-18
前端優化

“顧客是上帝”，把體驗的細節做好，給使用者更好的體驗。

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.最後就是最重要的——頁面響應速度，效能優化

這是個大工程，而且網上的資料也很多，需要的就自行查詢吧。


相關文章