几个常见面试题，工作中也经常用到

❞

01 什么是防抖和节流&＃xff0c;他们的应用场景有哪些

❝

在 Issue 中交流与讨论: 01 什么是防抖和节流&＃xff0c;他们的应用场景有哪些^[1]

❞

防抖 (debounce)

防抖&＃xff0c;顾名思义&＃xff0c;防止抖动&＃xff0c;以免把一次事件误认为多次&＃xff0c;敲键盘就是一个每天都会接触到的防抖操作。

想要了解一个概念&＃xff0c;必先了解概念所应用的场景。在 JS 这个世界中&＃xff0c;有哪些防抖的场景呢

1. 登录、发短信等按钮避免用户点击太快&＃xff0c;以致于发送了多次请求&＃xff0c;需要防抖

2. 调整浏览器窗口大小时&＃xff0c;resize 次数过于频繁&＃xff0c;造成计算过多&＃xff0c;此时需要一次到位&＃xff0c;就用到了防抖

3. 文本编辑器实时保存&＃xff0c;当无任何更改操作一秒后进行保存

代码如下&＃xff0c;可以看出来「防抖重在清零 clearTimeout(timer)」

function debounce (f, wait) {let timerreturn (...args) &＃61;> {clearTimeout(timer)timer &＃61; setTimeout(() &＃61;> {f(...args)}, wait)}
}


节流 (throttle)

节流&＃xff0c;顾名思义&＃xff0c;控制水的流量。控制事件发生的频率&＃xff0c;如控制为 1s 发生一次&＃xff0c;甚至 1 分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。

1. scroll 事件&＃xff0c;每隔一秒计算一次位置信息等

2. 浏览器播放事件&＃xff0c;每个一秒计算一次进度信息等

3. input 框实时搜索并发送请求展示下拉列表&＃xff0c;每隔一秒发送一次请求 (也可做防抖)

代码如下&＃xff0c;可以看出来「节流重在加锁 timer&＃61;timeout」

function throttle (f, wait) {let timerreturn (...args) &＃61;> {if (timer) { return }timer &＃61; setTimeout(() &＃61;> {f(...args)timer &＃61; null}, wait)}
}


总结 (简要答案)

• 防抖&＃xff1a;防止抖动&＃xff0c;单位时间内事件触发会被重置&＃xff0c;避免事件被误伤触发多次。「代码实现重在清零 clearTimeout」。防抖可以比作等电梯&＃xff0c;只要有一个人进来&＃xff0c;就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。

• 节流&＃xff1a;控制流量&＃xff0c;单位时间内事件只能触发一次&＃xff0c;与服务器端的限流 (Rate Limit) 类似。「代码实现重在开锁关锁 timer&＃61;timeout; timer&＃61;null」。节流可以比作过红绿灯&＃xff0c;每等一个红灯时间就可以过一批。

02 在前端开发中&＃xff0c;如何获取浏览器的唯一标识

❝更多描述: 如何获取浏览器的唯一标识&＃xff0c;原理是什么❞

❝

在 Issue 中交流与讨论: 02 在前端开发中&＃xff0c;如何获取浏览器的唯一标识^[2]

❞

由于不同的系统显卡绘制 canvas 时渲染参数、抗锯齿等算法不同&＃xff0c;因此绘制成图片数据的 CRC 校验也不一样。

function getCanvasFp () {const canvas &＃61; document.getElementById(&＃39;canvas&＃39;)const ctx &＃61; canvas.getContext(&＃39;2d&＃39;)ctx.font &＃61; &＃39;14px Arial&＃39;ctx.fillStyle &＃61; &＃39;#ccc&＃39;ctx.fillText(&＃39;hello, shanyue&＃39;, 2, 2)return canvas.toDataURL(&＃39;image/jpeg&＃39;)
}


因此根据 canvas 可以获取浏览器指纹信息。

1. 绘制 canvas&＃xff0c;获取 base64 的 dataurl

2. 对 dataurl 这个字符串进行 md5 摘要计算&＃xff0c;得到指纹信息

但是对于常见的需求就有成熟的解决方案&＃xff0c;若在生产环境使用&＃xff0c;可以使用以下库

