Stevv's Blog

WinMTR 是一款结合了 ping 和 traceroute（路由跟踪） 功能的网络诊断工具，广泛用于分析网络连接质量问题，尤其在网络延迟、丢包、跳数过多等场景下非常有用。

🧰 WinMTR 是什么？

• 全称：Windows版的 My Traceroute（MTR）

• 用途：持续跟踪一个目标主机的网络路径，并统计每一跳的网络质量信息。

• 平台：适用于 Windows 系统的免费工具。

  阅读全文 »

OSPF（Open Shortest Path First，开放最短路径优先）是一个用于IP网络的链路状态路由协议，属于IGP（内部网关协议），适用于企业和运营商的大规模网络环境。OSPF通过计算最短路径来选择路由，并且能有效地处理大规模网络的拓扑结构。

开始介绍OSPF前，先介绍一下RIP的缺点：

• RIP 可能会造成流量瓶颈，因为它每 30 秒广播一次更新，由于 RIP 中的任何路由更新都会占用大量带宽
• RIP 的跳数限制为 15 跳，因此超出该距离的任何路由器都被视为无穷大，因此无法访问。
• 收敛速度很慢，当任何链接出现故障时，选择替代路线需要花费大量时间。
• RIP 不支持同一路由上的多条路径，这可能会产生更多的路由环路，使用固定跳数度量来选择最佳路由时，根据实时数据比较路由时，RIP 无法工作，由于重复的过程，这会导致数据包丢失和网络操作过载。

MAC地址表的作用

交换机之所以能够直接对目的节点发送数据包，而不是像集线器一样以广播方式对所有节点发送数据包，最关键的技术就是交换机可以识别连在网络上的节点的网卡MAC地址，并把它们放到一个叫做MAC地址表的地方。

这个MAC地址表存放于交换机的缓存中，并记住这些地址，这样一来当需要向目的地址发送数据时，交换机就可在MAC地址表中查找这个MAC地址的节点位置，然后直接向这个位置的节点发送。

在网络架构中，“接入（Access）、汇聚（Aggregation）和核心（Core）”是常用的分层结构模型，用于设计和部署企业网络。这种分层设计有助于提高网络的扩展性、性能和管理性。

1. 接入层（Access Layer）

• 位置：接入层是网络架构的最底层，直接与最终用户设备（如计算机、打印机、电话等）连接。

• 功能：接入层负责提供网络连接给用户设备。它通常包括接入交换机，这些交换机通过网线连接到每个工位或设备。

  阅读全文 »

Telnet协议（远程登录协议）是一种网络协议，用于通过网络进行文本方式的远程控制。它允许用户通过命令行界面登录到远程计算机，并在上面执行命令，用户可以先登录到一台主机，然后再通过telnet的方式远程登录到网络上的其他主机上，而不需要为每一台主机都连接一个硬件终端，然后对设备进行配置和管理。Telnet协议的主要特点包括：

远程登录：用户可以使用Telnet客户端程序连接到远程主机（服务器），并像本地一样操作该主机。

基于文本：通信内容主要是文本，包括用户输入的命令和主机返回的结果。

内网穿透（NAT Traversal）是指在局域网内的设备可以通过一些技术手段被外网访问。通常情况下，内网中的设备由于没有公网IP地址，无法直接从外网访问。内网穿透技术解决了这个问题，使得外网用户能够访问位于内网中的服务器或设备。

一、什么是内网穿透

内网，就是在公司或者家庭内部，建立的局域网络或者是办公网络，可以实现多台电脑之间的资源共享，包括设备、资料、数据等。而外网则是通过一个网关与其它的网络系统连接，相对于内网而言，这种网络系统称之为外部网络，常见的就是我们日常使用的互联网。

一般而言，在没有固定公网IP的情况下，外网设备无法直接访问内网设备。而内网穿透技术，顾名思义就是能让外网的设备找到处于内网的设备，从而实现数据通信。

一、DHCP

DHCP，即动态主机配置协议，是一种网络协议，用于在 IP 网络中自动分配 IP 地址及其他相关的网络配置参数（如子网掩码、默认网关和 DNS 服务器）给设备。它允许设备在加入网络时无需手动配置 IP 地址，从而简化了网络管理和配置

