| 内核 | 代表产品 | |
|---|---|---|
| Trident | Internet Explorer，IE内核 | |
| Gecko内核 | Mozilla Firefox | |
| WebKit | Safari、Chrome | |
| Presto | Opera |
::-webkit-progress-bar{
background:orange;
}
::-webkit-progress-value{
background:deeppink;
}
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 后端） | 用来绘制基本的浏览器窗口内控件，如输入框、按钮、单选按钮等，根据浏览器不同绘制的视觉效果也不同，但功能都是一样的。 |
浏览器内核主要分为两部分：
| 内核主要分为两部分 | |
|---|---|
| 渲染引擎(layout engineer 或 Rendering Engine) | 渲染引擎负责取得网页的内容进行布局计和样式渲染，然后会输出至显示器或打印机 |
| JS引擎 | JS引擎则负责解析和执行JS脚本来实现网页的动态效果和用户交互 |
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
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引擎的处理队列中等待处理。
1）渲染引擎首先通过浏览器网络层获得所请求文档的内容，开始工作，每次通常渲染不会超过8K的数据块；
2）解析html，并将标签转化，以构建DOM树；
3）构建render树：：
4）布局render树：
5）绘制render树：
在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘：
回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制
1）回流
2）重绘
改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
浏览器渲染页面采用流式布局模型
DOM节点信息修改时，发生重排，重排就是根据渲染树中每个渲染对象的信息，计算出各自渲染对象的信息，如DOM元素位置、尺寸、大小。重排是一种明显的改变页面布局的操作
页面首次渲染
重绘改变元素页面中的展示样式，不会引起元素在文档流中位置的改变，如字体颜色、背景色、透明度、
在修改某些属性，会引起重绘
重排一定会重绘，但重绘不一定重排
1）优化JS的执行效率
2）降低样式计算的范围和复杂度
3）避免大规模、复杂的布局
4）简化绘制的复杂度、减少绘制区域
5）优先使用渲染层合并属性、控制层数量
6）对用户输入事件的处理函数去抖动（移动设备）
7）将要进行复杂处理的元素处理为display属性为none
8) 使用事件委托处理程序
浏览器进程职责：用户交互，子进程管理，文件储存等功能
网络进程职责：网络进程面向渲染进程和浏览器进程等提供网络下载功能
渲染进程职责：把网络下载的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）
浏览器渲染引擎分5步
创建DOM树，创建StyleRules、创建Render树、布局Layout（重排）、绘制Painting(重绘)
DOM树的构建是文档加载完成开始的？ 构建DOM树是一个渐进过程，为达到更好用户体验，渲染引擎会尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后才开始构建render树和布局。
Render树是DOM树和CSSOM树构建完毕才开始构建的吗？ 这三个过程在实际进行的时候又不是完全独立，而是会有交叉。会造成一边加载，一遍解析，一遍渲染的工作现象。
CSS的解析是从右往左逆向解析的（从DOM树的下-上解析比上一下解析效率高，冒泡），嵌套标签越多，解析越慢。
查看谷歌浏览器绘制
ctrl+shift+p：输入Performance monitor查看渲染进度
输入Frame Rate查看1s 60次刷新率
http缓存
强缓存
<-cache-control:max-age=600
<-expires:Mon,14 Sep 2020 09:02:20 GMT
协商缓存
<-last-modified:Fri,07 Aug 2020 02:35:59 GMT
->if-modified-since:Fri,07 Aug 2020 02:35:59 GMT
<-etag:W/"5f2cbe0f-2382"
->if-none-match:W/"5f2cbe0f-2382"
cookie,session，sessionStoray,cookieStoray
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 数据 的生 命期 | 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 | 除非被清除，否则永久保存 | 仅在当前会话下有效，关闭页面或浏览器后被清除 |
| 存放数据大小 | 最大存4K(每条)，只能存7天，存20条内容 | 容量最大5M，只要存储、就一直在，直到手动删除才删除，只能存储同一个域名下 | 容量最大5M，只存于当前会话，关闭页面，就清除存储 |
| 与服务器端通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 | |
| 易用性 | 需要程序员自己封装，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封装来对Objec和Array有更好的支持 |
注：
memoryStorage:存储敏感数据
indexDB:运行在浏览器的非关系型数据库，为大型数据库提供接口
设置localStorage
localStorage相当于前端数据库，只支持string类型存储
//解决刷新问题
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()//清除所有内容
代码层面优化
移动端性能优化
Telnet是一种应用层协议，用于互联网及局域网中，使用虚拟终端形式，提供双向
字符串为主的命令行接口交互功能
属于TCP/IP协议族的一员，是互联网远程登陆的标准协议，用于服务器远程控制，可供用户
在本地主机运行远程主机的工作
最大电脑显示屏尺寸是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 |
https://www.qianxin.com/ctp/gmbrowser.html
奇安信可信浏览器国密开发者专版