• fingerprintjs2^[3]

它依据以下信息&＃xff0c;获取到浏览器指纹信息&＃xff0c;「而这些信息&＃xff0c;则成为 component」

1. canvas

2. webgl

3. UserAgent

4. AudioContext

5. 对新式 API 的支持程度等

requestIdleCallback(function () {Fingerprint2.get((components) &＃61;> {const values &＃61; components.map((component) &＃61;> component.value)const fp &＃61; Fingerprint2.x64hash128(values.join(&＃39;&＃39;), 31)})
})


在 fingerprintjs2 中&＃xff0c;对于 component 也有分类

• browser independent component^[4]&＃xff1a;有些 component 同一设备跨浏览器也可以得到相同的值&＃xff0c;有些独立浏览器&＃xff0c;得到不同的值

• stable component^[5]: 有些 component 刷新后值就会发生变化&＃xff0c;称为不稳定组件

在实际业务中&＃xff0c;可根据业务选择合适的组件

const options &＃61; {excludes: {userAgent: true, language: true}
}


简答

根据 canvas 可以获取浏览器指纹信息

1. 绘制 canvas&＃xff0c;获取 base64 的 dataurl

2. 对 dataurl 这个字符串进行 md5 摘要计算&＃xff0c;得到指纹信息

若在生产环境使用&＃xff0c;可以使用 fingerprintjs2^[6]&＃xff0c;根据业务需求&＃xff0c;如单设备是否可跨浏览器&＃xff0c;以此选择合适的 component

03 在服务端应用中如何获得客户端 IP

❝

在 Issue 中交流与讨论: 03 在服务端应用中如何获得客户端 IP^[7]

❞

「如果有 x-forwarded-for 的请求头&＃xff0c;则取其中的第一个 IP&＃xff0c;否则取建立连接 socket 的 remoteAddr。」

而 x-forwarded-for 基本已成为了基于 proxy 的标准 HTTP 头&＃xff0c;格式如下&＃xff0c;可见第一个 IP 代表其真实的 IP&＃xff0c;可以参考 MDN X-Forwarded-For^[8]

X-Forwarded-For: 203.0.113.195, 70.41.3.18, 150.172.238.178
X-Forwarded-For: , , 


以下是 koa 获取 IP 的方法

  get ips() {const proxy &＃61; this.app.proxy;const val &＃61; this.get(this.app.proxyIpHeader);let ips &＃61; proxy && val? val.split(/\s*,\s*/): [];if (this.app.maxIpsCount > 0) {ips &＃61; ips.slice(-this.app.maxIpsCount);}return ips;},get ip() {if (!this[IP]) {this[IP] &＃61; this.ips[0] || this.socket.remoteAddress || &＃39;&＃39;;}return this[IP];},


参见源码: https://github.com/koajs/koa/blob/master/lib/request.js#L433

04 js 如何全部替代一个子串为另一个子串

❝更多描述: 假设有一个字符串 &＃96;hello. hello. hello. &＃96; 需要替换为 &＃96;AAA&＃96;&＃xff0c;即把 &＃96;hello. &＃96; 替换为 &＃96;A&＃96;❞

❝

在 Issue 中交流与讨论: 04 js 如何全部替代一个子串为另一个子串^[9]

❞

如果需要全量替换字符串&＃xff0c;可以使用 String.prototype.replace(re, replacer)&＃xff0c;其中正则表达式需要开启 global flag

const s &＃61; &＃39;foo foo foo&＃39;
s.replce(/foo/g, &＃39;bar&＃39;)


那如题中&＃xff0c;「是否可以使用正则表达式来替代子串」

答&＃xff1a;「不可以&＃xff0c;因为使用子串构建正则时&＃xff0c;有可能有特殊字符&＃xff0c;就有可能出现问题」&＃xff0c;如下

// 期待结果: &＃39;AhelloX hello3 &＃39;
> &＃39;hello. helloX hello3 &＃39;.replace(new RegExp(&＃39;hello. &＃39;, &＃39;g&＃39;), &＃39;A&＃39;)
< "AAA"


