> 今日问题：如何解决html、css、js等静态资源的缓存问题？





Q：如何解决html、css、js等静态资源的缓存问题，比如A用户正在用我的网站，我发布更新了网站内容，A用户即使刷新了浏览器也无法看到最新更新的内容

A：解决静态资源缓存问题可以通过以下几种方式：

1. **文件版本控制**：为每个静态资源文件添加版本号或时间戳作为查询参数，确保每次更新文件内容时，URL 都会变化，迫使浏览器重新请求新的文件。

```html
<link rel="stylesheet" href="styles.css?v=1.0">
<script src="script.js?v=1.0"></script>
```
或者可以使用构建工具自动添加版本号。

2. **设置缓存控制头**：在服务器端配置静态资源的缓存控制头，通过设置 Cache-Control 和 Expires 头来控制缓存的有效期。

在 Apache 服务器上，可以通过 .htaccess 文件添加以下规则：

```bash
# 设置缓存有效期为一周
<FilesMatch "\.(css|js|png|jpg|jpeg|gif|ico)$">
    Header set Cache-Control "max-age=604800, public"
</FilesMatch>
```

在 Nginx 服务器上，可以通过配置文件添加类似的规则：

```markdown
location ~* \.(css|js|png|jpg|jpeg|gif|ico)$ {
    expires 7d;
}
```

3. **使用服务端资源指纹**：生成静态资源的哈希指纹，并将其嵌入到文件名或路径中，以保证每次文件内容变化时 URL 都会改变。

```html
<link rel="stylesheet" href="styles.a1b2c3.css">
<script src="script.a1b2c3.js"></script>
```

4. **手动清除浏览器缓存**：如果用户遇到缓存问题，可以通过手动清除浏览器缓存来获取最新的静态资源文件。通常，组合使用以上方法可以有效地解决静态资源缓存问题。

如何解决html、css、js等静态资源的缓存问题

> 今日问题：防抖和节流？




Q：如果在前端面试中，被问到防抖和节流，怎么回答最全面，然后给出其各自的代码实现示例？

A：在前端面试中，被问到防抖和节流是常见的问题，因为它们是处理事件优化的两种常见方式。下面是一个全面的回答，包括它们的定义、用途、区别以及各自的代码实现示例。

**防抖**

定义：防抖是一种技术，用于限制函数在连续触发事件后的执行次数。它将多个连续的函数调用合并成一次调用。

用途：

- 防止频繁触发的事件（如窗口调整、输入框输入等）导致过多的资源消耗。
- 在搜索框输入时，只在用户停止输入一段时间后再触发搜索请求，以减轻服务器负载。

区别：

- 当连续触发事件时，防抖只会执行一次，而节流则会按照一定时间间隔执行。
- 防抖适用于事件结束后执行某操作，而节流适用于在一段时间内以一定频率执行某操作。

代码实现示例：

```js
function debounce(func, delay) {
  let timerId;
  return function (...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 示例用法
const debouncedFn = debounce(() => {
  console.log('Debounced function called');
}, 300);

// 触发事件时调用 debouncedFn
```

**节流**

定义：节流是一种技术，用于限制函数在一定时间间隔内的执行次数。它确保函数在一段时间内最多只执行一次。

用途：

- 控制事件的触发频率，确保性能和流畅性。
- 滚动加载、拖拽操作等场景中，限制事件处理的频率，避免过于频繁地执行操作。

区别：

- 节流会按照设定的时间间隔周期性地执行函数，而防抖则在事件停止触发后执行函数。

代码实现示例：

```js
function throttle(func, interval) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

// 示例用法
const throttledFn = throttle(() => {
  console.log('Throttled function called');
}, 300);

// 触发事件时调用 throttledFn
```

这些实现都是简单的示例，实际使用中可能需要考虑更多情况，比如传入参数的处理、上下文绑定等。

防抖和节流

1. 自我介绍
2. 在项目中遇到过什么难做的需求？
3. 左右布局，左边宽度固定500px，右边自适应，写出所有能实现的方法

4. 代码题：

```html
<div class="container">
    <ul class="option">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
    </ul>
</div>
```
只能给div加点击事件，实现点击任何一个li，输出li的内容

