没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
内容概要:本文详细介绍了前端开发中的一些重要技术和知识点,涵盖了 HTTP和 HTTPS的区别及工作原理,TCP三次握手和四次挥手,前端性能优化技巧,如粘包问题、缓存机制、页面加载全过程等。同时也深入讨论了 DOM、CSS盒模型(包括盒模型、BFC)、以及前端布局(如 Flex、Rem、百分比、浮动布局)等内容。 适合人群:前端初学者和有一定经验的研发人员,特别是那些希望深入了解前端基础知识和技术细节的人。 使用场景及目标:帮助前端开发者更好地理解和掌握前端核心技术,提升编码效率和代码质量,特别是在处理网络通信、性能优化和布局设计等方面。 其他说明:本文适合自学和团队培训,通过详细的技术解析和实例讲解,可以帮助读者快速掌握前端开发的核心技能。
资源推荐
资源详情
资源评论
1. HTTP 和 HTTPS
1.http 和 https 的基本概念
http: 是一个客户端和服务器端请求和应答的标准(TCP),用于从 WWW 服务
器传输超文本到本地浏览器的超文本传输协议。
https:是以安全为目标的 HTTP 通道,即 HTTP 下 加入 SSL 层进行加密。其作
用是:建立一个信息安全通道,来确保数据的传输,确保网站的真实性。
2.http 和 https 的区别及优缺点?
http
是超文本传输协议,信息是明文传输,
HTTPS
协议要比
http
协议
安全
,
https
是
具有安全性的
ssl
加密传输协议,可防止数据在传输过程中被窃取、改变,确保数
据的完整性
(
当然这种安全性并非绝对的,对于更深入的
Web
安全问题,此处暂且
不表
)
。
http
协议的
默认端口
为
80
,
https
的默认端口为
443
。
http
的连接很简单,是无状态的。
https
握手阶段比较
费时
,会使页面加载时间延
长
50%
,增加
10%~20%
的耗电。
https 缓存
不如
http
高效,会增加数据开销。
Https
协议需要
ca
证书,费用较高,功能越强大的
证书费
用越高。
SSL
证书需要绑定
IP
,不能再同一个
IP
上绑定多个域名,
IPV4
资源支持不了这种
消耗。
3.https 协议的工作原理
客户端在使用 HTTPS 方式与 Web 服务器通信时有以下几个步骤:
1. 客户端使用 https url 访问服务器,则要求 web 服务器建立 ssl 链接。
2. web 服务器接收到客户端的请求之后,会将网站的证书(证书中包含了公钥),传输
给客户端
。
3. 客户端和 web 服务器端开始协商 SSL 链接的安全等级,也就是加密等级。
4. 客户端浏览器通过双方协商一致的安全等级,建立会话密钥,然后通过网站的公钥
来加密会话密钥,并传送给网站。
5. web 服务器通过自己的私钥解密出会话密钥。
6. web 服务器通过会话密钥加密与客户端之间的通信。
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 校验,如果正确则把数据交给上层协议,
然后给发送方发送一个累计应答包,表明该数据已收到,如果接收方正好也有数
据要发给发送方,应答包也可方在数据包中捎带过去。
TCP 和 UDP 的区别
1. TCP
是面向
链接
的,而
UDP
是面向无连接的。
2. TCP
仅支持
单播传输
,
UDP
提供了单播,多播,广播的功能。
3. TCP
的三次握手保证了连接的
可靠性; UDP
是无连接的、不可靠的一种数据传输协议,
首先不可靠性体现在无连接上,通信都不需要建立连接,对接收到的数据也不发送
确认信号,发送端不知道数据是否会正确接收。
4. UDP
的
头部开销
比
TCP
的更小,数据
传输速率更高
,
实时性更好
。
HTTP 请求跨域问题
1.
跨域的原理
2.
跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造
成的。
同源策略,是浏览器对 JavaScript 实施的安全限制,只要协议、域名、端口有
任何一个不同,都被当作是不同的域。
跨域原理,即是通过各种方式,避开浏览器的安全限制。
3.
4.
解决方案
5.
最初做项目的时候,使用的是 jsonp,但存在一些问题,使用 get 请求不
安全,携带数据较小,后来也用过 iframe,但只有主域相同才行,也是存
在些问题,后来通过了解和学习发现使用代理和 proxy 代理配合起来使用
比较方便,就引导后台按这种方式做下服务器配置,在开发中使用 proxy,
在服务器上使用 nginx 代理,这样开发过程中彼此都方便,效率也高;现
在 h5 新特性还有 windows.postMessage()
6.
o
JSONP:
ajax 请求受同源策略影响,不允许进行跨域请求,而 script 标签
src 属性中的链 接却可以访问跨域的 js 脚本,利用这个特性,服
务端不再返回 JSON 格式的数据,而是 返回一段调用某个函数的
js 代码,在 src 中进行了调用,这样实现了跨域。
o
步骤:
o
1.
去创建一个
script
标签
2. script
的
src
属性设置接口地址
3.
接口参数,必须要带一个自定义函数名,要不然后台无法返回数据
4.
通过定义函数名去接受返回的数据
//动态创建 scriptvar script =
document.createElement('script');
// 设置回调函数 function getData(data) {
console.log(data);
}
//设置 script 的 src 属性,并设置请求地址
script.src = 'http://localhost:3000/?callback=getData';
// 让 script 生效 document.body.appendChild(script);复制
代码
JSONP 的缺点:
JSON 只支持 get,因为 script 标签只能使用 get 请求;JSONP 需
要后端配合返回指定格式的数据。
o
document.domain 基础域名相同 子域名不同
o
o
window.name 利用在一个浏览器窗口内,载入所有的域名都是共
享一个 window.name
o
o
CORS CORS(Cross-origin resource sharing)跨域资源共享 服务器设置
对 CORS 的支持原理:服务器设置 Access-Control-Allow-Origin HTTP
响应头之后,浏览器将会允许跨域请求
o
o
proxy 代理 目前常用方式,通过服务器设置代理
o
o
window.postMessage() 利用 h5 新特性 window.postMessage()
o
跨域传送门 ☞ # 跨域,不可不知的基础概念
Cookie、sessionStorage、localStorage 的区别
相同点:
存储在客户端
不同点:
cookie 数据大小不能超过 4k;sessionStorage 和 localStorage 的存储比 cookie 大得多,
可以达到 5M+
cookie 设置的过期时间之前一直有效;localStorage 永久存储,浏览器关闭后数据不
丢失除非主动删除数据;sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 的数据会自动的传递到服务器;sessionStorage 和 localStorage 数据保存在本
地
粘包问题分析与对策
TCP 粘包是指发送方发送的若干包数据到接收方接收时粘成一包,从接收缓冲区
看,后一包数据的头紧接着前一包数据的尾。
粘包出现原因
简单得说,在流传输中出现,UDP 不会出现粘包,因为它有消息边界
剩余62页未读,继续阅读
资源评论
十大网站建设
- 粉丝: 34
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功