使用 Service Worker 让首页秒开
在大部分场景预加载是页面性能优化的利器，而对于类似首页这种承担用户第一次访问的页面却无法使用预加载，这时候我们可以用 Stale While Revalidate 加速页面访问，策略分 3 步 1. 在收到页面请求时首先检查缓存，如果命中缓存就直接从缓存中返回给用户 2. 将缓存返回用户的同时，在后台异步发起网络请求，尝试获取资源的最新版本 3. 获取成功后更新缓存，下次使用 而这一切的幕后功臣便是 Service Worker，作为一...
比较for、for...in、for...of、forEach的区别
目录 前言 在比较之前我们先了解两个概念： 迭代（iterate），指的是按照某种顺序反复多次执行一段程序，通常会有明确的终止条件。 遍历（traversal），指的是按照一定的规则访问树形结构中的每个节点，而且每个节点都只访问一次。 一、四种循环 1、for循环 for语句是一种先测试循环语句，（即先检测退出条件，再执行循环体内的代码.) 语法： for(初始化变量;条件表达式;操作表达式){ 循环体语句; } (1)三个表达式都可以...
Antd 样式覆盖
目前作者所在的业务正在升级 Antd5.0，不得不说 Antd5.0 真的太香了，但是由于团队的 UE 规范进行了大改版，Antd5.0 所有的 必须对齐最新的规范，因此就需要对 Antd5.0 组件做主题定制。 现状 目前针对项目中使用的 antd 高频组件进行了梳理，并且根据规范基于 design token 对这些高频组件进行样式定制，对于主题色、圆角、边框、字体等用户 高的主题都已经满足团队规范。 虽然 Desig...
在 JS 中， 如何解决递归导致栈溢出问题
关键词 ：栈溢出问题 在 JavaScript 中，递归如果执行过深，确实有可能导致“栈溢出(stack overflow)”错误，因为每次函数调用都会向调用栈中添加一个新的帧，而每个线程的调用栈都有其最大容量限制。当这个容量被超过时，就会发生栈溢出。为了解决这个问题，你可以使用几种不同的方法： 尾调用优化（Tail Call Optimization） 在 ES6 中，引入了尾调用优化。这意味着如果函数的最后一个操作是返回另一个函数的...
0.1 + 0.2 不等于 0.3 这是什么原因，要怎么解决
关键词 ：精度计算 在 JavaScript 中， 不等于 的原因是浮点数的精度问题。 在计算机中，浮点数采用二进制存储，而有些十进制小数无法精确地用二进制表示。 和 在二进制表示中是无限循环的，在进行运算时会产生舍入误差。 要解决这个问题，可以使用以下方法： 1. 使用 来比较两个浮点数是否接近： 2. 将浮点数乘以一个适当的倍数转换为整数进行计算，计算完成后再除以这个倍数转换回浮点数： 3. 使用第三方库，如 ，它提供了更精确的十进...
[] == ! [] 为什么返回 true
关键词 ：js 隐式转换 这个问题涉及到 JavaScript 中的类型转换和比较操作的规则。 在 JavaScript 中， 的比较过程如下： 1. !\[\]的计算 是逻辑非操作符，它会首先将右侧的操作数转换为布尔值，然后反转该布尔值。对于空数组 ，在 JavaScript 中，所有对象（包括数组）在布尔上下文中都被认为是 。因此， 首先将 转换为 ，然后取反，变成 。 2. 比较 与 根据 ECMAScript 规范，在进行抽象等...
chrome调试工具overrides调试代码
利用Chrome开发者工具断点调试功能调试修改代码，一刷新就什么都没有了，且只能调试JS代码，太尴尬了。 想刷新后，原来修改调试的的代码还在，且JSP、JS、CSS等能调试，那赶快试试下面这种方法吧。 第一步： 在浏览器开发者工具中打开下面的面板sources overrides! 第二步： 打开Select folder for overrides，选择要存放代码的文件夹 第三步： 点击允许访问文件夹，overrides生成刚才选择的...
JS 脚本延迟加载的方式有哪些
关键词 ：JS 延迟加载、JS 异步加载 JavaScript 脚本的延迟加载是一种优化网页加载时间的技术，可以提高页面的加载速度，提升用户体验。以下是常见的几种 JS 脚本延迟加载的方式： 1\. 使用 标签的 属性 在 标签中使用 属性可以使得脚本在文档解析完成后，但在 事件触发之前执行。 属性仅适用于外部脚本。 2\. 使用 标签的 属性 与 类似， 属性使得脚本在加载时不会阻塞 HTML 文档的解析，但它与 的区别在于，脚本一旦...
理解JS中的深比较跟浅比较
<span style="color: var( g textcolor);" 在理解浅比较跟深比较之前，我们需要先回顾一下</span <span style="color: var( g textcolor);" 和</span <span style="color: var( g textcolor);" 的区别</span 和 的区别 代表 相同 ； 代表 严格相同 先检查两个操作数据的类型，如果类型相同，就会 比较；如果不相同...