浏览器相关知识3

内容整理来自极客时间李兵老师所讲专栏《浏览器工作原理与实践》
极客时间

• css是如何影响首次白屏时间的？

解析HTML -》下载css -》下载js -》生成cssom -》执行js -》生成布局树 -》绘制页面

1. 通过内联 JavaScript、内联 CSS 来移除这两种类型的文件下载，这样获取到 HTML 文件之后就可以直接开始渲染流程了。
2. 对于大的 CSS 文件，可以通过媒体查询属性，将其拆分为多个不同用途的 CSS 文件，这样只有在特定的场景下才会加载特定的 CSS 文件。

• 如何系统地优化页面？

  1. 加载阶段
     通过分析network中关键资源（html文件 js文件 css文件）的大小，个数，只找到一个可能性能问题：html文件是128kb比较大，网站本身已经开启gzip http2 多个静态资源域名、开启缓存等多个优化手段。
  2. 交互阶段
     新浪首页页面加载完成后，滚动页面查看次屏页面，没有太多的交互，查看performance没有发现太明显的性能问题。
  3. 一个页面从生命周期的维度主要分为三个阶段：加载阶段、交互阶段、关闭阶段。
     3.1 加载阶段影响网页首次渲染的关键资源几个指标：个数、大小、RTT（round trip time）。通常一个HTTP的数据包在14kb左右。
     3.2 交互阶段的优化主要是指渲染进程渲染帧速度。如何让单个帧生成的速度变快呢？
     3.2.1 减少JavaScript脚本执行时间
     3.2.2 避免强制同步布局，添加 删除dom后计算样式布局是在另外一个任务中执行的，这时候获取样式信息，会将其变成同步任务。
     3.2.3 避免布局抖动
     3.2.4 合理利用CSS合成动画（标识 will-change 单独生成一个图层）
     3.2.5 避免频繁的垃圾回收。（尽量避免临时垃圾数据，优化存储结构，避免小颗粒对象产生）

• PWA

  PWA提出两种解决方案：通过引入Service Worker来试着解决离线存储和消息推送的问题，通过引入manifest.json来解决一级入口的问题，前提是要使站点支持Service Worker，首先必要的一步就是要站点升级到HTTPS。

  1. Service Worker
     主要思想就是在页面和网络之间增加一个拦截器，用来缓存和拦截请求
     

• WebComponent

  1. WebComponent是一套技术的组合，具体涉及了Custom elements（自定义元素）、Shadow Dom（影子DOM）和HTML templates（HTML模板）
  2. 如何创建？
     2.1 查找模板的内容 const content = document.querySelector(‘xxx’).content
     2.2 创建影子DOM const shadowDom = this.attachShadow({mode:open})
     2.3 再将模板添加到影子DOM上 shadowDom.appendChild(content.cloneNode(true))
     2.4 定义组件 customEelments.define(‘组件名’,xxx)
  3. 浏览器是如何实现影子DOM？
     3.1 影子DOM中的元素对于整个网页是不可见的
     3.2 影子DOM的css不会影响到整个网页的CSSOM，影子DOM内部的CSS只对内部的元素起作用

• HTTP性能优化

  1. HTTP/0.9
     1.1 因为 HTTP 都是基于 TCP 协议的，所以客户端先要根据 IP 地址、端口和服务器建立 TCP 连接，而建立连接的过程就是 TCP 协议三次握手的过程。
     1.2 建立好连接之后，会发送一个 GET 请求行的信息，如GET /index.html用来获取 index.html。
     1.3 服务器接收请求信息之后，读取对应的 HTML 文件，并将数据以 ASCII 字符流返回给客户端。
     
  2. HTTP/1.0
     引入请求头和响应头，他们都是以key-value形式存在。
     2.1 如何支持多种不同类型数据？（请求头）
     2.1.1 首先，浏览器需要知道服务器返回的数据是什么类型的，然后浏览器才能根据不同的数据类型做针对性的处理。（如：accept:text/html）
     2.1.2 其次，由于万维网所支持的应用变得越来越广，所以单个文件的数据量也变得越来越大。为了减轻传输性能，服务器会对数据进行压缩后再传输，所以浏览器需要知道服务器压缩的方法。（如：accept-encoding:gzip,deflate,br）
     2.1.3 再次，由于万维网是支持全球范围的，所以需要提供国际化的支持，服务器需要对不同的地区提供不同的语言版本，这就需要浏览器告诉服务器它想要什么语言版本的页面。（如：accept-Charset：ISO-8859-1,utf-8）
     2.1.4 最后，由于增加了各种不同类型的文件，而每种文件的编码形式又可能不一样，为了能够准确地读取文件，浏览器需要知道文件的编码类型。(accept-language:zh-CN，zh)
     2.2 如何支持多种不同类型数据？（响应头）
     2.2.1 服务器接收到浏览器发送过来的请求头信息之后，会根据请求头的信息来准备响应数据。不过有时候会有一些意外情况发生，比如浏览器请求的压缩类型是 gzip，但是服务器不支持 gzip，只支持 br 压缩。（content-encoding:br）
     2.2.2 Content-type：text/html;charset=utf-8
     2.3 有的请求服务器可能无法处理，或者处理出错，这时候就需要告诉浏览器服务器最终处理该请求的情况，这就引入了状态码。状态码是通过响应行的方式来通知浏览器的。
     2.4 为了减轻服务器的压力，在 HTTP/1.0 中提供了 Cache 机制，用来缓存已经下载过的数据。
     2.5 服务器需要统计客户端的基础信息，比如 Windows 和 macOS 的用户数量分别是多少，所以 HTTP/1.0 的请求头中还加入了用户代理的字段。
  3. HTTP/1.1
     3.1 改进持久连接，它的特点是在一个 TCP 连接上可以传输多个 HTTP 请求，只要浏览器或者服务器没有明确断开连接，那么该 TCP 连接会一直保持。
     3.2 队头阻塞问题，持久连接虽然能减少 TCP 的建立和断开次数，但是它需要等待前面的请求返回之后，才能进行下一次请求。如果 TCP 通道中的某个请求因为某些原因没有及时返回，那么就会阻塞后面的所有请求。
     3.3 Host字段，在 HTTP/1.0 中，每个域名绑定了一个唯一的 IP 地址，因此一个服务器只能支持一个域名。但是随着虚拟主机技术的发展，需要实现在一台物理主机上绑定多个虚拟主机，每个虚拟主机都有自己的单独的域名，这些单独的域名都公用同一个 IP 地址。
     3.4 Chunk transfer机制，服务器会将数据分割成若干个任意大小的数据块，每个数据块发送时会附上上个数据块的长度，最后使用一个零长度的块作为发送数据完成的标志。这样就提供了对动态内容的支持。
     3.5 客户端Cookie、安全机制

