前端工程師如何為用戶提供最快最優(yōu)質(zhì)的訪問體驗(yàn)？

影響用戶體驗(yàn)的點(diǎn)一般包括以下幾個(gè)：

網(wǎng)站本身內(nèi)容的價(jià)值：這是核心，用戶有需求才有訪問；

UI對(duì)用戶的吸引度：第一印象很重要；

交互對(duì)用戶的友好度：操作的流程度？使用起來是否簡單？

網(wǎng)站的打開速度：打不開我怎么看？

從前端工程師的角度，我們能做的主要在第3和第四點(diǎn)上。

與用戶的交互

關(guān)于交互這塊，我并沒有太過深入的研究，但如果把我自己看做一個(gè)用戶，我覺得可以從以下幾個(gè)方面嘗試去做優(yōu)化：

簡單化：交互流程盡可能簡單，能1步搞定就不要2步；

狀態(tài)可見：清楚明確的狀態(tài)可以讓用戶操作前，更好地預(yù)知結(jié)果，以便省去多余的反復(fù)試錯(cuò)過程，比如提交或加載數(shù)據(jù)的loading進(jìn)度條。

尊重用戶習(xí)慣：比如用戶習(xí)慣了某個(gè)圖標(biāo)代表設(shè)置的意思，這時(shí)候就不要為了追求設(shè)計(jì)的新鮮度貿(mào)然去更換

重點(diǎn)突出：整個(gè)頁面不能千篇一律，不然用戶找不到重點(diǎn)還有可能產(chǎn)生視覺疲勞。

指引：當(dāng)發(fā)布新功能或流程中出現(xiàn)一些異常的時(shí)候，需要有明確的指引告訴用戶下一步該做什么。

訪問速度

加載性能我們一般從幾個(gè)維度去衡量

白屏?xí)r間：在這個(gè)時(shí)間段，整個(gè)頁面就是一張白板，什么也看不到。

首屏?xí)r間：在這個(gè)階段，在訪問設(shè)備的可視窗口區(qū)域已經(jīng)渲染完畢，用戶能看到部分內(nèi)容。

可交互時(shí)間：用戶可以執(zhí)行點(diǎn)擊、提交等與頁面交互的操作。

針對(duì)性能這塊我們常見優(yōu)化方案有：

1、加載優(yōu)化：

減少HTTP請(qǐng)求CDN緩存資源壓縮合并加載不阻塞按需加載、預(yù)加載、非首屏異步加載無cookie域名http2

2、js和css執(zhí)行優(yōu)化

減少重繪和回流盡量使用事件代理，避免批量綁定事件使用touchstart、touchend代替click避免CSS表達(dá)式盡量避免使用DataURL

3、渲染優(yōu)化

盡量使用CSS3動(dòng)畫使用requestAnimationFrame動(dòng)畫代替setTimeout使用canvas或WebGLGPU加速函數(shù)節(jié)流（throttle）和防抖（debounce）: 針對(duì)高頻事件，如滾動(dòng)條

以上就是我的個(gè)人見解了，如果覺得有幫助的話，不妨加個(gè)關(guān)注點(diǎn)個(gè)贊哦！也歡迎對(duì)前端有興趣的同學(xué)一起交流。