关于前端:肝完浏览器基本原理与实践我总结了这些

作为一名前端 er，日常工作打交道最多（之一）的莫过于相熟而又生疏的浏览器了，相熟是每天都会基于浏览器的利用层面之上码业务，生疏是很多人可能跟我一样不相熟其外部运行原理，比方 js 是怎么运行的呢？精美款式页面是怎么渲染到电脑屏幕的呢？在凋谢的互联网它又是怎么保障咱们集体信息安全的呢？带着种种疑云开始肝李兵老师的《浏览器基本原理与实际》，不得不说，大家之作，通俗易懂，层层拨开云雾见青天，上面就（十分十分）简略总结一下。

线程和过程区别 ：多线程能够并行处理工作，线程不能独自存在，它是由过程来启动和治理的。一个过程是一个程序的运行实例。

线程和过程的关系 ：1、过程中任意一线程执行出错，都会导致整个过程的解体。2、线程之间共享过程中的数据。3、当一个过程敞开后，操作系统会回收过程所占用的内存。4、过程之间的内容互相隔离。

单过程浏览器 ：1、不稳固。单过程中的插件、渲染线程解体导致整个浏览器解体。2、不晦涩。脚本（死循环）或插件会使浏览器卡顿。3、不平安。插件和脚本能够获取到操作系统任意资源。

多过程浏览器 ：1、解决不稳固。过程互相隔离，一个页面或者插件解体时，影响仅仅时以后插件或者页面，不会影响到其余页面。2、解决不晦涩。脚本阻塞以后页面渲染过程，不会影响到其余页面。3、解决不平安。采纳多过程架构应用沙箱。沙箱看成时操作系统给过程上来一把锁，沙箱的程序能够运行，然而不能在硬盘上写入任何数据，也不能在敏感地位读取任何数据。

多过程架构 ：分为浏览器过程、渲染过程、GPU 过程、网络过程、插件过程。

毛病：1、资源占用高。2、体系架构简单。

面向服务架构 ：把原来的各种模块重形成独立的服务，每个服务都能够在独立的过程中运行，拜访服务必须应用定义好的接口，通过 IPC 通信，使得零碎更内聚、松耦合、易保护和拓展。

IP 头是 IP 数据包结尾的信息，蕴含 IP 版本、源 IP 地址、指标 IP 地址、生存工夫等信息；
UDP 头中除了目标端口，还有源端口号等信息；
IP 负责把数据包送达目标主机；
UDP 负责把数据包送达具体利用；
对于谬误的数据包，UDP 不提供重发机制，常识抛弃以后的包，不能保证数据的可靠性，然而传输速度十分块；
TCP 头除了蕴含了指标端口和本机端口号外，还提供了用于排序的序列号，保障了数据残缺地传输，它的连贯可分为三个阶段：建设连贯、传输数据和断开连接；

浏览器中的 HTTP 申请从发动到完结一共经验如下八个阶段：构建申请、查找缓存、筹备 IP 和端口、期待 TCP 队列、建设 TCP 连贯、发动 HTTP 申请、服务器解决申请、服务器返回申请和断开连接；
构建申请。浏览器构建申请行，构建好后，筹备发动网络申请；
查找缓存。在真正法器申请前浏览器会查问缓存中是否有申请资源正本，有则拦挡申请，返回资源正本，否则进入网络申请；
筹备 IP 地址和端口。HTTP 网络申请须要和服务器建设 TCP 连贯，而建设 TCP 连贯须要筹备 IP 地址和端口号，浏览器须要申请 DNS 返回域名对应的 IP，同时会缓存域名解析后果，供下次查问应用；
期待 TCP 队列。Chrome 机制，同一个域名同时最多只能建设 6 个 TCP 连贯；
建设 TCP 连贯。TCP 通过“三次握手”建设连贯，传输数据，“四次挥手”断开连接；
发送 HTTP 申请。建设 TCP 连贯后，浏览器就能够和服务器进行 HTTP 数据传输了，首先会向服务器发送申请行，而后以申请头模式发送一些其余信息，如果是 POST 申请还会发送申请体；
服务器解决申请。首先服务器会返回响应行，随后，服务器向浏览器发送响应头和响应体。通常服务器返回数据，就要敞开 TCP 连贯，如果申请头或者响应头有 Connection:keep-alive TCP 放弃关上状态；

用户输出 URL 并回车
浏览器过程查看 URL，组装协定，形成残缺 URL
浏览器过程通过过程通信（IPC）把 URL 申请发送给网络过程
网络过程接管到 URL 申请后查看本地缓存是否缓存了该申请资源，如果有则将该资源返回给浏览器过程
如果没有，网络过程向 web 服务器发动 http 申请（网络申请），申请流程如下：
- 进行 DNS 解析，获取服务器 IP 地址，端口
- 利用 IP 地址和服务器建设 tcp 连贯
- 构建申请头信息
- 发送申请头信息
- 服务器响应后，网络过程接管响应头和响应信息，并解析响应内容
网络过程解析响应流程：
- 查看状态码，如果是 301/302，则须要重定向，从 Location 主动读取地址，从新进行第 4 步，如果是 200，则持续解决申请
- 200 响应解决：查看响应类型 Content-Type，如果是字节流类型，则将该申请提交给下载管理器，该导航流程完结，不再进行后续渲染。如果是 html 则告诉浏览器过程筹备渲染过程进行渲染
筹备渲染过程
- 浏览器过程查看以后 URL 是否和之前关上的渲染过程根域名是否雷同，如果雷同，则复用原来的过程，如果不同，则开启新的渲染过程
传输数据、更新状态
- 渲染过程筹备好后，浏览器向渲染过程发动“提交文档”的音讯，渲染过程接管到音讯和网络过程建设传输数据的“管道”
- 渲染过程接管完数据后，向浏览器发送“确认提交”
- 浏览器过程接管到确认音讯后 engine 浏览器界面状态：平安、地址 URL、后退后退的历史状态、更新 web 页面

浏览器不能间接了解 HTML 数据，须要将其转化为 DOM 树结构；
生成 DOM 树后，依据 CSS 样式表，计算出 DOM 树所有节点款式；
创立布局树：遍历 DOM 树所有可见节点，把这些节点加到布局中，不可见节点疏忽，如 head 标签下所有内容，display: none 元素；

分层：层叠上下文属性的元素（比方定位属性元素、通明属性元素、CSS 滤镜属性元素）晋升为独自的一层，须要裁剪的中央（比方呈现滚动条）也会被创立为图层；
图层绘制：实现图层树构建后，渲染引擎会对图层树每一层进行绘制，把一个图层拆分成小的绘制指令，再把指令依照程序组成一个带绘制列表；
有些状况图层很大，一次绘制所有图层内容，开销太大，合成线程会将图层划分为图块（256×256 或者 512×512）；
合成线程将图块提交给栅格线程进行栅格化，将图块转换为位图。栅格化过程都会应用 GPU 减速，生成的位图保留周期 GPU 内存中；
一旦所有图块都被栅格化，合成线程会生成一个绘制图块命令（DrawQuad），然会将命令提交给浏览器过程，viz 组件接管到该指令，将页面内容绘制到内存中，显示在屏幕上；
重排：通过 JavaScript 或者 CSS 批改元素几何地位属性，会触发从新布局，解析前面一系列子阶段；重绘：不引起布局变换，间接进入绘制及其当前子阶段；合成：跳过布局和绘制阶段，执行的后续操作，产生在合成线程，非主线程；

JavaScript 代码在执行之前须要先编译，在编译阶段，变量和函数会被寄存到变量环境中，变量默认值会被设置为 undefined；
在代码执行阶段，JavaScript 引擎会从变量环境中查找自定义的变量和函数；
如果在编译阶段，窜爱两个雷同的函数，那么最终放在变量环境中的是最初定义的那个，后定义的笼罩先定义的；

每调用一个函数，JavaScript 引擎会为其创立执行上下文压入调用栈，而后，JavaScript 引擎开始执行函数代码。
如果一个函数 A 调用另外一个函数 B，那么 JavaScript 引擎会为 B 函数创立执行上下文，并将 B 函数的执行上下文压入栈顶。
以后函数执行结束后，JavaScript 引擎会将该函数的执行上下文弹出栈。
当调配的调用栈空间被占满时，会引发“堆栈溢出”问题。

let、const 申明的变量不会被晋升。在 javascript 引擎编译后，会保留在词法环境中。
块级作用域在代码执行时，将 let、const 变量寄存在词法环境的一个独自的区域。词法环境外部保护一个小型的栈构造，作用域外部变量压入栈顶。作用域执行完，从栈顶弹出。

应用一个变量，JavaScript 引擎会在以后的执行上下文中查找变量，如果没有找到，会持续在 outer（执行环境指向内部执行上下文的援用）所指向的执行上下文中查找；
JavaScript 执行过程，作用域链是由词法作用域决定，而词法作用域是由代码中函数申明的地位决定；
依据词法作用域的规定，外部函数总是能够拜访其内部函数中申明的变量，当通过调用一个内部函数返回一个外部函数后，即便内部函数曾经执行完结了，然而外部函数援用内部函数的变量仍旧保留在内存中，把这些变量的汇合称为闭包；

当执行 new CreateObj 的时候，JavaScript 引擎做了四件事：

首先创立一个控对象 tempObj；
接着调用 CreateObj.call 办法，并将 tempObj 作为 call 办法的参数，这样当 createObj 的执行上下文创立时，它的 this 就指向 tempObj 对象；
而后执行 CreateObj 函数，此时的 CreateObj 函数执行上下文中的 this 指向 tempObj 对象；
最初返回 tempObj 对象。

this 的应用分为：

当函数最为对象的办法调用时，函数中的 this 就是该对象；
当函数被失常调用时，在严格模式下，this 值是 undefined，非严格模式下 this 指向的是全局对象 window；
嵌套函数中的 this 不会继承外层函数的 this 值；
箭头函数没有本人的执行上下文，this 是外层函数的 this。

动静语言：在应用时须要查看数据类型的语言。
弱类型语言：反对隐式转换的语言。

JavaScript 中的 8 种数据类型，它们能够分为两大类——原始类型和援用类型。
原始类型数据寄存在栈中，援用类型数据寄存在堆中。堆中的数据是通过援用与变量关系分割起来的。

从内存视角理解闭包：词法扫描外部函数，援用了内部函数变量，堆空间创立一个“closure”对象，保留变量。

栈中数据回收：执行状态指针 ESP 在执行栈中挪动，移过某执行上下文，就会被销毁；
堆中数据回收：V8 引擎采纳标记 - 革除算法；
V8 把堆分为两个区域——新生代和老生代，别离应用副、主垃圾回收器；
副垃圾回收器负责新生代垃圾回收，小对象（1 ～ 8M）会被调配到该区域解决；
新生代采纳 scavenge 算法解决：将新生代空间分为两半，一半闲暇，一半存对象，对对象区域做标记，存活对象复制排列到闲暇区域，没有内存碎片，实现后，清理对象区域，角色反转；
新生代区域两次垃圾回收还存活的对象降职至老生代区域；
主垃圾回收器负责老生区垃圾回收，大对象，存活工夫长；
新生代区域采纳标记 - 革除算法回收垃圾：从根元素开始，递归，可达到的元素流动元素，否则是垃圾数据；
为了不造成卡顿，标记过程被切分为一个个子标记，交替进行。

计算机语言能够分为两种：编译型和解释型语言。编译型语言通过编译器编译后保留机器能读懂的二进制文件，比方 C/C++，go 语言。解释型语言是在程序运行时通过解释器对程序进行动静解释和执行，比方 Python，JavaScript 语言。
编译型语言的编译过程：编译器首先将代码进行词法剖析、语法分析，生成形象语法树（AST），而后优化代码，最初生成处理器可能了解的机器码；
解释型语言解释过程：解释器会对代码进行词法剖析、语法分析，并生产形象语法树（AST），不过它会再基于形象语法树生成字节码，最初依据字节码执行程序；
AST 的生成：第一阶段是分词（词法剖析），将一行行源码拆解成一个个 token（语法上不可再分、最小单个字符）。第二阶段是解析（语法分析），将上一步生成的 token 数据，依据语法规定转为 AST，这一阶段会查看语法错误；
字节码存在的意义：间接将 AST 转化为机器码，执行效率是十分高，然而耗费大量内存，从而先转化为字节码解决内存问题；
解释器 ignition 在解释执行字节码，同时会手机代码信息，发现某一部分代码是热点代码（HotSpot），编译器把热点的字节码转化为机器码，并保存起来，下次应用；
字节码配合解释器和编译器的计数实现称为即时编译（JIT）。

每个渲染过程都有一个主线程，主线程会解决 DOM，计算款式，解决布局，JavaScript 工作以及各种输出事件；
保护一个音讯队列，新工作（比方 IO 线程）增加到音讯队列尾部，主线程循环地从音讯队列头部读取工作，执行工作；
解决解决优先级高的工作：音讯队列的中的工作称为宏工作，每个宏工作中都会蕴含一个微工作队列，在执行宏工作的过程中，如果 DOM 有变动，将该变动增加到微工作队列中；
解决单个工作执行时长过久：JavaScript 通过回调性能来躲避。

JavaScript 调用 setTimeout 设置回调函数的时候，渲染过程会创立一个回调工作，延时执行队列寄存定时器工作；
当定时器工作到期，就会从延时队列中取出并执行；
如果当前任务执行工夫过久，会影响延时到期定时器工作的执行；
如果 setTimeout 存在嵌套调用（5 次以上），判断该函数办法被阻塞，那么零碎会设置最短时间距离为 4 秒；
未激活的页面，setTimeout 执行最小距离是 1000 毫秒，目标是为了升高加载损耗；
延时执行工夫最大值是 24.8 天，因为延时值是以 32 个 bit 存储的；
setTimeout 设置的回调函数中的 this 指向全局 window。

XMLHttpRequest onreadystatechange 解决流程：未初始化 -> OPENED -> HEADERS_RECEIVED -> LOADING -> DONE；
渲染过程会将申请发送给网络过程，而后网络过程负责资源下载，等网络过程接管到数据后，利用 IPC 告诉渲染过程；
渲染过程接管到音讯之后，会将 xhr 回调函数封装成工作并增加到音讯队列中，等主线程循环系统执行到该工作的时候，会依据相干状态来调用回调函数。

音讯队列中的工作为宏工作。渲染过程外部会保护多个音讯队列，比方延时执行队列和一般音讯队列，主线程采纳 for 循环，一直地从这些工作队列中取出工作并执行；
微工作是一个须要异步执行的函数，执行机会是在主函数执行完结之后、以后宏工作完结之前；
V8 在执行 javascript 脚本时，会为其创立一个全局执行上下文，同时会创立一个微工作队列；
执行微工作过程中产生的微工作不会推延到下个宏工作中执行，而是在以后宏工作中继续执行；

应用 Promise 解决了回调天堂问题，毁灭嵌套和屡次解决；
模仿实现 Promise

function Bromise(executor) {
  var _onResolve = null
  this.then = function (onResolve) {_onResolve = onResolve}
  function resolve(value) {setTimeout(() => {_onResolve(value)
    }, 0)
  }
  executor(resolve, null)
}

生成器函数是一个带星号函数，而且是能够暂停执行和回复执行的；
生成器函数外部执行一段代码，遇到 yield 关键字，javascript 引擎返回关键字前面的内容给内部，并且暂停该函数的执行；
内部函数能够同步 next 办法复原函数的执行；
协程是一种比线程更加轻量级的存在，协程能够看成是跑在线程上的工作，一个线程能够存在多个协程，然而同时只能执行一个协程，如果 A 协程启动 B 协程，A 为 B 的父协程；
协程不被操作协同内核所治理，而齐全由程序所管制，这样性能晋升；
await xxx 会创立一个 Promise 对象，将 xxx 工作提交给微工作队列；
暂停以后协程的执行，将主线程的管制势力转交给父协程执行，同时将 Promise 对象返回给父协程，继续执行父协程；
父协程执行完结之前会查看微工作队列，微工作队列中有 resolve(xxx) 期待执行，触发 then 的回调函数；
回调函数被激活后，会将主线程的控制权交给协程，继续执行后续语句，实现后将控制权还给父协程。

Chrome 开发者工具（简称 DevTools）是一组网页制作和调试的工具，内嵌于 Google Chrome 浏览器中。它一共蕴含了 10 个性能面板，包含了 Elements、Console、Sources、NetWork、Performance、Memory、Application、Security、Audits 和 Layers。

HTML 解析器（HTMLParse）负责将 HTML 字节流转换为 DOM 构造；
HTML 解析器并不是等整个文档加载实现之后再解析，而是网络过程加载流多少数据，便解析多少数据；
字节流转换成 DOM 三个阶段：1、字节流转换为 Token；2、保护一个 Token 栈，遇到 StartTag Token 入栈，遇到 EndTag Token 出栈；3、为每个 Token 创立一个 DOM 节点；
JavaScript 文件和 CSS 样式表文件都会阻塞 DOM 解析；

DOM 构建完结之后，css 文件还未下载实现，渲染流水线闲暇，因为下一步是合成布局树，合成布局树须要 CSSOM 和 DOM，这里须要期待 CSS 加载完结并解析成 CSSOM；
CSSOM 两个作用：提供给 JavaScript 操作样式表能力，为布局树的合成提供根底款式信息；
在执行 JavaScript 脚本之前，如果页面中蕴含了内部 CSS 文件的援用，或者通过 style 标签内置了 CSS 内容，那么渲染引擎还须要将这些内容转化为 CSSOM，因为 JavaScript 有批改 CSSOM 的能力，所以在执行 JavaScript 之前，还须要依赖 CSSOM。也就是说 CSS 在局部状况下也会阻塞 DOM 的生成。

显示器固定刷新频率是 60HZ，即每秒更新 60 张图片，图片来自显卡的前缓冲区；
显卡的职责是合成新的图像，保留在后缓冲区，而后后缓冲区和前缓冲区调换，显卡更新频率和显示前刷新频率不统一，就会造成视觉上的卡顿；
渲染流水线生成的每一副图片称为一帧，生成一帧的形式有重排、重绘和合成三种；
重排会依据 CSSOM 和 DOM 计算布局树，重绘没有从新布局阶段；
生成布局树之后，渲染引擎依据布局树特点转化为层树，每一层解析出绘制列表；
栅格线程依据绘制列表中的指令生成图片，每一层对应一张图片，合成线程将这些图片合成一张图片，发送到后缓存区；
合成线程会将每个图层宰割成大小固定的图块，优先绘制凑近视口的图块；

加载阶段：缩小要害资源个数，升高要害资源大小，升高要害资源的 RTT 次数；
交互阶段：缩小 JavaScript 脚本执行工夫，防止强制同步布局：操作 DOM 的同时获取布局款式会引发，防止布局抖动：屡次执行强制布局和抖动，正当利用 CSS 合成动画：标记 will-change，防止频繁的垃圾回收；
CSS 实现一些变形、突变、动画等特效，这是由 CSS 触发的，并且是在合成线程中执行，这个过程称为合成，它不会触发重排或者重绘；

当有数据更新时，React 会生产一个新的虚构 DOM，然会拿新的虚构 DOM 和之前的虚构 DOM 进行比拟，这个过程找出变动的节点，而后将变动的节点利用到 DOM 上；
最开始的时候，比拟两个 DOM 的过程是在一个递归函数里执行的，其外围算法是 reconciliation。通常状况，这个比拟过程执行很快，不过虚构 DOM 比较复杂时，执行比拟函数可能占据主线程比拟久的工夫，这样会导致其余工作的期待，造成页面卡顿。React 团队重写了 reconciliation 算法，称为 Fiber reconciler，之前老的算法称为 Stack reconciler；

PWA（Progressive Web App），渐进式 Web 利用。一个渐进式过渡计划，让一般站点过渡到 Web 利用，升高站点革新代价，逐步反对新技术，而不是一步到位；
PWA 引入 ServiceWorker 来试着解决离线存储和音讯推送问题，引入 mainfest.json 来解决一级入口问题；
暗转了 ServiceWorker 模块之后，WebApp 申请资源时，会先通过 ServiceWorker，让它判断是返回 Serviceworker 缓存的资源还是从新去网络申请资源，所有的控制权交给 ServiceWorker 来解决；
在目前的 Chrome 架构中，Service Worker 是运行在浏览器过程中的，因为浏览器过程生命周期是最长的，所以在浏览器的生命周期内，可能为所有的页面提供服务；

CSS 的全局属性会妨碍组件化，DOM 也是妨碍组件化的一个因素，因为页面中只有一个 DOM，任何中央都能够间接读取和批改 DOM；
WebComponent 提供了对部分试图封装能力，能够让 DOM、CSSOM 和 JavaScript 运行在部分环境中；
template 创立模版，查找模版内容，创立影子 DOM，模版增加到影子 DOM 上；
影子 DOM 能够隔离全局 CSS 和 DOM，然而 JavaScript 是不会被隔离的；

HTTP/0.9 基于 TCP 协定，三次握手建设连贯，发送一个 GET 申请行（没有申请头和申请体），服务器接管申请之后，读取对应 HTML 文件，数据以 ASCII 字符流返回，传输实现断开连接；
HTTP/1.0 减少申请头和响应头来进行协商，在发动申请时通过申请头通知服务器它期待返回什么类型问题、什么模式压缩、什么语言以及文件编码。引入来状态吗，Cache 机制等；
HTTP/1.1 改良长久化连贯，解决建设 TCP 连贯、传输数据和断开连接带来的大量开销，反对在一个 TCP 连贯上能够传输多个 HTTP 申请，目前浏览器对于一个域名同时容许建设 6 个 TCP 长久连贯；
HTTP/1.1 引入 Chunk transfer 反对动静生成内容：服务器将数据宰割成若干任意大小的数据块，每个数据块发送时附上上个数据块的长度，最初应用一个零长度的块作为发送数据实现的标记。在 HTTP/1.1 须要在响应头中设置残缺的数据大小，如 Content-Length。

HTTP/1.1 次要问题：TCP 慢启动；同时开启多条 TCP 连贯，会竞争固定宽带；对头阻塞问题；
HTTP/2 在一个域名下只应用一个 TCP 长连贯和打消对头阻塞问题；
多路复用的实现：HTTP/2 增加了二进制分帧层，将发送或响应数据通过二进制分帧解决，转化为一个个带有申请 ID 编号的帧，服务器或者浏览器接管到响应帧后，依据雷同 ID 帧合并为一条残缺信息；
设置申请优先级：发送申请能够设置申请优先级，服务器能够优先解决；
服务器推送：申请一个 HTML 页面，服务器能够晓得援用了哪些 JavaScript 和 CSS 文件，附带一起发送给浏览器；
头部压缩：对申请头和响应头进行压缩；

尽管 HTTP/2 解决了利用层面的对头阻塞问题，不过和 HTTP/1.1 一样，HTTP/2 仍然是基于 TCP 协定，而 TCP 最后是为了单连贯而设计；
TCP 能够看成是计算机之间的一个虚构管道，数据从一端发送到另一端会被拆分为一个个依照顺序排列的数据包，如果在传输过程中，有一个数据因为网络故障或者其余起因失落，那么整个连贯会处于暂停状态，只有等到该数据从新传输；
因为 TCP 协定僵化，也不可能应用新的协定，HTTP/3 抉择了一个折衷的办法，基于现有的 UDP 协定，实现相似 TC 片多路复用，传输牢靠等性能，称为 QULC 协定；
QULC 实现相似 TCP 流量管制，传输牢靠性能；集成 TLS 加密性能；实现多路复用性能；

协定、域名和端口号雷同的 URL 是同源的；
同源策略会隔离不同源的 DOM、页面数据和网络通信；
页面能够援用第三方资源，不过暴露出诸如 XSS 问题，引入内容安全策略 CSP 限度；
默认 XMLHttpRequest 和 Fetch 不能跨站申请资源，引入跨域资源共享（CORS）进行跨域访问控制；

XSS 跨站脚本，往 HTML 文件中注入恶意代码，对用户施行攻打；
XSS 攻打次要有存储型 XSS 攻打、反射型 XSS 攻打和 DOM 的 XSS 攻打；
阻止 XSS 攻打：服务器对脚本进行过滤或转码，利用 CSP 策略，应用 HttpOnly；

CSRF 跨站申请伪造，利用用户的登录状态，通过第三方站点攻打；
防止 CSRF 攻打：利用 SameSite（三种模式：Strict、Lax、None）让浏览器禁止第三方站点发动申请携带要害 Cookie；验证申请的起源站点，申请头中的 Referer 和 Origin 属性；利用 CSRF Token；

浏览器被划分为浏览器内核和渲染内核两个外围模块，其中浏览器内核石油网络过程、浏览器主过程和 GPU 过程组成的，渲染内核就是渲染过程；
浏览器中的平安沙箱是利用操作系统提供的平安技术，让渲染过程在执行过程中无法访问或者批改操作系统中的数据，在渲染过程须要拜访系统资源的时候，须要通过浏览器内核来实现，而后将拜访的后果通过 IPC 转发给渲染过程；
站点隔离（Site Isolation）将同一站点（蕴含雷同根域名和雷同协定的地址）中互相关联的页面放到同一个渲染过程中执行；
实现站点隔离，就能够将歹意的 iframe 隔离在歹意过程外部，使得它无奈持续拜访其余 iframe 过程的内容，因而无奈攻打其余站点；

