浏览器工作原理--分析

在此之前，我一直使用csdn来记录学习。所以接下来的部分文章都是摘抄自我csdn账号的文章。

众所周知，浏览器可谓是目前使用率最高的软件。从 1992年 世界上第一个图形网页浏览器（ Erwise ）的诞生发展到现在，市面上主流的浏览器有 IE、Firefox、Safari、Chrome及Opera。万恶的ie果断已经被微软放弃，这对于我们前端程序员来说，简直是出了一口恶气！浏览器的发展史：请戳这里。

同一个web页面在不同的浏览器中，可能会呈现不同的效果甚至会错乱。这是为什么？这是因为可能该页面使用了浏览器不支持的技术，也有可能是分辨率造成的。这就产生了浏览器的兼容性问题，高版本不兼容低版本浏览器。不同的浏览器可能使用着不同的内核，也有使用相同内核的不同浏览器，只是改头换面为了更加符合用户的需求。

浏览器根据访问的地址（网址）来确定信息资源的位置，并将用户感兴趣的资源读取出来，然后解析html文件，把图像、文字或者多媒体信息展现出来形成了用户浏览的网页。

web服务器对静态网页的处理过程：

用户通过浏览器向服务器发出的静态网页请求–>web服务器找到这个网页–>分析其中相关联的各种文件（如图片，css，js等等）–>找到这些相关联的文件–>一并传回到浏览器的缓冲区–>浏览器进行解析执行文件–>浏览器呈现网页内容

浏览器的主要组件包括：

1. 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的你请求的页面外，其他显示的各个部分都属于用户界面。
2. 浏览器引擎 - 在用户界面和渲染引擎之间传送指令。
3. 渲染引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
4. 网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
5. 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
6. JavaScript 解释器 - 用于解析和执行 JavaScript 代码，比如chrome的javascript解释器是V8。
7. 数据存储 - 这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (html5)定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

浏览器的物理文件传输

我们都知道浏览器只是下载到本地来浏览网页的一个软件！那么既然是软件，就有软件的诟病。软件的算法、代码的质量、所使用的内核、安全性的设置等等。都会影响着浏览器的运行速度，这就是为什么相同页面在不同浏览器下面运行效率不一样问题，当然也不排除其他因素。所以这就要求我们代码质量一定得提高。

我们浏览的所有网页说透彻一点，其实就是文件的请求，并且是真实文件。这里拿ie和chrome举例。

我们每安装一个浏览器之后，都会在电脑里面生成一个该浏览器用来存放文件的临时文件夹。每请求一个网页，该网页所有使用到的所有文件、图片、视频等资源都会缓存到这个临时文件夹，这就是为什么第二次访问相同网页比第一次要快的原因。

现在我们来找找这个临时文件夹的位置！

（ie）打开ie浏览器在设置里面找到intemet选项–>常规–>设置–>intemet临时文件–>查看文件。这时候我们就能找到ie的临时文件夹。删除里面的所有文件，然后再访问页面，再刷新这个文件夹，我们会发现这个文件夹又多了一堆文件，并且里面的文件都能在该网页上找到。

chrome也是如此，这里介绍一下chrome的临时文件查找方法。

在Chrome浏览器地址栏中输入chrome://version,打开所有URL列表页面–>找到“个人资料路径”对应的磁盘。哪里就是谷歌的临时文件夹，不同的是谷歌的文件是分开放的，这里就不做细节描述了。

看到这里，总结出来就是一句话！
服务器上存放着网页的相关文件，包括html文件、css文件、js文件、图片等。当我们打开浏览器，输入网址，我们的计算机就会对这些文件发出HTTP请求。服务器收到请求之后，会把这些文件通过HTTP协议，传输到我们的计算机中（保存到了刚才那个临时文件夹中）。这些文件，将在我们计算机本地的浏览器中，进行渲染、呈递。我们平时上网的时候，是有真实的、物理的文件传输的！

我是猫哆哩，一个不成熟的程序员！