浏览器原理和计算机网络篇

|浏览器原理

chrome架构：

1、进程和线程

  • 进程是资源分配的最小单元，线程是程序执行的最小单位（资源调度的最小单位）
  • 进程有自己的独立地址空间，每启动一个进程，系统就会为它分配地址空间，建立数据表来维护代码段、堆栈段和数据段，这种操作很昂贵
  • 线程是共享进程中的数据，使用相同的地址空间，因此CPU切换一个线程的花费要比进程小得多，同时创建一个线程的开销也比进程小得多
  • 线程之间的通信更方便，同一进程下的线程共享全局变量、静态变量等数据，而进程之间的通信要以通信（IPC）的方式进行。不过如何处理好同步与互斥的编写多线程程序的难点
  • 多进程进程更健壮，多线程程序只要有一个线程死掉，整个进程也死掉了，而一个进程死掉不会对其他进程产生影响，因为进程有自己独立的地址空间

浏览器时代：单进程：不稳定、不流畅、不安全

 

2、从输入URL到呈现页面过程：

1）、这个流程可以分为两部分来说，第一部分是浏览器请求响应的过程：

  • 输入URL：用户在地址栏回车后，先检查输入的搜索关键字是否符合url的规则，然后将其组装成完整的URL进行访问；
  • 检查缓存：会先检查本地强缓存是否可用，如果可用直接从缓存中返回资源；
  • DNS解析：如果强缓存不可用，就会进行DNS解析，通过递归查询和迭代查询来解析域名得到域名对应的IP地址；
  • 建立TCP连接：得到IP地址后，会进行3次握手去建立TCP连接；
  • 发送HTTP请求：建立TCP连接后发生HTTP请求，发送HTPP请求时会携带上cookie和缓存的标识字段；
  • 负载均衡：服务端网端收到HTTP请求后，可能会有一系列的负载均衡处理，通过反向代理分配给对应集群中的服务器去执行；
  • 服务器返回响应：服务器收到请求后，先根据请求头的缓存标识来判断缓存是否生效，生效则返回304状态码；不生效则返回资源和200状态码；
  • 浏览器接收HTTP响应：浏览器接受到HTTP响应后根据connection:keep-alive的值来选择4次挥手来断开TCP连接或者保留，同时浏览器还会缓存响应头里的缓存标识字段。

2）、浏览器请求响应的过程就结束后，第二部分就是浏览器解析并渲染的过程：

  • 构建DOM树：浏览器从上到下解析HTML文档生成DOM节点树；
  • 构建CSS树：浏览器解析样式时，会进行异步下载，下载完成后构建CSSOM树；
  • 阻塞：当遇到不带async和defer的script时，会阻止解析HTML并进行下载和执行，并且CSS和DOM渲染，JS和DOM解析之间是有阻塞关系的；
  • 构建渲染树：根据DOM节点树和CSSOM树构建渲染树（Render）;
  • 布局（Layout）:根据渲染树将DOM节点树每一个节点布局在屏幕上的正确位置；
  • 绘制(Paint)：绘制所有节点，为每一个节点使用对应的样式，绘制到屏幕上；

3、缓存

HTTP缓存的种类：

  • 强缓存：可以由下面两个字段中的一个决定
  1. expires
  2. cache-control（优先级更改）
  • 协商缓存：可以由下面两对字段中的一对决定
  1. Last-Modified，If-Modified-Since
  2. Etag，If-None-Match（优先级更高）

expires：假设30s后过期

只需要在响应头expires的事件设置为 当前事件+30s就行，然后在前端页面刷新，可以看到请求的资源的响应头里多了一个expires字段，

 

 

 并且在30s内再次刷新之后，看到请求都是走memory（本地缓存） cache-control

cache-control跟expires效果差不多，只不过这两个字段设置的值不一样而已，expires设置的是毫秒数，cache-control设置的是秒数

30s内都走本地缓存，不会请求服务端

 协商缓存：与强缓存不同的是，强缓存是在时效时间内，不走服务端，只走本地缓存。

　　　　　而协商缓存是要走服务端的，如果请求某个资源，去请求服务端时，发现命中缓存，则返回304，否则返回所请求的资源。

