欢迎光临散文网 会员登陆 & 注册

HTML+CSS(三)

2023-05-23 11:27 作者:山锦ShanJin  | 我要投稿

一、cookie,sessionStorage,localStorage的区别

  • 生命周期,数据有效期不同

    cookie:可以设置失效时间,如果没有设置失效时间,浏览器关闭后数据会失效。

    localStorage:数据会永久保存,除非手动删除。

    sessionStorage:会话当前有效数据就是在浏览器窗口关闭之前有效,浏览器关闭后数据会被清除。

  • 存放数据,存储大小限制不同

    cookie:传递少量数据,4kb左右。

    localStorage,sessionStorage:保存大量数据,5mb左右。

  • http请求不同

    cookie:每次http请求都会携带cookie,cookie在浏览器与服务器之间来回传递。

    localStorage,sessionStorage:只在客户端保存,不会把数据发给服务器。

  • 作用域

    cookie,localStorage:同源窗口共享

    sessionStorage:不在不同的浏览器窗口中共享

  • 接口

    cookie:需要自己封装,原生接口不友好

    localStorage,sessionStorage:原生接口友好,API接口方便,也可以再次封装,对Object和Array有更好的支持

  • 数据更新

    web Storage(localStorage和sessionStorage)支持事件通知机制,可以将数据更新的通知发送给监听者。

  • 应用

    cookie:不能跨域请求!验证登录、判断是否登陆过网站、保存上次登录的信息、保存上次查看的页面、浏览计数器

    localStorage:跨页面传递参数,长期登录,长期保存在本地的数据,数据永久保存除非手动删除

    sessionStorage:临时保存数据,页面刷新,敏感账号一次性登录

  • 兼容性

    localStorage和sessionStorage是html5才应用的新特性,有些浏览器不支持。

二、如何实现浏览器内多个标签页之间的通信

  1. localStorage(※)

    浏览器多个标签公用的存储空间,可以实现多标签之间的通信。

    使用方式:直接在window对象上添加监听。

  2. Websocket

三、标签上 title 与 alt 属性的区别是什么?

alt 是给搜索引擎识别,在图像无法显示时的替代文本;

title 是关于元素的注释信息,主要是给用户解读。

当鼠标放到文字或是图片上时有 title 文字显示。(因为 IE 不标准)在 IE 浏览器中 alt 起到了 title 的作用,变成文字提示。

在定义 img 对象时,将 alt 和 title 属性写全,可以保证在各种浏览器中都能正常使用。

四、iframe的优缺点

优点:

    解决加载缓慢的第三方内容,如图标、广告等的加载问题。

    并行加载脚本。

    Security sandbox。

缺点:

    iframe会阻塞主页面的Onload事件。

    即使内容为空,加载也需要时间。

    没有语义。

五、defer和async

    默认情况下,浏览器是同步加载js脚本的;即渲染引擎遇到 script标签就会停下来,等执行完脚本,再去继续向下渲染;如果是外部脚本,还必须加入脚本的下载时间。加入的脚本多、体积大时,下载和执行会占很大的时间,造成浏览器堵塞,降低用户体验,所以浏览器允许脚本的异步加载

    defer和async的区别:

        defer:需要等待整个页面正常DOM渲染完成后,才会执行下载好的js脚本,并且是按下载完后的顺序执行。(即defer是需要等到DOM文件都渲染完成之后,才执行下载完成的js脚本。)

        async:当外部的js脚本下载完成后,渲染引擎会暂停DOM渲染,开始执行下载好的JS脚本的内容,在执行完成后,再去渲染。(即async是当js脚本下载完成后,开始执行时中断DOM文件的渲染,执行js脚本的内容,执行完再继续去渲染DOM元素。)

六、title与h1、b与strong、i与em的区别

    title属性没有明确意义,只是一个标题;h1则表示层次明确的标题,对页面信息的抓取有很大的影响。

    strong与b标签都有让文字加粗的作用,但strong的语义更强烈,推荐使用strong标签。

    em与i标签都有让文字加粗的作用,但em的语义更强烈,推荐使用em标签。

