一、浏览器组成的介绍

水煮白菜王

已于 2024-09-19 17:42:52 修改

阅读量1.4k

点赞数 35

分类专栏：前端浏览器原理 JavaScript 文章标签： javascript edge浏览器 chrome 前端

于 2024-06-20 20:40:20 首次发布

本文链接：https://blog.csdn.net/weixin_45511682/article/details/139841799

版权

前端同时被 3 个专栏收录

38 篇文章

订阅专栏

JavaScript

27 篇文章

订阅专栏

浏览器原理

8 篇文章

订阅专栏

🤖 作者简介：水煮白菜王，一位资深前端劝退师 👻
👀 文章专栏：浏览器原理专栏，记录一下平时在博客写作中，总结出的一些开发技巧✍。
感谢支持💕💕💕

关联文章：
二、浏览器渲染原理
 三、浏览器安全
 四、浏览器进程与线程
 五、浏览器存储
 六、浏览器缓存
 七、浏览器垃圾回收机制
 八、浏览器同源策略
 九、浏览器事件机制

浏览器组成

文章目录

浏览器组成

浏览器作为互联网时代的核心应用，扮演着连接用户与 Web世界的桥梁角色。它不仅负责从服务器获取资源，还负责解码和展示这些资源，包括但不限于 HTML、CSS、JavaScript文件以及图像、视频等多媒体内容。本文将深入解析浏览器的结构、内核机制及其重要组成部分，并对比不同内核的特点，以增进对这一基础软件的理解。

1.对浏览器的理解

浏览器的核心职责是将Web内容生动地展现给用户，这一过程始于向服务器请求由用户通过URI指定的各种资源，这些资源多以HTML形式存在，同时也涵盖PDF文档、图像文件以及其他多媒体类型。URI作为网络上的“地址簿”，指引浏览器精准定位所需信息。接下来，让我们细化此流程的关键环节：

发起请求:
用户在浏览器地址栏键入URI后，一系列幕后操作随即启动。浏览器解析URI，通过HTTP(S)协议向目标服务器发出请求，此过程中涵盖域名解析、建立安全连接等步骤。
资源传输与接收:
服务器接收到请求后，查找相应资源并将其封装在响应包内回传。这包括但不限于HTML页面、图片、视频或PDF文档。浏览器接收到数据后，依据内容类型采取不同的处理策略。
内容解析与构建:
对于HTML内容，浏览器利用解析引擎（如Blink、Gecko）构建DOM树，映射页面结构；同时处理CSS，形成CSSOM树以决定元素样式。两树结合完成布局计算，随后进行视觉渲染，将抽象代码转化为用户可见的界面。
JavaScript执行与交互:
页面中的JavaScript代码在合适时机被执行，它能够动态修改DOM与CSSOM，实现页面交互、数据获取及界面更新，有时还会触发重新渲染，确保动态内容的即时反馈。
多媒体与富媒体处理:
遇到图片、视频等非文本资源，浏览器利用专门的解码器展示这些内容，对于PDF等文档，则可能内置阅读器直接预览或提示下载，确保丰富的网络体验。

标准与兼容性的挑战

W3C（World Wide Web Consortium）作为国际性的Web标准组织，负责制定如HTML、CSS等关键Web技术的标准，旨在确保不同平台和设备间的一致性和互操作性。尽管如此，各大浏览器厂商在追求创新与差异化的过程中，往往会引入自家特性的实现，这虽丰富了Web功能，却也导致了跨浏览器的兼容性难题。开发者必须细心测试和调整，以确保他们的Web应用能在各类浏览器上平滑运行。

浏览器的结构剖析

浏览器的架构大致可划分为用户界面（Shell）和渲染引擎（内核）两大板块：