优点：

• 自动化配置：设备可以自动获取 IP 地址和其他配置参数，无需手动配置，简化了网络管理。

• 减少配置错误：避免了手动配置可能带来的 IP 地址冲突和配置错误。

• 灵活性：设备在网络中移动时可以自动获取新的 IP 地址，适应动态变化的网络环境。

  阅读全文 »

大多数vue项目采用SPA(单页面应用)的模式开发，不同视图的切换，都要通过前端路由去管理和控制。
因此平时我们开发vue的项目，都会install vue-router来实现前端路由，控制视图的切换。
前端路由的作用，就是改变视图的同时不会向后端发出请求。
vue-Router的原理就是利用了浏览器自身的两个特性(hash和history),来实现前端路由的功能。

一、什么是首屏加载

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容

首屏加载可以说是用户体验中最重要的环节

一、 定义

TypeScript中的类型断言是一种将变量或表达式的类型强制转换为开发者指定的类型的方式。可以使用尖括号（<>）语法或者as语法进行类型断言。

1. 使用尖括号语法的类型断言：

1
2

let str: any = "hello";
let len1: number = (<string>str).length;

一、作用

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名

在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化

两者在用法上

使用 reactive 声明的响应式数据，类型是 Proxy
使用 ref 声明的响应式数据，类型是 RefImpl
使用 computed 得到的响应式数据，类型也属于 RefImpl
使用 ref声明时，如果是引用类型，内部会将数据使用 reactive包裹成Proxy

1、性能提升

• 响应式性能提升，由原来的 Object.defineProperty 改为基于ES6的 Proxy ，使其速度更快

• 重写了 Vdom (diff算法优化，增加静态标志)

• 进行模板编译优化（静态提升，不参与更新的元素只被创建一次）

• 更加高效的组件初始化

  阅读全文 »

在 JavaScript 中，您可以使用多种方法来反转数组，下面详细介绍并提供示例说明其中的几种方法：

提升前端应用的性能和加载速度对于提供良好的用户体验至关重要。下面是一些常见的方法和策略，可以帮助您优化前端应用的性能和加载速度：

1. 压缩和合并文件：
   • 使用压缩工具（例如Gzip）对CSS、JavaScript和HTML文件进行压缩，以减小文件大小。
   • 合并多个CSS和JavaScript文件，减少网络请求的数量。

GET 请求和 POST 请求的区别：

数据传递方式：

• GET： 使用URL查询字符串传递数据，数据附加在URL中，例如：http://example.com/api?param1=value1&param2=value2。
• POST:
  • 使用请求主体传递数据，数据包含在请求主体中，而不会出现在URL中。
  • 具体来说，请求主体（Request Body）是 HTTP 请求中包含的数据块。这个数据块可以包含各种不同的数据格式，取决于请求的内容类型（Content-Type）。

Vue 的插槽（Slots）是一种组件化的技术，用于在父组件中将内容传递给子组件。它允许开发者在组件的模板中定义一些预留的区域，然后在使用该组件时，可以通过插槽将内容注入到这些区域中。

插槽的原理是通过组件之间的父子关系来实现的。当父组件包含子组件，并在子组件的模板中定义了一个或多个插槽时，父组件可以将内容传递给子组件，并在子组件的模板中使用插槽来渲染这些内容。这样就实现了父组件向子组件传递内容的功能

闭包的概念

闭包的概念可以理解为在一个函数里面又创建了另一个函数，这个创建的新函数可以访问到当前函数的变量。

下面是一段代码实例

1
2
3
4
5
6
7
8
9
10
11

function outerFunction() {
  var outerVar = 'I am outside!';
​
  function innerFunction() {
    console.log(outerVar);
  }
  return innerFunction;
}
​
var inner = outerFunction();
inner(); // 输出 "I am outside!"

Bind

JavaScript 中的 this 扮演者重要的角色，在 JavaScript 中它是依据函数是怎么被调用的而不是它在哪声明的（箭头函数则表现为相反）。

我们举一个例子来示范一下 this 是如何工作的：

Callbacks 和 promise 很好地解决了异步操作。Promise 比 callback 改进的地方在提供了扁平的语法，特别是遇到链式 promise 的时候。promise 包含的操作符 allSettled、any、then、catch 使得应对复杂的异步操作更自如。

