浏览器相关知识大概可以分为以下几类，浏览器组成；浏览器安全；进程线程；浏览器渲染；浏览器本地存储；浏览器同源策略等。本文就上述几个方向总结一下相关知识点。

浏览器组成

浏览器的主要功能是将用户选择的 web 资源呈现出来，从服务器请求资源，并显示在浏览器窗口中，资源的格式通常是 HTML。用户用 URI（Uniform Resource Identifier 统一资源标识符）来指定所请求资源的位置。

浏览器可以分为两部分，shell 和内核。

shell:例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。

内核:是浏览器的核心。内核是基于标记语言显示内容的程序或模块。

内核应该是我们要了解的重点，内核包括渲染引擎和JS引擎

渲染引擎作用就是渲染，即在浏览器窗口中显示所请求的内容。如html，xml，图片等内容

JS引擎则是用来解析和执行 javascript 来实现网页的动态效果。、

本人使用的几种浏览器的内核（只作了解，不展开详细描述）

Trident：：是 IE 浏览器用的内核，
Gecko： 是 Firefox采用的内核，
Webkit： 是 Safari 采用的内核，
Chrome 浏览器：以前是 Webkit 内核，现在是 Blink内核；

浏览器安全

XSS 攻击

XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、VBScript、ActiveX、 Flash 或者甚至是普通的HTML。

XSS 的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行。

攻击者可以通过这种攻击方式可以进行以下操作：

获取页面的数据，如DOM、cookie、localStorage；
DOS攻击，发送合理请求，占用服务器资源，从而使用户无法访问服务器；
破坏页面结构；
流量劫持（将链接指向某网站）；

XSS 可以分为存储型、反射型和 DOM 型：

存储型指的是恶意脚本会存储在目标服务器上，当浏览器请求数据时，脚本从服务器传回并执行。
反射型指的是攻击者诱导用户访问一个带有恶意代码的 URL 后，服务器端接收数据后处理，然后把带有恶意代码的数据发送到浏览器端，浏览器端解析这段带有 XSS 代码的数据后当做脚本执行，最终完成 XSS 攻击。
DOM 型指的通过修改页面的 DOM 节点形成的 XSS。

反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库⾥，反射型 XSS 的恶意代码存在 URL ⾥。

DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执⾏恶意代码由浏览器端完成，属于前端JavaScript ⾃身的安全漏洞，⽽其他两种 XSS 都属于服务端的安全漏洞。

如何防御 XSS

从浏览器的执行来进行预防，使用纯前端的方式，不用服务器端拼接后返回（不使用服务端渲染）。
使用 CSP ，CSP 的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行，从而防止恶意代码的注入攻击。

CSRF 攻击

CSRF 攻击指的是跨站请求伪造攻击，通过诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。

CSRF 攻击的本质是利用 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。

常见的 CSRF 攻击

GET 类型，比如在网站中的一个 img 标签里构建一个请求，当用户打开这个网站的时候就会自动发起提交。
POST 类型，比如构建一个表单，然后隐藏它，当用户进入页面时，自动提交这个表单。
链接类型，比如在 a 标签的 href 属性里构建一个请求，然后诱导用户去点击。

如何防御

针对攻击类型进行防御

进行同源检测
使用 CSRF Token 进行验证，
在设置 cookie 属性的时候设置 Samesite ，限制 cookie 不能作为被第三方使用，

网络劫持

⽹络劫持分为两种:

（1）DNS劫持: (输⼊淘宝被强制跳转到淘京东) : 通过修改运营商的本地DNS记录，来引导⽤户流量到缓存服务器，涉嫌违法

（2）HTTP劫持: (访问⾕歌但是⼀直有贪玩蓝⽉的⼴告),由于http明⽂传输,运营商会修改http响应内容(即加⼴告)。最有效的办法就是全站HTTPS，将HTTP加密，这使得运营商⽆法获取明⽂，就⽆法劫持响应内容。

进程和线程

进程

一个在内存中运行的应用程序。每个进程都有自己独立的一块内存空间，一个进程可以有多个线程，比如在Windows系统中，一个运行的exe就是一个进程。

线程

进程中的一个执行任务（控制单元），负责当前进程中程序的执行。一个进程至少有一个线程，一个进程可以运行多个线程，多个线程可共享数据。

打开一个网页，最少需要四个进程：1 个网络进程、1 个浏览器进程、1 个 GPU 进程以及 1 个渲染进程。如果打开的页面有运行插件的话，还需要再加上 1 个插件进程。

进程与线程的区别总结（重点知识）

根本区别：进程是操作系统资源分配的基本单位，线程是处理器任务调度和执行的基本单位

资源开销：每个进程都有独立的代码和数据空间（程序上下文），程序之间的切换开销大；线程可以看做轻量级的进程，同一类线程共享代码和数据空间，线程之间切换开销小。

包含关系：如果一个进程内有多个线程，则执行过程不是一条线的，而是多条线（线程）共同完成的；线程是进程的一部分。

内存分配：同一进程的线程共享本进程的地址空间和资源，而进程之间的地址空间和资源是相互独立的

影响关系：一个进程崩溃后，在保护模式下不会对其他进程产生影响，但是一个线程崩溃整个进程都死掉。所以多进程要比多线程健壮。

执行过程：每个独立的进程有程序运行的入口、顺序执行序列和程序出口。但是线程不能独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制，两者均可并发执行。

浏览器渲染（重点知识）

浏览器渲染的过程主要包括以下五步：

浏览器将获取的HTML文档解析成DOM树。
对 CSS 进行解析，生成 CSSOM 规则树。
将DOM和CSSOM合并为渲染树(rendering tree)，代表一系列将被渲染的对象。
当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
将渲染树的各个节点绘制到屏幕上，这一步被称为绘制(painting)。

渲染引擎将会尽可能早的将内容呈现到屏幕上，不会等到所有的html 都解析完成之后再去构建和布局 render 树。解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

重绘和回流

浏览器渲染优化

之前的文章中有系统的总结过

浏览器本地存储

浏览器本地存储方式以及它们之前的对比

之前有总结过：Cookie、localStorage、sessionStorage

浏览器同源策略

这部分主要是关于同源策略以及跨域相关知识点，之前也有总结过，同源策略及跨域

浏览器相关的一些基础知识点