浏览器汇总

文章目录 1、浏览器引擎分类：2、浏览器组成3、内核4、浏览器中的进程与线程6、页面渲染流程7、回流与重绘8、优化渲染性能9、输入URL地址，浏览器经历了什么10、浏览器访问网页，第一次加载很慢，第二次刷新明显加快，简述浏览器缓存机制注：浏览器存储，本地存储和cookie区别 11、如何提升页面性能12、Telnet13、笔记本、台式电脑尺寸及分辨率

1、浏览器引擎分类：

1)，Trident内核，代表产品Internet Explorer，IE内核

2)，Gecko内核，代表作品Mozilla Firefox

3)，WebKit内核，代表作品Safari、Chrome

::-webkit-progress-bar{
     background:orange;
  }
::-webkit-progress-value{
     background:deeppink;
  }

4)，Presto内核，代表作品Opera

2、浏览器组成

7部分组成

1)、User Interface（用户界面）：所能看到的界面部分；

2)、Browser engine（浏览器引擎）：在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心。

3)、Networking（网络）：实现HTTP、FTP等传输协议，完成网络调用或资源下载的模块；

4)、Rendering Engine（或layout engineer渲染引擎）：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。

5)、JavaScript Interpreter（JS 引擎/解释器）：解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果，如 V8 引擎、JavaScriptCore。

6)、Date Persistence（数据持久化存储）：cookie、localstorage个性设置、安全证书、缓存等；

7)、UI Backend（UI 后端）：用来绘制基本的浏览器窗口内控件，如输入框、按钮、单选按钮等，根据浏览器不同绘制的视觉效果也不同，但功能都是一样的。

3、内核

浏览器内核主要分为两部分：渲染引擎(layout engineer 或 Rendering Engine) 和 JS引擎：

渲染引擎负责取得网页的内容进行布局计和样式渲染，然后会输出至显示器或打印机

JS引擎则负责解析和执行JS脚本来实现网页的动态效果和用户交互

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

4、浏览器中的进程与线程

Chrome浏览器每打开一个网页相当于起一个进程，使用多个进程来隔离不同的网页，每个tab网页都有由其独立的渲染引擎实例。

1）非多进程：会导致一个tab网页崩溃，其他被打开的网页应用全部崩溃。

2）相对于线程共享相同的地址空间和资源，进程之间是不共享的，不会存在太多安全问题。

在内核控制下各线程相互配合以保持同步，一个浏览器通常由以下常驻线程组成：

3）GUI 渲染线程

渲染浏览器界面HTML元素,当界面重绘(Repaint)或引发回流(reflow)时，该线程就会执行；

Javascript引擎运行脚本期间，该线程挂起。

4）JavaScript引擎线程

处理页面中用户的交互，以及 *** 作DOM树、CSS样式树，和服务器逻辑的交互。

单线程执行，GUI渲染线程与JS引擎线程互斥，因此执行时间过长，会造成页面的渲染不连贯。

5）定时触发器线程

JS引擎是单线程，所以通过单独线程来处理定时更合理，避免造成阻塞。

6）事件触发线程

当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。

可以来自如定时器、鼠标点击、AJAX异步请求等；

7）异步http请求线程

XMLHttpRequest在连接后是通过浏览器新开一个线程请求，状态变更如果有回调，则产生状态变更事件放到JS引擎的处理队列中等待处理。

6、页面渲染流程

1）渲染引擎首先通过浏览器网络层获得所请求文档的内容，开始工作，每次通常渲染不会超过8K的数据块；

2）解析html，并将标签转化，以构建DOM树；

3）构建render树：：

4）布局render树：

5）绘制render树：

7、回流与重绘

1）回流

当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染。会从 这个 root frame 开始递归。元素的显示与隐藏、占位面积、定位方式、边距等属性的变化。

2）重绘

改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

8、优化渲染性能

1）优化JS的执行效率

2）降低样式计算的范围和复杂度

3）避免大规模、复杂的布局

4）简化绘制的复杂度、减少绘制区域

5）优先使用渲染层合并属性、控制层数量

6）对用户输入事件的处理函数去抖动（移动设备）

9、输入URL地址，浏览器经历了什么

浏览器进程职责：用户交互，子进程管理，文件储存等功能
网络进程职责：网络进程面向渲染进程和浏览器进程等提供网络下载功能
渲染进程职责：把网络下载的HTML，JavaScript,CSS,图片等资源解析为可以显示和交互的页面
渲染进程：谷歌给每个页面分配一个渲染进程，每打开一个页面就会配套创建一个新的渲染进程
提交文档：1、当浏览器进程接收到网络进程的响应头数据后，便向渲染进程发起提交文档的消息
        2、渲染进程接收到“提交文档”的消息后，会和网络进程建立传输数据的“管道”
        3、等文档数据传输完后，渲染进程返回“确认提交”的消息给浏览器进程
        4、浏览器收到"确认提交"后，更新浏览器界面状态，包括安全状态、location，前进后退，更新web界面  

