# 浏览器工作原理系列介绍
# 写在前面的话
印象中最早接触浏览器,还是在2000年以前读小学的时候,那时候最大的乐趣就是玩小霸王游戏机。在那个个人电脑很贵很稀缺的年代,只有一些事业单位才有,而且拨号上网的速度慢到让人绝望。
后来,随着网吧的普及,接触电脑的机会越来越多。《传奇》、《星际争霸》、《CS》是当时最火的游戏,有时为了查攻略,上网百度也是常有的。2002年姚明进入NBA,开始关注NBA的新闻,那时候每次上网都会把新浪体育所有关于NBA的新闻都看个遍,上课看图文直播的经历也是非常刺激的。
如果说早期是浏览器的轻度使用者,那么工作后做前端开发,则是成为了浏览器的重度使用者。 几乎每天都要和浏览器打交道,画页面、写JS逻辑,最后在浏览器上一点一点地调试效果。
也正是在这个阶段,随着对浏览器(主要是Chrome)的认识越来越深入,越来越意识到自己对浏览器的了解的不足。因为我们平时工作中用HTML、CSS、JavaScript开发页面并不难,加上一些类库和框架比如jQuery、Vue、React也大大简化了我们的开发,但一旦遇到涉及原理的问题,如性能问题、内存泄漏等,就不知从何下手了,只能上网查一通,碰碰运气。究其原因,是对浏览器的工作原理不够了解,没有构建起浏览器的知识体系。
为了系统地了解浏览器,我上网搜过很多,但关于浏览器的优质文章很少,而且比较零散。偶然的机会,在极客时间上发现了一门专门将浏览器原理的课程,喜出望外,断断续续地看了两遍,每次都有新的收获,逐渐地构建起了自己的浏览器知识体系。
基于上面的经历,我发觉有必要写一个浏览器系列。
- 一方面,巩固自己的学习成果。按照费曼学习法的说法,经过了概念、教授、回顾、简化这四个阶段后,知识的理解和记忆会十分牢固;
- 另一方面,也希望给许多和我一样有此困惑的同学一个参考。
如今信息爆炸的时代,在浩瀚的知识海洋中高效地获取有效知识已经成为一项十分重要的能力,像InfoQ、极客时间这样高质量的知识平台在未来理应会扮演更重要的角色。 在此墙裂安利李兵老师的极客时间专栏 浏览器工作原理和实践 (opens new window) 。李兵老师从浏览器实现者的视角,系统讲解了浏览器架构的演进、浏览器内部的页面循环系统、V8工作原理、JS执行机制等,同时结合手绘的图文,方便理解。
本系列主要参考了李兵老师在极客时间的专栏 浏览器工作原理和实践 (opens new window) ,加上自己的理解和梳理,挑战着用自己的思维逻辑将它们串起来,文中也会有不少直接引用课程中的对知识点的描述。
本系列分为以下几个部分:
- 浏览器系列之1-如何发展的?-历史
- 浏览器系列之2-如何动起来的?- 页面循环系统
- 浏览器系列之3-如何从URL到页面显示的?
- 浏览器系列之4-如何进行性能优化?
- 浏览器系列之5-如何与服务器通讯?网络
- 浏览器系列之6-如何保证浏览器安全?
- 浏览器系列之7-未来发展方向?
在接下来的一段时间,我将一步一步将浏览器知识体系呈现出来。
- 第一章:聊聊浏览器的发展历史。带你考古,了解从万维网WWW和世界上第一个浏览器
Next
的诞生开始,到如今的浏览器Chrome
、Safari
、Firefox
三强的格局是如何形成的,中间经历的浏览器大战又是为什么;另外,聊聊浏览器的架构,带你了解浏览器是如何从单进程架构演进到现在的多进程架构的,渲染引擎如Webkit在多进程架构中的位置,以及未来的浏览器架构可能是什么样子; - 第二章:聊聊页面循环系统和JS执行机制。带你了解多进程架构下的浏览器中,各个进程之间是如何协作的、任务如何调度、为什么浏览器上会区分宏任务和微任务,以及JS代码的执行过程是怎样的,执行上下文、变量提升、作用域链等概念是如何产生的、该如何理解;
- 第三章:聊聊从URL到页面显示经历了哪些过程。这是个老生常谈的问题,经常出现在面试中,因为这其中涉及到了包含网络传输流程、浏览器加载和渲染流程等方方面面的,作为面试题再适合不过了。因此,这一章,将中间的这些流程串起来,让你有一个大概的逻辑框架,部分流程也会提供参考链接以便更深入了解;
- 第四章:聊聊性能优化。带你了解影响页面加载和渲染的可能因素,以及优化方案;
- 第五章:聊聊网络。带你了解HTTP0.9、HTTP1.0、HTTP1.1、HTTP2、HTTP3中,每个协议版本的核心述求、以及不足之处。
- 第六章:聊聊浏览器安全。带你了解浏览器为什么需要同源策略,同源策略留出跨域请求的口子会有什么风险如XSS攻击、CSRF攻击,以及针对这些攻击,浏览器提供了哪些防范机制。另外,HTTPS是如何让网络传输过程更加安全的。
- 第七章:聊聊未来发展方向。介绍PWA、WebAssembly、Web Component等发展趋势。
感谢您的阅读,希望这些文章能让你对浏览器有更系统、更全面的认识,也欢迎点赞和留言交流~