1、浏览器的组成
- 人机交互部分(UI)
我们打开浏览器看到的比如顶部刷新、后退、前进按钮、地址栏、收藏夹等,这些属于人机交互部分,无论什么浏览器都有这些功能。
- 网络请求部分(Socket)
当我们打开一个网址的时候,浏览器向服务器发起请求,把服务器返回给浏览器的数据给用户展示出来。浏览器一定有发起请求的功能,同时一定有接收服务器数据这两个功能。这个就是Socket,无论什么编程语言,当我们深入学习的时候一定会涉及到socket。
- JavaScript引擎部分(解析执行JavaScript)
浏览器可以执行一些js代码,原因就是浏览器里边有Js引擎,对于Chrome来说,著名的引擎叫V8
- 渲染引擎部分(渲染HTML、CSS等)
浏览器还有另外一个功能就是渲染我们的网页,我们在代码中写的html、css这些代码将来都是浏览器渲染引擎来执行。
- 数据存储部分(cookie、HTML5中的本地存储LocalStorage、SessionStorage)
浏览器自带一个存储功能,可以存储一些cookie等一些数据。
2、浏览器请求过程
我们在浏览器的地址栏中输入一个网址,按下回车后具体都执行了哪些操作?
互联网上两台计算机要通信的话必须知道对方的ip地址,现在浏览器并不知道百度的ip地址,它只是知道百度的域名,域名和ip地址有对应关系的。谁能将域名转换成ip地址呢,它是由电信服务商,告诉我们一个DNS服务器,DNS的作用就是用来将域名转成ip地址的。按下回车后并不是第一时间去请求百度服务器的,而是先将域名转换成对应的ip地址。然后浏览器能够访问服务,告诉服务器我要来访问你了,此时服务器准备好要给浏览器的东西。服务器返回的是一些字符串,这些字符串是一些html的文档。这个文档可能包含html、css、js代码等。浏览中各个组成部分该发挥它们的作用了,渲染引擎将html渲染成dom树,这个dom树在内存中静静的存储。当生成这个dom树以后它的样式其实也被一起渲染出来了。
js引擎就是用来处理js代码的,js代码一般来说就是用来处理dom的,js代码在执行的时候处理的是内存中的这个dom树,当处理完成之后渲染引擎会重新渲染这个dom树,更新完之后告诉浏览器处理完了,你去把它显示到用户界面上。
附大牛文章:
浏览器工作原理:新式网络浏览器幕后揭秘 https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/