luemeon的博客

脚本开启和关闭：将直接添加到样式表中意味着目标元素通常会在不久的将来发生变化，而浏览器会保留优化更长的时间。过度使用将导致内存使用过多，并导致更复杂的渲染发生，因为浏览器试图为可能的更改做准备。这将导致更差的性能。/* 关键字值 *//* <custom-ident> 示例 *//* <custom-ident> 示例 *//* 两个 <animatable-feature> 例子 *//* 全局值 */

用散列/哈希函数得到摘要/哈希值MD5： 128位散列值 (要被淘汰了)SHA-1： 160位散列值SHA-256: 产出256位的散列值。

在开发和测试阶段，使用 HTTP 可能更方便，避免了配置证书和加密协议的复杂性，节省了开发时间。开放的CDN（内容分发网络）平台，用于托管开源的JavaScript、CSS和NPM包。的测试，包括功能测试、性能测试、兼容性测试等，以确保软件的质量和稳定性。的网络环境或特定的攻击场景，此时使用 HTTP 可能更合适。软件版本提交给测试团队后的。测试，旨在快速验证软件的。

i18n应用中，下述 JSON 对象通常会根据不同的语言或功能模块被拆分成多个独立的 JSON 文件，如zh->home.json，en->login.json。从本地化资源文件中获取特定键的字符串，并且可以动态地插入变量。"CN" 则表示该语言的特定区域，即中华人民共和国（China）。（namespace，如下述zh.json中的login），避免了不同组件间状态管理的复杂性和冗余性。包含国际化设置的对象，判断和切换语言。等在整个应用程序中需要访问的数据。，.xml，.ts存储对象。

nvm 主要是用来管理和 npm 版本的工具，可以用来切换不同版本的 nodejs。安装nvm之前先卸载node。

点击或拖拽上传文件-- 使用正则表达式替换所有点号 -->请上传{{ format.replace(/\./g, "") }}格式文件，上传多份文件时以最后一次为准

懒/动态加载：按需/运动加载。

总的来说，将用户路由到附近的CDN节点有助于改善网站的性能，减少加载时间，提高用户体验，并降低网络流量成本。如果CDN上已经缓存了所请求的内容，它将直接从缓存中提供内容，从而减少了请求的响应时间。CDN节点会将所请求的内容交付给用户的设备，通常通过最快的网络路径。2）如果你的脚本并不关心页面中的 DOM 元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据，可以使用 async，如添加。中声明获取请求，指定页面将很快需要的资源，你希望在页面生命周期的早期开始加载这些资源，在浏览器的。

Tom 的 shallow 占了 32M，retained 占用了 56M，这是因为 retained 包括了引用的指针对应的内存大小，即。特别是现在 SPA 项目的盛行，用户在切换页面时，老页面的组件会被框架自动清理，所以我们可以放心大胆的使用闭包，无需多虑。3）选中构造函数，底部会显示对应源码文件，点击源码文件，可以跳转到具体的代码，这样我们就知道是哪里的代码造成内存过大。它们对值的引用都是不计入垃圾回收机制的，如果其他对象都不再引用该对象，那么gc 会自动回收该对象所占用的内存。

搜集性能数据指标 做前端的。

严格模式下，不允许将原始值（如字符串、数字、布尔值）包装为对应的对象（String、Number、Boolean），而是保持它们的原始类型。获取全局对象，无论你的代码是否在当前上下文运行。，在非严格模式下，它们会被替换为全局对象（通常是。参数是一个原始值（比如数字、字符串等），则。这是为了确保函数始终有一个合法的。进一步进行绑定，从而创建另一个绑定函数。会被转换为对应的包装对象。对象，防止出现错误。绑定函数将绑定时传入的参数（包括。是一个数字，它将被转换为。不会被替换，函数内部的。通常情况下，你可以将。

不同设备的屏幕刷新频率可能不同， setTimeout/setInterval只能设置固定的时间间隔，这个时间和屏幕刷新间隔可能不同。，只会被推入到更新队列中一次，可以避免重复修改相同的dom，这种去除重复数据，对于避免不必要的计算和 DOM 操作是非常重要的。考虑极端情况，假如定时器里面的代码需要进行大量的计算，或者是DOM操作，代码执行时间超过定时器的时间，会出现定时器不准的情况。setTimeout/setInterval是宏任务，根据事件轮询机制，其他任务会阻塞或延迟js任务的执行。

（closure）是一个函数以及其捆绑的周边环境状态（）的的组合。

目录let、const 、class的暂时性死区顶级作用域和函数作用域：let 不会在全局对象上创建属性let不允许重复声明*编译分词/词法分析：分解（var a=2=> var,a,=,2）解析/语法分析：词法数组=>程序语法 结构的“抽象语法树”(a->2)(Abstract Syntax Tree，AST)代码生成：将 AST 转换为可执行代码调用函数的对象“暂时性”区：这个区域取决于代码执行的时间点，而不是代码编写的顺序。用 、 或 声明的变量可以称其从代码块的开始一直到代码执行到变量声明的

利用搜索提高网站在有关搜索引擎内的自然排名。加载慢的话，SEO也会降低。

适用于前端先行，api中有设置mock。

d.ts不要把自己的东西挂到全局上。

为空的，可以直接不提交/提交null/undefined。

确定要删除数据吗?

【代码】同时使用多种组件库（main.ts)

编译前和运行时标签不同。

改了公共组件后，要把其他用到公共组件的地方也改了，vs中搜索即可。例如：无成功上传的文件则无法进行下一步。

