置顶文章

23k 字 21 分钟

注：本教程总结自《设计模式之争》和《大话设计模式》，对设计模式感兴趣的同学强烈推荐这两本书。 # 23 种设计模式 设计模式基本类型有：创建、结构、行为 三种。 # 创建型 单例模式 原型模式 工厂模式 抽象工厂模式 建造者模式 # 结构型 适配器模式 装饰器模式 代理模式 外观模式 桥接模式 组合模式 享元模式 # 行为型 观察者模式 迭代器模式 策略模式 模板方法模式 职责链模式 命令模式 备忘录模式 状态模式 访问者模式 中介者模式 解释器模式 #...
45k 字 41 分钟

# Node.js # 介绍 Node.js 并不是 JavaScript 应用，也不是编程语言，而是 JavaScript 的运行时。 Node.js 是构建在 V8 引擎之上的，V8 引擎由 C / C 编写，因此 JavaScript 语言需要编译为 C / C 代码之后才能执行。 Node.js 采用异步 IO 和事件驱动的设计理念，可以高效的处理大量并发请求，提供了非阻塞 IO 接口和事件循环机制，使其可以编写出高性能、高扩展的应用程序。（异步 IO 通过 libuv 库来实现） Node.js 使用 npm 作为包管理工具 Node.js 适合做一些 IO...
4.4k 字 4 分钟

# 微前端 # 目标 核心目标是将巨石应用拆解成若干可以自治的松耦合微应用，这样才能确保微应用真正具备独立开发、独立运行的能力（防止巨石应用） # 介绍 微前端按业务功能将一整块前端应用分解成一系列更小的、更内聚的微前端应用，同时通过明确的交互协议来管理这些应用间的依赖关系，实现不同业务的解耦合。并将每个前端应用交给独立团队负责，各自独立开发、独立部署、充分利用并行性。 微前端是一种架构风格，monorepo...
1.2k 字 1 分钟

# whistle 简单使用 # whistle 安装启动 安装：npm i -g whistle 使用：w2 start 访问：访问对应的页面 作用： 任何的链接都会经过工具转发一下，并记录下来 使用前需要配置代理到 whistle 服务的地址和端口上（设置代理如下） # 使用步骤 设置代理： 手机端省略 电脑端： 网络偏好设置 --- 高级 --- 代理 --- 网页代理、安全网页代理 配置代理的 ip 地址和端口号（8899） 确认证书： 一般会自动下载，也可以打开 8899 端口找到证书下载并确认信任 查看抓包情况和设置代理转发： 打开 127.0.0.1:8899...
8.3k 字 8 分钟

# 前端监控 # 介绍 为什么要进行前端监控： 分析用户行为，提升用户体验，故障排查与问题定位，数据驱动决策，性能优化。 页面的访问行为，PV、UV、IP、PV 点击率、UV 点击率、停留时长 用户的操作行为，模块曝光、 模块点击 页面的性能，首屏渲染时间、API 请求时间 异常的监控，JS Error、API 异常、业务异常 业务的监控，成交金额、每日消息数 常见的应用场景： 流量分析 常见的前端监控平台： 百度统计 阿里云 ARMS 友盟 Sentry 平台 前端监控的数据有什么作用 流量数据监控，如：PV 页面浏览量、UV...
15k 字 13 分钟

# 需求分析 为什么需要优化研发流程？ 项目量级增加：几干行代码 -> 几万行代码 项目数量扩大：几个项目 -> 几干个项目 项目复杂度高：Wb 项目 ->H5/PC/ 小程序 / 后端 / 脚手架 团队人数增长：几个人 -> 几百人 传统的项目研发流程已经无法满足业务需求 # git 开发流程 单人 git 项目开发流程 多人 git 项目开发流程 #...
45k 字 41 分钟

# 软件生命周期： # 架构流程图 # 复杂项目通用方案 # 业务的复杂度 交互的复杂性 数据结构和状态的复杂性 多项目互相依赖的复杂性 打包 性能优化 第三方库的使用和调研以及二次开发 # 流程的复杂度 git flow lint 工具 单元测试 commit 信息 PR revirew CI / CD # CI / CD 的概念 业务组件库的开发和发布是随着一些列任务进化的： 本地 commit 钩子函数完成 commit 验证 代码 push 到远端之后 跑特定的 test（不仅仅是本机的 unit test，也可能有时间很长的 E2E test） test...
34k 字 31 分钟

# 性能优化核心 # 指标 FCP 首次内容绘制 LCP 最大内容绘制 FID 首次输入延迟 INP 交互延迟时间 TTI 可交互时间 TBT 总阻塞时间 TTFB 首字节时间 # 代码部分 资源懒加载，图片懒加载。 路由懒加载 资源压缩 避免频繁回流重绘（使用 fragmet 标签同一添加 DOM） CSS 属性 will-change 控制分层，以提高渲染性能 CSS 放在顶部，JS 放在底部 避免空的 src 和 href 值 使用 web-worker 和 service-worker # 网络层面 使用缓存 使用 CDN DNS 预解析 gzip 组件 尽量减少 HTTP...
26k 字 24 分钟