Last-Modified + If-Modified-Since

  • 第一次请求资源时，服务端会把所请求资源的最后一次修改时间当成响应头中Last-Modified的值发送浏览器并在浏览器中存起来
  • 第二次请求资源时，浏览器会把第一次存储的时间当成请求头中  If-Modified-Since  的值，传到服务端，服务端拿到这个时间和所请求资源的最后修改时间进行对比
  • 对比结果如果是两个时间相同，则说明资源没有被修改，那就是  命中缓存  ，返回304，如果不相同，说明资源被修改过了，则返回修改后的资源

第一次请求

 

 第二次请求

 

 由于资源没有修改，返回304

 

 Etag + If-None-Match

  其实Eatg+If-None-Match与Last-Modified+If-Modified-Since大体一样，区别在于：

  • Last-Modified+If-Modified-Since是对比资源最后一次修改时间，来确定资源是否修改
  • Eatg+If-None-Match是对比资源内容，来确定资源是否修改（只需要读取资源内容，转成hash值，前后进行对比就行）

总结：

4、web页面安全

 

 同源策略：

 

 跨域本质其实就是指两个地址不同源，不同源的反面不就是同源，同源指的是：如果两个URL的协议、域名和端口号都相同，则就是两个同源的URL。

 

对以下3个层面进行保护，总结下来主要包含三个层面：DOM层面、数据层面、网络层面。

  1. DOM层面：同源策略限制了来自不同源的JavaScript脚本对当前DOM对象读和写的操作
  2. 数据层面：同源策略限制了不同源的站点读取当前站点的cookie、indexDB、localStorage等数据
  3. 网络层面：同源策略限制了通过XMHttpRequest等方式将站点的数据发送给不同源的站点

两种跨域方式：

    1. 跨站脚本攻击XSS：是值黑客往HTML文件或DOM中注入恶意脚本，从而在用户浏览器页面时利用注入的恶意脚本对用户实施攻击的一种手段

       产生的影响：盗取Cookie信息、监听用户行为、修改DOM、在页面内生成浮窗广告等

        　　  什么情况下容易发生：数据从一个不可靠的链接进入到另一个web应用程序；没有过滤掉恶意的代码的动态内容被发送到web用户

      　　    解决方法：

      • 服务器对输入脚本进行过滤或转码
      • 充分利用CSP
      • 使用HttpOnly属性

       

      2. 2、跨站请求伪造CSRF：指的是黑客引诱用户打开黑客的网站，在黑客的网站中，利用用户登录状态发起的跨站请求 产生的影响：利用用户登录状态购买商品、利用用户登录状态发表评论等。
    解决方案：
    1. 充分利用好Cookie的SameSite属性；
    2. 在服务器端验证请求的来源站点；
    3. CSRF Token。

　　  

 

5、浏览器安全

　　1、请求报文：HTTP请求报文主要包括：请求行、请求头部以及请求的数据（实体）

　　　　请求行：包含：方法字段（get、post等）、URI字段和协议版本（HTTP/1.0、HTTP/2.0、HTTP/3.0）

  　　　  请求头部：常见标头有：Connection标头（连接管理）、Host标头（指定请求资源的主机）、Range标头（请求实体的字节范围）、User-Agent标头（包含发出请求的用户信息）、Accept标头（首选的媒体类型）、Accept-Language(首选的自然语言)

　　　　

 　　　　请求实体：http请求的body主要用于提交表单的场景，实际上，http请求的body是比较自由的，只要浏览器端发送的body服务端认可即可。一些常见的body格式有：

  • application/json
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/xml

　　使用html的form标签提交产生的html请求，默认会产生 application/x-www-form-urlencoded 的数据格式，当有文件上传时，则会使用multipart/form-data。

　　2、响应报文：分为3部分：状态行、首部行和响应体

　　首部行：常见的响应首部有：Date（响应的时间）、Via（报文经过的中间节点）、Last-Modified（上一次修改时间）、Etag（与此实体相关的实体标记）、

　　　　　　Connection（连接状态）、Accept-Ranges（服务器可接收的范围类型）、Content-Type（资源类型）

　　

 　　响应体：响应体就是响应的消息体，如果是纯数据就是返回纯数据，如果请求的是HTML页面，那么返回的就是HTML代码，如果是JS就是JS代码等。

