从浏览器输入 URL 到页面呈现都发生了什么 输入 URL 查找缓存，有缓存读取缓存，没有进行下一步 DNS 域名解析，解析出域名对应的 IP 地址 和服务器建立 TCP 连接 发送 HTTP 请求 服务端响应请求，返回结果 断开 TCP 连接 浏览器渲染 缓存 首先查找浏览器缓存 然后查找操作系统缓存 查找路由器缓存 查找 ISP 缓存 http 缓存强缓存如果命中强缓存就无需向服务器发送请

前置性能分析工具这里使用 Webpack-bundle-analyzer 1pnpm add progress-bar-webpack-plugin -D 配置 12345678const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports =

初始化项目首先新建一个项目然后初始化。 12npm init -ypnpm add webpack webpack-cli -D 创建一个 src/main.js 文件，随便写点啥在根目录创建 build/webpack.common.js 文件 12345678910const path = require("path");module.exports

前言什么是模块化模块化简单说就是为了解决代码没有自己的“域”，很容易造成命名冲突，依赖混乱。我们的代码通过模块化隔离开来，更有利于后期维护。 模块化解决方案从最开始的通过立即执行函数（IIFE）到 CJS、AMD、CMD、UMD、再到 ES6 引入模块化 ESM，本文主要写 CJS 和 ESM。 CommonJs实现原理123// src/index.jsconst name = require(

前言什么是正则表达式？我们在日常开发中总是能遇到一些需要校验的功能，例如校验邮箱、手机号等等，或者对一些字符串做替换处理等，正则表达式总是避不开的。个人理解正则就是用来匹配字符，校验字符规则，或者是提取一段字符中的内容。本文只介绍正则的一些基本使用。 匹配字符匹配模糊长度123const regexp = /ab{1,5}c/gconst str = "abc abb

类型Typescript 包含 Javascript 的全部类型，也就是 number、boolean、string、object、bigint、symbol、undefined、null，还有包装类 Number、Boolean、String、Object、Symbol。 除此之外，Typescript 还有 void、never、enum、unknown、any、tuple(元组) 以及自定义

定义是一种结构型设计模式。在不改变原对象的基础上，通过对其进行包装拓展，使原有对象可以满足用户的更复杂需求。 装饰函数装饰函数可以让我们在不修改原方法的情况加对原函数进行包装，增加额外的功能。在日常开发中难免遇到原来的需求现在要增加新的功能，如果原来的代码是自己写的还好，如果是接手别人写的代码，直接修改源代码就很冒风险，甚至有可能导致其他功能异常。 保存原引用方法123456789function

定义我们暂且把发布订阅模式和观察者模式理解成相同的，是行为型模式的一种，定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时，会通知所有的观察者对象，使他们能够自动更新自己。在日常生活中也有例子，例如我们办理银行卡时，如果订阅了手机短信功能，那么每次消费后都会给我们发送短信。 简单实现我们先来简单模拟实现一个发布订阅模式。 12345678910111213

代理模式 为其他对象提供一种代理以控制对这个对象的访问。 简单理解就是你想使用一个东西，但是你不能直接用，你必须通过一个中间商来使用，就像你想要找老板加工资，但不让你直接见老板，而是需要去找老板的助理，通过助理反馈给老板让他给你加工资。 代理模式其实也很常见，我们在写页面时，一个父节点下有很多子节点，每次点击子节点都需要触发事件，我们肯定不会挨个子节点去添加事件，而是会在让他的父节点做代理，通过

什么是策略模式 定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。 简单说就是对于不同的场景，我们才采取不同的方式来应对。举几个简单的小例子： 我们要组装一台电脑，如果预算充足的话，那就可以什么都用顶配，如果预算不够，那就追求性价比，用最少的预算获得最高的性能，如果基本没有什么预算，那就只能楼下网吧对付一下了，对于不同的预算就需要不同的策略。 在网购过程中，我们买的东西越多，相应