手機端白屏前端優化的方法,5 種以上


手機白屏主要是因為頁面渲染阻塞導致的,導致的原因有:

1:css文件加載需要一定的時間,在加載的過程中頁面是空白的

解決:將css代碼前置或者內聯html 即使用<style>

 

2.可能是等待異步加載數據再渲染頁面導致白屏,數據量大加載慢,導致數據沒請求到阻塞頁面渲染

解決:在手機顯示的首屏時同步渲染頁面,后續的數據在頁面滾動(滑屏時)時再采取異步請求渲染頁面

 

3.手機頁面的首屏JS的執行會阻塞頁面的渲染

解決:盡量不要再首屏html代碼中放置內聯腳本。即:不要使用<script></script>

 

備注:首屏:即用戶首先能看到的頁面,其他頁面可通過滑動滾動條顯示。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM