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

前言

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

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

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

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

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

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

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

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

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

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

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

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

• 浏览器中的 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，组装协定，形成残缺 URL
• 浏览器过程通过过程通信（IPC）把 URL 申请发送给网络过程
• 网络过程接管到 URL 申请后查看本地缓存是否缓存了该申请资源，如果有则将该资源返回给浏览器过程

• 如果没有，网络过程向 web 服务器发动 http 申请（网络申请），申请流程如下：

  • 进行 DNS 解析，获取服务器 IP 地址，端口
  • 利用 IP 地址和服务器建设 tcp 连贯
  • 构建申请头信息
  • 发送申请头信息
  • 服务器响应后，网络过程接管响应头和响应信息，并解析响应内容

• 网络过程解析响应流程：

  • 查看状态码，如果是 301/302，则须要重定向，从 Location 主动读取地址，从新进行第 4 步，如果是 200，则持续解决申请
  • 200 响应解决：查看响应类型 Content-Type，如果是字节流类型，则将该申请提交给下载管理器，该导航流程完结，不再进行后续渲染。如果是 html 则告诉浏览器过程筹备渲染过程进行渲染

• 筹备渲染过程

  • 浏览器过程查看以后 URL 是否和之前关上的渲染过程根域名是否雷同，如果雷同，则复用原来的过程，如果不同，则开启新的渲染过程

• 传输数据、更新状态

  • 渲染过程筹备好后，浏览器向渲染过程发动“提交文档”的音讯，渲染过程接管到音讯和网络过程建设传输数据的“管道”
  • 渲染过程接管完数据后，向浏览器发送“确认提交”
  • 浏览器过程接管到确认音讯后 engine 浏览器界面状态：平安、地址 URL、后退后退的历史状态、更新 web 页面

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

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

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

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

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

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

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

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

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

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

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

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

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

当执行 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 算法解决：将新生代空间分为两半，一半闲暇，一半存对象，对对象区域做标记，存活对象复制排列到闲暇区域，没有内存碎片，实现后，清理对象区域，角色反转；
• 新生代区域两次垃圾回收还存活的对象降职至老生代区域；
• 主垃圾回收器负责老生区垃圾回收，大对象，存活工夫长；
• 新生代区域采纳标记 - 革除算法回收垃圾：从根元素开始，递归，可达到的元素流动元素，否则是垃圾数据；
• 为了不造成卡顿，标记过程被切分为一个个子标记，交替进行。

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

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

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

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

webapi：setTimeout 是怎么实现的

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

webpai：XMLHttpRequest 是怎么实现的

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

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

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

应用 Promise 辞别回调函数

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

PWA：解决 web 利用哪些问题

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

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

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

HTTP1：HTTP1 性能优化

• 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。

HTTP2：如何晋升网络速度

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

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

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

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

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

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

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

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

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

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

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

HTTPS：让数据传输更平安

• 在 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，如果统一，则确认证书非法；