浏览器工做原理--分析

在此以前，我一直使用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协议，传输到咱们的计算机中（保存到了刚才那个临时文件夹中）。这些文件，将在咱们计算机本地的浏览器中，进行渲染、呈递。咱们平时上网的时候，是有真实的、物理的文件传输的！

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