浏览器工作原理与实践（八） javascript

单进程架构的浏览器是不稳定的，只要任意一个如页面卡死、浏览器崩溃都会影响整个浏览器。
浏览器本身的漏洞也是单进程浏览器的一个问题。如果漏洞没有修复，黑客可以通过恶意页面向浏览器注入恶意程序，比如利用缓冲区溢出。
XSS攻击只是将恶意的JS注入到页面中，虽然可以窃取cookie数据，但无法对操作系统进行攻击。
浏览器漏洞的攻击是可以入侵浏览器进程内部的，可以读取和修改浏览器进程内部的任意内容，还可以穿透浏览器。在操作系统上安装恶意软件，监听用户键盘输入信息及读取硬盘上的内容，所有资料都不安全了。
现代浏览器采用了多进程架构，将渲染进程和浏览器主进程做了分离。主要分为浏览器内核(网络进程、主进程、GPU进程)和渲染内核(渲染进程)2个核心模块。

文章图片

网络资源通过浏览器内核来下载，下载后资源通过IPC交给渲染进程(浏览器内核和渲染进程之间都是通过IPC来通信的)，然后渲染进程会对这些资源进行解析，绘制等最终成一幅图片。但渲染进程不负责将图片显示到界面上，而是将生成的图片给浏览器内核模块，由浏览器内核负责显示这张图片。
由于渲染进程需要执行DOM解析、CSS解析、网络图片解码等操作，如果渲染进程中存在系统级的漏洞，那么以上操作就有可能让恶意的站点获取到渲染进程的控制权限，进而又获取到操作系统的控制权，对用户来说是非常危险的。
如果下载了一个恶意程序，没有执行，它是不会生效的。因此需要在渲染进程和操作系统中间建一道墙。即使渲染进程有漏洞，但有墙，黑客也获取不到渲染进程之外的任何操作权限。渲染进程和操作系统隔离的这道墙叫做安全沙箱。
浏览器的安全沙箱是利用操作系统提供的安全技术。让渲染进程在执行过程中无法访问或者修改操作系统的数据。在渲染进程要访问资源时，要通过浏览器内核来实现，然后访问结果通过IPC发给渲染进程。
渲染进程：HTML解析、CSS解析、图片解码、JS执行、布局、绘制、XML解析。
浏览器内核：cookie存储、cache存储、网络请求、文件读取、下载管理、SSL/TSC、浏览器字窗口管理。
渲染进程需要沙箱的保护，它没有读写系统的功能(读写本地文件、发起请求、调用GPU接口)，因此涉及和系统交互的功能都转移到浏览器内核去实现。
HTTP传输数据是明文的。在将数据提交给TCP层之后，数据会经过用户电脑、wifi路由器、运营商和目标服务器等环节，每个环节数据都有可能被窃取、伪造和篡改。如用户电脑被装了恶意软件，或用户不小心连了wifi钓鱼路由器。
由于HTTP的明文传输不安全，且制约了网上购物、在线转账等。于是引入了加密方案，就是在TCP和HTTP之间加安全层(SSL/TLS)，经过安全层的数据都会被加密或解密。对发起HTTP请求进行加密，对收到HTTP内容进行解密。

对称加密：加密和解密都是用一样的密钥。https要先让浏览器和服务器协商加密方式和密钥。
浏览器发给支持的加密套件列表和一个随机数client-random，服务器从加密套件选一个+随机数server-random给浏览器，双方返回确认消息。然后他们将client-random和server-random混合生成密钥master server。就可以进行加密传输了。
不过由于传client-random和server-random的过程是明文的，合成密钥算法是公开的，数据依然可以被破解。
非对称加密：算法有A、B 2把密钥，用A加密只能用B解密，反之一样。服务器会将密钥通过明文发给浏览器(公钥)，服务器留下的叫密钥。

文章图片

