C# 如何开始构建 Web 浏览器？

How to get started building a web browser?

提问by Galilyou

I decided to put some effort in building a web browser from scratch. What are the common functions, architectures, and features of modern web browsersthat I should know before getting started?

我决定从头开始构建一个网络浏览器。在开始之前，我应该了解现代 Web 浏览器的常见功能、架构和特性是什么？

Any recommendations are highly appreciated!

任何建议都非常感谢！

采纳答案by cletus

Well break it down into pieces. What is a Web browser? What does it do? It:

把它分解成碎片。什么是网络浏览器？它有什么作用？它：

• Fetches external content.So you need a HTTP library or (not recommended) write this yourself. There's a lot of complexity/subtlety to the HTTP protocol eg handling of expires headers, different versions (although it's mostly 1.1 these days), etc;
• Handles different content types.Theres a Windos registry for this kind of thing that you can piggyback. I'm talking interpreting content based on MIME type here;
• Parses HTML and XML: to create a DOM (Document Object Model);
• Parses and applies CSS: this entails understanding all the properties, all the units of measure and all the ways values can be specified (eg "border: 1px solid black" vs the separate border-width, etc properties);
• Implements the W3C visual model(and this is the real kicker); and
• Has a Javascript engine.

• 获取外部内容。所以你需要一个 HTTP 库或者（不推荐）自己写这个。HTTP 协议有很多复杂性/微妙之处，例如处理过期标头、不同版本（尽管现在主要是 1.1）等；
• 处理不同的内容类型。有一个 Windos 注册表可以用于此类事情，您可以使用它。我在这里谈论的是基于 MIME 类型的解释内容；
• 解析 HTML 和 XML：创建 DOM（文档对象模型）；
• 解析和应用 CSS：这需要了解所有属性、所有度量单位以及可以指定值的所有方式（例如“边框：1px 纯黑色”与单独的边框宽度等属性）；
• 实现 W3C 视觉模型（这才是真正的关键）；和
• 有一个 Javascript 引擎。

And that's basically a Web browser in a nutshell. Now some of these tasks are incredibly complex. Even the easy sounding ones can be hard. Take fetching external content. You need to deal with use cases like:

简而言之，这基本上就是一个Web 浏览器。现在，其中一些任务非常复杂。即使是简单的声音也可能很难。以获取外部内容为例。您需要处理以下用例：

• How many concurrent connections to use?
• Error reporting to the user;
• Proxies;
• User options;
• etc.

• 要使用多少个并发连接？
• 向用户报告错误；
• 代理；
• 用户选项；
• 等等。

The reason I and others are colletively raising our eyebrows is the rendering engine is hard (and, as someone noted, man years have gone into their development). The major rendering engines around are:

我和其他人集体挑起眉毛的原因是渲染引擎很难（而且，正如有人指出的那样，他们的开发已经过了很多年）。主要的渲染引擎是：

• Trident:developed by Microsoft for Internet Explorer;
• Gecko:used in Firefox;
• Webkit:used in Safari and Chrome 0-27;
• KHTML:used in the KDE desktop environment. Webkit forked from KHTML some years ago;
• Elektra:used in Opera 4-6;
• Presto:used in Opera 7-12;
• Blink:used in Chrome 28+, Opera 15+, webkit fork;

• 三叉戟：由微软为 Internet Explorer 开发；
• Gecko：在 Firefox 中使用；
• Webkit：用于 Safari 和 Chrome 0-27；
• KHTML：在 KDE 桌面环境中使用。Webkit 几年前从 KHTML 分叉出来；
• Elektra：用于 Opera 4-6；
• Presto：用于 Opera 7-12；
• Blink：用于Chrome 28+、Opera 15+、webkit fork；

The top three have to be considered the major rendering engines used today.

必须考虑前三名是当今使用的主要渲染引擎。

Javascript engines are also hard. There are several of these that tend to be tied to the particular rendering engine:

Javascript 引擎也很难。其中有几个往往与特定的渲染引擎相关联：

• SpiderMonkey:used in Gecko/Firefox;
• TraceMonkey:will replace SpiderMonkey in Firefox 3.1 and introduces JIT (just-in-time) compilation;
• KJS:used by Konqueror, tied to KHTML;
• JScript:the Javascript engine of Trident, used in Internet Explorer;
• JavascriptCore:used in Webkit by the Safari browser;
• SquirrelFish:will be used in Webkit and adds JIT like TraceMonkey;
• V8:Google's Javascript engine used in Chrome and Opera;
• Opera (12.X and less) also used its own.

• SpiderMonkey：用于 Gecko/Firefox；
• TraceMonkey：将在 Firefox 3.1 中取代 SpiderMonkey 并引入 JIT（just-in-time）编译；
• KJS：由 Konqueror 使用，与 KHTML 绑定；
• JScript：Trident 的 Javascript 引擎，用于 Internet Explorer；
• JavascriptCore：Safari浏览器在Webkit中使用；
• SquirrelFish：将在Webkit中使用，并像TraceMonkey一样添加JIT；
• V8：谷歌在Chrome和Opera中使用的Javascript引擎；
• Opera（12.X 及以下）也使用了自己的。

