blog
blog copied to clipboard
HXWfromDJTU
🌈 技术博客，记录日常工作学习的整理~欢迎star
## 前言 最近在做一个行情模块，后端同学建议直接上`websocket`练练手，也符合业界基操。这里就记录一些开发中遇到了一些问题，聊一聊解决方案。这里不再去一点点陈列`websocket`的知识点，主要会围绕项目的痛点来说。 ps: 食用本文时，建议出发点需要向下沉，从`传输层`开始思考，做类似`http`(应用层)需要完成的事。 ## 选型 ### 第三方lib | 端 | 语言 | 框架(lib) | 环境 | | --- | --- | --- | --- | | 后端 |...
## 前言 实习时第一次接触`浏览器同源策略`问题，是前后端准备联调需要访问后端Api，呆头呆脑的我再浏览器上发送了好久的 `xhr` 请求，却一直不成功.....头都麻了  一起实习的小伙伴让我在`Chrome`的启动程序上，加上`--disable-web-security`的小尾巴禁用掉同源策略，轻松加愉快地直接解决了问题......  作为`web`开发者，工作中不同阶段、不同场景都会遇到`跨域`的情况。这篇`笔记📒`在博客中也随着工作学习的推进，一次次地更新内容，更新自己对`跨域`这一问题的认识。 以下内容最后更新于`2020.10`，前文内容略有删改。由于这个问题体系比较繁杂，本片文章仅涉及 * `浏览器同源策略的由来` * `为什么要同源策略，不设置会有什么安全问题。` * `为什么客户端没有同源策略呢` * `一些特殊的跨域场景` 想了解项目中如何进行跨域设置的小伙伴，请关注下一篇文章。 ## 浏览器的同源策略 > 同源策略(same-origin policy)是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 --- MDN ### 同源定义 资源`URL`的以下三项中都相同时才认为两个资源是`同源的` *...
## 前言 笔者最近到和朋友的讨论中，聊到了关于 微信扫码相关的设计流程: * 给定场景：打开京东，使用微信进行授权登录，扫码，选择确认。网页跳转到了登录后到的内容。 1. 简单说说这个流程是如何实现的？有哪几个关键的角色？ 2. 点击微信登录后，展现的二维码页面 URL 上应该有哪些参数？， 3. 出现的“二维码” 内容是什么? 扫码后微信端打开的页面？ 4. 手机端点击确认，网页端是如何感知到这个“点击确认”这个行为的？ 5. 要是在京东授权页面，同时打开好几个扫码页面，他怎么知道我是扫了哪个？又确认了哪个呢？ 6. 若是扫了码，但是我先去上个厕所再进行操作，那是整个流程该如何进行？ 7. 按照你刚才说的流程，思考下是否有存在问题(流程或者安全)？如何解决呢？ 大家可以自己先想想这个过程，去京东的授权页下打开 `DevTools` 看看 ## OAuth 2.0...
我们知道在浏览器渲染中，页面渲染有几个关键的时刻比如说`First Paint`、`DOMContentLoaded`、`Onload`以及`可交互时间`。 打开我们亲爱的淘宝页面，使用`devtools`中的`Performance`面板录制一段从初始加载到完成的过程，可以看出各个资源的下载和执行的过程，也能看到`Chrome`给我们标出了所需要注意的几个关键时间点。  ### DOMContentLoaded 直接看字面意思，就是DOM的内容加载(解析)完毕了。而据我们之前所知，页面中脚本(无论是外链还是内联)的执行都会阻碍DOM的解析，也就是说脚本的执行，会延迟`DOMContentLoaded`事件的到来。  如上图所示,DOM的解析阻塞于脚本的加载，而脚本的加载也受限于脚本前面的css加载完成后才会执行，在任何情况下，DOMContentLoaded的触发不需要等待图片或者其他任何资源的加载完成。  这里插一个题外话，`async`标明的脚本不知道何时会加载完，而后立即执行，所以`DOMContentLoaded`事件也不会等它。但`type=module`和`defer`标明的``标签脚本一定会先于`DOMContentLoaded`事件。 以下代码都是我们熟悉的用于监听`DCL`事件 ```js // jQuery $(document).ready(function(){......}); // 或者 $(function(){...}); // 原生 document.addEventListener('DOMContentLoaded',function(){......}) ``` ##### Q：我们把script沉到body后面可以让DOMContentLoaded提前吗？ 首先回答是不可以的。 因为`DCL`的定义是整个文档都加载完成，当然也包括body外，HTML内的script标签。 但是我们要是把`script`标签放到了`header`中，往细说是阻塞了`body`的解析，那么body中有啥？当然就是我们页面的主要内容结构啦。 理论上浏览器会等待DOM和CSSOM都解析完生成RenderTree才开始布局和绘制，但是现代的浏览器，为了减少白屏等待的时间，都会进行HTML局部的渲染。 ...
# HTTP状态码 - 从报文头一一分析  ## 1XX ### 100 Continue #### `行为表现` HTTP/1.1 协议里设计 100 (Continue) HTTP 状态码的的目的是，在客户端发送 Request Message 之前，HTTP/1.1 协议允许客户端先判定服务器是否愿意接受客户端发来的消息主体（基于 Request Headers）。 #### `设计含义` 1. `client` 和 `server`...
## 前言 上一篇笔记了解了浏览器`同源策略`的方方面面，随着`web`服务的多元化，以及前后端分离的大环境，页面与资源的分离已经是必然的事情。这次则先聊聊工作中用得最多的 CORS 策略`(Corss-origin Resource Sharing)`。 ## CORS 与 请求类型 CORS 策略允许浏览器向跨源服务器发出获取资源，但请求既然是来源于不同于服务器的非同域。最容易出现以下问题: 1. 跨域说明有可能是恶意站点发起，则处理请求前的 `同域检测` 就十分有必须要了。(你是否想起了`CSRF Token`的概念，后文会做相应比较)。 2. 每次都携带全量数据访问服务端接口，但却因为最基础的 `同域检测` 都通过不了，则十分浪费网络带宽 3. 服务器执行 `同域检测` 的逻辑复杂程度不一，每一次都需要重新判断，也是对服务器资源的浪费 针对此需求，w3c 在提出了一个`预检查请求` (CORS-preflight) 的概念。但由于`向下兼容`的需要，只在`非简单请求`中启用`预检查请求`，而对`简单请求`不作额外处理。...
> koa-compose 作为koa实现中间件串联功能的关键函数，值得我们细细品味，话不多说先送上[👉源码](https://github.com/koajs/compose/blob/master/index.js)，别惊讶确实只有这么多行.... ## 先撸一遍 ```js 'use strict' /** * Expose compositor. */ module.exports = compose /** * Compose `middleware` returning * a fully valid middleware comprised * of all...
### net.Server * 事件类型 1. close 2. connection 3. error 4. listening ### 建立socket 1. Socket 函数需要指定到底是 IPv4 还是 IPv6 2. 还要指定到底是 TCP 还是 UDP ### TCP Socket #### 建连过程...
# 进击的http2  ## 单一长链接 ### 1. 减少tcp握手次数，减少RTT 在请求的资源很多的情况下，`http1.x`是会同时打开`6~8`个`tcp`链接，所以我们在前端机操作的时候，就有了压缩合并css/js资源，使用雪碧图这样的优化方案。 而http2使用单一的`长链接`去加载所有资源。有效地减少了`tcp`握手所带来的时延,特别是当请求使用了`ssl`加密请求时，握手次数会大大增加。    结合上面图说明，`http2.0` 可以同时对多个资源进行请求，不受 `6~8` 链接的限制，图中看出，服务器接收到请求的时间是一样的，而根据不同的资源做出的响应时间长度不一样而已。 ### ❓ 题外话：为啥浏览器要限制 6~8 个链接呢？ 1. 浏览器所在的操作系统，对半开连接数有限制，用于保护 `TCP/IP` 协议栈资源不被迅速消耗殆尽。所以浏览器不会同时发送过多的 `tcp` 链接 2. 浏览器操作启动一个...
 ## what is https 1. `https` 全称 `(Hyper Text Transfer Protocol over Secure Socket Layer)`，也就是在原`http`协议下，添加`SSL(Secure Socket Layer)`层 2. `https`最大的亮点就是`SSL`层加对数据的加密 ## why use https? > 💸 从原来的`http`协议缺点来看： 1. `明文传输` 传输的时候使用`明文`传参，极其容易被第三方截取。https使用的是加密传输。...