My Love

Appearance

202410 ​

INFO

2024010 国庆放假回来，不知道前端知识忘记了多少

1008 ​

  • 1216
  • 如何度过这漫长而又苦逼的一生？微笑面对，smile to life
  • Http 请求中增加的新的方法类型,总结起来就是： 1.能承载大量请求数据 2.保证请求的幂等性和安全性。QUERY 是一种安全且幂等的 HTTP 请求方法，它允许携带请求内容。与 GET 方法不同，QUERY 方法并不请求服务器返回指定 URI 资源的表示，而是要求服务器根据请求内容进行查询操作。简单来说，QUERY 方法通过请求体来定义查询操作，并将操作结果作为响应返回。
  • 数组解构是如何降低 JavaScript 的运行速度
  • prisma 中的事务是什么？有啥用？
  • 想法：现实中买房或者租房成本太高，如果一旦不合适，就要承担高额违约金，就不能推出试用版，试用一周或者两周，都是付费，如果不合适解约就行，也不需要支付这么贵的金额
  • 现在企业招聘都要求：有 Node.js 或者 AI 项目开发经验者优先？招聘目录

1009 ​

  • 1217
  • 最难熬的一季，老婆还有最后三个月就要生了，需要额外关照，每年冬天也是公司裁员的高峰期，还要面临被裁员的风险，buffer 叠满，双重压力。感觉压力快赶上上海最黑暗的时刻了。每次产检都紧张的要死要死，希望宝宝一切都好
  • 大佬的博客干活满满，值得一读
  • “每个人的生活都是一条通向自身的道路。每个人的真正职责只有一个：找到自我。然后在心中坚守一生，全心全意，永不停息。 所有其它的路都是不完整的，是人的逃避方式，是对社会角色的懦弱伪装，是随波逐流，是对内心的恐惧。”
  • 最近  ECMAScript  引入了一个新的提案：proposal-safe-assignment-operator，中文翻译为：安全赋值运算符，代码中是?=
js
const fetchData = async () => {
  const [error, res] ?= (await api.getData().json())
  if (error || !isArray(res)) {
    return []
  }
  return res
}

很多人会问，为啥要将  error  放前面，而  result  放后面呢？其实很好理解，因为并不是所有函数执行都会有返回结果的，换句话说：error 是客观存在的，result 是主观存在的，所以  error  放前面更方便，代码判断起来更加舒服

js
const resolvePromise = () => {
  const count = Math.random()*10
  return new Promise((resolve,reject) => {
    if(count > 5) {
      resolve(count)
    } else {
      reject(count)
    }
  })
}
const [error, res] ?= resolvePromise()
console.log(error, res)

1010 ​

  • 1217
  • MemoryRouter 与 BrowserRouter 的区别是什么？

INFO

MemoryRouter 和 BrowserRouter 是 react-router-dom 库中提供的两种不同类型的路由组件，它们在数据持久性和使用场景上有所不同： 1.数据持久性：

BrowserRouter：使用浏览器的历史 API 来管理路由状态，这意味着路由状态会被持久化到浏览器的历史记录中。当你使用 BrowserRouter 时，用户可以通过浏览器的前进和后退按钮来导航到不同的路由状态。 MemoryRouter：路由状态仅存在于内存中，不依赖于浏览器的历史记录。这意味着，当用户刷新页面或者关闭并重新打开浏览器时，MemoryRouter 将不会记住之前的路由状态。

2.使用场景：
BrowserRouter：适用于大多数 SPA（单页应用程序）场景，因为它与浏览器的历史记录集成，提供了自然的导航体验。 MemoryRouter：适用于不需要持久化路由状态的场景，如： 服务器端渲染（SSR）的应用程序，因为服务器端渲染时没有浏览器环境，所以不能使用 BrowserRouter。 模态对话框或弹出窗口内部的路由，这些组件可能需要自己的路由逻辑，而不干扰主应用程序的路由状态。 测试环境，用于模拟路由行为而不影响全局的路由状态。 临时的、一次性的路由需求，例如，当你需要一个独立的路由实例来展示某个组件，而不希望这个状态被持久化。

  • ios 白屏率优化？h5 页面能做啥，该做的缓存和压缩/http2.0/已经有了，还能做啥？

1012 ​

  • 1219
  • 每次看到评优秀员工，始终都跟我无缘，做了 3 年，是自己不够努力还是处理方式有问题，得不到好的绩效就不能晋升，从来不想躺平，但现在的处境还无奈
  • 你是否别来无恙？对此，已经放弃，不报任何希望。
  • 做个小工具集合

1015 ​

INFO

抓取资源这一步是由前端发起、node 端抓取、返回给前端，前端再将返回来的资源链接传递给服务端（Java），服务端根据链接资源将文件下载并打成压缩包下发给客户端。

抓取的是由 node 服务来执行，node 服务里面又使用了 Puppeteer 无头浏览器作为工具，puppeteer 抓完资源后，会将资源链接返回给前端，前端将资源链接发送给 Java 服务端，服务端再根据链接将资源下载下来，进行压缩，下发给离线包。

1016 ​

  • 1225
  • 要不要落户? 如果能闯过这最后的 2 个月再说
  • 性能优化？
Details

H5 页面的白屏优化 ​

看板/指标 ​

客户端是如何计算的白屏的,截取像素点，然后计算出白屏的时间，超出五秒检测依然是没有像素则是白屏

措施 ​

客户端/资源加载/渲染优化

  • 离线化策略，ttfb 首字节到达时间优化
  • webview 预加载
  • 链接保活，在 APP 开屏等待的时候，就预先建立关键域名的连接？
  • loading 直出
  • 合理配置静态资源的缓存策略，ios 充分利用 http 缓存策略进行缓存
  • 302 重定向页面，加载 loading
  • 图片资源裁剪/压缩
  • cdn 加速

