Vue router 源码分析 源码版本：3.6.2阅读源码的目标： 作为 Vue 开发的三板斧，我需要清晰的对其背后的原理有一个认知。 学习插件设计的模式，思考之后如果也有同样需求时，我可以怎么去设计开发。 阅读源码的同时也能提高自己的逻辑编码能力。 习惯性给自己使绊子（带着疑问看源码） ① 大致的目录结构设计? ② 核心的源码逻辑? ③ 如何组合 Vue 使用的？ ④ 如何监听 U...

前端规范我是这么建立的 由于之前一直是一个人负责业务开发，在前端规范上比较随意，后面意识到野路子一直这么下去永远成不了正规军，于是我开始规划整理了一套前端规范来强行约束自己，提前让自己能适应多人协同合作开发的大项目中，保持代码的整齐划一规范性。 代码规范 在工程里采用的方案是：prettier + eslint Prettier 专门做代码格式化工具，美化代码格式包括缩进、换行、添加空格...

Webpack 概念 Webpack 是什么？用于JS现代应用的静态模块打包工具。从一个或多个入口进，将你的项目打包成1个或多个bundles, 它们均称为静态资源。 1. 搞清楚 Module、Chunk、Bundle 名词的概念1.1 Module我们编写的单个JS脚本文件称为一个模块。 1.2 Chunk通过webpack打包过程，引用到的各种代码块，在这个过程中称为 Chunk。 ...

项目打包速度优化策略1. 打包速度慢可能的原因 1.1 无效代码：过多的注释、无意义的console信息打印 - 似乎是只跟打包后的体积大小相关 - terser-webpack-plugin 移除打包后注释，https://blog.jijian.link/2021-09-17/webpack-remove-comments/ - transform-remove-co...

HTTP 网络协议 记忆流程图HTTP 超文本传输协议（英语：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议，是因特网上应用最为广泛的一种网络传输协议，所有的 WWW 文件都必须遵守这个标准。HTTP 是为 Web 浏览器与 Web 服务器之间的通信而设计的，但也可以用于其他目的。HTTP 是一个基于 TCP...

CDN 内容分发网络（content delivery network）是一种分布式计算和网络服务系统，其主要目标是通过在全球范围内分布的服务器群集（通常称为边缘服务器或边缘节点）来提高网络内容的传输性能、可用性和安全性。CDN通过在离用户更近的位置缓存和交付内容，减少了数据传输的时延和网络拥塞，从而改善用户体验。 边缘CDN边缘CDN（Edge CDN）是CDN（内容交付网络）的一种特殊...

移动端布局 采用的是媒体查询布局 + 移动端rem（原理，基准值: 实际上rem.js是把屏幕分成了20份，750 / 20 / 100 1rem = 3.75px） flexible动态计算根元素html的font-size值 rem原理https://www.freesion.com/article/4313467559/ 设置根元素html font...

前端监控系统之网页性能监控为什么需要做自建监控系统？ 方便做自定义的UV用户识别，比如通过登录账号ID或者通过设备信息； 方便接入自己团队的告警业务； 方便做各维度数据的联合分析，比如发生错误可以联动查询用户行为追溯数据等； 方便做业务需求上的拓展，比如自定义埋点； 1. 浏览器提供的一些性能指标监测1.1 网页渲染相关指标 FP (First Paint): 首次非网页背景像素渲染，第...

数据类型转换 https://juejin.cn/post/6844903854882947080 数据类型基础类型 string number null undefined boolean symbol 会有什么问题？null 和 undefined 区别 null 被当做一个对象Number(null) 转化为 0 ↓↓↓↓↓↓↓↓ Object.create(null), 生成的对...

跨域设置Cookie失效的原因以及解决方案问题出现场景：在做登录功能时，想把用户的信息通过Set-cookie在客户端设置cookie信息，然而在Application里却查无此字段？ 服务端通过cors中间件实现接口跨域访问、koa-session-minimal实现cookie的设置。代码实现如下： 12345678910111213141516171819202122232425con...