手机端白屏前端优化的方法,5 种以上
手机白屏主要是因为页面渲染阻塞导致的,导致的原因有:
1:css文件加载需要一定的时间,在加载的过程中页面是空白的
解决:将css代码前置或者内联html 即使用<style>
2.可能是等待异步加载数据再渲染页面导致白屏,数据量大加载慢,导致数据没请求到阻塞页面渲染
解决:在手机显示的首屏时同步渲染页面,后续的数据在页面滚动(滑屏时)时再采取异步请求渲染页面
3.手机页面的首屏JS的执行会阻塞页面的渲染
解决:尽量不要再首屏html代码中放置内联脚本。即:不要使用<script></script>
备注:首屏:即用户首先能看到的页面,其他页面可通过滑动滚动条显示。