ES2017 引入了 提供了简洁语法的 Async/Await。事实上，async/await 就是 promise；它们在这些关键词上提供抽血层。

回调函数对于处理耗时任务或后续会被阻塞的操作很有帮助，但我们也看到了它的一些缺点，特别是回到地狱。

为了解决回调函数的弊端，引入了 promise，它俩之间的关键区别是什么时候使用回调，我们可以向函数中传递一个回调，然后等到执行回调函数后可以得到结果。而在 promise 中，我们是在 promise 的返回值中使用回调

在使用git pull origin master把代码更新到Github仓库时报错：fatal: couldn’t find remote ref master，因为Github更改了命令, master被认为有种族歧视的含义, 现在用main代替, 所以现在使用pull可以写为

1

git pull origin main

在处理高频事件的时候，类似于window的resize或者scorll，或者input输入校验等操作时。如果直接执行事件处理器，会增大浏览器的负担，轻微的会产生抖动，严重的直接卡死，用户体验非常不好，面对这种情况，我们一般可以采用防抖和节流的方式减少调用频率。同时也不会影响实际效果。

Vite和Webpack是两种常见的前端构建工具，它们有一些区别和不同的特点。以下是它们之间的对比以及各自的优点和缺点：

箭头函数，多数时候像函数表达式的简写语法。最重要的区别是箭头函数没有和 this 关键字绑定。

对一个函数表达式来说，this 会随着函数调用时的上下文改变。而箭头函数，this 会基于词法作用域。箭头函数遵循普通变量的寻找方式，先在当前作用域中查找 this ，若没有找到则会继续寻找上一层作用域。

使用Ajax请求

1.创建一个 XMLHttpRequest 对象
2.初始化, 用get的方式去访问对应API接口
3.发送请求
4.绑定事件，处理响应结果，响应状态码在200-299范围说明成功获取数据，否则返回失败

一、var

在ES5中，顶层对象的属性和全局变量是等价的，用var声明的变量既是全局变量，也是顶层变量

注意：顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象

1
2

var a = 10;
console.log(window.a) // 10

使用var声明的变量存在变量提升的情况

1
2

console.log(a) // undefined
var a = 20

面包屑的介绍和实现思路

首先我们先来了解一下面包屑功能，这个功能其实就是根据路由的地址，来动态的生成导航菜单，今后在路由发生变化的时候，这个导航菜单也会动态的发生变化，就像下面展示的这样：

背景

在h5页面新开窗口，我们经常用window.open(‘haorooms.com’,’_blank’),但是这个方法在某些app内嵌h5中，或者某些浏览器中会阻止这个方法，那么有什么办法判断我们的open是否被阻止了呢？阻止之后我们有什么办法解决呢？

每一个网页都离不开 css ，但是很多人又认为，css 主要是用来完成页面布局的，像一些细节或者优化，就不需要怎么考虑，实际上这种想法是不正确的，作为页面渲染和内容展现的重要环节， css 影响着用户对整个网站的第一体验。

因此，在整个项目研发过程中， css 性能优化同样需要贯穿全程

枚举是TypeScript 支持的数据类型。枚举允许您定义一组命名常量。使用它们可以更轻松地记录意图或创建一组不同的案例。它们是 TypeScript 的少数功能之一，它不是 JavaScript 的类型级扩展。TypeScript 枚举允许开发人员定义一组命名常量。使用它们可以更轻松地记录意图或创建一组不同的案例。

ref 和 reactive 都是 Vue3 中的响应式数据的实现方式。

ref 主要用于将普通的数据类型包装成响应式对象，通过 .value 属性来访问该值，当值被修改时会触发视图的更新。例如：

JavaScript是一门弱类型语言，它对类型是弱校验，正因为这个特点，所以才有了TypeScript这个强类型语言系统的出现，来弥补类型检查的短板。TypeScript在实现类型强校验的同时，还要满足 JavaScript 灵活的特点，所以就有了类型兼容性这个概念。了解类型兼容性可以避免在实际的开发中出现一些低级错误。

部署过程不再赘述，网上大把的教程，尽量找最新的（2021过后的），能减少很多不必要的麻烦