许小墨のBlog

前端性能优化1. 写在前面 随着系统的不断迭代，前端性能相关问题逐步凸显出来，项目也来到了新的阶段，对性能方面的诉求也逐渐提高，需要对性能问题进行逐步优化解决。 1.1 性能优化很重要性能优化对于前端来讲还是很重要的，只是在一些情况下，都让步给了功能迭代，对前端工程师来讲很多时候并没有给予相应的重视。而这种情况相比于端上的前端工程师，后台系统或 ToB 系统的前端工程师更为严重。可能对于 PC 访问的后台系统来说，让用户等几秒貌似并不是很严重的问题（我们理所当然这么想）。但从 To C 业务的经验，比如加载速度差距 100ms 都可能带来 10%的流量损失，其实性能问题还是很重要，谁又会乐意在屏幕前干等几秒才看到页面呢？ 1.2 怎么入手？那么又该怎么入手去做相关优化呢？想想页面渲染的过程： 网络请求静态资源 页面 Dom 树绘制 Cssom 树绘制 渲染树绘制 那么相应的可能也从这几方面入手： 网络请求耗时 资源加载 缓存的使用 代码本身（css，js，html） Dom 操作优化 等等 回顾下雅虎 35 条军规相关分析指标：First Paint 首次绘制（FP）Firs ...

1. Sentry 监控框架一、框架比较 是否免费 功能支持 本地部署 Browser JS Node JS Github Star Sentry 免费 错误监控性能分析回话重播 ✅ ✅ ✅ 34.9K Cat 免费 性能指标错误追踪 ✅ ✅ 18K Bugsnag 基础功能免费 用户监控错误监控稳定性管理 ✅ ✅ ✅ bugsnag-js 795 Rollbar 每月 5000 事件、数据保留 30 天免费，基于云服务 错误检测、追踪、定位 ❎ ✅ ✅ rollbar.js 550 Prometheus 免费 指标监控预报警 ✅ ❎ ✅ 49.6K 二、Sentry 功能列表1）错误监控 错误收集，包含用户 UA，sourcemap 源码上下文 错误链路追踪，包含用户操作事件，发送请求 应用稳定性监控，包含用户、会话统计，故障率 2）会话重播播放错误前后步骤 深度调试，包含步骤控制台输出、网络请求、DOM 节点 3）性能监控 性能监控指标 服务器 连续数据库查询，比如没有指定返回字段、没有查询条件 慢速数据库查询 N + 1 查询，循环中调用数 ...