而在 Javascript 中替换子串只能使用一种巧妙的办法&＃xff1a;str.split(&＃39;foo&＃39;).join(&＃39;bar&＃39;)

> &＃39;hello. hello. hello. &＃39;.split(&＃39;hello. &＃39;).join(&＃39;A&＃39;)
< "AAA"


真是一个巧(笨)妙(拙)的办法啊&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;「大概 TC39 也意识到了一个问题&＃xff0c;于是出了一个新的 API」&＃xff0c;在 ESNext 中

String.prototype.replaceAll()&＃39;aabbcc&＃39;.replaceAll(&＃39;b&＃39;, &＃39;.&＃39;);
// &＃39;aa..cc&＃39;


详细文档在 String.prototype.replaceAll^[10]

总结(及直接答案)

两种办法

• str.split(&＃39;foo&＃39;).join(&＃39;bar&＃39;)

• str.replaceAll(&＃39;foo&＃39;, &＃39;bar&＃39;)&＃xff0c;在 ESNext 中&＃xff0c;目前支持性不好

05 如何获取一个进程的内存并监控

❝更多描述: 在编写脚本时&＃xff0c;有时会出现内存过大发生 OOM 的事情&＃xff0c;那我们如何得知某个进程的内存&＃xff1f;另外又如何监控它❞

❝

在 Issue 中交流与讨论: 05 如何获取一个进程的内存并监控^[11]

❞

通过 ps 可以获知一个进程所占用的内存

$ ps -O rss -p 3506PID   RSS S TTY          TIME COMMAND3506  6984 S pts/1    00:00:00 vim


如果要监控内存&＃xff0c;肯定使用对进程万能的命令 pidstat &＃xff08;PS: 这名字一听就知道是干嘛的&＃xff09;

## -r 显示内存信息
## -p 指定 pid
## 1: 每个一秒打印一次
$ pidstat -r -p 3506 1
Linux 3.10.0-957.21.3.el7.x86_64 (shanyue)      11/04/19        _x86_64_        (2 CPU)20:47:35      UID       PID  minflt/s  majflt/s     VSZ    RSS   %MEM  Command
20:47:36        0      3506      0.00      0.00  139940   6984   0.18  vim
20:47:37        0      3506      0.00      0.00  139940   6984   0.18  vim
20:47:38        0      3506      0.00      0.00  139940   6984   0.18  vim
20:47:39        0      3506      0.00      0.00  139940   6984   0.18  vim
20:47:40        0      3506      0.00      0.00  139940   6984   0.18  vim
20:47:41        0      3506      0.00      0.00  139940   6984   0.18  vim


pidstat 是属于 sysstat 下的 linux 性能工具&＃xff0c;但在 mac 中&＃xff0c;如何定位内存的变化&＃xff1f;此时可以使用万能的 top/htop

$ htop -p 31796

总结

简而言之&＃xff0c;有以下三个命令

1. pidstat -r

2. htop/top -p

3. ps -O rss -p

关于更多指标的监控可以参考我的文章: linux 各项监控指标小记^[12]

06 CORS 如果需要指定多个域名怎么办

❝

在 Issue 中交流与讨论: 06 CORS 如果需要指定多个域名怎么办^[13]

❞

CORS 通过控制 Access-Control-Allow-Origin 控制哪些域名可以共享资源&＃xff0c;取值如下

Access-Control-Allow-Origin:  | *


其中 * 代表所有域名&＃xff0c;origin 代表指定特定域名&＃xff0c;那如何设置多个域名了&＃xff1f;

此时需要通过代码实现&＃xff0c;「根据请求头中的 Origin 来设置响应头 Access-Control-Allow-Origin」&＃xff0c;那 Origin 又是什么东西&＃xff1f;

请求头: Origin

并不是所有请求都会自动带上 Origin&＃xff0c;在浏览器中带 Origin 的逻辑如下

1. 如果存在跨域&＃xff0c;则带上 Origin&＃xff0c;值为当前域名

2. 如果不存在跨域&＃xff0c;则不带 Origin

逻辑理清楚后&＃xff0c;关于服务器中对于 Access-Control-Allow-Origin 设置多域名的逻辑也很清晰了

