手機端白屏前端最佳化的方法，5 種以上

標籤：導致   渲染   最佳化   資料量   nbsp   執行   前端   非同步   使用者   

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

1：css檔案載入需要一定的時間，在載入的過程中頁面是空白的

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

 

2.可能是等待非同步載入資料再渲染頁面導致白屏,資料量大載入慢，導致資料沒請求到阻塞頁面渲染

解決：在手機顯示的首屏時同步渲染頁面，後續的資料在頁面滾動（滑屏時）時再採取非同步請求渲染頁面

 

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

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

 

備忘：首屏：即使用者首先能看到的頁面，其他頁面可通過滑動捲軸顯示。

手機端白屏前端最佳化的方法，5 種以上