问题描述

页面白屏,具体情况如下
在这里插入图片描述
页面白屏的主要原因是页面渲染被阻塞

渲染阻塞的原因

可能是因为CSS加载出现阻塞,然后又因为CSS在headb标签内,导致只有加载完CSS,才能显示内容,然而CSS出于某种原因加载出现阻塞,导致后面的内容无法渲染,从而使整个页面变为白屏。
也有可能是JS加载出现阻塞,从而导致页面无法解析。最后导致整个页面变为白屏。

优化办法

优化的最佳办法,那肯定直接优化CSS,JS体积,从而从根本上解决加载缓慢,加载阻塞的问题
除此之外,讨巧的办法就是将大体积的CSS和JS放入到body最尾部,然后将少量用于定位等基本样式的CSS放入头部,保证页面会先将页面基本样式和元素加载出来,然后加载JS的Script标签还可以加入async,defer属性,使JS的加载变为异步加载,这样JS的加载就不会阻塞页面解析了

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