服务器上有给浏览器加密的公钥和解密http数据的私钥。
公钥加密的数据只有私钥才能解密，即使截了公钥和数据也解不了密。
1.效率低，影响加解密速度，也影响打开页面速度。
2.无法保证服务器给的数据安全，浏览器可以用公钥加密，但服务器只能用私钥加密。
私钥加密只有公钥能解密，但黑客也可以拿到公钥，可以解服务器传输数据。
3.对称非对称搭配使用，传输数据使用对称加密，对称加密的密钥使用非对称加密来传输。
(1).浏览器向服务器发送对称加密套件列表，非对称加密套件列表和client-random随机数。
(2).服务器保存client-random，选择对称加密和非对称加密套件生成server-random+公钥发给浏览器。
(3).浏览器保存公钥，生成pre-master随机数，用公钥对pre-master加密发送服务器。
(4).服务器用私钥解密pre-master返回确认消息，然后浏览器和服务器通过client-random，server-random，pre-master通过相同方法生成对称密钥。
pre-master是通过公钥加密传输的，黑客无法获取pre-master也无法生成密钥，无法破解数据。
添加数字证书

黑客有可能会把官网IP地址的DNS劫持换成黑客的IP，那我们访问的就是黑客的服务器了。黑客自己实现公钥私钥，要证明服务器是要访问的服务器，就需要权威机构颁发的(CA)颁发的证书(数字证书)
数字证书：向浏览器证明服务器身份。包含了服务器公钥。
【浏览器工作原理与实践（八）】JS作为一门高级语言，代码给到浏览器或nodejs时是不能被底层CPU执行的，就需要通过JS虚拟机来实现代码编译和执行。V8最为广泛，采用了即时编译(JIT)的双轮驱动设计，混合了编译执行和解释执行2种方式。
共用同一渲染进程情况：同一站点(根域名、协议一样)、同一浏览上下文(A从B打开，window.opener证明)。noopener和noreferren断开联系。
渲染进程内部大多数任务都是在主线程上执行的，如JS执行、DOM、CSS、计算布局、V8垃圾回收等，能让这些任务在主线程有条不紊运行就要引入消息队列。在单消息队列下，任务需要花费时间过久的话，就会产生卡顿的感觉。
chromium目前采取的任务高度。
加载阶段：默认——>用户交互——>合成页面——>空闲：尽可能看到页面，页面解析，JS优先级最高
用户交互：用户交互——>合成页面——>默认——>空闲
空闲阶段：默认，用户交互——>空闲——>合成页面
显卡中有一块叫前缓冲区的地方，显示器会每间隔1/60秒就读取一次前缓冲区，如果浏览器要更新显示的图片，浏览器会将新生成图片提到显卡的后缓冲区，提完之后，GPU将后、前缓冲区互换位置，就保证了显示器读取最新，但显示器读取图片和浏览器生成图片不一定都同步的，不同步会造成掉帧、卡顿、不连贯问题
当显示器将一帧画面绘制完成后，并主任务读取下一帧之前，显示器会发一个垂直同步信号给GPU，简称vsync，当GPU接收vsync信号后，会将vsync信号同步给浏览器进程，浏览器进程将其同步到对应渲染进程，准备绘新一帧。
当可设置当执行交互的将渲接收用户交互任务绘制合成操作的任务优先级调到最高。
处理完DOM，计算好布局和绘制，就要将合成线程合成最终图了，合成线程在工作时，就可以把下个合成任务优先级调最低。页面解析定时器等任务优先级提升，如果合成操作非常快，那就有空闲时间了，可以执行如V8垃圾回收，window,requestIdleCallback()等回调任务。
还给每个队列设置了执行权重，连续执行了一定个数的高优先级任务，中间会执行一次低优先级任务
一条完整的流水线：解析HTML文件生成DOM、解析CSS生成CSSOM、执行JS、样式计算、构造布局树、准备绘制列表、光栅化、合成显示等一系列操作。