[!NOTE] KEEP FORWARD
本篇用于快速记录下随时想到或遇见的东西，不追求格式和准确性，日后再分类和归档👻
“你掉的是这个金知识点？还是这个银知识点？”

iframe内再嵌套iframe的场景，内层iframe如何同外层window通信

如果知道间隔多少层，直接用window.parent….parent.postMessage()发消息；同源的情况下可以直接window.top 访问到最外层window
层层转发
现代浏览器 BroadcastChannel api

iframe 内的请求无法携带cookie，除非设置了samesite=none，同时必须设置secure属性

词法环境 https://dev.to/wisdomudo/understanding-lexical-environment-in-javascript-a-beginners-guide-5bp1

去中心化？
思考一个问题：
在一个微前端中，主应用和子应用都用到了一个js sdk，通过cdn的方式引入，它们可能需要不同的版本，在js sdk中判断了如果当前已有全局变量，则不再赋值，主应用和子应用引入sdk的时机可能由于网络波动的影响引用顺序不同

模块联邦 module federation webpack5提出的概念，在构建工具、微前端有应用

端到端测试 playwrite

什么是CId

什么是UUID

# Understanding UUID: Purpose and Benefits of a Universal Unique Identifier

prefetch 和 preload

==preload 预加载==
通过为link标签的rel属性设置 preload ，能够声明一个获取请求，指定页面马上就需要的资源，这会在页面生命周期的早期就进行加载，早于浏览器的主渲染启动，注意，它只会更早地去下载和缓存脚本，但不会加载和执行

1	<link rel="preload" href="xxx" as="script" />

通过再设置一个type属性能够帮助浏览器确定资源类型并确定能否支持该种资源，不支持会直接忽略，支持则下载。例如

<head>
  <link rel="preload" href="xxx.mp4" as="video" type="video/mp4" />
</head>
<body>
  <video controls>
    <source src="xxx.mp4" type="video/mp4" />
    <source src="xxx.webm" type="video/webm" />
  </video>
</body>

如上面代码所示，不建议为同一资源的多种类型指定预加载。相反，最佳实践是仅为大多数用户可能实际使用的类型指定预加载

==prefetch 预取==
它是用于预取将在下一次导航/页面加载时使用的资源（例如，当你跳转到下一页时）。这是可以的，但对于当前页面没有用！此外，浏览器会给预取（prefetch）的资源比预加载（preload）的资源更低的优先级——当前页面比下一页更重要。

硬链接和软链接

document.elementsFromPoint(x, y) 关键点采样

requestIdleCallback

