blog
blog copied to clipboard
sisterAn
瓶博：每日更新，前端前进
## 引言 本文主要分为以下几个方面循序渐进走进 HTTP/3: - HTTP/2 和 TCP 的致命缺陷 - QUIC 协议为什么选择 UDP - QUIC 和 HTTP/3 新特性 - QUIC 和 HTTP/3 前景发展展望 ## HTTP/2 和 TCP 的缺陷 HTTP/2 使用二进制传输、Header...
# 为什么说HTTPS比HTTP安全呢 ## HTTP 协议 HTTP（Hyper Text Transfer Protocol）协议是**超文本传输协议**的缩写，它是从WEB服务器传输超文本标记语言(HTML)到本地浏览器的传送协议，位于 OSI 网络模型中的`应用层`  HTTP 是一个基于TCP/IP通信协议来传递数据的协议，传输的数据类型为 HTML 文件、图片文件、查询结果等。 HTTP协议一般用于 B/S 架构。浏览器作为 HTTP 客户端通过 URL 向 HTTP 服务端即 WEB 服务器发送所有请求。  ### HTTP...
## 引言 本文主要通过以下四个方面介绍，循序渐进走进HTTP/2： - HTTP/1.1发明以来发生了哪些变化？ - HTTP/1.1 协议的性能缺陷 - HTTP/2 新特性 - HTTP/2 遗留问题 ## HTTP/1.1发明以来发生了哪些变化？ 近年来，如果你仔细观察那些最流行的网站首页所需要下载的资源的话，会发现一个非常明显的趋势： - **消息变大** ：从几 KB 大小的消息，到几 MB 大小的消息； - **页面资源变多** ：从每个页面不到 10 个的资源，到每页超 100...
## 引言 首先，解答本题， http 通过判断 header 中是否包含 `Connection: Upgrade` 与 `Upgrade: websocket` 来判断当前协议是否要升级到 websocket ，下面我们了解一下 WebSocket 协议与由来 ## WebSocket 由来 WebSocket 之前，如果需要在客户端和服务之间双向通信，需要通过 HTTP 轮询来实现， HTTP 轮询分为轮询与长轮询：  其中，轮询是指浏览器通过 JavaScript 启动一个定时器，然后以固定的间隔给服务器发请求，询问服务器有没有新消息，缺点：...
## 引言 本文从 OSI 网络分层（7 层） 开始探讨 TCP 与 HTTP 的关系，包含以下几个部分： - OSI 网络分层（7 层） - TCP 协议（三次握手、四次挥手） - HTTP - TCP 与 HTTP 的区别 ## OSI 网络分层（7 层） Open...
### 引言 `JS`系列暂定 27 篇，从基础，到原型，到异步，到设计模式，到架构模式等， 本篇是 `JS`系列中第 3 篇，文章主讲 JS 继承，包括原型链继承、构造函数继承、组合继承、寄生组合继承、原型式继承以及 ES6 继承 。 ## ES5 继承 先定义一个父类 ```js function SuperType () { // 属性 this.name = 'SuperType'; } //...
## `Promise.prototype.finally()` 的作用 `Promise.prototype.finally()` 是 ES2018 新增的特性，它回一个 `Promise` ，在 `promise` 结束时，无论 `Promise` 运行成功还是失败，都会运行 `finally` ，类似于我们常用的 `try {...} catch {...} finally {...}` `Promise.prototype.finally()` 避免了同样的语句需要在 `then()` 和 `catch()` 中各写一次的情况 ```js new Promise((resolve,...
## 引言 本文从五个方面介绍 `Promise.any` ： - `Promise.any` 的作用 - `Promise.any` 应用场景 - `Promise.any` vs `Promise.all` - `Promise.any` vs `Promise.race` - 手写 `Promise.any` 实现 下面正文开始👇 ## Promise.any `Promise.any()` 是 ES2021 新增的特性，它接收一个...
监听一个变量的变化，当变量变化时执行某些操作，这类似现在流行的前端框架（例如 React、Vue等）中的数据绑定功能，在数据更新时自动更新 DOM 渲染，那么如何实现数据绑定喃？ 本文给出两种思路： - ES5 的 Object.defineProperty - ES6 的 Proxy ## ES5 的 Object.defineProperty > `Object.defineProperty()` 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象 > > ——MDN ```js Object.defineProperty(obj, prop, descriptor) ``` 其中： -...
仔细观察本题，本题可分为三个步骤： - 从 `rgb(255, 255, 255)` 中提取出 `r=255` 、 `g=255` 、 `b=255` - 将 `r` 、 `g` 、 `b` 转换为十六进制，不足两位则补零 - 组合 `#` ### 提取 r、g、b #### 方式一：利用 match 利用...