一道浏览器面试题，就能看出你的前端功底

作为前端工程师，几乎每天都要和浏览器打交道。

理解浏览器是如何工作的，对我们做业务的技术选型、架构设计等都有非常重要的作用，让我们可以准确评估 Web 开发项目的可行性，站在更高维度审视页面，以及在快节奏的技术迭代中把握住问题的本质。

可是我发现，大部分前端工程师对浏览器的理解，其实并不深入透彻。

比如，面试时我通常会问候选者一个问题：“在浏览器里，从输入 URL 到页面展示中间发生了什么？ ”

这道题涉及到网络、操作系统、Web 等一系列的知识，如果你要开发流畅的页面，或者诊断 Web 页面中的性能问题，那你就需要了解 URL 是怎么变成页面的，只有弄懂这些之后，你才可以站在全局的角度定位问题或者写出高效的代码。

但遗憾的是，大多数人只能回答其中零散的知识点，并不能将这些知识点串联成线，无法系统全面地回答。

也难怪，浏览器确实会涉及很多概念，不仅繁多而且琐碎，包括网络、渲染、安全，以及大前端相关的大量概念。比如，首屏的显示就涉及了 DNS、HTTP、DOM 解析、CSS 阻塞、JavaScript 阻塞等技术因素，其中一项没处理好就可能导致整个页面的延时。如果没有系统的学习，很容易出现遗漏和盲点。

所以，我推荐大家看看极客时间的专栏《浏览器工作原理与实践》。

作者是前盛大创新院高级研究员李兵。08 年的时候，他就基于 Chromium 和 IE 发布了一款双核浏览器：太阳花。这是国内第一款双核浏览器，你在使用它的时候，除了能享受到 Chrome 的快捷之外，还能兼容只支持 IE 的站点。可能现在的你不觉得有多厉害，但在当时，简直是前端的爆炸新闻。这款浏览器，在没有任何宣传的情况下，日活达到了 20 多万。

之后李兵去了盛大创新院，参与研发 WebOS 项目，基于 WebKit 内核打造一个能和安卓并存的操作系统。

后来，他又到了顺网科技，和团队打造了一款给全国网吧使用的“F1 浏览器”，日启量达到 2000 万。大家都知道，网吧的电脑环境异常复杂，页面劫持经常发生，再加上每天千万级别的启动量，对页面安全、加载速度和流畅度都有很高的要求。

可以说，这些经历，让李兵在浏览器核心技术上，有独到理解和独家经验。

因此，他来写浏览器相关的专栏，也一定与众不同，更具实操性。据他说，在《浏览器工作原理与实践》专栏里，想带你重新认识浏览器，把网络、页面渲染、JavaScript、浏览器安全等知识串联起来，从而让你对整个前端体系有全新的认识。

再送你一张李兵制作的知识框架图，让你对浏览器所覆盖所有知识点有所认知。

李兵是如何讲解浏览器的？

专栏分为 7 大模块，共 35 篇文章，覆盖 JavaScript 执行机制、引擎 V8 的工作原理、Web 页面中的事件循环系统、HTTP/1、HTTP/2 和 HTTP/3 的介绍、以及最近比较火的 PWA 的工作原理等内容。

最吸引我的，是李兵会自己绘制原理图和流程图，用通俗易懂的语言，图文并茂的展现形式，带你层层深入浏览器，看懂前端本质。

比如，下面是“渲染流水线的总结图”：

线程之间共享进程中的数据示意图：

下面是专栏的详细目录：

《浏览器工作原理与实践》限时订阅福利

戳我订阅，早鸟优惠¥68，原价¥99

优惠最后 2 天！