前端页面从无到有的过程

DNS解析

http缓存

Cache-control
Pragma优先级更高
取值: no-cache、max-age

强缓存

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

协商缓存

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 175,490评论 5 419
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 74,060评论 2 335
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 124,407评论 0 291
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 47,741评论 0 248
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 56,543评论 3 329
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 43,040评论 1 246
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 34,107评论 3 358
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 32,646评论 0 229
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 36,694评论 1 271
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 32,398评论 2 279
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 33,987评论 1 288
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 30,097评论 3 285
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 35,298评论 3 282
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 27,278评论 0 14
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 28,413评论 1 232
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 38,397评论 2 309
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 38,099评论 2 314

推荐阅读更多精彩内容