# 5-4 持续集成与持续部署 传统的开发过程中的坑： BUG 总是在最后才发现 越到项目后期，加班越严重 交付无法保障 变更频繁导致效率低下 无效的等待多，用户满足度低 你有没有想过 / 用过？当你哪一天... 不用为开发 / 测试环境不一致而苦恼 不用麻烦运维人员帮忙调试环境 不用手动进行测试，模拟环境中进行自测 不用手动发布、部署，自动化实现发布部署 不用管开发 / 测试环境，只用专注代码的开发？ 持续集成解决了什么问题？ 提高软件质量 效率迭代 便捷部署 快速交付、便于管理 介绍： 什么是 CI/CD 介绍 CI/CD 流程 前端项目：结合 CI/CD...
25k 字 23 分钟

# TS 赋值时，父集合类型可以赋值给子集合类型，extends时，父集合类型可以继承自子集合类型 # 定义数据类型 /** * 定义数据类型 */let num: number = 1;let bool: boolean = false;/** * 定义固定类型数组 */let arr1: number[] = [1, 2, 3];let arr2: string[] = ["1", "2"];/** * 使用泛型定义固定类型数组 */let arr3: Array<number> = [1, 2, 3];/** *...
12k 字 11 分钟

数据结构是在计算机中存储和组织数据以使数据得以有效利用的一种方式。 # 分类 # 线性数据结构 数组、链表、栈、队列、双端队列、字符串等 # 非线性数据结构（结构性数据结构） 集合、字典、树、图、堆、跳表、哈希表 # 数组 # 栈 class Stack{ #storage; constructor(arr=[]) { this.#storage = arr } push(vlaue) { this.#storage.push(vlaue); } pop() {...
85k 字 1:18

# 数据结构视频： # 栈：后进先出 （JS 中可以使用 array 模拟栈） 【1】十进制转二进制【2】编辑器检查括号是否有效【3】JS 函数调用堆栈（相互调用的函数，最后一个函数先执行完） 、等等 【练习：20 有效的括号】（栈） function isValid(s: string): boolean { if (s.length % 2 === 1) return false; const arr: Array<string> = []; for (let i = 0; i < s.length; i++) { if...
4.5k 字 4 分钟

# vue 解析 # 一、响应式系统： 响应式的目的就是为了解决计算机语言的程序性 vue2 采用 Object.defineProperty 的方式来代理对象的属性，但是这个 api 有个问题就是需要先显式地去声明这个对象的属性（属性需要先写出来），就导致向对象添加属性或删除属性时兼管不到。 vue3 中通过 Proxy 来代理整个对象，就解决了这个问题，但由于我们操作的都是返回的代理对象，并且在调用时打点调用（上下文是代理对象，监听不到源对象的 get 和 set），所以需要使用 reflect 方法指定执行上下文。 代理到源对象的 get 和 set...

文章列表

3.2k 字 3 分钟

# JS # map 和对象区别 声明方式不同 对象的键只能是 symbol 和字符串，map 的键可以是任意类型 对象的属性有排序顺序 (排序为索引属性和命名属性),map 中 key 的顺序就是插入的顺序 # 遮蔽 js 中重复定义变量，导致新定义的同名变量覆盖原变量的过程就是遮蔽 var 和 function 关键字定义的变量会发生遮蔽 js 中函数的变量名是只读的，不能被修改 # void 0 替代 undefined undefined 不同于 null,null 不可以被重新赋值，但是 undefined 可以被重新赋值，因此不可靠 void 0 会稳定返回...
6.5k 字 6 分钟

# rtp 实时传输协议、RTCP 实时传输控制协议 rtp 是实时传输协议，定义于 rfc3550，是为了需要实时优先级的数据交换提供实时连接。 RTP（实时传输控制协议）负责传媒体，但媒体传的怎么样，就需要 RTCP 来进行反馈和协调，RTCP 专门用户传控制信息、不传音视频数据本身。 # webrtc 网页实时传输协议 webrtc 是网页实时传输协议，是用于客户端点对点建立连接、而不需要服务器中转数据的一种通信方式的协议 webrtc 实际上使用的是 SRTP 协议（安全实时传输协议），确保了交换数据的安全性和身份验证。 # 优势 跨平台：只要设备的浏览器上支持...
2.2k 字 2 分钟

