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