5. 字符串转数值，不能用强制类型转换的内置方法

'123.456' => 123.456

6. 项目里如何实现登录的
7. 两个项目如何共享登录态
8. 如何控制cookie写入的主域
9. 如何解决html、css、js等静态资源的强制缓存问题
10. 项目里如何使用websocket的，如何实现心跳机制
11. 项目里如何实现压测的，有了解过UI自动化是如何实现的吗？
12. pc项目如何实现页面自适应

前端面经分享-58同城

> 00后的前端程序员，在北京飘了两年多了，全网粉丝2.5w+，博文阅读量500w+。




刚刚过完2024年的元宵节，正式进入了新的一年，我简单算了一下，也在北京工作两年有余了。也有很多B站的粉丝问我工作情况和在北京的感受，分享一些感触和想法。

北上广不相信眼泪，这句话没有任何问题，你哇哇大哭，老板也不会给你这份工作，房东也不会给你减一分钱房租，饭店也不会给你一份吃的，地铁也不会让你免费做。

但是，似乎北方的人，尤其想从事互联网行业，北京是唯一的选择，南方的杭州、深圳、广州、上海都可以选，但是北方只有北京。不要相信其他人说的那些二线城市或者新一线互联网发展也很好，那些人都没有实际去找过工作。想从事互联网行业，北方只有北京和其它。

在北京：

- 我在凌晨两点下班，见过在路边卖煎饼的大妈和卖炸串的大爷。

- 我在凌晨五点下班，见过在路边打扫卫生的环卫工人。

- 我在晚上七点下班，见过一男一女一孩在一辆电瓶车上送外卖。

我在下班的路上，无数次见过不知道因为什么崩溃大哭的人们，看到情侣因为一些琐事大声吼叫，分道扬镳。

在北京呆久了，确实会麻木，不知道自己在做什么，想做什么，准备做什么。只有租房、通勤、上班，三点一线极度规律的生活，规律的好像自己是个程序设定的NPC。

我毕业后，在这家公司呆了也有小两年了，很多人问我工资怎么样，每个月能剩多少。我其实现在就可以不工作，我的副业和投资已经稳定超过我的工资。如果我没有这些副业，我也算过，可能每个月能剩下工资的一半就很不错了。

也有很多朋友问我，你副业是做什么的，你副业超过主业，为什么不辞职呢？

首先，我大概率不会跟任何人详细讲我的副业，我副业收入来源其实也不止一个，这些副业也很难复制。

别人教你怎么赚钱，就是想赚你的钱。这句话没有任何一丁点的问题。无论他是在做哪个行业，人多了都会压缩他的收入空间。

至于为什么我还没辞职。其实我目前对于工作的作用，不只是一份收入。我这样说，可能有点假大空，但是目前对于我来说就是这样的。我才毕业两年，工作两年，如果现在就离开工作、离开社会，不一定是一件好事。如果我已经工作10年了，35了，我应该会毫不犹豫的离开。

我可能会跳槽，或者找一份Remote的工作，但是不太可能不工作。

**如何做副业？**

这个一定没有标准答案，也不要试图去复制别人的成功。有人在家写小说就能月入几年，有人直播能盆满钵满，有人买彩票都能自由。

不要轻易尝试复制别人的成功。

我的建议是，找自己擅长的东西，然后再找对应垂直的副业领域。如果实在找不到，不要硬找，也不要去付费找，副业只是额外的收入，有则更好，无则无关痛痒。

**在北京如何分配自己的收入？**

其实认识我的人，总是问我，感觉你赚了好多钱，怎么感觉你不怎么消费，我确实没有太多的消费欲。在外工作的人，首先你要先确定一点，你是想留在这个城市，还是想通过高薪资赚几年钱就走。

如果你不想留在北京，只想赚够一个目标数字的钱后就离开，那你要充分管理自己的收入。在衣食住行上，我没有太多的消费欲望，我每个月的支出基本就是房租+吃饭+通勤。

我可以住更好、更大的房子，每天吃更好的饭，穿更贵的衣服和鞋子。但是这样就会导致，我每个月能留下的钱可能会减半，甚至更少。