如果你想将截图保存为文件而不是剪贴板，可以在按下相应的组合键后，在截图选择的区域上按下 Control 键。git -version（根据提示，mac自带的安装即可，不过不好卸载，如果限制外网，显示安装时长时长时短，多试一下即可）全屏截图：Command + Control + Shift + 3 这将截取整个屏幕的截图，并将其保存到剪贴板。这些快捷键会在你按下组合键时立即执行截图，并将截图保存到剪贴板中，而不会在磁盘上创建一个文件。的测试，包括功能测试、性能测试、兼容性测试等，以确保软件的质量和稳定性。

​​​​​​​。

脱离文档流的元素不再占据常规文档流中的位置，可能会导致其他元素布局错乱，重叠或不按预期显示。时，元素的定位可能会受到视口滚动、父元素定位等因素的影响，造成元素位置不稳定或不如预期。后，其父元素可能会因为子元素不再占据空间而导致高度塌陷，进而影响整个页面布局。：脱离文档流的元素可能在不同设备或屏幕尺寸上表现不一致，导致响应性问题。其他元素，使一些内容无法被访问或操作，尤其是在使用。：脱离文档流的元素可能会。

原理：流式传输，边传输边处理，数据分包。

在body中contenteditable="true"，然后直接在html文档中复制。

目录ElementsStylesDOM结构 增删属性 模拟元素的伪状态，方便调试Computed LayoutEvent ListenersNetworkApplication资源列表+（可改）本地存储Cookie、WebStorage（localStorage、sessionStorage）Source 调试Page:资源目录Content scripts: 插件Snippets: 便捷测试https://developer.chrome.com/docs/devtools Ancestors 是否

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，主要解决的就是需要多层来选择的dom元素，不需要。时，用webpack再配合loader工具给。less, sass, scss都是。CSS 预处理器为 CSS 增加一些。输出之后的style.css文件。，可以让 CSS 更加简洁、（也是对应的文件后缀名）。、可读性更佳，更易于代码的。的特别是map类型的，尽量。的特性，无需考虑浏览器的。style.scss文件。可以在 CSS 中使用。，后续维护成本很高的。

随着 React 的发展，许多具有状态的传统 class 组件已被弃用，render props 和高阶组件模式被 hooks 所取代。函数组件本身轻量简单，且在 Hooks 的基础上提供了比原先更细粒度的逻辑组织与复用，更能使用 React 的未来发展。在已经熟悉 React Hooks 并希望从旧项目升级到新的 API 时，函数式组件也很有用。类组件在未来事件切片与并发模式中，由于生命周期带来的复杂度，并不易于优化。，这也就意味着他刷新一次里面的数据就没了，概念类似于一帧一帧，并且。

await的返回结果就是后面promise执行的结果，可能是resolves或者rejected的值使用场景循环遍历方便了代码需要同步的操作（文件读取，数据库操作等）返回一个Promise，并且处理拒绝的情况。async函数中，如果有多个await关键字时，如果有一个await的状态变成了rejected，那么后面的操作都不会继续执行，promise也是同理。）：如果在一个async的方法中，有多个await操作的时候，程序会变成完全的串行操作，一个完事等另一个但是为了发挥node的异步优势，

全局执行环境被认为是window对象这样由多个执行上下文的变量对象构成的链表就叫做作用域链，从某种意义上很类似原型和原型链。当前作用域外的变量都是自由变量，一个变量在当前作用域没有定义，但是被使用了，就会向上级作用域作用域链和原型继承查找时的区别：查找一个普通对象的属性，但是在当前对象和其原型中都找不到时，会返回。

如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。，内容撑开宽、高，不可以设置宽、高（img、input、textarea等除外）。

不能找到dom节点的宽高，宽高获取不了导致绘制不出图。

钩子函数来手动绘制标记（marker）需要导入相关的插件或者使用。

在文件后缀中.js表示这是一个 JavaScript 文件.jsx表示这是一个 JavaScript XML 文件JavaScript 是一种直译式脚本语言，大家应该都很熟悉JavaScript XML 是React组件内部构建标签的类XML语法。可以理解为React提供的语法糖，可以让编译器更方便快速的选择编译方式。JavaScript 是能够被浏览器直接识别的，JavaScript XML需要经过编译器（webpack等）转换成 JavaScript.js.jsx。

使用ant-design做ui，redux做状态管理，typescript增加类型，axios网络库后端接口Navicat创建数据库和空表加载MySQL等模块创建MySQL连接池（设置服务器地址host，服务器端口号port） 和 服务器对象server（127.x.x.x）是本机回送地址（Loopback Address），即主机IP堆栈内部的IP地址，主要用于网络软件测试以及本地机进程间通信，无论什么程序，一旦使用回送地址发送数据，协议软件立即返回，不进行任何网络传输。

为了性能优化， 因为vue是虚拟DOM，更新DOM时用diff算法对节点进行一一比对，比如有很多li元素，要在某个位置插入一个li元素，但没有给li上加key，那么在进行运算的时候，就会将所有li元素重新渲染一遍，但是如果有key，那么它就会按照key一一比对li元素，只需要创建新的li元素，插入即可，不需要对其他元素进行修改和重新渲染。在data()中的修改后，页面中无法获取data修改后的数据，使用$nextTick时，当data中的数据修改后，可以实时的渲染页面。

目录React18特点声明式编码单向数据流组件化虚拟DOM（Virtual Dom）（同Vue）Diff算法（同Vue）组件属性propsstaterefs总结受控组件和非受控组件事件event事件处理的几种方法事件中this的处理事件传参处理鼠标事件 mouseenter与mouseover区别跨组件通信生命周期状态提升复用组件Render Props模式HOC高阶组件模式HooksuseState

接收方创建一。