你都知道的浏览器知识-🎉🎉🎉

一tiao咸鱼
440 阅读5分钟

游泳健身了解一下：github 和小伙伴一起搞的日常总结

前言

进程：一个程序运行的实例，（给当前应用分配的内存，用来存放代码，运行数据，执行任务的主线程，我们把当前这样的运行环境称为进程）

线程：运行在进程之中，是运行的最小单位，顺序的执行流

1 个进程 -> 包含多个 -> 线程 2.同个进程下的线程共享数据 3.当进程关闭后会回收当前进程所占用的内存 4.进程之间数据互相隔离 为什么数据要隔离？

单进程时代？

js环境，页面渲染，页面展示，插件 都运行在主进程下，
   
   不稳定
   任意一个线程出现错误都将导致整个程序出现崩溃
   
   不流畅
   如果当前有一个插件模块和主线程都需要同时运行，那只会运行其中一个，可想而之肯定是不友好的
   
   不安全
   刚才说了同一个进程下线程共享数据，也就说当我们使用插件的时候，插件是可以获取到我们的用户信息的，
   甚至于可以直接破解，获取我们电脑上的信息，安装病毒等等

多进程时代？

最新线程
Chrome

多进程 -> 浏览器进程(主进程)-> 多个 渲染进程 -> GPU进程 -> 网络进程 -> 多个 插件进程

不稳定，不流畅 如何解决
各个模块都互相独立，就算一个错误，也不会影响其他模块

不安全的解决方式
把当前渲染进程，和插件进程锁进了沙箱，沙箱不能读取任何敏感位置的信息，也不能在硬盘上进行读写

浏览器进程：
页面显示，用户交互，子进程管理，存储的功能
    用户交互：浏览器上的操作（滑动页面，鼠标，键盘，浏览上面👆的一些功能等）
    子进程管理：对网络进程，插件进程，GPU进程的管理（调度，通信）
    存储的功能：localStorage,sessionStorage

网络进程
加载网络资源
    加载一些插件，ajax，script，一些网络资源

插件进程
负责插件的运行，由于插件容易运行错误，影响主进程进行了拆分

GPU进程
css3D的一些效果，最早是css开始进行GPU绘制的，后面统一使用GPU绘制，Canvas也是用GPU进行绘制

渲染进程
将html，js，css转换为用户用户可以交互的网页，排版引擎 Blink 和 js 引擎 v8 都是运行在渲染进程上
默认情况，所有的tab都会有一个自己的渲染进程，渲染经常在沙箱中运行

劣势？ 内存占用更大，架构更大不易维护


内存不足时候？主进程会接替插件进程执行插件进程的模块

我们还是会遇到一个页面卡死的情况？
当前我们的域名都是相等或者是父子域名的时候，会共用一个渲染进程，

1.网络流程

从页面加载到首次绘制的时长（FP），这个会直接影响用户的跳出几率，最重要的就是当前的网络加载速度

那么中间都做了些什么呢？

A主机 -> B主机

应用层 -> 把数据传送到传输层
传输层 -> 传输层添加当前的UDP（不安全速度快） 和 TCP （安全可靠速度慢）添加协议传输至网络层
网络层 -> 携带当前IP头
数据链路层 -> 封装成可传输的流
物理层 -> 电话->wifi

tcp ？三次握手，四次挥手，tcp的重传机制（当tcp的序号缺失会进行重传）

UDP ？发送端不关心数据是否丢失，只关心速度，比如我们在线视频，互动游戏之类（对数据的完整性并不高）

tcp 和 http 的关系？http 是超文本传输协议，用于在tcp内部进行传输的协议（如html，js，视频），还有一些下载的
协议如 ftp//

【【【【【数据HTTP】TCP 】IP】-> 流】电话(进行传输)】

image.png

image.png

然后我们准备好了开始进行传输我们的数据

1.我们输入当前输入框

image.png 会发现，浏览器会检索我们输入的值，当结果是不符合当前路径的时候会进行默认的搜索，符合路径的就会进行跳转 (会把当前的路径进行一个值的匹配，匹配成当前可以跳转的路径) 之前出现过的一个bug => igetcool-share.igetcool.com/webliveh5/m… （转换成 igetcool-share.igetcool.com/webliveh5/m… ）

2.构建请求的信息

  1. 我们会先构建当前的请求行

image.png 请求类型 - 路由 - 协议/版本

  1. 会开始查找我们的缓存（可查看缓存策略）

    DNS 解析 域名解析 -> www.baidu.com -> 117.11.1.2 会查找 当然浏览器会把当前解析过的域名进行缓存以便进行下次访问

  2. 进入网络请求阶段 不是直接进入tcp解析 先进入当前的tcp队列，tcp队列最多同时请求6个tcp链接

     tcp 三次握手 -> 

 http通信 -> 请求行，请求头，请求体
     服务端收到请求会返回当前的响应行，响应头，响应体
 
 四次挥手
     Connection:Keep-Alive （http 1.1） 会保留之前的tcp 链接。以便下次使用
     
     // 缓存相关 
     Cache-Control:Max-age=2000 缓存时间 
     If-None-Match:"4f80f-13c-3a1xb12a" hash值

    https 会有一个加密的过程 https = TLS/ssl + http

    1. 服务端发送当前的数字证书给客户端

    2. 客户端通过数字证书内部的公钥和随机数进行对成加密 -> 传递给服务端（中间人劫持了当前的数据，但不知道随机数是啥，所以不能堆数据进行修改）（公钥是私钥（私钥存放在服务端）通过非对称加密生成的）

    3. 服务端对客户端传过来的字符用私钥进行解密，然后用客户端的随机数对数据进行加密传递给客户端

    4. 客户端收到数据对称算法进行解密获取数据

1. 整体角度

image.png

1. 浏览器进程角度

image.png

2.页面渲染过程 // 待续

3.js执行流程 // 待续

4.web安全理论 cookie 使用 token 使用 // 待续

avatar
文章
阅读
粉丝