Shell（用户界面层）：这是用户直接互动的部分，包括地址栏、导航按钮、书签、菜单等。Shell设计专注于提升用户体验，通过调用内核提供的功能接口，使用户能够方便地浏览、搜索和管理网络内容及设置。
内核（渲染引擎）：这是浏览器的“大脑”，负责处理所有后台工作，包括但不限于请求处理、资源下载、HTML/CSS解析、JavaScript执行、页面布局与绘制等。知名的内核有WebKit（曾用于Safari和早期Chrome）、Blink（当前Chrome和Opera使用的分支）、Gecko（Firefox使用）等。内核的高效性和对Web标准的支持程度直接影响着浏览器的性能和兼容性。

随着Mozilla将Gecko引擎独立分离，业界逐渐形成了对浏览器内外部结构清晰的区分认知，促进了浏览器技术的模块化和标准化进程，也为第三方开发者提供了更多自定义和创新的空间。

2.对浏览器内核的理解

浏览器内核是浏览器中负责解析和显示网页内容的核心组件，它主要包括渲染引擎和JavaScript引擎两个关键部分。

渲染引擎：负责解析HTML、XML文档以及处理CSS样式，将这些内容转换为用户可以看见的网页布局和样式。它通过构建DOM（文档对象模型）来表示文档结构，并利用CSSOM（CSS对象模型）来计算样式，之后进行布局（决定每个元素的精确位置和大小）和绘制成用户界面。正如您提到的，对于非HTML内容，如PDF，渲染引擎可能需要外部插件或扩展能力来处理和显示。
JavaScript引擎：专注于解释和执行JavaScript代码，实现网页的交互性和动态更新。早期，JavaScript引擎与渲染引擎紧密集成，但随着技术演进，特别是对高性能和复杂Web应用需求的增长，JavaScript引擎变得越来越独立。现在，它们能够更高效地执行脚本，支持复杂的异步编程模型，且在执行过程中尽量减少对页面渲染的影响。

3. 常见的浏览器内核比较

浏览器内核，作为浏览器的核心组件，对网页内容的解析、渲染起着至关重要的作用。以下是几种典型浏览器内核的详细对比，经过优化描述以提供更清晰的理解：

内核	应用	特点
Trident	主要用于Microsoft Internet Explorer浏览器	广泛流传，早期网页标准开发围绕其设计；与W3C标准契合度不足；安全与性能问题频出
Gecko	Firefox和Flock等浏览器的核心	强大功能集，支持复杂网页特效和广泛扩展；资源消耗较高，特别是内存使用；适合追求高度定制化的用户
Presto	曾是Opera浏览器的核心	卓越的执行速度，尤其在JavaScript处理上；牺牲一定的网页兼容性，某些网页可能显示不完全
WebKit	Safari浏览器的核心引擎，早期Chrome和许多移动浏览器采用	快速页面渲染，高效基因源自KHTML；对非标准代码容忍度低，可能影响不规范网页展示；平衡速度与兼容性，提供高质量浏览体验
Blink	起源：WebKit的分支，应用于Chromium项目（Chrome浏览器等）	通过精简WebKit代码提高性能和灵活性；快速迭代，提升网页标准兼容性、JavaScript效率及用户体验；现为最广泛采用的内核之一

Trident（Internet Explorer内核）

应用：主要用于Microsoft Internet Explorer浏览器。
特点：曾因IE的市场主导地位而广为流传，许多早期网页围绕其标准开发。然而，Trident与W3C标准的契合度不足，且长时间未获显著更新，导致与现代Web标准脱节。此外，安全漏洞和性能问题频出，促使用户转向其他更安全、高效的浏览器。

Gecko（Firefox内核）

应用：Firefox和Flock等浏览器的核心。
优势：提供强大且丰富的功能集，支持复杂的网页特效和广泛的扩展接口。尽管这带来了较高的资源消耗，尤其是内存使用，但对于追求高度定制和扩展性的用户而言，Gecko是一个强有力的选择。

Presto（原Opera内核）

应用：曾是Opera浏览器的核心。
亮点：以其卓越的执行速度著称，尤其是在处理JavaScript脚本方面，速度远超竞争对手。不过，这种速度优化是以牺牲一定的网页兼容性为代价，某些网页可能无法完全正确显示。

