pnpm乱杀yarn,npm
1 引言 平时在项目开发中，经常用到npm、pnpm、yarn这些来安装包，但是它们之间到底有什么区别呢，一直没太搞明白。
我只知道他们都是可以从npm官网上下载包，安装完包咱们就可以写代码了，其他的不觉明历，所以认为需要总结下。
2 npm npm（Node Package Manager）是Node.js的默认包管理器。它是一个成熟、广泛使用的工具，有着大量的开源包。
特点
默认随Node.js一起安装，无需额外配置。
提供了庞大的包生态系统，有大量的第三方包可用。
默认将依赖项安装到项目的node_modules目录中。
存在问题 1. 依赖没有共用。假如A B C三个包有相同的依赖D，执行npm install时D会被重复下载3次。随着项目越来越复杂，像D这样的包会越来越多，大量的冗余会快速消耗我们的磁盘空间。
2. 嵌套层级过深。windows的文件路径最长是260个字符，随着递归安装依赖，嵌套可能会超过windows路径的长度限制，导致依赖安装失败。
3 yarnyarn 是由Facebook提供的包管理工具，旨在提高性能和安全性。
并行下载、离 ...
盛最多水的容器
力扣-11.盛最多水的容器给定一个长度为 n 的整数数组 height 。有 n 条垂线，第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。
找出其中的两条线，使得它们与 x 轴共同构成的容器可以容纳最多的水。
返回容器可以储存的最大水量。
说明：你不能倾斜容器。
示例 1：
123输入：[1,8,6,2,5,4,8,3,7]输出：49 解释：图中垂直线代表输入数组 [1,8,6,2,5,4,8,3,7]。在此情况下，容器能够容纳水（表示为蓝色部分）的最大值为 49。
示例 2：
12输入：height = [1,1]输出：1
解题思路这道题可以使用双指针的方法来解决。首先初始化左指针指向数组的起始位置，右指针指向数组的结束位置。然后，计算当前左右指针所指的两条垂直线构成的容器的面积。面积的计算公式是:面积=(右指针-左指针)*min(左指针的高度右指针的高度)。接下来，移动指针的原则是: 每次移动高度较小的指针，这样才有可能找到更高的垂直线，从而使容器的面积更大。不断移动指针，并更新最大的面积值，直到左右指针相遇
算法实现1234567891 ...
css中常见单位
在前端开发中，经常会使用不同的单位来指定元素的大小和位置。这些单位包括em、px、rem、vh和vw，它们各自有不同的特点和用途
px (像素)像素是最基本的单位，代表屏幕上的一个点.在不同屏幕分辨率下，1px 可能对应不同的物理尺存固定单位，不受父元素的影响常用于定义精确的尺寸，如边框、文字大小等。
em :em单位相对于父元素的字体大小来计算如果应用在文字上，em等于元素的字体大小。如果应用在其他元素上，1em等于父元素的字体大小。用于创建相对于文字大小的布局
rem(根元素的字体大小)
rem单位始终相对于根元素 (通常是标签)的字体大小
这使得它在整个页面中保持一致，不会受到嵌套元素的字体大小的影响
常用于响应式设计，以便在不同屏幕尺寸下保持一致的比例。
4. vh(视窗高度的百分比)
vh单位是相对于视窗(浏览器窗口)的高度的百分比。
1vh等于视窗高度的1%。
常用于创建相对于视窗高度的元素，如全屏背景
4. vw(视窗宽度的百分比)
vw单位是相对于视窗的宽度的百分比。
1vw等于视窗宽度的1%
常用 ...
重排(回流)和重绘
重排(Reflow)：元素的位置发生变动时发生重排，也叫回流。此时在关键渲染路径(浏览器将html，css和js转换为屏幕上的像素所经历的步骤序列)中的 Layout 阶段，计算每一个元素在设备视口内的确切位置和大小。当一个元素位置发生变化时，其父元素及其后边的元素位置都可能发生变化，代价极高
重绘(Repaint):元素的样式发生变动，但是位置没有改变。此时在关键渲染路径中的 Paint 阶段，将渲染树中的每个节点转换成屏幕上的实际像素，这一步通常称为绘制或栅格化
重绘不一定会出现重排，重排必然会触发重绘
如何触发重排和重绘任何改变用来构建渲染树的信息都会导致一次重排或重绘：
添加，删除，更新dom节点
通过display: none隐藏一个DOM节点-触发重排和重绘
通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
用户行为，例如调整窗口大小，改变字号或滚动。
如何减少重排和重绘减小重排范围：脱离文档流(使用absolute或fixed脱离文档流)
减少重绘次数：合并样式修改
快速排序
快速排序（Quick Sort）是一种常用的排序算法，它使用分治的思想，在数组中选择一个基准元素，将小于基准的元素放在基准的左侧，大于基准的元素放在基准的右侧，然后对左右两个子数组分别递归地进行快速排序。
以下是我的的JavaScript实现：
123456789101112131415161718192021const arr = [2,1,8,4,3,5,9]// 快速排序function quickSort(arr){ if(arr.length<=1) return arr //选择基准实现 const pivot = arr[0] //分区 const left = [] const right = [] for(let i = 1;i < arr.length;i++){ if(arr[i] < pivot) left.push(arr[i]) else right.push(arr[i]) } // 递归地对左右两个 ...
xss攻击
跨站脚本攻击 (Cross-Site Scripting，XSS) 是一种常见的安全漏洞，它允许攻击者将恶意JS代码注入到网页中，使其在用户的浏览器中执行。XSS 攻击的目标是窃取用户的信息、会话令牌或操纵用户界面。
XSS 攻击分为三种类型1.存储型 XSS (持久型) :
攻击者将恶意代码存储在服务器上，当其他用户访问包含恶意代码的页面时，浏览器请求数据，脚本从服务器上传回并执行。2.反射型 XSS (非持久型) :
攻击者将恶意代码作为参数发送给服务器，服务器将其反射到页面中，如果用户点击恶意链接，浏览器请求数据，脚本从服务器上传回并执行。3.DOM型XSS :
攻击发生在客户端，攻击者通过修改页面的 DOM 结构来触发执行恶意代码窃取用户敏感信息，
如何避免 XSS 攻击1.输入验证和过滤: 对用户输入的数据进行验证只允许预期的数据类型，使用白名单过滤输入中的特殊字符和标签2.输出编码: 在将用户输入展示到页面上时，使用适当的编码来转义特殊字符，如<、>、''等。3.使用 CSP (Content Security Policy) : CSP ...
常用的http请求头和响应头
常用的http请求头1.Accept
Accept: text/html 浏览器可以接受服务器回发的类型为 text/html。
Accept: */* 代表浏览器可以处理所有类型,(一般浏览器发给服务器都是发这个)。
2.Accept-Encoding
Accept-Encoding: gzip, deflate 浏览器申明自己接收的编码方法，通常指定压缩方法，是否支持压缩，支持什么压缩方法（gzip，deflate），（注意：这不是只字符编码）。
3.Accept-Language
Accept-Language:zh-CN,zh;q=0.9 浏览器申明自己接收的语言。
4.Connection
Connection: keep-alive 当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接。
Connection: close 代表一个Request完成后，客户端和服务器之间用于传输HTTP数据的TCP连接会关闭， 当客户端再次发送R ...
伪类和伪元素
CSS 伪类和伪元素是用于选择和样式化文档中的特定元素或元素的一部分的方法，它们在使用方式和效果上有一些重要的区别
伪类概念:CSS中的一种选择器，用于选择HTML元素的特定状态，而不是选择元素本身。伪类可以根据用户交互、元素的位置、链接状态等条件来选择元素，从而允许你应用不同的样式或行为，通常以冒号 : 开头。
常见的伪类及其主要作用:
:hover：用于选择用户鼠标悬停在元素上时的状态。通常用于创建悬停效果，如改变链接的颜色或显示工具提示。
:active：用于选择用户点击元素时的状态。通常用于创建点击效果，如按钮按下时的变化。
:focus：用于选择元素获得焦点时的状态，通常用于表单元素，如文本框或按钮，以突出显示当前激活的元素。
:first-child：选择父元素的第一个子元素。这可用于设置第一个子元素的特定样式。
:nth-child(n)：选择父元素的第n个子元素。你可以使用这个伪类来选择元素列表中的某个特定元素。
:not(selector)：选择不匹配给定选择器的元素。这允许你排除某些元素以应用样式。
:visited：选择已访问的链接元素，通常用于改变已访问链接的样 ...
从浏览器输入url到请求返回发生了什么
从浏览器地址栏输入 URL 到请求返回可以大致分为以下几个步骤:1.DNS 解析: 浏览器根据 URL 中的域名部分，通过DNS 解析将域名转换为对应的 IP 地址
2.建立 TCP 连接: 浏览器与服务器之间建立 TCP 连接，通过三次握手确保连接的可靠性。
3.发送 HTTP 请求:浏览器发送HTTP 请求，包括请求行、请求头和请求体，其中请求行包含请求的方法、URL和 HTTP 协议版本。
4.服务器处理请求: 服务器接收到请求后，根据请求的路径和参数执行相应的逻辑处理，读取数据库或者其他资源
5.服务器返回响应: 服务器生成响应数据，包括响应头和响应体，其中响应头包含响应的状态码和其他信息。
6.接收响应数据: 浏览器接收到服务器返回的响应数据，开始解析和处理响应。
7.渲染页面: 如果响应是一个 HTML 页面，浏览器会根据 HTML、CSS 和JavaScript 等资源进行页面的渲染和展示。
8.断开tcp连接：当所有响应数据都接受完成后，浏览器和服务器直接会断开tcp连接，释放资源。
typeof和instanceof的区别
一、typeoftypeof 操作符返回一个字符串，表示未经计算的操作数的类型
使用方法如下：
12typeof operandtypeof(operand)
operand表示对象或原始值的表达式，其类型将被返回
举例
12345678910typeof 1 // 'number'typeof '1' // 'string'typeof undefined // 'undefined'typeof true // 'boolean'typeof Symbol() // 'symbol'typeof null // 'object'typeof [] // 'object'typeof {} // 'object'typeof console // 'object'typeof console.log // 'function'
从上面例子，前6 ...