1017 ​

js
const controller = new AbortController()

controller.signal
controller.abort()

我们创建一个 AbortController 实例后，会得到两个东西：signal 属性，这是一个 AbortSignal 实例，我们可以将它传递给要中断的 API，来响应中断事件并进行相应处理，例如，传递给 fetch() 方法就可以终止这个请求了；.abort() 方法，调用这个方法会触发 signal 上的中止事件，并将信号标记为已中止。

我们可以通过监听 abort 事件，然后根据特定的逻辑实现中止：

js
controller.signal.addEventListener("abort", () => {
  // 实现中止逻辑
})

:::

js
// 统计对象中值的出现次数
const names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"]
function couns(data) {
  return data.reduce((allName, names) => {
    const currCount = allName[names] ?? 0
    return {
      ...allName,
      [names]: currCount + 1,
    }
  }, {})
}
couns(names)

// 按属性对对象进行分组
function merge(data, property) {
  return data.reduce((acc, obj) => {
    const key = obj[property]
    const curGroup = acc[key] ?? []
    return {
      ...acc,
      [key]: [...curGroup, obj],
    }
  }, {})
}
const people = [
  { name: "Alice", age: 21 },
  { name: "Max", age: 20 },
  { name: "Jane", age: 20 },
]
merge(people, "age")
// {
//   20: [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   21: [{ name: 'Alice', age: 21 }]
// }

1020 ​

  • 1229
  • 还是不能松懈

1024 ​

  • 1233
  • 今天是 1024，祝大家节日快乐，且行且珍惜，没多少时间让自己挥霍了，好好做完自己的小程序
  • https://www.whatsmybrowser.org/ 检测浏览器内核版本
  • 常说的安卓端 crash 是啥意思？
Details

在安卓（Android）应用开发中，"crash"指的是应用程序在运行过程中遇到了无法处理的错误，导致应用意外终止。当应用 crash 时，它会停止运行，并且通常会弹出一个错误报告，询问用户是否要向开发者报告这个错误。

导致应用 crash 的原因有很多，包括但不限于：

  • 内存不足：如果应用尝试分配的内存超过了可用内存，可能会导致崩溃。
  • 空指针异常：尝试访问或操作一个未初始化或已被释放的对象时，可能会触发空指针异常。
  • 资源文件缺失或损坏：如果应用依赖的资源文件（如图片、音频文件等）缺失或损坏，也可能导致崩溃。
  • 代码逻辑错误：开发者在代码中可能存在逻辑错误，比如数组越界、无限循环等。
  • 第三方库或服务的问题：如果应用使用了第三方库或服务，而这些库或服务存在问题，也可能导致应用崩溃。
  • 系统兼容性问题：应用可能在某些设备或操作系统版本上不兼容，导致运行时崩溃。
  • 网络问题：如果应用依赖网络连接，而网络不稳定或连接失败，也可能导致崩溃。 解决应用 crash 通常需要开发者通过查看日志、使用调试工具和分析崩溃报告来定位问题所在，并进行相应的修复。如果你是应用的用户，遇到 crash 时可以尝试更新应用到最新版本，或者联系应用的开发者报告问题。如果你是开发者，你需要检查应用的日志和崩溃报告，找出崩溃的原因，并修复相应的代码。

1025 ​

INFO

当 DOM 准备就绪时，document 上的 DOMContentLoaded 事件就会被触发。在这个阶段，我们可以将 JavaScript 应用于元素。 诸如 或 之类的脚本会阻塞 DOMContentLoaded，浏览器将等待它们执行结束。 图片和其他资源仍然可以继续被加载。 当页面和所有资源都加载完成时，window 上的 load 事件就会被触发。我们很少使用它，因为通常无需等待那么长时间。 当用户想要离开页面时，window 上的 beforeunload 事件就会被触发。如果我们取消这个事件，浏览器就会询问我们是否真的要离开（例如，我们有未保存的更改）。 当用户最终离开时，window 上的 unload 事件就会被触发。在处理程序中，我们只能执行不涉及延迟或询问用户的简单操作。正是由于这个限制，它很少被使用。我们可以使用 navigator.sendBeacon 来发送网络请求。

document.readyState 是文档的当前状态，可以在 readystatechange 事件中跟踪状态更改：

  • loading —— 文档正在被加载。
  • interactive —— 文档已被解析完成，与 DOMContentLoaded 几乎同时发生，但是在 DOMContentLoaded 之前发生。
  • complete —— 文档和资源均已加载完成，与 window.onload 几乎同时发生，但是在 window.onload 之前发生。

1026 ​

1028 ​

  • 1237
  • 周末看了一天的斗罗大陆，确实很神奇。但深层次的背景就是想转移注意力，让自己的注意力集中在其他事情上。这辈子估计靠现在手上的工作，很难有什么收入，而且后面一旦宝贝出生，估计也很难有什么收入，生活太艰难了

1029 ​

  • 1238
  • 离线包缓存策略,仅供参考

INFO

Android 客户端和 iOS 客户端的缓存策略不同，导致离线包被命中的逻辑也不同。

iOS 的 webView 有正常的缓存，所以，离线包打进客户端以后，其实只有第一次访问会命中离线资源，一旦命中以后，就会被 webView 缓存起来，下次再访问，就走了缓存，不会再命中离线资源了。所以，在 iOS 中，离线资源也就第一次会起作用，后续再访问都走 webView 缓存了，除非用户清除缓存，清除所有数据。

Android 的 webView 没有使用缓存，每次访问 h5，都会去访问线上，如果本地有要访问的资源，就拦截请求，访问本地离线资源，没有就走线上。所以，在 Android 端，每次访问都会命中离线资源。