【浏览器】概念+运行流程

Bertha 。 2023-01-23 12:46 23阅读 0赞

### 浏览器相关 ###

*   *   *   *  浏览器输入网址后发生了什么
             *  网络协议
             *  运行机制
             *  http协议

#### 浏览器输入网址后发生了什么 ####

1.  用户通过浏览器发送http到指定主机
2.  服务器接受请求，进行分析处理
3.  服务器处理完，返回对应数据到用户
4.  浏览器收到服务器数据，根据数据进行分析，渲染处理。

#### 网络协议 ####

1.  网卡：翻译信号，标识位置。每个网卡有个唯一编号mac;
2.  IP：网卡链接网络会被分配一个动态地址，IP,internet protocol;
3.  端口：IP好比营业厅，端口好比服务窗口，一个应用程序可以监听多个端口，一个端口只能被一个程序监听。
4.  连接：需要知道ip,和端口号,按照一定的协议传输，才能被解析。
5.  传输TCP:可靠的，面向连接的，准确性高的。文件，邮件，远程登录
    
        //通过net模块，创建tcp服务
        const serverTcp = net.createServer(()=>{ 
        
        })
        serverTcp.on('connection'){ 
            
        }
6.  传输UDP:不可靠，无连接服务，效率高，视频，网络语音

const dgram = require('dgram);
    
    /** *dgram.Socket类 * */
     const serverUdp = dgram.createSocket('upd4')

#### 运行机制 ####

1.  单线程，同一时间只能执行一键任务，防止修改DOM冲突
2.  执行模式: 同步，异步。防止某个任务执行时间过长

- 同步任务，都在主线程，形成一个调用栈（执行栈）
    - 主线程外，有个任务队列（消息对列），管理事件回调，
    - 调用栈执行完之后，会检查任务队列，执行队列任务。

#### http协议 ####

*  超文本传输协议

1.  Request:客户端请求信息
    
     *  request line ：请求行
     *  request header : 请求头
     *  request body : 请求正文
2.  Response: 服务端输出对象。
    
     *  response line ：响应行
     *  response header : 响应头
     *  response body : 响应正文
3.  消息头 header中
    
     *  Content-Type: 实体首部，发送内容类型
     *  Content-Length:实体首部，发送内容长度
     *  location: 响应首部，重定向地址；
     *  cookie: 请求首部，客户端发给服务器的cookie
     *  Set-Cookie : 响应首部，服务端向客户端发送cookie
    
        response.setHeader('Content-Type','text/plain');//后面是个MIME协议。
4.  状态码 line中
    
     *  1xx : 请求成功
     *  2xx : 请求成功
     *  3xx : 重定向
     *  4xx : 客户端错误，请求语法错误，无法实现
     *  5xx ： 服务端未实现合法请求