七、检测数据类型的方法

    1.typeof

检测null、object、array、data的结果都是object。

typeof的返回的值:(小写字符串)

    2.constructor

不能判断null、undefined,因为他们不是构造对象。

constructor返回的值:(首字母大写的字符串)

    3.Object.prototype.toString.call

可以检测出所有数据类型。(遇到null、undefined会出现报错)

Object.prototype.toString.call返回的值:[Object 首字母大写的字符串]

    4.instanceof

只能检测该对象是否存在目标对象的原型上。

[对象] instanceof [构造函数]

typeof与instanceof的区别:

八、TCP三次握手

  1. 第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SENT状态,等待服务器确认;SYN:同步序列编号(Synchronize Sequence Numbers)。

  2. 第二次握手:服务器收到syn包并确认客户的SYN(ack=j+1),同时也发送一个自己的SYN包(syn=k),即SYN+ACK包,此时服务器进入SYN_RECV状态;

  3. 第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED(TCP连接成功)状态,完成三次握手。握手过程中传送的包里不包含数据,三次握手完毕后,客户端与服务器才正式开始传送数据。

九、TCP 四次挥手

1) 客户端进程发出连接释放报文,并且停止发送数据。释放数据报文首部,FIN=1,其序列号为seq=u(等于前面已经传送过来的数据的最后一个字节的序号加1),此时,客户端进入FIN-WAIT-1(终止等待1)状态。 TCP规定,FIN报文段即使不携带数据,也要消耗一个序号。

2)服务器收到连接释放报文,发出确认报文,ACK=1,ack=u+1,并且带上自己的序列号seq=v,此时,服务端就进入了CLOSE-WAIT(关闭等待)状态。TCP服务器通知高层的应用进程,客户端向服务器的方向就释放了,这时候处于半关闭状态,即客户端已经没有数据要发送了,但是服务器若发送数据,客户端依然要接受。这个状态还要持续一段时间,也就是整个CLOSE-WAIT状态持续的时间。
3)客户端收到服务器的确认请求后,此时,客户端就进入FIN-WAIT-2(终止等待2)状态,等待服务器发送连接释放报文(在这之前还需要接受服务器发送的最 后的数据)。
4)服务器将最后的数据发送完毕后,就向客户端发送连接释放报文,FIN=1,ack=u+1,由于在半关闭状态,服务器很可能又发送了一些数据,假定此时的序列号为seq=w,此时,服务器就进入了LAST-ACK(最后确认)状态,等待客户端的确认。
5)客户端收到服务器的连接释放报文后,必须发出确认,ACK=1,ack=w+1,而自己的序列号是seq=u+1,此时,客户端就进入了TIME-WAIT(时间等待)状态。注意此时TCP连接还没有释放,必须经过2∗∗MSL(最长报文段寿命)的时间后,当客户端撤销相应的TCB后,才进入CLOSED状态
6)服务器只要收到了客户端发出的确认,立即进入CLOSED状态。同样,撤销TCB后,就结束了这次的TCP连接。可以看到,服务器结束TCP连接的时间要比客户端早一些
TCP/IP / 如何保证数据包传输的有序可靠?
对字节流分段并进行编号然后通过 ACK 回复超时重发这两个机制来保证。
(1)为了保证数据包的可靠传递,发送方必须把已发送的数据包保留在缓冲区;
(2)并为每个已发送的数据包启动一个超时定时器;
(3)如在定时器超时之前收到了对方发来的应答信息(可能是对本包的应答,也可以是对本包后续包的应答),则释放该数据包占用的缓冲区;
(4)否则,重传该数据包,直到收到应答或重传次数超过规定的最大次数为止。
(5)接收方收到数据包后,先进行CRC校验,如果正确则把数据交给上层协议,然后给发送方发送一个累计应答包,表明该数据已收到,如果接收方正好也有数据要发给发送方,应答包也可方在数据包中捎带过去。

HTML+CSS(三)的评论 (共 条)

分享到微博请遵守国家法律