HTTPS 与 HTTP 的区别在哪？
HTTP与HTTPS作为互联网数据传输的核心协议，其通信机制与安全特性深刻影响着现代网络应用的可靠性与用户体验。本文将解析两者的通信流程、安全机制及核心差异。
一、HTTP的通信机制先来看看HTTP是什么吧。
HTTP基于TCP/IP协议栈，采用经典客户端-服务器模型：
TCP连接建立通过三次握手创建可靠传输通道（源IP:端口 ↔ 目标IP:端口），默认端口80。
请求-响应交互浏览器发起到服务器的 TCP 连接。
GET /index.html HTTP/1.1
Host: www.baidu.com
服务器处理与响应服务器接收来自浏览器的 TCP 连接。
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
<html>...</html>
交换信息浏览器（HTTP 客户端）与 Web 服务器（HTTP 服务器）交换 HTTP 消息。
连接终止完成传输后通过四次挥手断开连接，关闭 TCP 连接。
二、HTTPS的进化HTTPS在HTTP与TCP层之间插入 ...
TypeScript 中的 type 和 interface：你真的了解它们的不同吗？
如果你有写过 Vue3 的项目，那么对 TypeScript 肯定不会陌生。不管是公司新项目技术选型还是个人学习开发新的前端项目，Vue3 + TypeScript 已经成为首选技术方案之一
在 TypeScript 这个强大的静态类型系统中，type 和 interface 是两个重要的关键字，用于定义和描述数据类型。然而，这两者之间的区别是什么，在实际开发过程中我们要怎么用呢？废话不说，直接进入正题，就让我们一起深入探讨吧
一、type 和 interface 的定义
type: 可以定义一个集合，可以包含各种类型的属性和值，以用来描述对象、函数、联合类型、交叉类型等
12345type Person = { name: string; age: number; sex: 0 | 1;};
interface：它定义了一个对象的形状，描述了对象应该具有的属性及其类型12345interface Person { name: string; age: number; sex: 0 | 1;}
通过上面的示例，我们可以看到，虽 ...
OpenAI API访问速度不佳？试试用Vercel来加速！
前言众所周知，使用openAI API在国内访问体验并不佳，经常遇到访问较慢或者访问失败的问题。本文着重讲讲怎么解决这个问题，让我们日常开发和使用能够更方便的体验到AI带来的便利
为了帮大家省钱，也为了方便操作，实现这套方案只需要以下这三样东西
一个可使用的OpenAI key
一个可以正常访问的域名
GitHub账号（用来登录Vercel）
一个key如果是自己注册话，就几块钱而已，域名也有几块钱一年的，加起来这套方案便宜的话成本就十几块钱。一顿饭钱就可以实现国内快速访问了，这不心动吗？
这套方案的核心代码就是将请求进行转发
123456{ "rewrites": [ { "source": "/", "destination": "https://api.openai.com" }, { "source": "/:match*", "destinatio ...
手摸手，带你实现移动端H5瀑布流布局
移动端瀑布流布局是一种比较流行的网页布局方式，视觉上来看就是一种像瀑布一样垂直落下的排版。每张图片并不是显示的正正方方的，而是有的长有的短，呈现出一种不规则的形状。但是它们的宽度通常都是相同的
因为移动端瀑布流布局主要为竖向瀑布流，因此本文所探讨的是竖向瀑布流
特点竖向瀑布流布局主要有下面几种特点：
一般出现在移动端 H5 页面底部
主要以图片或视频为主
降低页面复杂度，节省空间，可以容纳更多内容
不规则展示，不会那么枯燥，用户体验好
难以或者说不能滚动到页面最底部
不同于传统的分页，瀑布流因为以上这些特点一般被用在这些场景下：
推荐机制下的信息 即根据用户画像推荐或者运营人员推荐的信息
大分类下的信息流 展示的信息有很多，它们的大分类都是相同的，适合用户不明确详细需要获得什么信息或商品的情况下
各个信息或商品之间没有比较强的相关性 和上面一条类似，展示的不是千遍一律的东西，相对独立的信息或商品也许能让用户意外发掘到想要的东西
实现一般来说主要分为 CSS 实现和 JS 实现
CSS 实现主要是用到一些专门的样式属性，实现起来简单，但是往往会有兼容性问题
JS 实现的方法则 ...
二次封装这几个 element-ui 组件后，让代码更加优雅了
element-ui 因其组件丰富、可拓展性强、文档详细等优点成为 Vue 最火的第三方 UI 框架。element-ui 其本身就针对后台系统设计了很多实用的组件，基本上满足了平时的开发需求。
既然如此，那么我们为什么还要进行二次封装呢？
有以下两种场景
在日常的开发过程中，部分模块重复性比较强，这个时候就会产生大量重复的代码。这些模块的样式基本上是比较固定的，而且实现的功能也比较相近。如果每个地方都复制一份相似的代码，既不遵守代码的简洁之道，也不利于后期的维护修改
此外，在一些业务背景下，产品可能会要求设计新的交互。这个时候也可以基于 element-ui 进行二次开发，将其封装成一个新的组件方便多个地方使用
因为在日常开发过程中，项目主要以 Vue2 为主，并且现在很多公司仍在使用着 Vue2。故本文主要探讨 Vue2 + element-ui 的项目可以怎么封装一些比较通用化的组件
核心思想
主要以父组件传递数据给子组件来实现一些功能，子组件定义固定的展示样式，将具体要实现的业务逻辑抛出来给父组件处理
尽量保持 element-ui 组件原有的方法（可以使用 v-bind& ...
这几种方法帮你快速实现回到页面顶部
背景介绍当页面内容很多的时候，用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时，他可能需要不断滚动鼠标滚轮，这就导致用户体验将很差。鉴于这种情况， “回到顶部”这一功能便出现了。
如今在我们浏览网站的时候，常常能遇见“回到顶部”这个按钮。目前主流的回到页面顶部分表现为两种，一种是直接回到页面的顶部，这种方式简单粗暴；另外一种则是自动滚动间接回到页面顶部，这样一来视觉体验上可能更好，但是用户需要过几秒才能看到顶部内容。
例如掘金，在滚动到一定高度时会出现“回到顶部”按钮，点击后会直接回到页面顶部，就是上文说到的第一种情况。
实现动态显示滚动按钮“回到顶部”并不是一直显示的，而是滚动到一定值才出现的，因此应该在window.onscroll里定义一个判断事件。
123456789101112window.onscroll = function () { var currentHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scr ...
前端都应该要掌握的防抖和节流
说到防抖和节流相信大家都不陌生，这两个东西大家可能多多少少都有用到过，最少也有听过
古人云，温故而知新。虽然可能已经很熟悉防抖和节流了，但不妨再看一看巩固一下知识
什么？你说你不仅不会手写防抖和节流，也没有听过。那也没事，下文会详细介绍的
防抖和节流有什么用？简单来说，防抖和节流都是用来减少函数执行的频率，以达到优化项目性能或者实现特定功能的效果
防抖定义：事件被触发一定时间后再执行回调。如果在这段时间内又被触发了，则重新开始计算时间
常用场景
输入框远程查询事件
在线文档自动保存
浏览器视口大小改变
例子张三在某平台搜索一本书籍，发现搜索建议并不是瞬间就出现的，而是自己输入词组结束后出现的。那么该平台在此搜索框可能做了什么操作？代码实现
123456789101112131415161718<body> <input type="text" id="searchElement" /></body><script> const searchElement = document.getEleme ...
在网站copy时自带的版权小尾巴以及复制代码，可以怎么实现
前言每天网上的博客各个领域都会涌现新文章，有时候看到感兴趣的知识就想把某段文字 copy下来 摘录下来，等有时间后慢慢品味
在部分网站上，如果只是复制少量文字，并没有什么不同。但是当我们复制的文字多的话会发现多了一个小尾巴
所谓小尾巴是指在复制文本的最后会多一个作者和出处信息，如下：
···（复制的内容）···————————————————版权声明：本文为xxx的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://www.cnblogs.com/rainy-night/
博客园可能并没有这种情况，但是在很多技术论坛、博客都有这样的处理。当我们复制文章内容的时候，往往会自动加上一段文本信息版权
那么如果我们也想实现这样的效果要怎么做呢？
实现版权小尾巴前提：假定所选择的字符串长度大于等于130时带上版权信息
12345678910111213141516171819202122232425<div id="copy"> <div>示例一：这不是一个 bug，这只是一个未列出来的特性。 ...
都知道0.1 + 0.2 = 0.30000000000000004，那要怎么让它等于0.3
前言小学数学老师教过我们，0.1 + 0.2 = 0.3，但是为什么在我们在浏览器的控制台中输出却是0.30000000000000004？
除了加法有这个奇怪的现象，带小数点的减法和乘除计算也会得出意料之外的结果
123console.log(0.3 - 0.1) // 0.19999999999999998console.log(0.1 * 0.2) // 0.020000000000000004console.log(0.3 / 0.1) // 2.9999999999999996
原因我们都知道计算机时是通过二进制来进行计算的，即 0 和 1
就拿 0.1 + 0.2 来说，0.1表示为0.0001100110011001...，而0.2表示为0.0011001100110011...
而在二进制中 1 + 1 = 10，所以 0.1 + 0.2 = 0.0100110011001100...
转成10进制就近似表示为 0.30000000000000004
结论简单来说就是，浮点数转成二进制时丢失了精度，因此在二进制计算完再转回十进制时可能会和理 ...
GitHub如何选择合适的license(许可证)
license译为许可证，也可作为开源协议，它可以将自己创作的东西，授权给他人使用，并约定了使用者可以有的权利和必须遵从的义务。现在很多优秀的开源项目都有设置license，不同的license所约束的条件也不同。因此开源不等于免费，开源也不等于没有约束。
对于大型的软件可能都有专门的律师团队去撰写软件协议。可是作为一名开发人员，有时候我们想开源自己的项目，但又不想自己的源代码被随意借鉴或者分享到别处。这个时候我们就可以设置license去约束一些行为。
但是协议往往需要具备专业的知识，它涉及到了法律规则，普通人不可能在短时间内就掌握这些知识。这时候我们可以选择一些流行的开源协议去满足项目的需求。
快速选择流行的license在创建项目的时候，我们可以选择一个license，可以看到有很多流行的开源协议可以选择。
下文将以GitHub这份协议做简单的介绍，给项目快速选择一个合适的协议。
各协议介绍
协议
简述
Apache
允许他人修改源代码后再闭源，但是必须对每个修改过的文件做版权说明
GPL3
无论以何种方式修改或者使用代码，都需要开源
MIT
允许他人修改源 ...