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

來源:互聯網
上載者:User

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

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

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

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

 

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

解決:在手機顯示的首屏時同步渲染頁面,後續的資料在頁面滾動(滑屏時)時再採取非同步請求渲染頁面

 

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

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

 

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

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

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。