6、HTTP和HTTPS

HTTPS = HTTP + SSL，涉及到对称加密、非对称加密、证书。

 HTTPS 并非是应用层的一种新协议。只是 HTTP 通信接口部分用SSL（Secure Socket Layer）和TLS（Transport Layer Security） 协议代替而已，

简言之就是HTTP+通信加密+证书+完整性保护构成HTTPS，是身披TLS/SSL这层外壳的HTTP。

1、TLS/SSL功能

TLS/SSL协议使用通信双方的客户证书以及CA根证书，允许客户/服务器应用以一种不能被偷听的方式通信，在通信双方间建立起了一条安全的、可信任的通信通道。

  • 对称加密指的是加密数据用的密钥，跟解密数据用的密钥是一样的，使用该方法的优缺点是：

　　　　1）优点：加密、解密效率通常比较高、速度快。对称性加密通常在消息发送方需要加密大量数据时使用，算法公开、计算量小、加密速度快、加密效率高。

　　　　2）缺点：数据发送方、数据接收方需要协商、共享同一把密钥，并确保密钥不泄露给其他人。此外，对于多个有数据交换需求的个体，两两之间需要分配并维护一把密钥，这个带来的成本基本是不可接受的。

  • 非对称加密：非对称加密指的是加密数据用的密钥（公钥），跟解密数据用的密钥（私钥）是不一样的。公钥就是公开的密钥，谁都可以查到；私钥就是非公开的密钥，一般是由网站的管理员持有。公钥与私钥之间有一定联系：简单来说就是，通过公钥加密的数据，只能通过私钥解开；通过私钥加密的数据，只能通过公钥解开。

问题：非对称加密中公钥如何获取？2个重要概念：证书、CA（证书颁发机构），其主要用途如下：

（1）证书：可以暂时把它理解为网站的身份证。这个身份证里包含了很多信息，其中就包含了上面提到的公钥。当访问相应网站时，他就会把证书发给浏览器；

（2）CA：用于颁发证书，证书来自于CA（证书颁发机构）。

　　证书如何防伪？数字签名、摘要是证书防伪非常关键的武器。“摘要”就是对传输的内容，通过hash算法计算出一段固定长度的串。然后，在通过CA的私钥对这段摘要进行加密，加密后得到的结果就是“数字签名”（明文 --> hash运算 --> 摘要 --> 私钥加密 --> 数字签名）；数字签名只有CA的公钥才能够解密。证书中包含了：颁发证书的机构的名字 （CA）、证书内容本身的数字签名（用CA私钥加密）、证书持有者的公钥、证书签名用到的hash算法等。

2、HTTP的问题：

（1）与纯文本相比，加密通信会消耗更多的CPU及内存资源

　　1）由于HTTPS还需要做服务器、客户端双方加密及解密处理，因此会消耗CPU和内存等硬件资源。

　　2）和HTTP通信相比，SSL通信部分消耗网络资源，而SSL通信部分，由因为要对通信进行处理，所以时间上又延长了。SSL慢分两种，一种是指通信慢；另一种是指由于大量消耗CPU及内存等资源，导致处理速度变慢。

（2）购买证书需要开销。

3、HTTPS的流程：

　　1.客户端发起HTTPS请求

　　2.服务端响应，下发证书（公开密钥证书）

　　3.客户端检查证书，如果证书没问题，那么就生成一个随机值，然后用证书（公钥）对该随机值进行加密。