WebKit

应用：Safari浏览器的核心引擎，也应用于早期的Chrome和许多移动浏览器。
优势：提供快速的页面渲染速度，继承自KHTML的高效基因。虽然对非标准代码的容忍度较低，可能导致某些不规范网页无法完美展示，但其速度和兼容性平衡得当，是高质量网页浏览体验的基石。

Blink（Chromium内核）

起源与应用：源于WebKit，是Google为Chromium项目（进而影响Chrome浏览器）开发的独立分支。Opera后来也放弃Presto，转投Blink阵营。
特色：Blink通过精简WebKit的代码库，提高了性能和灵活性。它持续快速迭代，致力于提升网页标准的兼容性、JavaScript执行效率及整体用户体验，成为当前最广泛采用的浏览器内核之一。

4. 常见浏览器所用内核

浏览器	内核	特点及说明
IE浏览器	Trident	微软早期主推，随Edge推出及对旧IE支持终止而逐渐淘汰。
Chrome浏览器	Blink	基于WebKit分叉而来，强调性能与标准兼容，广泛应用于Chromium项目。
Firefox浏览器	Gecko	不断更新支持最新标准，注重性能与兼容性。
Safari浏览器	WebKit	继续使用WebKit，与Chrome分道扬镳后独立发展。
Opera浏览器	Blink	从Presto转向WebKit，最终与Google合作采用Blink，体现行业整合趋势。
360浏览器、猎豹浏览器	Trident + Blink	双内核策略，确保兼容性和高速渲染。
搜狗、遨游、QQ浏览器	Trident（兼容）+ Webkit/Blink（高速）	双内核策略，兼顾旧网页兼容与现代网页性能。
百度浏览器、世界之窗	主要Trident，可能更新至双核	早期依赖Trident，后续可能更新内核或采用双核策略。
2345浏览器	IE + Chrome内核	针对中国市场优化，采用双内核以提升兼容性和体验。
UC浏览器	U3（基于Webkit定制）	移动端流行，深度定制Webkit，可能集成Trident技术，优化移动性能与节能。

IE浏览器：确实使用Trident内核，但需要注意的是，随着Microsoft
Edge浏览器的推出及对旧版IE的支持终止，Trident已不再是微软主推的技术。
Chrome浏览器：最初基于WebKit，但在2013年宣布分叉WebKit，与Opera合作开发了Blink内核。现在Chrome和其他基于Chromium（Chrome开源项目）的浏览器均使用Blink内核。
Firefox浏览器：使用Gecko内核，该内核不断更新以支持最新的Web标准，并且注重性能与兼容性。
Safari浏览器：继续使用WebKit内核，尽管与Chrome分道扬镳后，WebKit在Safari和Chrome中的发展路径有所不同。
Opera浏览器：在2013年前使用Presto内核，之后转向WebKit，最终与Google合作采用Blink内核，这一转变体现了浏览器内核领域的合并趋势。
360浏览器、猎豹浏览器：采用双内核策略，融合Trident（兼容模式）和Blink（高速模式），以确保对旧网站的兼容性和新网页的高速渲染。
搜狗、遨游、QQ浏览器：这类浏览器大多采用双内核策略，Trident保证对老旧网页的支持，而Webkit（或Blink）则用于高速渲染现代网页。
百度浏览器、世界之窗：早期版本主要依赖于Trident内核，但随着市场和技术的演变，这些浏览器可能也进行了内核更新或采用双内核策略以提高竞争力。
2345浏览器：经历变迁，早期可能基于IE内核，但为了提升用户体验和兼容性，也转向了双内核模式，包括IE和Chrome内核。
UC浏览器：UC声称其U3内核是自主研发，实质上是基于Webkit进行深度定制，并可能集成了部分Trident技术以保证在中国市场的兼容性。UC浏览器在移动端尤其受欢迎，其内核优化也侧重于移动设备的性能和省电特性。