1. 如果请求头不带有 Origin&＃xff0c;证明未跨域&＃xff0c;则不作任何处理

2. 如果请求头带有 Origin&＃xff0c;证明跨域&＃xff0c;根据 Origin 设置相应的 Access-Control-Allow-Origin:

使用伪代码实现如下:

// 获取 Origin 请求头
const requestOrigin &＃61; ctx.get(&＃39;Origin&＃39;);// 如果没有&＃xff0c;则跳过
if (!requestOrigin) {return await next();
}// 设置响应头
ctx.set(&＃39;Access-Control-Allow-Origin&＃39;, requestOrigin)


Vary: Origin

此时可以给多个域名控制 CORS&＃xff0c;但此时假设有两个域名访问 static.shanyue.tech 的跨域资源

1. foo.shanyue.tech&＃xff0c;响应头中返回 Access-Control-Allow-Origin: foo.shanyue.tech

2. bar.shanyue.tech&＃xff0c;响应头中返回 Access-Control-Allow-Origin: bar.shanyue.tech

看起来一切正常&＃xff0c;但如果中间有缓存怎么办&＃xff1f;

1. foo.shanyue.tech&＃xff0c;响应头中返回 Access-Control-Allow-Origin: foo.shanyue.tech&＃xff0c;被 CDN 缓存

2. 「bar.shanyue.tech&＃xff0c;因由缓存&＃xff0c;响应头中返回 Access-Control-Allow-Origin: foo.shanyue.tech&＃xff0c;跨域出现问题」

此时&＃xff0c;Vary: Origin 就上场了&＃xff0c;代表为不同的 Origin 缓存不同的资源

总结 (简要答案)

CORS 如何指定多个域名&＃xff1f;

「根据请求头中的 Origin 来设置响应头 Access-Control-Allow-Origin」&＃xff0c;思路如下

1. 总是设置 Vary: Origin&＃xff0c;避免 CDN 缓存破坏 CORS 配置

2. 如果请求头不带有 Origin&＃xff0c;证明未跨域&＃xff0c;则不作任何处理

3. 如果请求头带有 Origin&＃xff0c;证明浏览器访问跨域&＃xff0c;根据 Origin 设置相应的 Access-Control-Allow-Origin:

使用伪代码实现如下

// 获取 Origin 请求头
const requestOrigin &＃61; ctx.get(&＃39;Origin&＃39;);ctx.set(&＃39;Vary&＃39;, &＃39;Origin&＃39;)// 如果没有&＃xff0c;则跳过
if (!requestOrigin) {return await next();
}// 设置响应头
ctx.set(&＃39;Access-Control-Allow-Origin&＃39;, requestOrigin)


❝

相关问题&＃xff1a;如何避免 CDN 为 PC 端缓存移动端页面^[14]

❞

07 既然 cors 配置可以做跨域控制&＃xff0c;那可以防止 CSRF 攻击吗

❝

在 Issue 中交流与讨论: 07 既然 cors 配置可以做跨域控制&＃xff0c;那可以防止 CSRF 攻击吗 ^[15]

❞

「对 CORS 一点用也没有」

1. 「form 提交不通过 CORS 检测」&＃xff0c;你可以在本地进行测试

2. 即使通过 xhr 及 fetch 进行提交被 CORS 拦住&＃xff0c;「但是对于简单请求而言&＃xff0c;请求仍被发送」&＃xff0c;已造成了攻击

08 如何避免 CDN 为 PC 端缓存移动端页面

❝

在 Issue 中交流与讨论: 08 如何避免 CDN 为 PC 端缓存移动端页面^[16]

❞

如果 PC 端和移动端是一套代码则不会出现这个问题。「这个问题出现在 PC 端和移动端是两套代码&＃xff0c;却共用一个域名。」

使用 nginx 配置如下&＃xff0c;根据 UA 判断是否移动端&＃xff0c;而走不同的逻辑 (判断 UA 是否移动端容易出问题)

location / {// 默认 PC 端root /usr/local/website/web;# 判断 UA&＃xff0c;访问移动端if ( $http_user_agent ~* "(Android|webOS|iPhone|iPad|BlackBerry)" ){root /usr/local/website/mobile;}index index.html index.htm;
}