And of course there's all the user interface stuff: navigation between pages, page history, clearing temporary files, typing in a URL, autocompleting URLs and so on.

当然还有所有用户界面的东西：页面之间的导航、页面历史、清除临时文件、输入 URL、自动完成 URL 等等。

That is a lotof work.

这是很多工作。

回答by stesch

You could start with well-formed and valid XHTML, which should be easier than the tag soup your browser will encounter in real "life".

您可以从格式良好且有效的 XHTML 开始，这应该比您的浏览器在现实“生活”中遇到的标签汤更容易。

Then you must find a way to bend the real HTML from the web to your needs.

然后，您必须找到一种方法将 Web 中的真实 HTML 转换为您的需要。

But don't kid yourself: A browser isn't a small project.

但不要自欺欺人：浏览器不是一个小项目。

回答by Kris

You mean as in writing your own rendering engine?

你的意思是写你自己的渲染引擎？

I can only say good luck. Many man years have gone into the current generation of the various browsers, If you want to do better than either of them you will need some serious skills. If you have to ask where to start, you probably have more than a few years of study to go before it would make any sense to attempt such a task.

我只能说祝你好运。当前一代的各种浏览器已经有很多年了，如果你想做得比它们中的任何一个都好，你需要一些认真的技能。如果你不得不问从哪里开始，你可能需要几年以上的学习才能尝试这样的任务才有意义。

That said, here are some (obvious) pointers:

也就是说，这里有一些（明显的）指示：

1. write lots of code that does small things, like solve all the projecteuler.netproblems
2. learn everything you can about your toolkit and its community standards
3. write lots more code
4. get a real solid grasp of finite state machines
5. write yet more code
6. learn all about the tcp/ip stack and how it's used for http
7. learn all you can about http
8. learn the standards (html, xml, sgml, css)
9. celebrate your 150th birthday.
10. get started on the actual browser project.

1. 编写大量代码来做一些小事情，比如解决所有的projecteuler.net问题
2. 尽你所能了解你的工具包及其社区标准
3. 编写更多代码
4. 真正掌握有限状态机
5. 编写更多代码
6. 了解有关 tcp/ip 堆栈的所有信息以及它如何用于 http
7. 尽你所能了解http
8. 学习标准（html、xml、sgml、css）
9. 庆祝您的 150 岁生日。
10. 开始实际的浏览器项目。

edit below here

在这里编辑下面

I didn't mean for it to be either motivating or demotivating, just an attempt to show you that a browser is a really big project and that really big projects require a whole lot of thought. Blunt honesty sprinkled with humour.

我的意思并不是说它具有激励性或消极性，只是试图向您展示浏览器是一个非常大的项目，而真正的大项目需要大量的思考。直率的诚实中夹杂着幽默。

I've been programming for over two thirds of my life and I like to think that I am a pretty decent programmer, but it would be foolish of me to think that I'd stand half a chance at writing a decent web browser from scratch.

我已经有三分之二以上的时间在编程，我喜欢认为我是一个相当不错的程序员，但认为我有一半的机会从头开始编写一个像样的网络浏览器是愚蠢的.

Ofcourse, if this is what you want to do, don't let my comment stand in your way. You can probably do better than Internet Explorer.

当然，如果这是你想做的，不要让我的评论妨碍你。您可能比 Internet Explorer 做得更好。

回答by Matt

...then start worrying about security

...然后开始担心安全问题

(non-functional and cross cutting concerns should be generally considered up front though :) )

（非功能性和跨领域的问题通常应该预先考虑:)）

回答by Ross

It's an insanely ambitious project (especially for a single developer) but something I'd love to do someday - you could learn so much from it.

这是一个非常雄心勃勃的项目（尤其是对于单个开发人员而言），但有朝一日我很乐意做这件事——你可以从中学到很多东西。

I don't know a lot about how the protocols work (something that you definitely need to research) or much about what goes on in a browser but a great place to start would be the source of the open-source browsers, primarily Chrome and Firefox. Chrome is an especially good project to look at as they only do what I'd expect you to start with: the chrome and the backend of the browser. Forget creating a rendering engine at first - use Webkit or Gekko.

我不太了解协议的工作原理（你肯定需要研究的东西），也不了解浏览器中发生的事情，但一个很好的起点是开源浏览器的来源，主要是 Chrome 和火狐。Chrome 是一个特别值得一看的项目，因为它们只做我希望你开始做的事情：chrome 和浏览器的后端。首先忘记创建渲染引擎 - 使用 Webkit 或 Gekko。

回答by CMS

Sounds like a really interesting project, but it will require you to invest an enormous effort.

