当浏览器呈现没有格式的页面时,幕后发生了什么?

当浏览器呈现没有格式的页面时,幕后发生了什么?

例如,Facebook 有时会加载几乎没有任何图形和页面左侧一堆默认的蓝色链接。

有时似乎是网络连接出了问题,有时又好像只是网站出了问题。我很想听听对这个问题的深入解释。

答案1

通常,这意味着主 HTML 页面包含指向 CSS 样式表的链接,但该样式表(无论出于何种原因)无法加载。由于样式表不可用,浏览器将使用默认样式呈现页面(因此会丢失 CSS 指定的定位信息、背景图形、链接颜色等)。特别是,许多现代网站都使用 CSS 来在<div>屏幕上定位其内容,因此如果没有 CSS,导航链接将显示在其默认位置(左对齐,沿页面向下运行)。

可能的原因:

  • 网络连接不稳定(例如主页加载后下载资源超时)
  • 互联网连接丢失,主 HTML 页面仍保留在缓存中
  • 您在 HTML 页面加载之后、资源加载之前取消了页面加载
  • 服务器返回空响应(可能是由于本地网络连接不良、代理不良或服务器暂时故障)。

    一种特别常见的情况是 HTML 页面托管在一个网站或域上,而大多数链接资源位于不同的域上。例如,超级用户 ( superuser.com) 指的是 上的样式表和 UI 图像(如投票箭头)cdn.sstatic.net、 上的用户头像www.gravatar.com以及 上的内容图像stack.imgur.com。如果sstatic.net暂时关闭而superuser.com保持开启,您将获得类似于您描述的效果。

您提到该页面“几乎不显示任何图形”。网站可能使用 CSS 将大多数图形指定为背景图像。更可能的是,页面链接的大多数资源(包括样式表和图像)都无法加载。这会导致您描述的两个问题(格式丢失和图像丢失)。

加载的图像要么不受服务器或代理故障的影响(图像通常托管在与主网页不同的服务器或域上),要么已经在浏览器缓存中(因此浏览器不会尝试获取它们,从而避免错误)。

相关内容