Nginx一、Nginx 简介简介 Nginx（“engine-x”）是一个轻量级、高性能的 HTTP 和反向代理服务器。 功能 反向代理 负载均衡 正向代理和反向代理 简单理解：客户端使用的代理为正向代理，服务端使用的代理为反向代理。概念：正向代理是位于客户端与目标服务器之间的中间服务器，客户端需要做特别设置；用途：突破访问限制；提高访问速度（相同请求缓存）；隐藏客户端真实信息；概念：反向代理服务器接收客户端的请求，将其分发至内部网络中的服务器。客户端无感知，不需要任何的设置。用途：负载均衡；提高访问速度；提供安全保障；隐藏服务端真实信息； 负载均衡概念：将请求进行分布式处理的策略； 123456789101112131415161718192021222324upstream defaultServer {server localhost:8087;server localhost:8088;server localhost:8089;}upstream weightServer {server localhost:8087 weight=10; ...

class-transformer 介绍1. 什么是 class-transformer 文档：https://github.com/typestack/class-transformer class-transformer 是一个为 Typescript 设计的轻量级库，用于实现 JS 普通对象和类对象之间的转换。它基于装饰器模式，使得开发者能够定义如何将对象属性从一个形式映射到另一个形式，以及在转换过程中如何处理复杂的类型和嵌套的对象结构。有助于维护类型安全并提高开发效率。 2. 为什么需要 class-transformer举个 🌰：假设我们定义了一个 User 类 1234567891011export class User { firstName: string; lastName: string; constructor(firstName: string, lastName: string) { this.firstName = firstName; this.lastName = lastName; } getNa ...

Nestjs 开发规范一、请求生命周期 传入请求 全局中间件  → 模块中间件 全局守卫  → 控制器守卫  → 路由守卫 全局拦截器  → 控制器拦截器  → 路由拦截器 全局管道  → 控制器管道  → 路由管道  → 路由参数管道 控制器逻辑  → Service → Dao 路由拦截器  → 控制器拦截器  → 全局拦截器 路由异常过滤器  → 控制器异常过滤器  → 全局异常过滤器 返回响应 二、Provider 使用场景Middleware 中间件 认证和授权 ： 验证用户身份、角色、权限，针对特定路由进行访问控制； 日志记录 ：记录请求时间、IP 地址、用户信息等公共基础日志； 数据转换 ：比如 cookie 结构化数据转换等； 函数式中间件适合逻辑简单，无成员、无依赖项。 Guard 守卫 鉴权 ：守卫可以通过执行上下文环境获取元信息从而针对路由进行更精细的控制； auth.guard.ts123456789101112131415161718192021222324252627282930@Injectable()export class AuthGuard i ...

Nestjs 简介框架简介 介绍用于高效、可扩展的 Node.js 服务端应用程序的框架，使用渐进式 Javascript，结合了面向对象（OOP）、函数式编程（FP）、函数响应式编程（FRP）思想。 理念开箱即用，创建高度可测试、可扩展、松耦合且易于维护的应用程序。 OOP：使用 Class 作为主要代码组织单元，主要使用@Injectable 标记为可注入依赖项，通过依赖注入的方式实现控制反转，达到类之间的松耦合；通过继承扩展基类来创建具体的子类实现更具体的功能，比如自定义异常可以继承标准 HTTPException 进行扩展； FP：针对无依赖项的中间件，我们可以使用纯函数中间件实现； FRP：Controller 除了返回 Promise 对象，还可以返回 Observable 对象，其能力由 RxJS 库提供，可以监听事件或者数据源进行最终数据的返回； Nestjs vs Express、Fastify TypeScript 支持（Fastify 是原生支持 TS） 依赖注入，简化实例的创建与管理 模块化架构，按功能拆分模块，分界清晰 元数据反射，可以使用装饰器实现路由 ...

前端中间层（BFF）中间层的作用接口聚合这个是我们比较常用到的功能，目前前端项目会对应后端多个服务，即使是同一业务的后端服务，目前后端的架构也都是为服务设计，所以接口从业务单元出发，可能会比较分散。如果仅从页面发起请求，可能会发起多个请求，有时候类似于详情页，或者信息量较大的地方可能会达到七八个请求。所以在 node 服务做简单的聚合，会大幅减小前端的请求数，同时减轻前端的业务处理逻辑。 好处：降低请求数，减轻前端业务逻辑压力，接口更加面向前端展现层。缺点：node 服务逻辑处理，代码排查需要根据 node 日志查看，不能直接从前端报错来判断具体是后端的什么问题。 数据过滤数据过滤，将后端接口做整体的透传，后端的接口一般会携带比较多的信息，结构也会相对于复杂。node 层应该有一道过滤规则，将接口需要的信息进行返回，如果结构上不符合前端展示或在前端处理比较复杂，可以进行改造，精简后再返回到客户端。 好处：减小请求大小，精简信息，符合展示逻辑。缺点：处理过滤逻辑工作量较大。后端接口变动，node 层也同样需要跟进。 权限校验在 node 服务层进行权限校验，对相关的接口用户及用户权限判断 ...

Nginx Tomcat 产品—》中间件–》解决方案软负载：Nginx硬负载：F 采取 是什么、为什么、怎么用 的思维三部曲方式学习 一、什么是 NginxNginx (engine x) 是一个高性能的 HTTP 和反向代理 web 服务器 Nginx 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在 BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上 nginx 的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用 nginx 网站用户有：**百度、京东、新浪、网易、腾讯、淘宝**等。 二、为什么使用 Nginx？在传统的 Web 项目中，并发量小，用户使用的少。 所以在低并发的情况下，用户可以直接访问 tomcat 服务器，然后 tomcat 服务器返回消息给用户。 1用户访问<-->Tomcat服务器 而在互联网项目下，因单个 tomcat 默认并发量有限制。如果请求量过大，会产生如下问题： 12345678910111213Tomcat8 默认配置的最大请求数是 150 ...

Docker 容器化解决方案[TOC] 1. 容器简介1.1 什么是 Linux 容器Linux 容器是与系统其他部分隔离开的一系列进程，从另一个镜像运行，并由该镜像提供支持进程所需的全部文件。容器提供的镜像包含了应用的所有依赖项，因而在从开发到测试再到生产的整个过程中，它都具有可移植性和一致性。 1.2 容器发展简史我们现在称为容器技术的概念最初出现在 2000 年，当时称为 FreeBSD jail，这种技术可将 FreeBSD 系统分区为多个子系统（也称为 Jail）。Jail 是作为安全环境而开发的，系统管理员可与企业内部或外部的多个用户共享这些 Jail。 Jail 的目的是让进程在经过修改的 chroot 环境中创建，而不会脱离和影响整个系统 — 在 chroot 环境中，对文件系统、网络和用户的访问都实现了虚拟化。尽管 Jail 在实施方面存在局限性，但最终人们找到了脱离这种隔离环境的方法。但这个概念非常有吸引力。 2001 年，通过 Jacques Gélinas 的 VServer 项目，隔离环境的实施进入了 Linux 领域。正如 Gélinas 所说，这项工作的目 ...

Nginx实现服务器端集群搭建Nginx与Tomcat部署前面文章已经将Nginx的大部分内容进行了讲解，我们都知道了Nginx在高并发场景和处理静态资源是非常高性能的，但是在实际项目中除了静态资源还有就是后台业务代码模块，一般后台业务都会被部署在Tomcat，weblogic或者是websphere等web服务器上。那么如何使用Nginx接收用户的请求并把请求转发到后台web服务器？ 步骤分析: 121.准备Tomcat环境，并在Tomcat上部署一个web项目2.准备Nginx环境，使用Nginx接收请求，并把请求分发到Tomat上 环境准备(Tomcat)浏览器访问: 1http://192.168.200.146:8080/demo/index.html 获取动态资源的链接地址: 1http://192.168.200.146:8080/demo/getAddress 本次博文将采用Tomcat作为后台web服务器 （1）在Centos上准备一个Tomcat 123451.Tomcat官网地址:https://tomcat.apache.org/2.下载tomcat, ...