笔记二:Web标准、HTTP、JS实践

203 阅读4分钟

一、Web标准概述

Web标准并不是指一个标准,它是构成Web基础、运行和发展的一系列标准的总称。常见的有:W3C\ECMA\IETF…


上图更正,http1.0应该也是支持keep-alive字段的,只是没有默认开启。

三、BOM标准主要对象简述

1、window对象:一般就是前端开发中的global对象(浏览器环境),所有的全局对象、变量、函数方法都应该暴露在这个对象上(相关操作:遮蔽效应)。

2、location对象:操作浏览器的导航栏(如地址、域名、端口号等)

3、navigator对象:操作浏览器的信息的对象。

4、screen对象:操作浏览器显示器的对象。

5、history对象:操作浏览器历史记录的对象。

四、DOM标准简述

提供了HTML\XML的编程接口,与语言无关且跨平台。

DOM Core:在DOM1的基础上,为节点添加了新方法和属性。

DOM Views:定义了基于样式信息的不同视图。

DOM Events:定义通过事件与DOM文档的交互。

DOM Style: 定义以编程方式访问和修改CSS样式的接口。

DOM Traversal and Range:新增遍历DOM文档及选择文档内容的接口。

DOM HTML:在DOM1 HTML部分的基础上,增加属性、方法和新接口。

DOM Mutation Observers: 定义基于DOM变化触发回调的接口。这个模块是DOM4级模块,用于取代MutationEvents。

五、Cookie\Session理解整合

HTTP 是无状态的协议(对于事务处理没有记忆能力,每次客户端和服务端会话完成时,服务端不会保存任何会话信息):即每个请求都是完全独立的,服务端无法确认当前访问者的身份信息,也无法分辨上一次的请求发送者和这一次的发送者是不是同一个人。所以服务器与浏览器为了进行会话跟踪(知道是谁在访问我),就必须主动去维护一个状态,这个状态用于告知服务端前后两个请求是否来自同一浏览器。而这个状态需要通过 cookie 或者 session 去实现

Cookie 存储在客户端:cookie 是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。

session 是另一种记录服务器和客户端会话状态的机制

session 机制是基于cookie 实现的,session 存储在服务器端,sessionId 会被存储到客户端的cookie 中

六、总结Cookie和Session区别

1、安全性:Session 比Cookie安全,Session 是存储在服务器端的,Cookie 是存储在客户端的。

2、存取值的类型不同:Cookie 只支持存字符串数据,想要设置其他类型的数据,需要将其转换成字符串,Session 可以存任意数据类型

3、有效期不同: Cookie 可设置为长时间保持,比如我们经常使用的默认登录功能,Session 一般失效时间较短,客户端关闭、浏览器进程关闭(默认情况下)或者 Session 超时都会失效。

4、存储大小不同:单个 Cookie 保存的数据不能超过 4K,Session 可存储数据远高于 Cookie,但是当访问量过多,会占用过多的服务器资源。

六、请求过程中的优化手段

1、长连接

2、减少网络传输大小(利用gzip等编码压缩)

3、妥善使用浏览器缓存(webStroage、强缓存、协商缓存)

4、使用http2/http3(头部压缩、server push)

七、补充HTTP2与之前的区别

在 HTTP/2 中,采用二进制格式传输,取代了HTTP1.x的文本格式,二进制格式解析更高效。此外有两个非常重要的概念,分别是帧(frame)和流(stream)

帧代表着最小的数据单位,每个帧会标识出该帧属于哪个流流也就是多个帧组成的数据流

多路复用,就是在一个 TCP 连接中可以存在多条流。换句话说,也就是可以发送多个请求,对端可以通过帧中的标识知道属于哪个请求;通过这个技术,可以避免 HTTP 旧版本中的队头阻塞问题,极大的提高传输性能。在此情况下:

1、同域名下所有通信都在单个连接上完成,消除了因多个 TCP 连接而带来的延时和内存消耗。

2、单个连接上可以并行交错的请求和响应,之间互不干扰(即类似异步任务)。

八、JavaScript的一些最佳实践(待后续编码实践后再更新吧...)

1、各司其职

2、label标签的设计应用。

3、组件设计:

(1)思考HTML结构、CSS样式的拆分与命名

(2)接口设计,我的理解是对动作行为的拆分

(3)耦合度判断

4、模板的抽象

5、设计模式(单例模式…)

6、OOP\FP(联想:Vue源码中函数式编程思想的应用)。