听起来是一个非常有趣的项目，但它需要你投入巨大的努力。

It's no easy thing, but from an academic point of view, you could learn so muchfrom it.

这不是一件容易的事情，但从学术的角度来看，你可以从中学到很多东西。

Some resources that you could check:

您可以检查的一些资源：

• HTMLayout.NET: fast, lightweight and embeddable HTML/CSS renderer and layout manager component.
• GeckoFX: Windows Forms control that embeds the Mozilla Gecko browser control in any Windows Forms Application.
• SwiftDotNet: A Browser based on Webkit in C#
• Gecko DotNetEmbed
• Gecko#
• Rendering a web page - step by step

• HTMLayout.NET：快速、轻量级和可嵌入的 HTML/CSS 渲染器和布局管理器组件。
• GeckoFX：Windows 窗体控件，可在任何 Windows 窗体应用程序中嵌入 Mozilla Gecko 浏览器控件。
• SwiftDotNet：基于 C# 中的 Webkit 的浏览器
• 壁虎 DotNetEmbed
• 壁虎＃
• 渲染网页 - 一步一步

But seeing it from a realisticpoint of view, the huge effort needed to code it from scratch reminded me this comic:

但是从现实的角度来看，从头开始编写代码所需的巨大努力让我想起了这部漫画：

_{(source: geekherocomic.com)}

_{（来源：geekherocomic.com）}

Good Luck :-)

祝你好运 ：-）

回答by stalepretzel

As everyone else has already said, a web browser is a huge project. You've got to worry about tcp/ip&sockets, rendering html, using css, creating a DOM model, executing javascript, dealing with malformed markup and code, and handling all types of files before you can even think about all the things people expect from a browser (ie bookmarks, history, private browsing, security, etc.) It's a huge project.

正如其他人已经说过的那样，Web 浏览器是一个庞大的项目。您必须担心 tcp/ip&sockets、渲染 html、使用 css、创建 DOM 模型、执行 javascript、处理格式错误的标记和代码以及处理所有类型的文件，然后才能考虑人们期望的所有内容浏览器（即书签、历史记录、隐私浏览、安全性等） 这是一个巨大的项目。

That being said, it can be done. My suggestion would be to go look at the source of Firefox. I know that you said you want to build a browser from scratch, but it would be very helpful to learnfrom an open-source project, first.

话虽这么说，是可以做到的。我的建议是去看看 Firefox 的来源。我知道你说你想从头开始构建一个浏览器，但首先从一个开源项目中学习会很有帮助。

I would download the Firefox source, and slowly strip it down. In other words, I would take the source and removeall bookmarking functionality. Then, I'd remove the ability to handle addons. Then, I'd delete all code regarding saving files. I would continue this process until I got a verybasic web browser. I'd look over that code.

我会下载 Firefox 源代码，然后慢慢将其剥离。换句话说，我会获取源代码并删除所有书签功能。然后，我将删除处理插件的能力。然后，我会删除所有关于保存文件的代码。我会继续这个过程，直到我得到一个非常基本的网络浏览器。我会查看该代码。

Then, I'd start building my own. I'd take the knowledge I'd gained from taking apart Firefox, and I'd put it into building a new browser.

然后，我将开始构建自己的。我会利用从拆分 Firefox 中获得的知识，并将其用于构建新的浏览器。

A whole lot of luckto you!

一个全部的运气给你！

回答by Hannoun Yassir

very ambitious project but one developer can't do this alone you need a team(project manager , testers ...) and maybe you should review your choise of language c# works only on windows(i know mono on linux but it is not the same) anyway i wish you good luck and i ll be happy to use your browser :D

非常雄心勃勃的项目，但一个开发人员不能单独完成，你需要一个团队（项目经理、测试人员......），也许你应该检查一下你的语言选择 c# 仅适用于 Windows（我知道 linux 上的单声道，但它不是一样）无论如何，我祝你好运，我会很高兴使用你的浏览器：D

回答by Waleed Eissa

You really have a lot of free time in your hand, haven't you? AFAIK, most browsers were written in C++, not all users have the .NET framework installed on their computers and if they do it might not be the version you need.

你真的有很多空闲时间，不是吗？AFAIK，大多数浏览器都是用 C++ 编写的，并非所有用户都在他们的计算机上安装了 .NET 框架，如果他们这样做，它可能不是您需要的版本。

This could take you years but anyway, there are many open source browsers out there, FireFox, Google Chrome .. etc, you could start by having a look on the code, good luck with that :)

这可能需要您数年时间，但无论如何，有许多开源浏览器，FireFox、Google Chrome 等，您可以先查看代码，祝您好运:)

回答by Elijah Lynn

Udacity now has a course called "Building a Web Browser" - https://www.udacity.com/course/programming-languages--cs262

Udacity 现在有一个名为“构建 Web 浏览器”的课程 - https://www.udacity.com/course/programming-languages--cs262