学习笔记网页出现白屏可能的原因与优化方法

Posted 曾胖神父

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习笔记网页出现白屏可能的原因与优化方法相关的知识,希望对你有一定的参考价值。

问题描述

页面白屏,具体情况如下

页面白屏的主要原因是页面渲染被阻塞

渲染阻塞的原因

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

优化办法

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

以上是关于学习笔记网页出现白屏可能的原因与优化方法的主要内容,如果未能解决你的问题,请参考以下文章

网页游戏看不到动画,显示白屏??

电脑卡住了白屏怎么办

电脑浏览器打开网页总是显示白屏要怎么解决

Android 应用启动时优化白屏问题

Android 应用启动时优化白屏问题

4月6日学习笔记——如何提高网页加载速度(前端面试考点)