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

问题描述

页面白屏，具体情况如下

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

渲染阻塞的原因

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

优化办法

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