頁面顯示不正確、Karton、加載緩慢會嚴(yán)重影響客戶體驗(yàn)，所以很多前端工作人員在設(shè)計(jì)項(xiàng)目時都要考慮優(yōu)化網(wǎng)頁。

今天就給大家分享一下當(dāng)Web端頁面出現(xiàn)加載緩慢、卡頓時你能采取的解決方法。

1、dangwebview加載有很多圖片的網(wǎng)頁時會很慢

你可以用webview的setBlockNetworkImage方法，在開始加載的時候使用

webview.getSettings().setBlockNetworkImage(true);

在onPageFinished方法中使用

v4_webview.getSettings().setBlockNetworkImage(false);

頁面goback()的的時候會調(diào)用onPageStarted方法，因此此方法中也需要添加

view.getSettings().setBlockNetworkImage(true);

圖片加載中

2、nginx加載顯示圖片慢

出現(xiàn)這個問題時，你要考慮你的文件是否超過該參數(shù)設(shè)置的大小。當(dāng)你的文件超過該參數(shù)設(shè)置的大小時，nginx會先將文件寫入臨時目錄(缺省為nginx安裝目下/proxy_temp目錄),或直接更改proxy_temp_file_write_size的值。

缺省nginx是以nobody身份啟動的，用ls -al 命令查看proxy_temp目錄，nobody是proxy_temp目錄的所有者，如果nobody競?cè)粵]權(quán)限，那就會出現(xiàn)加載慢的問題。你可以設(shè)置任何人都可以寫 proxy_temp目錄，重啟 nginx 即可解決。

3、圖片過大加載慢解決方法匯總

1)判斷用戶的設(shè)備(主要用在移動端)、網(wǎng)絡(luò)等，分別加載不同質(zhì)量的圖片(例如高端 iPhone wifi 情況下，就可以加載雙倍高清圖等，蜂窩網(wǎng)絡(luò)下面，就加載個單倍或者有損壓縮過的)?；蛘呦燃虞d低質(zhì)量的圖片，讓瀏覽者可以看到，然后再在后臺加載更高清的，等加載完了，瀏覽者還在觀看，就插入替換掉。或者先加載低質(zhì)量小圖片列表，然后讓用戶點(diǎn)擊，觸發(fā)類似 fancybox 的效果，彈窗出現(xiàn)大圖片?；蛘呃觅Y源預(yù)加載(三個 HTML5 不常見特性簡介)當(dāng)用戶還沒打開的時候，就開始加載。還有好多思路，后面想到再補(bǔ)充。

2)壓縮，預(yù)加載，緩存，圖床。

3)使用緩存、使用CDN加速、使用jq延遲加載圖片、加大服務(wù)器寬帶、檢查服務(wù)器硬盤讀取速度。

4)要盡可能的壓縮，看用戶的忍受程度。jpg 可以用很多方法壓縮，png 推薦使用 工具(不過正文圖片，顯然要選擇 jpg 格式的)。