也就是说，距离我之前设定的离京的目标数字，会多花费一倍甚至更多的时间。这是一个怎么算都不划算的事情。在北京工作的同学，应该大部分人都和我是一样的感受，没有任何的归属感。所以如果你不想留在北京，这样是极度不划算的，获得更高质量的生活造成的后果就是在北京要多工作生活几倍的时间。

目标要很清晰，来这里是赚工资溢价的，不是来享受生活的，也没几个人能真正享受到生活。如果能选的话，【比较低质量的生活】和【在外多工作几倍的时间】，我相信很多人都会选择前者。但是前提是你已经打开了上帝视角，能看到这两个选项，其实很多人看不到这么远。

**对于同行的建议？**

如果你还没入行，而且没有对编程的绝对兴趣，劝谨慎，国内市场现在已经很不适合做互联网了，岗位在越来越少，价格在越来越低。如果花几万块去培训，硬进来，最好的结果也是找一份初级的工作然后到你职业生涯结束。你永远无法得到这个行业应有的高薪。

如果你已经入行，且有一定的工作经验，建议平时多学习英语，尝试找Remote的工作，这个份额内还不太卷。对于Remote，英语不是必要的，但是会很有用。然后尽量少负债，对自己留下充足的容错空间。

我其实对目前的生活挺厌倦的，我的生活只有出租房、公司、通勤的路上，没有任何的其它内容发生。

我最近在办护照了，想去的地方太多了，我可能会大概率在今年和明年，去往国内的各个城市，去往国外的各个国家。我现在还没有太多生活和经济的压力，我工作之外的收入也足以支撑我做这些事情。

相信很多年轻人不想工作的心情都越来越强烈，因为在目前的市场内，自己的工作输出没办法得到一个更好的回报，还会碰到各种恶心事情。如果钱多，事多，还能理解，可以给自己一定的心里安慰，钱少，事多，能Run则Run吧。

祝各位在新的一年，工作顺利，事事顺心，早日发财。

在北京两年有感

> 今日问题：Vue和React的Diff算法的区别？





Q：如果在前端面试中，被问到Vue和React的Diff算法的区别，怎么回答比较好，全面具体一些，越详细越好

A：Vue和React的Diff算法，都是忽略跨级比较，只做同级比较，以降低算法的时间复杂度。但是它们在一些细节上有不同的处理方式，主要有以下几个方面：

- **节点类型的判断**
    - Vue在比对节点时，会先判断节点的key和type是否相同，如果不同，则直接删除旧节点，创建新节点。
    - 而React会先判断节点的key是否相同，如果相同，再判断type是否相同，如果不同，则只是修改节点的属性。这样，React可以复用一些节点，减少DOM操作，但是也可能导致一些意想不到的问题。
- **节点移动的方向**
    - Vue的列表比对，采用从两端到中间的比对方式，也就是双端Diff，这样可以有效地处理节点的移动和交换。
    - 而React则采用从左到右依次比对的方式，也就是单端Diff，这样可以简化算法的逻辑，但是也可能导致一些不必要的节点删除和创建。
- **Diff算法的优化**
    - Vue3在Vue2双端Diff的基础上，加上了最长递增子序列（LIS）优化算法，这样可以找出需要移动的最少节点数量，进一步提高Diff的效率 。
    - 而React则没有使用LIS算法，而是使用了一些启发式的方法，比如跳过没有key的节点，或者跳过相同类型的节点。

Vue和React的Diff算法区别

欢迎来到我的博客，这里是我分享前端、web3、理财、互联网等方面的知识和心得的地方。我是一名热爱编程的前端程序员，我希望通过我的博客能够帮助更多的人学习和进步。在这里，你可以找到最新最实用的前端技术教程，了解最前沿的互联网动态和趋势，掌握最有效的理财方法和策略。我也会不定期地发布一些个人项目和作品，展示我的创意和能力。如果你对我的博客感兴趣，欢迎你留言、评论、收藏、关注，也可以通过邮箱或社交媒体与我联系，交流学习和合作。谢谢你的支持！