输入url简记

199 阅读3分钟

一. 输入url到客服端渲染完成 (资源定位地址)

`  
    一. 网络层
    1. http://www.baidu.com  http 协议。
    htttp与tcp是啥
    http 是应用层协议。
    http是基于tcp现实链接的。http在建立链接的时候是基于tcp的链接通道发送请求,然后断开(3次握手)。这是他两之间的关系。
    keep-alive : 从1.1开始http增加了 keep-alive,当打开这个配置的时候,它可以保持tcp的连续畅通。不用反复的建立链接。也就是它可以在同一个页面或者同一个应用在运行的时候可以复用同一条tcp通道。只要一次连接就可以,中间的全部是做内容的传输,不用反复的重新建立连接。
    到了2.01.1有一个区别就是2.0可以多条并发请求复用同一条通道。假如在1.1里面如果同时发送10条请求,你会发现他是先一次性并发6条请求,然后等某条完成后会再次增加一条直到10条全部发送完毕。这就是他不会复用tcp通道造成的,一次请求就要建立一次链接,浏览器是限制了6条。所以导致这样的效果。而2.0就会复用同一条通路,它可以10条全部发送。复用通路,没有并发限制。
    
    http是无状态的链接。单次请求都是无状态。而tcp是有状态的。也是他两的差异
        在这里提一下socked。它不是http协议,本身就是一个封装化的一个tcp。让应用能拿到实时的数据。
    tcp 是传输层协议
    
    2. https://www.baidu.com  https 协议。
        https = http + ssl(tls)
        https加密逻辑: 在客服端第一次发送https链接时,服务端会返回一个第三方认证证书(证书包包含一个公钥,他的作用是解密),当客户端拿到这个公钥后就会自身产生一个秘钥用它来做对称加密。之后客服端用接受的第三方公钥来对 对称秘钥 进行加密。然后把加密后的对称秘钥进行发送。服务端用公钥发现了里面客服端的秘钥。最终才开始密文通信
        
    因为https多次的链接会导致网络请求加载时间延长增加开销和功耗。所以这里的优化点就是可以利用合并请求和长链接的方式来优化。
   
  二. 域名解析
      1. 首先会去浏览器缓存找DNS信息,域名所对应的IP
      2. 如果浏览器缓存中没找到,它会去系统缓存中查找 比如host
      3. 系统缓存没找到,他会去路由器缓存中查找 - 各级路由器缓存域名信息
      4. 运营商地方站点的缓存信息
      5. 根域名服务器
      
      优化:
          CDN 他的作用是同一个主机分配了多个IP地址。
          它可以根据负载量来分配不同的IP地址从而实现负载均衡
          
  三. web 服务器
      作用:
          1. 接受请求 传递给服务端代码
          2. 通过反向代理 传递给其他服务器
          3. 不同的域名 指向相同IP的服务器 ngnix域名解析 引导到不同的服务器监听端口
          
  四. 网络优化
      手写并发 - QPS (有10个请求,只能同时执行3个)
      
      function qpsLimit (pipe, limitMax = 3) {
          const reqArr = []
          
          // 往并发池添加promise
          const add = () => {
              let req = pipe.shift() // 从10个请求拿出一个放到并发池
              reqArr.push(req)
          }
          
          // 执行实际请求
          const run = () => {
              if(pipe.length === 0) return // 如果10个请求都完成 就终端递归
              const finish = Promise.race(reqArr) // 拿到先完成的请求
              finish.then(res => {
                  // 在并发池找到完成了的请求
                  const done = reqArr.indexOf(finish)
                  // 把完成的请求剔除
                  reqArr.splice(done,1)
                  // 再向并发池添加新的请求
                  add()
              })
              // 再次请求
              run()
          }
          white(reqArr.length < 3) {
              add()
          }
          run()
      }
    
`