浏览器如何显示网页,为什么它们看起来不一样?

浏览网络时,遇到的站点在一种设备之间会有所不同,这并不少见。也许某些功能根本无法使用。

通常,这不是网站的问题。这是您的浏览器。五个主要的桌面浏览器使用四个不同的“渲染引擎"来显示网页-用于Windows 10的新Microsoft Edge浏览器将引入第五个-并且每个浏览器的工作方式都不相同。

这意味着您的体验网络可能会根据您使用的浏览器以及该浏览器的版本而发生变化。

什么是渲染引擎?

网页不是单个实体一次下载并显示在屏幕上一个像素。相反,它实际上是一系列用各种类型的代码(HTML,CSS,JavaScript,PHP和其他代码)编写的指令,它们告诉浏览器做什么,在哪里以及如何做。

每种浏览器都使用渲染引擎(有时也称为布局引擎)来获取代码中包含的内容和样式信息,并以完全格式化的形式将其显示在屏幕上。

麻烦是,并不是每个浏览器都使用一个渲染引擎。虽然每种语言都是由详细的规范定义的,但是引擎只能提供对该规范的解释。

尤其是使用CSS(提供样式信息的代码)时,没有引擎会产生完全相同的信息结果。有时差异可能仅等于此处或那里的奇数未对齐像素,但有时它们可​​能会根本不同。

最流行的浏览器使用四种主要渲染引擎。

  • WebKit::OS X和iOS上的Safari以及移动设备上的许多其他浏览器(包括本地Android浏览器)使用的开源引擎;
  • 闪烁:基于WebKit的开源引擎,它为Chrome,Opera,Amazon Silk和Android的WebView(在应用程序中打开的浏览器)提供动力;
  • 壁虎: Firefox使用Mozilla基金会开发的开放源代码引擎;
  • Trident::由Microsoft开发并在Internet Explorer中使用的专有引擎。 Microsoft Edge浏览器将使用称为EdgeHTML的较新版本。
  • Web标准

    不同呈现引擎之间的差距远小于Internet Explorer作为主要浏览器时的差距。

    诸如acid3之类的测试显示了浏览器呈现页面的准确性,并且大多数现代浏览器的得分很高。然而,遵守标准是一项非常复杂的任务。

    HTML,CSS和其他规范非常庞大。添加了新元素;较旧,未使用或过时的将被删除。渲染引擎可能需要很长时间才能反映出这些更改。

    任何主流浏览器仍不支持HTML5和CSS规范中的某些元素,某些元素仅部分受支持,而其他元素仍受支持某些浏览器,但不是全部。

    通过html5test.com网站,您可以测试浏览器以及所运行的特定版本,以了解其对HTML5官方和实验功能的支持程度。在撰写本文时,Chrome在主要浏览器中排名最高,而Internet Explorer(v11)则排名最低。

    如果网络开发人员使用的是一种浏览器支持的功能,而另一种浏览器则不支持,不支持的浏览器必须要么选择接近的等效版本,要么完全忽略该功能(例如,透明框可以呈现为非透明)。

    这使得呈现网页的工作比复杂得多它出现。更新频率更高的浏览器与不更新频率更高的浏览器相比,可能更符合标准,与常规的自动Chrome更新相比,与稀疏的IE更新相比,这更为突出。

  • 引擎中的错误:渲染引擎是软件,并且所有软件都包含错误。尽管可以迅速发现并消除严重的错误,但无法保证网页上的特定代码组合在呈现时不会产生意外的结果
  • 网页中的错误:浏览器内置了一定级别的容错能力,但这在一个引擎与另一个引擎之间会有所不同。网页中代码错误的网页仍可能在一个浏览器中完美呈现,但在另一个浏览器中却被严重破坏
  • 字体:字体的显示方式不是由浏览器处理的,而是通过操作系统。 Windows和OS X呈现字体的方式不同,因此即使在相同的浏览器中使用相同的字体在不同的平台上查看时也会看起来不同
  • 旧版:浏览器通常会采用新功能,尤其是对于CSS,然后才成为正式规范的一部分。如果采用时该功能的实现发生了变化,则浏览器开发人员需要决定是采用该变化并冒着破坏与为旧版本设计的数千个网站兼容的风险,还是完全忽略新版本
  • 专有功能:某些浏览器可能使用专有技术,而其他地方没有。这在Internet Explorer中的Microsoft ActiveX框架中最为明显,尽管该公司不会在新的Microsoft Edge浏览器中使用它。
  • 总结

    涉及到如此多的问题,浏览器处理网页的方式持续存在差异也就不足为奇了。

    这种情况正在改善,但不可能完全解决。如果每个人都运行他们所选择的浏览器的最新版本,这将有所帮助,但是拥有6年历史的Internet Explorer 8仍然保持4.5%的市场份额,这还有很长的路要走。

    哪种浏览器使用,并且保持最新状态吗?您是否找到了无法在您选择的浏览器中运行的网站?在评论中让我们知道。

    图片来源:通过Jeremy Keith的设备,通过Duncan Hill不支持的浏览器

    标签: Google Chrome Internet Explorer Safari浏览器 Web开发