• 如何提升网络速度？HTTP2

  1. HTTP/1.1 效率问题
     1.1 TCP的慢启动
     一旦一个 TCP 连接建立之后，就进入了发送数据状态，刚开始 TCP 协议会采用一个非常慢的速度去发送数据，然后慢慢加快发送数据的速度，直到发送数据的速度达到一个理想状态，我们把这个过程称为慢启动。
     1.2 多条TCP连接竞争宽带
     因为有的 TCP 连接下载的是一些关键资源，如 CSS 文件、JavaScript 文件等，而有的 TCP 连接下载的是图片、视频等普通的资源文件，但是多条 TCP 连接之间又不能协商让哪些关键资源优先下载，这样就有可能影响那些关键资源的下载速度了。
     1.3 队头阻塞
     虽然能公用一个 TCP 管道，但是在一个管道中同一时刻只能处理一个请求，在当前的请求没有结束之前，其他的请求只能处于阻塞状态。这意味着我们不能随意在一个管道中发送请求和接收内容。
  2. HTTTP/2带来的提升
     2.1 多路复用
     一个域名只使用一个 TCP 长连接和消除队头阻塞问题。
     
     2.2 实现原理
     添加了一个二进制分帧层
     
     2.2.1 首先，浏览器准备好请求数据，包括了请求行、请求头等信息，如果是 POST 方法，那么还要有请求体。
     2.2.2 这些数据经过二进制分帧层处理之后，会被转换为一个个带有请求 ID 编号的帧，通过协议栈将这些帧发送给服务器。
     2.2.3 服务器接收到所有帧之后，会将所有相同 ID 的帧合并为一条完整的请求信息。
     2.2.4 然后服务器处理该条请求，并将处理的响应行、响应头和响应体分别发送至二进制分帧层。
     2.2.5 同样，二进制分帧层会将这些响应数据转换为一个个带有请求 ID 编号的帧，经过协议栈发送给浏览器。
     2.2.6 浏览器接收到响应帧之后，会根据 ID 编号将帧的数据提交给对应的请求。
  3. HTTP/2其他特性
     3.1 可以设置请求的优先级
     HTTP/2 提供了请求优先级，可以在发送请求时，标上该请求的优先级，这样服务器接收到请求之后，会优先处理优先级高的请求。
     3.2 服务器推送
     HTTP/2 还可以直接将数据提前推送到浏览器。
     3.3 头部压缩

• 甩掉TCP、TLS的包袱，构建高效网络？HTTP3

  1. TCP队头阻塞
     在TCP传输过程中，由于单个数据包的丢失而造成的阻塞称为TCP上的队头阻塞。
  2. TCP建立连接延时
     我们把从浏览器发送一个数据包到服务器，再从服务器返回数据包到浏览器的整个往返时间称为 RTT。若还存在使用TSL协议，则这样就需要有两个握手延迟过程。
  3. TCP协议僵化
     中间设备的僵化以及操作系统原因
  4. QUIC协议
     基于 UDP 实现了类似于 TCP 的多路数据流、传输可靠性等功能，我们把这套功能称为 QUIC 协议。
     QUIC协议可以看成集成了“TCP+HTTP2的多路复用+TLS协议“。
     

• xmlHttpRequest为啥不能跨域？

  1. 同源策略、CSP 和 CORS 之间的关系：
  2. 同源策略就是说同源页面随你瞎搞，但是不同源之间想瞎搞只能通过浏览器提供的手段来搞
  3. 比如说
     3.1. 读取数据和操作 DOM 要用跨文档机制
     3.2. 跨域请求要用 CORS 机制
     3.3. 引用第三方资源要用 CSP

