了解浏览器

理解浏览器的工作原理

前言

​ 浏览器是专门用来访问和浏览万维网页面的客户端软件，也是现在最为流行的软件之一，其重要性不言而喻。前端工程师作为负责程序页面显示的工程师，需要直接和浏览器打交道。本文将详细介绍浏览器的工作原理。

浏览器组成

主要组件包括：

1. 用户界面——包括地址栏，后退/前进按钮，书签，目录等，也就是所看到的除了用来显示所请求的页面窗口之外的其他部分。
2. 浏览器引擎——用来查询及操作渲染引擎的接口。
3. 渲染引擎——用来显示请求的内容，如：如果请求内容为html，他负责解析html及css，并将解析后的结果显示在页面。
4. 网络——用来完成网络调用，如：http请求，它具有平台无关的接口，可以在不同平台上工作。
5. UI后端——用来绘制类似组合选择框及对话框等基本组件，具有不特定与某个平台的通用接口，顶层使用操作系统的用户接口。
6. JS解释器——用来执行JS代码。
7. 数据存储——属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术。

内核

浏览器分为两部分：渲染引擎和js引擎，由于js引擎越来越独立，内核就倾向于只指渲染引擎，负责请求网络页面资源并解析排版并呈现给用户。

默认情况下，渲染引擎可以显示html，xml文档及图片，他可以借助插件显示其他类型数据，例如使用PDF阅读器插件，可以显示PDF格式。

渲染引擎

firefox使用gecko引擎

IE使用Trident引擎，2015年微软推出自己新的浏览器，原名叫斯巴达，后改名edge，使用edge引擎

opera最早使用Presto引擎，后来弃用

chrome\safari\opera使用webkit引擎，13年chrome和opera开始使用Blink引擎

UC使用U3引擎

QQ浏览器和微信内核使用X5引擎，16年开始使用Blink引擎

js引擎

老版本IE使用Jscript引擎，IE9之后使用Chakra引擎，edge浏览器仍然使用Chakra引擎

firefox使用monkey系列引擎

safari使用的SquirrelFish系列引擎

Opera使用Carakan引擎

chrome使用V8引擎。nodeJs其实就是封装了V8引擎

渲染流程

　　从资源的下载到最终的页面展现，渲染流程可简单地理解成一个线性串联的变换过程的组合，原始输入为URL地址，最终输出为页面Bitmap，中间依次经过了Loader、Parser、Layout和Paint模块

　渲染引擎的核心流程如下所示

Loader

Loader模块负责处理所有的HTTP请求以及网络资源的缓存，相当于是从URL输入到Page Resource输出的变换过程。HTML页面中通常由JS/CSS/Image资源，为了不阻塞后续解析过程，一般会有两个IO管道同时存在，一个负责主页面下载，一个负责各种外链接资源的下载。

注意：虽然大部分情况下不同资源都是并发下载异步解析（如图片资源可以在主页面解析显示完成后再被显示），但JS脚本可能会要求改变页面，因此有时保持执行顺序和下载管道后续处理的阻塞是不可避免的。

缓存

缓存在浏览器中也得到广泛的应用，对提高用户体验起到重要的作用。在浏览器中，主要存在三种类型的缓存：Page Cache，Memory Cache，Disk Cacche。这三类Cache的容量都是额可以配置的，比如限制Memory Cache最大不超过30M，Page Cache缓存的页面数量不超过5个等。

Page Cache：即页面缓存。用来缓存用户访问过的网页DOM树、Render树等数据。设计页面缓存的意图在于提供流畅的页面前进、后退浏览体验。几乎所有的现代浏览器都支持页面缓存功能

Memory Cache：浏览器内部的缓存机制，对于相同的url的资源直接从缓存中获取，不需要重新下载。在使用浏览器浏览网页时，尤其是浏览一个大型网站的不同页面时，经常会遇到网页中包含相同资源的情况，应用Memory Cache可以显著提高浏览器的用户体验，减少无谓的内存、时间以及网络带宽开销。

Disk Cache：资源加载缓存和服务器进行交互，服务器端可以通过HTTP头信息设置网页要不要加载；

转自：

https://www.cnblogs.com/itplay/p/10475368.html