core-浏览器内核

1- 认识 Markdown 与 Obsidian

1.1- Markdown 是什么？

  • Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者 HTML）文档。
  • 类似于 HTML，但语法更简洁，更易于学习和使用。

1.2- Obsidian 简介

  • Obsidian 是一款所见即所得的 Markdown 编辑器，它提供了一种流畅的写作体验，让你在编写 Markdown 的同时就能看到渲染后的效果。
    • 非常适合用来编写笔记、文档、博客等。
    • 你可以从 Obsidian 官网下载并安装

2- HTML、CSS 与浏览器

2.1- HTML 和 CSS 的作用

  • HTML (HyperText Markup Language): 超文本标记语言，负责网页的结构和内容。
  • CSS (Cascading Style Sheets): 层叠样式表，负责网页的样式和美化。
  • 简单来说，HTML 搭建了网页的骨架，CSS 负责给这个骨架穿上漂亮的衣服。

2.2- 浏览器的工作原理

2.2.1- 浏览器如何渲染网页？

  • 当我们在浏览器地址栏输入一个网址并回车后，浏览器会向服务器请求这个网页的 HTML、CSS 和 JavaScript 文件。
  • 浏览器解析 HTML 文件，构建 DOM (Document Object Model) 树。
  • 浏览器解析 CSS 文件，构建 CSSOM (CSS Object Model) 树。
  • 浏览器将 DOM 树和 CSSOM 树结合起来，生成渲染树 (Render Tree)。
  • 浏览器根据渲染树进行布局 (Layout) 和绘制 (Paint)，最终将页面显示在屏幕上。

2.2.2- 网页源代码

  • 在任何网页上，右键点击并选择 " 显示网页源代码 " 或 " 查看页面源代码 "，你就可以看到这个网页的 HTML、CSS 和 JavaScript 代码。
    • 例如，百度首页的源代码包含了大量的 HTML 标签、CSS 样式和 JavaScript 脚本。
  • 学习 HTML 和 CSS，可以帮助你理解网页是如何构建的。

3- 浏览器内核

3.1- 什么是浏览器内核？

  • 浏览器内核是浏览器的核心组成部分，负责解析 HTML、CSS，执行 JavaScript，并将网页内容渲染到屏幕上。

3.1.1- 内核可以分为几个主要部分

  • 渲染引擎 (Rendering Engine)：负责解析 HTML 和 CSS，并渲染页面。
  • JavaScript 引擎 (JavaScript Engine)：负责执行 JavaScript 代码。
  • 网络引擎 (Networking Engine)：负责处理网络请求。

3.2- 为什么浏览器内核很重要？

  • 不同的浏览器内核对 HTML、CSS 和 JavaScript 的解析和渲染方式可能存在差异，这会导致同一个网页在不同浏览器中显示效果可能不同。
  • 浏览器内核的性能直接影响网页的加载速度和渲染速度。

3.3- 主流浏览器内核

  • Blink (Google Chrome, Microsoft Edge, Opera)
    • Blink 是由 Google 主导开发的，基于 WebKit 开发。
    • 目前市场占有率最高的内核。
  • WebKit (Apple Safari)
    • WebKit 是由 Apple 开发的，最初用于 Safari 浏览器。
    • Blink 也是基于 WebKit 的一个分支。
  • Gecko (Mozilla Firefox)
    • Gecko 是由 Mozilla 开发的，用于 Firefox 浏览器。
  • Trident (Internet Explorer)
    • Trident 是由 Microsoft 开发的，用于 Internet Explorer 浏览器。
    • 目前已逐渐被 EdgeHTML 和 Blink 取代。

3.4- 国内浏览器的内核

  • 许多国内浏览器，如 360、QQ、搜狗 等，通常使用 Chromium (Blink 内核的开源版本) 或 WebKit 作为其内核，并在此基础上进行定制和开发。
  • 这些浏览器主要是在 Chromium 或 WebKit 的基础上添加了一些自己的功能和界面，本质上并没有自己的独立内核。

4- 总结

  • Markdown 是一种简洁高效的标记语言，Obsidian 是一款优秀的 Markdown 编辑器。
  • HTML 负责网页结构，CSS 负责网页样式，它们共同构成了网页的基础。
  • 浏览器通过内核来解析 HTML、CSS，执行 JavaScript，并将网页渲染到屏幕上。
  • 了解主流浏览器内核，有助于我们更好地理解网页的渲染机制和兼容性问题。

5- 学习建议

  • 多练习 Markdown 语法：使用 Obsidian 编写一些笔记或文档，熟悉 Markdown 的常用语法。
  • 学习 HTML 和 CSS 基础：可以通过 W3Schools、MDN 等网站学习 HTML 和 CSS 的基础知识。
  • 查看网页源代码：多看看不同网站的源代码，尝试理解其中的 HTML 结构和 CSS 样式。
  • 使用开发者工具：学会使用浏览器的开发者工具 (通常按 F12 键打开)，它可以帮助你查看网页的 HTML 结构、CSS 样式、网络请求等信息，是学习和调试网页的重要工具。