admin 管理员组

文章数量: 1184232

白屏解决与优化方案

当前很多无线页面都使用前端模板进行数据渲染，那么在糟糕的网速情况下，一进去页面，看到的不是白屏就是 loading，这成为白屏问题。

此问题发生的原因基本可以归结为网速跟静态资源

1、css文件加载需要一些时间，在加载的过程中页面是空白的。 解决：可以考虑将css代码前置和内联。

2、首屏无实际的数据内容，等待异步加载数据再渲染页面导致白屏。 解决：在首屏直接同步渲染html，后续的滚屏等再采用异步请求数据和渲染html。

3、首屏内联js的执行会阻塞页面的渲染。 解决：尽量不在首屏html代码中放置内联脚本。（来自翔歌）

解决方案

根本原因是客户端渲染的无力，因此最简单的方法是在服务器端，使用模板引擎渲染所有页面。同时

1减少文件加载体积，如html压缩，js压缩

2加快js执行速度 比如常见的无限滚动的页面，可以使用js先渲染一个屏幕范围内的东西

3提供一些友好的交互，比如提供一些假的滚动条

4使用本地存储处理静态文件。

本文标签： 方案 HTML

版权声明：本文标题：html白屏解决与优化方案 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1754943801a3052956.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。