解决方案通常使用 Vary 响应头&＃xff0c;来控制 CDN 对不同请求头的缓存。

「此处可以使用 Vary: User-Agent &＃xff0c;代表如果 User-Agent 不一样&＃xff0c;则重新发起请求&＃xff0c;而非从缓存中读取页面」

Vary: User-Agent


当然&＃xff0c;User-Agent 实在过多&＃xff0c;此时缓存失效就会过多。

简答

使用 Vary: User-Agent&＃xff0c;根据 UA 进行缓存。

Vary: User-Agent


但最好不要出现这种情况&＃xff0c;PC 端和移动端如果是两套代码&＃xff0c;建议用两个域名&＃xff0c;理由如下

1. nginx 判断是否移动端容易出错

2. 对缓存不友好

09 如何实现表格单双行条纹样式

❝

在 Issue 中交流与讨论: 09 如何实现表格单双行条纹样式^[17]

❞

通过 css3 中伪类 :nth-child 来实现。其中 :nth-child(an&＃43;b) 匹配下标 { an &＃43; b; n &＃61; 0, 1, 2, ...} 且结果为整数的子元素

• nth-child(2n)/nth-child(even): 双行样式

• nth-child(2n&＃43;1)/nth-child(odd): 单行样式

其中 tr 在表格中代表行&＃xff0c;实现表格中单双行样式就很简单了&＃xff1a;

tr:nth-child(2n) {background-color: red;
}tr:nth-child(2n&＃43;1) {background-color: blue;
}


同理&＃xff1a;

1. 如何匹配最前三个子元素: :nth-child(-n&＃43;3)

2. 如何匹配最后三个子元素: :nth-last-child(-n&＃43;3)

10 简述下 css specificity

❝

在 Issue 中交流与讨论: 10 简述下 css specificity^[18]

❞

css specificity 即 css 中关于选择器的权重&＃xff0c;以下三种类型的选择器依次下降

1. id 选择器&＃xff0c;如 #app

2. class、attribute 与 pseudo-classes 选择器&＃xff0c;如 .header、[type&＃61;"radio"]与 :hover

3. type 标签选择器和伪元素选择器&＃xff0c;如 h1、p 和 ::before

其中通配符选择器 *&＃xff0c;组合选择器 &＃43; ~ >&＃xff0c;否定伪类选择器 :not() 对优先级无影响

另有内联样式 

❝

&＃96;:not&＃96; 的优先级影响 - codepen^[19] 可以看出 :not 对选择器的优先级无任何影响

❞

11 node 中 module.exports 与 exports 有什么区别

❝

在 Issue 中交流与讨论: 11 node 中 module.exports 与 exports 有什么区别^[20]

❞

「一句话&＃xff1a;exports 是 module.exports 的引用&＃xff0c;如果 exports 没有重赋值&＃xff0c;则二者没有任何区别」

类似如下所示

const exports &＃61; module.exports


那如下结果会如何导出&＃xff1f;

module.exports &＃61; 100
exports &＃61; 3


很显然会导出 100&＃xff0c;毕竟 exports 进行了重赋值。

「那在 node 源码中如何实现的呢&＃xff1f;」 从源码里可以看出 「exports」 的实质

详见源码: https://github.com/nodejs/node/blob/master/lib/internal/modules/cjs/loader.js#L1252&＃xff0c;可以看出符合猜想

众所周知&＃xff0c;node 中所有的模块代码都被包裹在这个函数中

(function(exports, require, module, __filename, __dirname) {exports.a &＃61; 3
});


而以下源码指出&＃xff0c;exports 是如何得来

const dirname &＃61; path.dirname(filename);
const require &＃61; makeRequireFunction(this, redirects);
let result;
// 从这里可以看出来 exports 的实质
const exports &＃61; this.exports;
const thisValue &＃61; exports;
const module &＃61; this;
if (requireDepth &＃61;&＃61;&＃61; 0) statCache &＃61; new Map();
if (inspectorWrapper) {result &＃61; inspectorWrapper(compiledWrapper, thisValue, exports,require, module, filename, dirname);
} else {// 这里是模块包装函数result &＃61; compiledWrapper.call(thisValue, exports, require, module,filename, dirname);
}


