手机端白屏前端优化的方法，5 种以上

标签：导致   渲染   优化   数据量   nbsp   执行   前端   异步   用户   

手机白屏主要是因为页面渲染阻塞导致的，导致的原因有：

1：css文件加载需要一定的时间，在加载的过程中页面是空白的

解决：将css代码前置或者内联html 即使用<style>

2.可能是等待异步加载数据再渲染页面导致白屏,数据量大加载慢，导致数据没请求到阻塞页面渲染

解决：在手机显示的首屏时同步渲染页面，后续的数据在页面滚动（滑屏时）时再采取异步请求渲染页面

3.手机页面的首屏JS的执行会阻塞页面的渲染

解决：尽量不要再首屏html代码中放置内联脚本。即：不要使用<script></script>

备注：首屏：即用户首先能看到的页面，其他页面可通过滑动滚动条显示。

手机端白屏前端优化的方法，5 种以上

标签：导致   渲染   优化   数据量   nbsp   执行   前端   异步   用户   

原文地址：https://www.cnblogs.com/8080zh/p/9224434.html