这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战
了解浏览器的工作原理，对我们设计页面内容，页面交互，优化页面性能有绝对的帮助。
浏览器是个很大的课题，从1990世界上第一个浏览器WorldWideWeb开始，到现在的Chrome和Edge，经历了30年的发展，我们就从浏览器界面开始说起吧！
浏览器与进程
你现在正在打开的浏览器包含两个主模块: 浏览器框架和具体Tab页面
-
浏览器框架包括导航栏，收藏夹，历史记录，用户信息等等，框架是固定的，所有页面共享的；
-
负责框架功能的是浏览器进程(Browser Process)，包括搜索，导航，下载，更新历史记录，Cache管理，收藏夹管理，以及与页面的交互；
-
根据功能的不同，浏览器进程(Browser Process)又分为不同的线程(Thread)，比如负责用户界面交互和搜索的UI线程(UI thread)，负责网络请求的网络线程(network thread), 控制文件读写的(Storage Thread)等等；
-
页面是网络资源的展示，负责页面展示的是渲染进程(Render Process)，根据设计的不同，有的浏览器会将所有页面都是用同一个渲染进程，而有的会为每个页面都安排一个渲染进程；
-
网页的渲染不是一项简单的工作，它是一个复杂的过程，所以根据不同的过程，渲染进程又分为了不同线程，比如解析HTML文件的解析的主线程(main thread)，负责将页面栅格化的光栅化线程(raster thread)和合成线程(composition thread）等等；
-
除了浏览器进程和渲染进程以外，浏览器一般还会用到专门管理不同插件的插件进程(plugin process）和最终绘制屏幕的图像处理进程(GPU process)
-
浏览器加载页面不是一蹴而就的，而是一个不断迭代的过程，需要不同进程之间相互配合，进程之间互相通过IPC（Inter Process Communication)进行交互；
-
现代的浏览器基本都使用多进程的架构，这样的好处是：
- 浏览器更可靠。现在网页应用越来越复杂，有一些非法或不规范的输入会导致进程bug，采用多进程的模式，可以让进程相互隔离，一个进程挂了不会影响其他进程，系统的稳定性提高了。
- 页面加载更流程。不同进程可以并行执行，减少等待时间；
- 系统更安全。不同进程之间不共享内存，还可以根据实际需求分配不同等级的读写权限，这样一个进程相当于一个沙盒，一定程度上进行了安全隔离；
-
多进程的缺点是消耗内存，如果页面过多，或内存占用过多的话，会严重影响浏览器的性能；
- 有些浏览器会限制进程数，如果进程超过某个值，就会将进程合并，减小内存的负载；
- 还有的浏览器会对很久没有操作或更新的页面，自动终止进程并释放内存，需要时再激活，这样也可以减轻内存压力；
导航
当我们打开浏览器开始输入想访问的内容，到页面加载完成，可以分为两个大步骤：导航和渲染，我们先来看看导航：
-
处理输入：当我们开始在浏览器的搜索框输入字符串的时候，浏览器会根据我们的输入，判断这是一个搜索，还是一个具体站点的URL；处理输入的是浏览器进程中的UI线程(UI Thread)；
-
开始导航：如果是一个搜索请求，则浏览器会打开搜索页面，并将用户的输入作为参数，给出搜索结果列表；如果是一个具体站点的URL，则会向DNS发送解析获取具体IP，并建立到目标IP的TCP连接，并发送HTTP请求，获取站点资源；负责网址解析和资源请求的是浏览器进程中的网络线程(network thread)；
-
读取响应：浏览器会根据HTTP响应报文头(header)及响应主体(body)，判断获取文件的MIME类型，并做一些安全检查，如果没有安全问题，则会把收到的网页资源提交给浏览器的渲染程序，开始为展示页面做准备；负责读取相应的也是网络线程;
- 准备渲染进程：当网络线程确信浏览器可以导航到请求网页，就会通知UI线程数据已经准备好，UI线程就会为这个页面启动一个渲染进程（renderer process）来准备渲染页面；
-
提交（commit）导航：当数据和渲染进程都已ready，浏览器进程会通过IPC告诉渲染进程去提交本次导航（commit navigation）；当浏览器进程收到渲染进程的提交响应，导航工作就完成了；
-
导航完成后，浏览器导航栏会出现一个安全锁的图标，浏览器还会把当前网页连接添加到历史记录，当前的会话历史会被保存在硬盘上面；
此时页面的加载图标仍在继续，在这之后，浏览器进程会将接收到的网站数据源源不断地传递给对应的渲染进程，页面渲染会正式开始，页面开始加载。
我们下一篇会详细讲解页面渲染的流程步骤。
感谢阅读，如有不准确和错误之处请留言指正，我会立即修正，感谢！
总结不易，请勿私自转载，否则别怪老大爷不客气
欢迎喜欢技术的小伙伴和我交流，微信1296386616
参考资料：
《Inside look at modern web browser》 By Mariko Kosaka developers.google.com/web/updates…
《How Browsers Work: Behind the scenes of modern web browsers》 By Tali Garsiel and Paul Irish www.html5rocks.com/zh/tutorial…
《Critical Rendering Path 》 Ilya Grigorik developers.google.com/web/fundame…
《Populating the page: how browsers work》 MDN developer.mozilla.org/zh-CN/docs/…
《网页性能管理详解》 阮一峰 www.ruanyifeng.com/blog/2015/0…
《前端都该懂的浏览器工作原理，你懂了吗？》 _杨溜溜 segmentfault.com/a/119000002…
《一文看懂Chrome浏览器工作原理》 进击的大葱 juejin.cn/post/684490…