12 如何获取当前系统中的在线用户数 (并发用户数)

❝更多描述: 一些 SaaS 系统基于 Pricing 的考虑&＃xff0c;会限制团队人数及同时在线数&＃xff0c;如何实现❞

❝

在 Issue 中交流与讨论: 12 如何获取当前系统中的在线用户数 (并发用户数)^[21]

❞

❝

一些 SaaS 系统基于定价策略的考虑&＃xff0c;会限制团队人数及同时在线数&＃xff0c;如何实现&＃xff1f;

❞

通过 redis 的 zset 可实现并发用户数。

当一个用户请求任何接口时&＃xff0c;实现一个 middleware&＃xff0c;处理以下逻辑

// 当一个用户访问任何接口时&＃xff0c;对该用户Id&＃xff0c;写入 zset
await redis.zadd(&＃96;Organization:${organizationId}:concurrent&＃96;, Date.now(), &＃96;User:${userId}&＃96;)// 查询当前机构的并发数
// 通过查询一分钟内的活跃用户来确认并发数&＃xff0c;如果超过则抛出特定异常
const activeUsers &＃61; await redis.zrangebyscore(&＃96;Organization:${organizationId}:concurrent&＃96;, Date.now() - 1000 * 60, Date.now())// 查出并发数
const count &＃61; activeUsers.length// 删掉过期的用户
await redis.zrembyscore(&＃96;Organization:${organizationId}:concurrent&＃96;, Date.now() - 1000 * 60, Date.now())


总结

1. 每当用户访问服务时&＃xff0c;把该用户的 ID 写入优先级队列&＃xff0c;权重为当前时间

2. 根据权重(即时间)计算一分钟内该机构的用户数

3. 删掉一分钟以上过期的用户

13 如何把 json 数据转化为 demo.json 并下载文件

❝

在 Issue 中交流与讨论: 13 如何把 json 数据转化为 demo.json 并下载文件^[22]

❞

json 视为字符串&＃xff0c;可以利用 DataURL 进行下载

Text -> DataURL

除了使用 DataURL&＃xff0c;还可以转化为 Object URL 进行下载

Text -> Blob -> Object URL

可以把以下代码直接粘贴到控制台下载文件

function download (url, name) {const a &＃61; document.createElement(&＃39;a&＃39;)a.download &＃61; namea.rel &＃61; &＃39;noopener&＃39;a.href &＃61; url// 触发模拟点击a.dispatchEvent(new MouseEvent(&＃39;click&＃39;))// 或者 a.click()
}const json &＃61; {a: 3,b: 4,c: 5
}
const str &＃61; JSON.stringify(json, null, 2)// 方案一&＃xff1a;Text -> DataURL
const dataUrl &＃61; &＃96;data:,${str}&＃96;
download(dataUrl, &＃39;demo.json&＃39;)// 方案二&＃xff1a;Text -> Blob -> ObjectURL
const url &＃61; URL.createObjectURL(new Blob(str.split(&＃39;&＃39;)))
download(url, &＃39;demo1.json&＃39;)


总结

1. 模拟下载&＃xff0c;可以通过新建一个  标签并设置 url 及 download 属性来下载

2. 可以通过把 json 转化为 dataurl 来构造 URL

3. 可以通过把 json 转换为 Blob 再转化为 ObjectURL 来构造 URL

14 在浏览器中如何监听剪切板中内容

❝

在 Issue 中交流与讨论: 14 在浏览器中如何监听剪切板中内容^[23]

❞

通过 Clipboard API 可以获取剪切板中内容&＃xff0c;但需要获取到 clipboard-read 的权限&＃xff0c;以下是关于读取剪贴板内容的代码&＃xff1a;

// 是否能够有读取剪贴板的权限
// result.state &＃61;&＃61; "granted" || result.state &＃61;&＃61; "prompt"
const result &＃61; await navigator.permissions.query({ name: "clipboard-read" })// 获取剪贴板内容
const text &＃61; await navigator.clipboard.readText()


❝

注: 该方法在 devtools 中不生效

❞