最近这几年,云计算的普及和 HTML5 技术的快速发展,越来越多的应用转向了浏览器 / 服务器(B/S)架构,这种改变让浏览器的重要性与日俱增,视频、音频、游戏几大核心场景也都在逐渐往 Web 使用场景切换。可以说,在 PC 端,浏览器已经处于绝对的统治地位。


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


可是我发现,大部分前端工程师对浏览器的理解,其实并不深入透彻。比如,一道大家都熟悉的面试题:“在浏览器里,从输入 URL 到页面展示中间发生了什么?”


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

带你体系化全面认识浏览器原理_html5

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


所以,一开始就得建立起来浏览器的宏观视角,搭建起“浏览器知识大厦”的脚手架,这样就可以把这些知识点串成线,连成网,最终形成自己的知识体系,练就像专家一样思考问题、解决问题的能力。


刚开始研究这东西时,没少在网上找资料。让我觉得很有收获的,是李兵写的《浏览器工作原理与实践》,老李是前盛大创新院高级研究员,现在是一名创业者,深耕浏览器和前端领域十多年,经验很是丰富。


他的经历也非常传奇(下面详细说),自然写的专栏也是与众不同,更具实操性。我现在也经常拿出来 2 刷,整体读起来的感觉,就是通俗易懂,深入浅出,让我把浏览器,把网络、页面渲染、JavaScript、浏览器安全、V8 原理等知识都串联起来,对整个前端体系有了全新的认识。


而且图文并茂的展现,比如下面是“线程之间共享进程中的数据示意图”:


带你体系化全面认识浏览器原理_双核_02

 有多干货,看看目录吧。


带你体系化全面认识浏览器原理_html5_03


学习前端最重要的是要理解浏览器的工作原理,毕竟我们写的代码最终是要被浏览器处理的,理解浏览器背后的原理可以帮我们更快速定位问题,找到问题的解决方案。​了解浏览器是如何工作的,能够让你站在更高的角度去理解前端。