在 TCP 和 HTTP 之间插入一个平安层，所有通过平安层的数据都会被加密或者解密；
对称加密：浏览器发送加密套件列表和一个随机数 client-random，服务器会从加密套件中选取一个加密套件，而后生成一个随机数 service-random，返回给浏览器。这样浏览器和服务器都有雷同 client-random 和 service-random，再用雷同的办法将两者混合生成一个密钥 master secret，单方就能够进行数据加密传输了；
对称加密毛病：client-random 和 service-random 的过程都是明文，黑客能够拿到协商的加密套件和单方随机数，生成密钥，数据能够被破解；
非对称加密：浏览器发送加密套件列表给服务器，服务器抉择一个加密套件，返回加密套件和公钥，浏览器用公钥加密数据，服务器用私钥解密；
非对称加密毛病：加密效率太低，不能保障服务器发送给浏览器的数据安全，黑客能够获取公钥；
对称加密联合非对称加密：浏览器发送对称加密套件列表、非对称加密列表和随机数 client-random 给服务器，服务器生成随机数 service-random，抉择加密套件和公钥返回给浏览器，浏览器利用 client-random 和 service-random 计算出 pre-master，而后利用公钥给 pre-master 加密，向服务器发送加密后的数据，服务器用私钥解密出 pre-master 数据，联合 client-random 和 service-random 生成对称密钥，应用对称密钥传输加密数据；
引入数字证书是为了证实“我就是我”，避免 DNS 被劫持，伪造服务器；
证书的作用：一个是向浏览器证实服务器的身份，另一个是蕴含服务器公钥；
数字签名过程：CA 应用 Hash 函数技术明文信息，得出信息摘要，而后 CA 应用私钥对信息摘要进行加密，加密后的秘文就是数字签名；
验证数字签名：读取证书明文信息，应用雷同 Hash 函数计算失去信息摘要 A，再利用 CA 的公钥解密失去 B，比照 A 和 B，如果统一，则确认证书非法；

关于前端:肝完浏览器基本原理与实践我总结了这些

前言

Chrome 架构：仅仅关上了 1 个页面，为什么有 4 个过程

TCP 协定：如何保障页面文件能被残缺送达浏览器

HTTP 申请流程：为什么很多站点第二次关上速度会很快

导航流程：从输出 URL 到页面展现这两头产生了什么

渲染流程（上）：HTML、CSS 和 JavaScript 是如何变成页面的

渲染流程（下）：HTML、CSS 和 JavaScript 是如何变成页面的

变量晋升：javascript 代码是按程序执行的吗

调用栈：为什么 JavaScript 代码会呈现栈溢出

块级作用域：var 缺点以及为什么要引入 let 和 const

作用域链和闭包：代码中呈现雷同的变量，JavaScript 引擎如何抉择

this：从 JavaScript 执行上下文视角讲 this

栈空间和堆空间：数据是如何存储的

垃圾回收：垃圾数据如何主动回收

编译器和解析器：V8 如何执行一段 JavaScript 代码的

音讯队列和事件循环：页面是怎么活起来的

webapi：setTimeout 是怎么实现的

webpai：XMLHttpRequest 是怎么实现的

宏工作和微工作：不是所有的工作都是一个待遇

应用 Promise 辞别回调函数

async await 应用同步形式写异步代码

页面性能剖析：利用 chrome 做 web 性能剖析

DOM 树：JavaScript 是如何影响 DOM 树构建的

渲染流水线：CSS 如何影响首次加载时的白屏工夫？

分层和合成机制：为什么 CSS 动画比 JavaScript 高效

页面性能：如何系统优化页面

虚构 DOM：虚构 DOM 和实在 DOM 有何不同

PWA：解决 web 利用哪些问题

WebComponent：像搭积木一样构建 web 利用

HTTP1：HTTP1 性能优化

HTTP2：如何晋升网络速度

HTTP3：甩掉 TCP、TCL 包袱，构建高效网络

同源策略：为什么 XMLHttpRequst 不能跨域申请

跨站脚本攻打 XSS：为什么 cookie 中有 httpOnly 属性

CSRF 攻打：生疏连贯不要轻易点

沙盒：页面和零碎之间的隔离墙

HTTPS：让数据传输更平安