浏览器知识点整理（一）开篇

这是我参与更文挑战的第14天，活动详情查看： 更文挑战

前言

因为对浏览器工作原理的理解还比较浅薄，所以一直都有好好整理浏览器知识点的想法，平时也有在语雀知识库收录一些知识点，但是比较零碎，这次也是借着掘金的日更活动倒逼自己一把，希望可以对浏览器相关知识做一个系统化的整理，通过输出来加深对浏览器相关知识点的理解。

为什么要整理浏览器相关的知识点？

作为一名前端开发工程师，我们每天都需要和浏览器打交道，去了解浏览器是如何工作的，可以让我们从更高的维度去理解前端。

我们当然可以把浏览器当做是一个黑盒，在输入 url 后，这个黑盒子处理之后返回给一个我们预期的页面。如果我们对这个黑盒子一无所知，当然也可以继续写前端代码，也可以用很多的策略来优化代码，这就如同不了解操作系统的工作原理同样可以在操作系统上写应用一样。

但是当理解了这个黑盒子是如何工作的，那情况就不同了。我们可以站在更高的维度来审视项目，通过全视野快速定位项目中不合理的地方。比如，首屏的显示就涉及了 DNS 域名系统解析、HTTP 传输、DOM 解析、CSS 阻塞、JavaScript 阻塞等技术因素，其中一项没处理好就可能导致整个页面的延时。

如果了解了浏览器的工作原理，就可以把相关的知识点串成线、连成网，最终形成一个知识体系，而这也是我的目的。

带着问题去整理

为了开发出更加流畅的页面，需要对浏览器的工作原理要有一个体系化的认识。我觉得带着问题去学习是很有效果的，解决了问题同时也加深了理解，下面是我希望去了解的一些问题：

• 从输入 url 到页面展示的过程中发生了什么？
• 浏览器到底是怎样渲染生成页面的？
• 脚本语言 JavaScript 在浏览器中是怎样执行的？
• 浏览器的事件循环是怎样的一个过程？
• 有哪些开发者工具可以让我们更好的开发和优化性能？
• 如何使我们开发的页面更加安全？
• 应该怎样优化代码才能起到优化性能的目的？

下面是我粗略整理的一个关于浏览器知识点的思维导图，我将会以这个导图为大纲去整理相关的浏览器知识点。

相关参考链接

《浏览器工作原理与实践》

《图解浏览器的基本工作原理》

《浏览器的工作原理：新式网络浏览器幕后揭秘》