window.requestIdleCallback() 方法插入一个函数，这个函数将在浏览器空闲时期被调用。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间timeout，则有可能为了在超时前执行函数而打乱执行顺序。`

删除server-side-render-resource/lib/resource.js line143的__INITIAL_STATE__，
另一个注意的点，修改node_modules里面的文件后，刷新页面没有变化，需要npm run dev重启项目，考虑dev模式下为什么会这样

OpaqueResponseBlocking是啥？

Navigator.sendBeacon

sendBeacon API〔方案選單〕

http2 push cache

html attribute VS JS property

参考文档：HTML attributes vs DOM properties
html attribute是html元素具有的属性，

JSON schema

json schema是一个用来定义json数据约束的标准，

GIT

#git删除远程分支
git push origin --delete [远程分支名] 
#git从远程分支拉到本地新建分支
git checkout -b [本地分支名] origin/[远程分支名] 
#git修改本地分支名
git branch -m oldName newName
#git从远程分支拉取更新到本地当前分支
git pull origin [远程分支名]

git remote update

#git stash
git stash save "save message" # 缓存时添加备注
git stash list # 查看stash了哪些存储
git stash apply # 应用某个存储,不会把存储从存储列表中删除，默认使用stash@{0}，第二个：git stash apply stash@{1}
git stash pop # 恢复之前缓存的工作目录，将堆栈中的stash删除，默认stash@{0}
git stash clear # 删除所有stash
git stash drop stash@{num} # 丢弃stash第num个存储

#查看某个commitid修改的具体内容
git show commitid

git status #查看文件状态，显示跟踪文件和untracked文件
git status -s #简洁输出查看文件状态 
git add [file] #跟踪、暂存文件
git diff #比较当前工作目录文件和暂存区内快照的差异
git diff --staged #查看已暂存文件和上一次提交的文件差异

git commit #提交暂存区到本地仓库

git init # 初始化git仓库，建.git文件
git remote add origin https://xxx
git remote set-url origin https://xxx

# git批量删除分支
git branch | grep 'fix' | xargs git branch -d

# git复制commit到新分支，比如把a分支上的c1 commit复制到b分支上去
# 切到b分支
git cherry-pick [commitHash]

# git会把所有的git操作都记录下来，像git reset、git revert等，git reflog可查看所有历史记录，
# 同样可以用git reset命令撤销这些历史操作
git reflog

# 远程仓库
git remote -v
git remote add <仓库名> <仓库地址># 添加远程仓库
git remote show <仓库名> # 查看远程仓库
git remote rename <old> <new> #远程仓库改名

参考文档：git pull&git fetch

// 解构
const obj={
  name: 'bob',
  id: 1
}
const {name, id}=obj;
// 使用解构赋值从对象中分配变量
// 将obj.name赋值该username
const {name: username, id:userid}=obj;
// 解构可嵌套使用

// 某些情况下，可以直接在参数里直接解构对象，比如:
const f=(param)=>{
  const {name,id}=param;
}
//可变成
const f=({name, id})=>{
  //可直接使用解构好的参数name和id
  console.log(name,id);
}

// 注意``模板字符串会带上``内的所有内容，注意不要在里面回车换行
// js中的class是一个语法糖，替换了constructor构造函数的写法，
class SpaceShuttle {
  constructor(targetPlanet) {
    this.targetPlanet = targetPlanet;
  }
}
const zeus = new SpaceShuttle('Jupiter');

1	// 使用import导入一个用export default默认导出的值时，不用花括号

js运算符

1 2	异或 ^ +"123"会得到数字123

js数组

let arr=[1,2,3,4,5]
// splice将数组从start索引处开始*删除*len长度的元素，并在start索引位置*添加*add元素（add参数可一个或多个）会改变原数组？
splice(start,leng,[add])
// slice方法，从start位置开始截取到end位置复制到一个新数组，参数可以是负数，slice方法会把所有负值的参数转换为数组长度+负值
let newArr=slice(start,end)

//数组排序sort函数无参数时默认按照ASCII顺序排序,arg1和arg2分别表示第一个和第二个用于比较的元素
arr.sort(function(arg1, arg2))
arr.sort((a, b) => {
  return a-b;// 按照数字参数分别为：遍历项目、索引、数组本身
arr.forEach((item, index, arr) => {
  console.log(item,index,arr)
})

// 数组的some方法，有一个是真，就返回真
const arr2=arr.some((item,index,arr)=>item);
// every方法和some方法相反，所有内容均为真，返回真
const arr2=arr.every((item,index,arr)=>item)

// 利用Set的不重复性，可对数组去重
const arr=[...new Set(array)]

/* ES7语法 */
arr.includes(item) // 数组中是否包含某个元素，和indexOf有区别，indexOf找不到NaN，
2**3=8 //ES7中的求幂运算符

// Array.from 从一个类似数组或者可迭代对象创建一个新的，浅拷贝的数组实例，比如对一个dom节点的子元素列表
Array.from(node.childNodes)
/*==============================*/

/*---------字符串操作-----------*/
let str='asdguiwer';
// 对字符串而言，substr函数从start位置开始截取len长度的子串，参数可以是负值，会将第一个负值转为字符串长度+负值，第二个转为0
str.substr(1,4) //'sdgu'
str.substr(-3) //'wer'
//substring函数从start位置开始截取到end位置，会将所有负值的参数转换为0
str.substring(1,4) //'sdg'
str.substring(-3) // 'asdfuiwer'

懒加载

参考文档：js实现图片懒加载原理懒加载

postcss

postcss可以理解为一个平台，在上面可以跑很多插件，对开发时写好的css做一些处理，一些插件比如autoprefixer，autoprefixer是一个后处理器，可以实现css3代码自动补全。autoprefixer使用的是browserlist

Autoprefixer配置详解

npx执行包命令

比如npx browserlist

1	npx lessc target.less #得到编译后的css文件

har文件

全称Http Archive Format，是用来记录浏览器加载网页时所消耗时间的工具，它会记录每一个http请求发出直到收到完整http响应中间消耗的时间，可以迅速帮助我们知道是哪些HTTP请求没有得到及时的回复，从而进行更一步的排查。

npm list -g --depth 0 #npm查看全局安装的包

Ctrl + C -> 中止当前进程
Ctrl + D -> 注销终端会话
Ctrl + A -> 将光标移动到行首
Ctrl + E -> 将光标移动到行尾
Ctrl + K -> 从光标到行尾进行剪切
Ctrl + U -> 从光标到行首进行剪切
Ctrl + L -> 清除终端
Ctrl + W -> 清除光标左侧的一个单词

w 向后移动一个字符
b 向前移动一个字符

在Chrome元素tab选中一个元素后，可以通过$0访问到这个元素，在console tab中调用monitorEvents($0, ‘click’)，两个参数分别为’元素‘和‘事件名’，可以在触发此事件后输出此事件对象

浏览器devtools cmd+shift+p

在Chrome console 的$_会缓存上一个输出的值

Package.json中版本号管理：

"3.0.4"表示安装指定3.0.4版本
"~3.0.4"表示安装3.0.x中最新的版本，最新小版本
"^3.0.4"表示3.x.x中最新的版本，最新大版本
"*3.0.4"表示最新版本

Brew install 出现tar：error……错误

Bintray 要关闭了, 所以 Homebrew 的归档之后就没再往Bintray 那边传了, 而新版的 Homebrew 已经去除了Bintray相关，使用 ghcr.io 服务了.

正常情况下通过 Homebrew 官网提供的命令安装的用户是无感的, 但是由于国内特殊网络环境的问题, 我使用的是如上文所说的国内镜像, 而国内的镜像是依然指向 Bintray 的, 所以才会出现无法打开归档的错误

Brew安装的软件位于：/usr/local/Cellar/

npm出于安全考虑，不支持以root用户运行，用root身份运行时会自动转成nobody用户来运行，nobody用户几乎没有权限，如果加上了–unsafe-perm参数，就不会切换到nobody用户上，运行时是哪个用户就是哪个用户

1	open -W [url] // 在浏览器打开url

document.referer返回一个url，用户是从这个url跳转或打开当前页面的。如果用户是直接打开的页面比如从书签或地址栏直接搜索，``document.refere`r将为空字符串

1	wc file.txt # 输出为行数、单词数、文件大小

思维暂存区

Noplace