　　4.将经过公钥加密的随机值发送到服务端(非对称加密），以后客户端和服务器的通信就可以通过这个随机值进行加密解密了。

　　5.服务端用私钥解密后，得到了客户端传过来的随机值，然后把内容通过该值进行对称加密。

　　6.后期的数据传输都是基于该随机值进行加密解密。

7、HTTP

　　1）http1.0和http2.0的区别：

  • 二进制协议：2.0头信息和数据体都是二进制，统称为“帧”，是多路复用的基础

  • 多路复用：2.0复用TCP连接，同一个TCP连接中，可发多个请求或回应，这就解决了队头阻塞问题

  • 数据流：2.0将每个请求或回应的所有数据包统称为一个数据流，每一个数据流都有独一无二的编号ID，用于数据传输时的区分

  • 头信息压缩：2.0维护一张头信息表，所有头字段信息都会记录在这张表里，发送时只需要发送对应的key就行，大大节省空间。为啥这么做呢？你想想，如果多个header内容都一样，照样发送的话，是不是很浪费空间

  • 服务器推送：2.0可提前向客户端推送静态资源，这样客户端页面的加载延迟就会大大减少

　　2）队头阻塞：

　　你可以理解为，以前的HTTP请求都是一发一收的模式，有点类似于串行，也就是排队。那如果有多个请求并发的话，那就需要等待很久啊。

　　解决：
  • 并发连接：串行变并行，提升总体请求速度
  • 域名分片：域名分出很多二级域名，这样可并发的数量就变多了，也就提升了总体请求速度
    比如页面有多张图片:
    　　HTTP1.0时期，最大TCP连接数只能为6，所以会请求多次
    　　HTTP2.0时期，支持多路复用，可以一瞬间加载出来，牛逼！

　　3）页面输入URL后的流程：

  • 解析URL为IP：走的是DNS解析那一套，依次寻找浏览器缓存、本地DNS服务器、根域名DNS服务器、权威DNS服务器，直到寻找到IP，并缓存在浏览器缓存

  • TCP三次握手：确保客户端和服务端之间的连通性

  • 发送HTTP请求：发送请求报文

  • 页面渲染：HTML解析器和CSS解析器并行构建DOM树和CSS树，然后结合成CSSOM树，JS引擎运行JS代码，进行DOM的操作或修改。然后进行UI布局、绘制，进而将整个页面渲染出来

  • TCP四次挥手：客户端和服务端断开连接

　　4）DNS

DNS（Domain Name System）域名系统，他的作用，简单来说就是把请求域名转换成IP

以 Chrome 为例，当你在浏览器中想访问 www.google.com 时，DNS会通过以下操作查询IP：

一、现在客户端查询DNS缓存，使用递归查询的方式：

  • 1、先在浏览器缓存中查找有没有该域名的IP地址，查到直接返回，不走下一步
  • 2、在本地DNS服务器中查找有没有该域名的IP，查到直接返回，不走下一步
  • 3、再查看 Hosts 文件有没有该域名的解析配置

二、没有缓存，去查找服务端，采用迭代查询的方式：

  • 4、本地DNS服务器向根域名服务器发送请求，并在其中查找IP，查到直接返回，不走下一步
  • 5、本地DNS服务器向权威域名服务器发送请求并查找IP，返回对应结果
  • 6、本地DNS服务器接收到结果，并缓存，供下次查找使用
  • 7、本地DNS服务器将接收到结果返回给浏览器

     

     

　　5）token

Token（令牌），一般由uid + time +sign + 固定参数组成

  • uid：用户唯一身份标识
  • time：当前时间戳
  • sign：签名
  • 固定参数：可选，一些自定义的字符串

获取Token过程：

  • 1、用户登录，服务端生成Token返回给客户端
  • 2、客户端把Token保存在浏览器缓存中
  • 3、客户端发送请求时把Token放在header中
  • 4、服务端收到Token后，判断Tokne的准确性和时效性，通过就返回对应数据，不通过就返回401

作用：

  • 抵抗CSRF
  • 节省后端存储空间

如何无痛感刷新token：在响应拦截器中拦截401，并判断Token过期，调用刷新Token的接口，重置Token，实现无感刷新

如何优化SEO：

　　提高网站权重，增强搜索引擎友好度

  • 网站层级不要太深
  • 合理使用语义化HTML标签
  • 服务端渲染
  • 减少HTTP请求，提升网站加载速度

　　6）WebSocket

　　WebSocket是一种网络通信协议，是在TCP连接上进行全双工通信的协议。

　　Websocket可以实现客户端和服务端之间进行全双工通信，任何一方都可以通过建立连接将数据传到另一端，它只需要建立一次连接，就可以一直保持连接状态

 

posted @ 2022-02-26 22:32  聂丽芳  阅读(108)  评论(0)  编辑  收藏  举报