很多无线端都使用前端模板进行數据渲染在糟糕的网速情况下,一进去前端解决页面加载白屏看到的不是白屏就是 loading,这就是白屏问题
此问题发生的原因基本可以归結为网速、静态资源。
1、css文件加载需要一些时间在加载的过程中前端解决页面加载白屏是空白的。
解决:可以考虑将css代码前置和内联
2、首屏无实际的数据内容,等待异步加载数据再渲染前端解决页面加载白屏导致白屏
解决:在首屏直接同步渲染html,后续的滚屏等再采用異步请求数据和渲染html
3、首屏内联js的执行会阻塞前端解决页面加载白屏的渲染。
解决:尽量不在首屏html代码中放置内联脚本
还有一些其他嘚解决办法:
根本原因是客户端渲染的无力,因此最简单的方法是在服务器端使用模板引擎渲染所有前端解决页面加载白屏。同时
1、减尐文件加载体积如html压缩,js压缩
2、加快js执行速度 比如常见的无限滚动的前端解决页面加载白屏可以使用js先渲染一个屏幕范围内的东西
3、提供一些友好的交互,比如提供一些假的滚动条
4、使用本地存储处理静态文件