步骤

1)、当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS查询。这能使浏览器获得请求对应的 IP 地址。

2)、浏览器首先使用http/https协议，向服务器请求页面， TCP三次握手

①TCP三次握手

浏览器->服务器，请求连接，发送同步报文

服务器->浏览器，发送同步-应答报文

浏览器->服务器，发送应答报文

②发送请求

建立TCP/IP连接后，浏览器会通过该连接向远程服务器发送HTTP的GIT请求

③接受响应

Web 服务器提供资源服务，客户端开始下载资源。

3)、请求回来的HTML代码进行页面渲染，构建成DOM树

遇见HTML页面，浏览器调用HTML解析器解析成Token并构建成dom树

遇见style/link标记，浏览器调用css解析器，处理css标记并构建cssom树

遇见script标记，调用javasctipt解析器，处理script代码，（绑定事件，修改dom/cssom树）

将dom和cssom树合并成一个渲染树

根据渲染树来计算布局，计算每个节点的几何信息（布局）

将各个节点颜色绘制到屏幕上（渲染）

注意：在实际页面中，这些步骤会被执行多次，如果dom/cssom树被修改了，会执行多次布局和渲染

4)、计算DOM树的CSS属性

5)、根据CSS属性对元素进行逐个渲染，得到内存中的位图

6)、一个可选的步骤是对位图进行合成，这会极大的增加后续绘制的速度

7)、合成之后，再绘制到界面上

8)、断开连接，TCP四次挥手

注：

位图：

​ 位图：点阵图像，像素图或栅格图像，是由像素（图片元素）的单个点组成，

这些点可以进行不同的排序和染色以构成图样，位图的单位：像素（pixel）

dom树如何生成

在渲染引擎内部，有一个叫HTML解析器（HTMLParser）的模块，它的职责就是负责将HTML字节流转换为DOM结构。

DOM的生成流程：字节流Bytes->分词器Token->生成节点Node->DOM

10、浏览器访问网页，第一次加载很慢，第二次刷新明显加快，简述浏览器缓存机制

cookie,session，sessionStoray,cookieStoray

强缓存

协商缓存

注：浏览器存储，本地存储和cookie区别

特性	Cookie	localStorage	sessionStorage
数据 的生 命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	最大存4K(每条)，只能存7天，存20条内容	容量最大5M，只要存储、就一直在，直到手动删除才删除，只能存储同一个域名下	容量最大5M，只存于当前会话，关闭页面，就清除存储
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Objec和Array有更好的支持

注：
memoryStorage:存储敏感数据
indexDB:运行在浏览器的非关系型数据库，为大型数据库提供接口

设置localStorage
localStorage相当于前端数据库，只支持string类型存储

setItem(增，存储数据)getItem(查，读取数据)removeItem(删，删除某个具体变量)

//解决刷新问题
const STORE_ROLE_KEY = 'store_currnet_role'
export function getRole(){
	const currenRole = localStorage.getItem(STORE_ROLE_KEY)
	if(currenRole && currenRole!='undefined'){
		return JSON.parse(currenRole)
	}
	return {}
}
//把role存到本地
export function storeRole(role) {
  localStorage.setItem(STORE_ROLE_KEY,JSON.stringify(role))
}
export function removeRole() {
  localStorage.removeItem(STORE_ROLE_KEY)
}
//
let obj = {name:'wl',age:18}
localStorage.setItem('name','wl')
localStorage.srtItem('info',JSON.stringify(obj))    将json转换成字符串在存入LocalStorage
let name = localStorage.getItem('name')
localStorage.removeItem('name') //删除key为name的存储
localStorage.clear()//清除所有内容

11、如何提升页面性能 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;…前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存A…用innerHTML代替DOM *** 作,减少DOM *** 作次数,优化javascript性能。当需要设置的样式很多时设置className而不是直接 *** 作style。少用全局变量、缓存DOM节点查找的结果。减少IO读取 *** 作。 12、Telnet

Telnet是一种应用层协议，用于互联网及局域网中，使用虚拟终端形式，提供双向

字符串为主的命令行接口交互功能

属于TCP/IP协议族的一员，是互联网远程登陆的标准协议，用于服务器远程控制，可供用户

在本地主机运行远程主机的工作

13、笔记本、台式电脑尺寸及分辨率

最大电脑显示屏尺寸是32英寸，基本上是在20-24之间

1)、笔记本各个尺寸所对应的分辨率：

12.1寸 1280*800	13.3寸 1024600或1280800	14.1寸 1366*768
15.4寸 1280800或1440900	15.6寸 1600*900

2)、台式机显示器最佳分辨率：

14寸显像管(CRT)显示器分辨率： 800×600	17寸液晶或CRT显示器分辨率： 1024×768	19寸液晶显示器(屏)分辨率： 1280×1024
19寸液晶显示器(宽屏)分辨率： 1440×900	22寸液晶显示器(宽屏)分辨率： 1920×1080