• 跨站脚本攻击（XSS）: 为啥Cookie中有HttpOnly属性？

  1. 存储型XSS攻击
     首先黑客利用站点漏洞将一段恶意 JavaScript 代码提交到网站的数据库中；
     然后用户向网站请求包含了恶意 JavaScript 脚本的页面；
     当用户浏览该页面的时候，恶意脚本就会将用户的 Cookie 信息等数据上传到服务器。
  2. 反射型XSS攻击
     恶意 JavaScript 脚本属于用户发送给网站请求中的一部分，随后网站又把恶意 JavaScript 脚本返回给用户。当恶意 JavaScript 脚本在用户页面中被执行时，黑客就可以利用该脚本做一些恶意操作。
  3. 基于DOM的XSS攻击
     基于 DOM 的 XSS 攻击是不牵涉到页面 Web 服务器的。具体来讲，黑客通过各种手段将恶意脚本注入用户的页面中，比如通过网络劫持在页面传输过程中修改 HTML 页面的内容，这种劫持类型很多，有通过 WiFi 路由器劫持的，有通过本地恶意软件来劫持的，它们的共同点是在 Web 资源传输过程或者在用户使用页面的过程中修改 Web 页面的数据。
  4. 如何防止XSS攻击
     4.1 服务器对输入脚本进行过滤或者转码
     服务器对关键提交数据进行转码：过滤掉敏感代码或者将敏感代码转码
     4.2 充分利用CSP
     通过HTTP头信息的Content-Security-Policy设置比如script-src,object-src，style-src等内容或者通过meta标签或者搭配Content-Security-Policy-Report-Only来使用

     <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">
     

     4.3 使用Cookie的HttpOnly属性

• CSRF攻击

  1. CSRF（Cross-site-request-forgery）跨站请求伪造
     利用用户的登录状态，并通过第三方的站点来做一些坏事。利用服务器的漏洞和用户的登录状态来实施攻击。
  2. 自动发起GET请求
     利用图片Img标签，欺骗浏览器作非法请求
  3. 自动发起POST请求
     利用form表单发起请求
  4. 引诱用户点击连接
  5. 发起CSRF攻击的三个必要条件
     5.1 目标站点一定要有CSRF漏洞
     5.2 用户要登录过目标站点，并且在浏览器上保持有该站点的登录状态
     5.3 需要用户打开一个第三方站点
  6. 如何防范？
     6.1 利用Cookie的SameSite属性
     在HTTP响应头中，通过set-cookie字段设置Cookie时，可以带上SameSite选项，如：

     set-cookie: 1P_JAR=2019-10-20-06; expires=Tue, 19-Nov-2019 06:36:21 GMT; path=/; domain=.google.com; SameSite=none
     

     6.1.1 Strict（严格，完全禁止第三方Cookie）
     6.1.2 Lax （但如果在第三方站点中使用 Post 方法，或者通过 img、iframe 等标签加载的 URL，这些场景都不会携带 Cookie）
     6.1.3 None（任何情况均发送）
     6.2 验证请求的来源站点
     6.2.1 HTTP请求头中的Referer字段 （包含路径信息）
     6.2.2 HTTP请求头中的Origin字段 （不包含路径信息）
     6.3 CSRF Token

• 安全沙箱：页面和系统之间的隔离墙

  安全沙箱是不能防止 XSS 或者 CSRF 一类的攻击，
  安全沙箱的目的是隔离渲染进程和操作系统，让渲染进行没有访问操作系统的权利
  XSS 或者 CSRF 主要是利用网络资源获取用户的信息，这和操作系统没有关系的

• HTTPS：让数据传输更安全

  浏览器安全主要包括页面安全、系统安全、传输安全三个部分。https主要保证传输过程的安全，从防止中间人窃取修改伪造的角度循序渐进的介绍了https的实现过程。

  1. 对称加密传输（协商秘钥的过程容易被窃取）
  2. 非对称加密传输（服务端用私钥加密的内容，可以通过它的公钥进行解密）
  3. 非对称加密交换秘钥、对称加密传输内容（DNS劫持 如何保证服务器是可信的）
  4. 引入CA权威机构保证服务器可信性。
     数字证书的申请过程：服务器生成一对公钥和私钥，私钥自己保存，通过公钥+企业+网站信息去CA机构申请证书。CA机构通过全方位的验证给这个网站颁发证书，证书内容包括企业信息、证书有效期、证书编号，以及自己私钥加密上述信息的摘要、网站的公钥。服务器就获得了CA的认证。
     浏览器认证证书过程：浏览器从服务器拿到网站的证书，通过CA的公钥解密证书信息的摘要跟使用摘要算法计算企业信息等的摘要对比，如果一致则证明证书有效。如果证书CA是可靠的呢，通过给CA颁发证书的根CA验证，通常操作系统中包括顶级CA证书（它们自己给自己签名称为自签名证书，我们自己生成证书也是自签名证书 只是它不是操作系统内置的）