美文网首页
前端页面从无到有的过程

前端页面从无到有的过程

作者: 爱翔是我二媳妇 | 来源:发表于2021-01-15 17:31 被阅读0次

    DNS解析

    http缓存

    Cache-control:

    强缓存

    判断页面的缓存是否存在以及是否过期,若没过期,则不发起请求,直接使用缓存

    协商缓存

    Last-Modified: 当前获取的最后一次修改时间。
    If-Modified-Since: 上一次的修改时间。
    判断上述两个属性是否一致,若一致(304),则用缓存,否则发送请求。

    Etag:服务器为资源分配的唯一标识符,能精准的感知资源变化。
    If-None-Match: 上一次的Etag
    判断上述两个属性是否一致,若一致(304),则用缓存,否则发送请求。

    Etag的判断优先于Last-Modified。


    image.png

    三次握手

    image.png
    第一次握手客户端发送SYN(创建链接标识),seq(序列号),表示要开始通信了。

    第二次握手服务端接收到客户端的SYN和seq,确认了客户端的发送能力(服务端侧)以及服务端的接收能力(服务端侧),接着将ack(与客户端的seq配对,seq+1)、自身的seq(序列号)、ACK(=1,确认序号有效)、SYN(=1,确认连接),返回给客户端。

    第三次握手客户端接收到服务端的响应(客户端的接收能力(客户端侧)),确认了自己第一次握手时的信息对方收到了(客户端的发送能力(客户端侧)),以及服务端的发送能力(客户端侧)服务端的接收能力(客户端侧),将ACK(=1,确认序号有效)、seq(=第二次我握手的ack)、ack(=第二次我握手的seq+1)发送给服务端。若服务端收到了,则表示服务端确认了客户端的接收能力(服务端侧)服务端的发送能力(服务端测)

    最终目标:服务端和客户端均需要确认对方以及自身是否有能力通信(发送和接收)。

    四次挥手

    image.png
    第一次挥手由客户端发起,当客户端发送完最后一点数据,向服务端申请断开连接。发送断开标志位FIN=1,seq(序列号)。

    第二次挥手由服务端向客户端发送,但此时可能服务端并没有发送完所有的response,所以只是告诉客户端收到了断开请求。并向客户端带上ACK(=1,确认序号有效),seq(序列号),ack(=客户端seq+1)数据。并继续发送剩余的response。

    第三次挥手也由服务端发起,此时服务端已发完所有的数据,带上FIN=1(断开标志位),ACK(=1,确认序号有效),seq(序列号), ack(=第二次回收的ack),表示服务端已发送完所有的请求,可以断开了。

    第四次挥手客户端收到了服务端的断开确认(带FIN的),向服务端发送ACK确认,并带上seq(=第三次挥手的ack+1),ack(=第三次的seq+1)。服务端收到该信息后立即断开。客户端在发送后等待2MSL再断开。

    原文链接

    http状态码

    类别 说明
    1xx 接受的请求正在处理
    2xx 成功
    3xx 重定向(需要进行附加操作完成请求)
    4xx 客户端出错,服务器无法处理请求
    5xx 服务端出错,服务器处理请求出错
    2xx 说明
    200 成功
    204 成功,但相应报文不含主体
    206 进行范围请求成功
    3xx 说明
    301 永久重定向,表示资源已经被分配了新的url
    302 临时重定向,表示资源已经被分配了新的url
    303 表示资源存在另一个URL
    304 服务器允许访问资源,但存在未满足条件的情况
    4xx 说明
    400 请求报文存在语法错误
    401 发送的请求需要通过http认证的信息
    403 没权限
    404 没有找到对应资源
    5xx 说明
    500 服务器处理请求时发生了错误
    501 服务器不支持当前请求的某个功能
    503 服务器暂时处于超负荷状态,无法处理请求

    Token

    Token用于标记用户的登录状态。
    当用户登录成功后,服务端向客户端返回token,客户端将token记录下来,以后的每次请求,都带上token,以正身份。

    使用Token的目的:Token的目的是为了减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮。

    页面加载渲染Dom树

    render tree: DOM Tree 和样式结构体组合,且不包含隐藏节点(display:none)

    回流

    render tree发生结构性变化,如添加或者删除可见的DOM元素,元素位置改变,元素尺寸改变——边距、填充、边框、宽度和高度,内容改变,就会发生回流,页面打开时必定会发生回流,发生回流必定触发重绘,回流非常消耗浏览器资源,所以浏览器会将所有回流/重绘操作合并,批量渲染。

    重绘

    重绘指元素不发生结构性的改变,仅发生样式性改变,如颜色,字体等,就会发生重绘,但重绘不会触发回流。


    1213309-20181211204444849-1396369624.gif 1213309-20181211204607369-2095397558.gif

    defer与async

    相关文章

      网友评论

          本文标题:前端页面从无到有的过程

          本文链接:https://www.haomeiwen.com/subject/qxdsaktx.html