页面出现长时间的白屏要怎样排查问题？

发呆的薇薇°

已于 2022-01-23 10:02:00 修改

阅读量2.8k

点赞数 2

分类专栏：前端面试题文章标签： css 前端 javascript

于 2022-01-23 10:00:47 首次发布

本文链接：https://blog.csdn.net/Shivy_/article/details/122647652

版权

13 篇文章 4 订阅

订阅专栏

排除了 网络问题 以后，如果还是白屏，那一般都是 css和js 加载造成的；css和js 会造成阻塞渲染。比如不正确的引入css和js ，就会导致它们的加载速度过长，从而导致白屏现象。
正确的引入方式是：

在 <head> 标签中引入css：因为在加载HTML 前不先渲染css 的话，整个页面会乱掉；
在 </body> 标签之前、body 标签中html 内容的后面 ，引入 js：因为浏览器加载script 标签时，处理内部代码的顺序都是从上到下 依次执行的，如果在 html 内容前就引入js 的话，那么就会导致，在所有的代码处理完毕之前，会阻塞其他资源的加载；会导致页面的其他内容都无法显示，因此如果不规范引入js的话，会对页面的其他内容带来影响。

补充说明：
script 标签里可以添加async或defer 属性，如果不添加 这个属性，浏览器就会立即加载并执行脚本；也就是在渲染script 标签之前，不等后续的文档加载前执行；他们的区别在于：

async：加载和渲染后续文档元素的过程将和 script.js的加载与执行并行进步（异步）
defer: 加载后续文档元素的过程中和script.js的加载与执行并行进步（异步）。但是script.js的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

defer 和async 在网络读取（下载） 方面是一样的，都是异步的 ；区别在于脚本下载完成之后什么时候开始执行。

关注