前端體驗優化小貼士

2022-07-02 15:06:14 字數 2157 閱讀 3078

<

img

src="image.gif"

onerror

="alert('不能被載入。')"

>

有時候點選的時候 會不小心選中文字, 增加這個設定可以避免此問題:

-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

user-select:none;

預設的滾動條樣式太醜了,前端可以進行修改,在用到滾動條的地方可以都用此**,示例**如下

doctype html

>

<

html

>

<

head

>

<

title

>修改滾動條樣式

title

>

head

>

<

body

>

<

style

type

="text/css"

media

="screen"

>

.inner

.innerbox

/*滾動條樣式

*/.innerbox::-webkit-scrollbar

.innerbox::-webkit-scrollbar-thumb

//.innerbox::-webkit-scrollbar-track

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

>

textarea 右下角會有個拖動的標誌,如果不想讓使用者進行縮放,可以增加   style="resize:none;"  或者使用  contenteditable="true"  將div變成編輯器進行輸入。

比如使用者點選一次就是一次提交,那麼多次點選的時候就是多次提交,有可能造成頁面卡主或者長時間沒反應,此時就需要禁止使用者的多次提交

給所點選的區域設定  pointer-events: 

none;  該屬性會讓該區域的所有點選事件失效,請求結束之後 去掉該屬性即可;不過該屬性有相容性限制(大部分瀏覽器都支援了,幾乎可以忽略相容性),如下:

點選完之後,給點選區域增加乙個透明的遮罩層,再次點選的時候就是在遮罩層上,點選就無效,請求結束之後把遮罩層移除。

記住密碼,可以方便使用者再次登入的時候不用重新輸入:

cookie說明:

如果不設定過期時間,則表示這個cookie生命週期為瀏覽器會話期間,只要關閉瀏覽器視窗,cookie就消失了。這種生命期為瀏覽會話期的cookie被稱為會話cookie。會話cookie一般不儲存在硬碟上而是儲存在記憶體裡。

如果設定了過期時間,瀏覽器就會把cookie儲存到硬碟上,關閉後再次開啟瀏覽器,這些cookie依然有效直到超過設定的過期時間。

儲存在硬碟上的cookie可以在不同的瀏覽器程序間共享,比如兩個ie視窗。而對於儲存在記憶體的cookie,不同的瀏覽器有不同的處理方式。

<

input

type

="text"

autocomplete

="off"

/>

autocomplete 預設是 on, 開啟狀態, 設定成 off 就關閉了。
這是個大工程,而且網上的資料也很多,需要的就自行查詢吧。

VR體驗優化

vr體驗優化,防止眩暈 鏡頭的控制權盡量交給玩家 最重要的是鏡頭不能有加速度。只能馬上停下或者馬上移動 鏡頭向前移動的方式有兩種。第一種是blink的方式,鏡頭黑一下然後直接跳到之前鏡頭指向的目標,類似於人類眨眼 第二種是快速移動,移動速度控制在1.5m s最好,這樣符合人類大腦的思維方式 鏡頭不能...

前端學習 CSS體驗

由於本人也是初學html,以下都為本人學習過程中分點整理的知識點,希望共同進步,不足之處望指出批正。1.css體驗 分析 有提供標題 h1 還有乙個段落 p 標題是居中的,段落也是居中的。所以我們可以設定h標籤和p標籤的align屬性等於center來實現,標題和段落都有顏色,都是字型,都是大小,所...

錘子科技的前端原始碼 體驗靜態資源優化

早上進入辦公室,第一眼看到從我座位底下拉出了一根網線,這根網線經過過道,通到了另外乙個剛搬進來的乙個同事的電腦上。估計為了防止路過的人絆到,橫七豎八地貼上了膠帶,你能想象出那個畫面嗎?反正就是醜 亂 雜。我就吼 為什麼這麼搞,怎麼這麼醜?最後的最後,反正我給它恢復了優雅,graceful。我這是強迫...