# AI AI 俗称人工智能，是一种计算机程序，可以模拟人类的思维过程，从而实现某些人类智能的任务 AI 的目标是理解和构建能够执行通常需要人类智能才能完成的任务的机器，如：学习推理、问题解决、语言理解、知识表示、规划等 # 机器学习 预测函数和损失函数 预测函数代表模型训练的规则，损失函数代表数据和训练目标之间的误差，表示该数据是否应该被丢弃 # 线性回归 / 逻辑回归 回归 对输入进行预测，预测出某一个具体的值 分类 对结果进行分类，划线 线性回归和逻辑回归的算法，就是如何用数学的方式使用损失函数，找到这条线的过程 # K...
8.8k 字 8 分钟

# 知识点 # CSS 属性值计算过程 # 概念 任何 html 元素，从所有 css 属性都没有值到所有 css 属性都有值，中间要经历的计算过程叫 CSS 属性值的计算过程 # 过程 1、确定声明值 首先确定作者样式表和默认样式表（h1 元素在默认样式表下 display 为 block，是块盒），作者样式表大于默认样式表。 没有冲突的直接使用（相对单位变为绝对单位，颜色变为 rgb） 2、层叠 对于有冲突的比较重要性、特定性和原次序去层叠。 ①比较重要性（important 作者样式 > important 默认样式 > 作者样式 >...
1k 字 1 分钟

# 浏览器内核 在浏览器中，有一个最重要的模块，就是浏览器内核，它用于将页面转变为可视化的图像结果，通常也被成为渲染引擎 # 内核分层 浏览器内核有许多功能模块，主要分为三层 第一层隶属于渲染引擎，包含：HTML 解释器 (解析 HTML 为 DOM 树)、CSS 解释器 (解析 CSS 为 CSSOM 树)、布局 (标记 DOM 元素位置信息) 和 JavaScript 引擎 (解析并执行 js) 第二层是封装了操作系统的能力，向第一层提供接口，包含网络、存储、2D/3D 图形、音频和视频和图片解码器等 第三层是操作系统的一些 api 支持，例如多线程和文件等 #...
4.5k 字 4 分钟

# 无感刷新 无感刷新 token 而不是将 token 过期时间设置很大主要是为了安全性和灵活性，如果 token 泄漏，定时更换 token 可以起到一定的安全性保护 无感刷新：后端维护一个 token 和 RefreshToken 两个令牌，放到响应头中进行返回，使用 token 进行正常的请求验证，当 token 失效时，就去验证 refreshToken 是否有效，如果 refreshToken 有效，就生成新的 token 替换掉旧的 token 并返回。 # 大文件上传 专业术语： 断点续传、断开重连重传、切片上传。 # 方案 首先前端将数据进行切片，根据 size...
1.2k 字 1 分钟

# XSS 跨站脚本攻击 XSS 跨站脚本攻击是一种在 web 应用中的计算机安全漏洞，它允许恶意 web 用户将代码植入到提供给其他用户使用的页面中，攻击者通过注入非法的 html 标签或者 js 代码，从而当用户浏览该网页时，控制用户浏览器 # 举例 # 存储型 XSS 用户在留言板发布信息是一条恶意的 js 代码消息，当其他用户访问此消息时，会执行恶意脚本 # 反射型 XSS 攻击者构造一个恶意链接，当用户点击时，就会执行恶意脚本，将脚本作为响应的一部分返回给用户的浏览器 # DOM 型 XSS 用户留言板输入 script 去修改 DOM...
1.2k 字 1 分钟

const schedule = require('node-schedule');const axios = require('axios');const child = require('child_process')schedule.scheduleJob('10 21 * * *',()=>{ //corn 表达式表示 43 分钟 15 小时每天每月每星期（每天 15 点 43 分）点执行...
1.1k 字 1 分钟

# 面试者技能栈 & 项目 熟悉 vue 全家桶、源码 webpack、gulp 源码 babel 编译源码 cordova 混合 app 开发 前端工程化、脚手架、搭建 CICD 计算机网络、web 安全、浏览器原理 低代码 java 微信小程序 # js 基础 作用域和执行上下文的区别 es5 的继承，es6 继承 js 的垃圾回收机制 # vue 介绍 Vue template 到 render 的过程？ vue 首先将 template 进行词法分析变为 tokens 数组，通过语法分析变为 vue 的 ast, 根据 ast 添加 js 独有的属性变为...
19k 字 18 分钟

# 图解 Google V8 笔记 [TOC] # 开篇词：如何学习 V8 # 如何学习 V8？ 先了解 JavaScript 这门语言的基本特性和设计思想，再学习 V8 执行 JavaScript 代码的完整流程。 # 1. V8 是如何执行一段 JavaScript 代码的？ # 什么是 V8？ V8 是由 Google 开发的开源 JavaScript 引擎，也被称为虚拟机，模拟实际计算机各种功能来实现代码的编译和执行。 # 高级代码为什么需要先编译再执行？ CPU...