背景

为什么同样是男人，但有的男人'🧔‍♂️'.length === 5，有的男人'🧔‍♂'.length === 4呢？

这二者都是JS中的字符串，要理解本质原因，你需要明白JS中字符串的本质，你需要理解 String Unicode UTF8 UTF16 的关系。本文，深入二进制，带你理解它！

从 ASCII 说起

各位对这张 ASCII 表一定不陌生：

因为计算机只能存储0和1，如果要让计算机存储字符串，还是需要把字符串转成二进制来存。ASCII就是一直延续至今的一种映射关系：把8位二进制（首位为0）映射到了128个字符上。

从多语言到Unicode

但是世界上不止有英语和数字，还有各种各样的语言，计算机也应该能正确的存储、展示它们。

这时候，ASCII的128个字符，就需要被扩充。有诸多扩充方案，但思路都是一致的：把一个语言符号映射到一个编号上。有多少个语言符号，就有多少个编号。

至今，Unicode 已经成为全球标准。

The Unicode Consortium is the standards body for the internationalization of software and services. Deployed on more than 20 billion devices around the world, Unicode also provides the solution for internationalization and the architecture to support localization.

Unicode 联盟是软件和服务国际化的标准机构。 Unicode 部署在全球超过 200 亿台设备上，还提供国际化解决方案和支持本地化的架构。

Unicode是在ASCII的128个字符上扩展出来的。

例如，英文「z」的Unicode码是7A（即十进制的122，跟ASCII一致）。

Unicode中80（即128号）字符是€，这是ASCII的128个字符（0-127）的后一个字符。

汉字「啊」的Unicode码是554A。

Emoji「🤔」的Unicode码是1F914。

从Unicode到Emoji

随着时代发展，人们可以用手机发短信聊天了，常常需要发送表情，于是有人发明了Emoji。Emoji其实也是一种语言符号，所以Unicode也收录了进来。

Unicode一共有多少

现在，Unicode已经越来越多了，它的编码共计111万个！（有实际含义的编码并没这么多）

目前的Unicode字符分为17组编排，每组称为平面（Plane），而每平面拥有65536（即2^4^4=2^16）个代码点。目前只用了少数平面。

以前只有ASCII的时候，共128个字符，我们统一用8个二进制位（因为log(2)128=7，取整得8），就一定能存储一个字符。

现在，Unicode有16*65536=1048576个字符，难道必须用log(2)1048576=20 向上取整24位（3个字节）来表示一个字符了吗？

那样的话，字母z就是00000000 00000000 01111010了，而之前用ASCII的时候，我们用01111010就可以表示字母z。也就是说，同样一份纯英文文件，换成Unicode后，扩大了3倍！1GB变3GB。而且大部分位都是0。这太糟糕了！

因此，Unicode只是语言符号和一些自然数的映射，不能直接用它做存储。

UTF8如何解决「文本大小变3倍问题」

答案就是：「可变长编码」，之前我在文章《太卷了！开发象棋，为了减少40%存储空间，我学了下Huffman Coding》提到过。

使用「可变长编码」，每个字符不一定都要用统一的长度来表示，针对常见的字符，我们用8个二进制位，不常见的字符，我们用16个二进制位，更不常见的字符，我们用24个二进制位。

这样，能够减少大部分场景的文件体积。这也是哈夫曼编码的思想。

要设计一套高效的「可变长编码」，你必须满足一个条件：它是「前缀码」。即通过前缀，我就能知道这个字符要占用多少字节。

而UTF8，就是一种「可变长编码」。

UTF8的本质

1. UTF8可以把2^21=2097152个数字，映射到1-4个字节（这个范围能够覆盖所有Unicode）。


2. UTF8完全兼容ASCII。也就是说，在UTF8出现之前的所有电脑上存储的老的ASCII文件，天然可以被UTF8解码。

具体映射方法：

• 0-127，用0xxxxxxx表示（共7个x）


• 128-2^11-1，用110xxxxx 10xxxxxx表示（共11个x）


• 2^11-2^16-1，用1110xxxx 10xxxxxx 10xxxxxx表示（共16个x）


• 2^16-2^21-1，用11110xxx 10xxxxxx 10xxxxxx 10xxxxxx表示（共21个x）

不得不承认，UTF8确实有冗余，还有压缩空间。但考虑到存储不值钱，而且考虑到解析效率，它已经是最优解了。

UTF16的本质

回到本文开头的问题，为什么'🧔‍♂️'.length === 5，但'🧔‍♂'.length === 4呢？

你需要知道在JS中，字符串使用了UTF16编码（其实本来是UCS-2，UTF16是UCS-2的扩展）。

为什么JS的字符串不用UTF8？

因为JS诞生（1995）时，UTF8还没出现（1996）。

UTF16不如UTF8优秀，因为它用16个二进制位或32个二进制位映射一个Unicode。这就导致：

1. 它涉及到大端、小端这种字节序问题。


2. 它不兼容ASCII，很多老的ASCII文件都不能用了。

UTF16的具体映射方法：

细心的你有没有发现个Bug？UTF16不是前缀码？ 遇到110110xx xxxxxxxx 110111xx xxxxxxxx，怎么判断它是1个大的Unicode字符、还是2个连续的小的Unicode字符呢？

答案：其实，在U+0000 - U+FFFF范围内，110110xx xxxxxxxx和110111xx xxxxxxxx都不是可见字符。也就是说，在UTF16中，遇到110110一定是4字节UTF16的前2字节的前缀，遇到110111一定是4字节UTF16的后2字节的前缀，其它情况，一定是2字节UTF16。这样，通过损失了部分可表述字符，UTF16也成为了「前缀码」。

JS中的字符串

在JS中，'🧔‍♂️'.length算的就是这个字符的UTF16占用了多少个字节再除以2。

我开发了个工具，用于解析字符串，把它的UTF8二进制和UTF16二进制都展示了出来。

工具地址：tool.hullqin.cn/string-pars…

我把2个男人，都放进去，检查一下他们的Unicode码：

发现区别了吗？

长度为4的，是1F9D4 200D 2642；长度为5的，是1F9D4 200D 2642 FE0F。

都是一个Emoji，但是它对应了多个Unicode。这是因为200D这个零宽连字符，一些复杂的emoji，就是通过200D，把不同的简单的emoji组合起来，展示的。当然不是任意都能组合，需要你字体中定义了那个组合才可以。

标题中的Emoji，叫man: beard，是胡子和男人的组合。

末尾的FE0F是变体选择符，当一个字符一定是emoji而非text时，它其实是可有可无的。

于是，就有的'🧔‍♂️'长，有的'🧔‍♂'短了。

工作中大家会接触到形形色色的 url，有些完美遵循格式，有些却像刺客一样，冷不丁的给你一刀。

先介绍下我的惨痛经历，给大家避避坑，最后告诉大家一个 url 刺客的妙用。

刺客介绍

1. iOS WKWebview 刺客

此类刺客手段单一，只会影响 iOS WKWebview

• 空格

运营人员由于在通讯工具中复制粘贴，导致前面多了一个空格，没有仔细检查，直接录入了后台管理系统。

• 中文

运营人员为了方便自身统计，直接在url中加入中文，录入了后台管理系统。

现象均为打开一个空白页，常见的处理手段如下：

• 将参数里的中文URIEncode


• 去掉首尾空格

const safeUrl = (url: string) => {

    const index = url.indexOf('?');



    if (index === -1) return url.trim();



    // 这行可以用任意解析参数方法替代，仅代表要拿到参数，不考虑兼容性的简单写法

    const params = new URLSearchParams(url.substring(index));

    const paramStr = Object.keys(params)

        .map((key: string) => {

            return `${key}=${encodeURIComponent(params[key])}`;

        })

        .join('&');

        

    const formatUrl = url.substring(0, index + 1) + paramStr;



    return formatUrl.trim();

};

可以看到虽然这里提出了一个 safeUrl 方法，但如果业务中大量使用 window.location.href , window.location.replace, 之类的方法进行跳转，替换起来会比较繁琐.

再比如在 Hybrid App 的场景中，虽然都是跳转，打开新的 webview ，还是在本页面跳转会是不同的实现，所以在业务内提取一个公共的跳转方法更有利于健壮性和拓展性。

值得注意的是，如果链接上的中文可能是用于统计的，在上报打点时，应该将其值（前端/服务端处理均可）进行 URIDecode，否则运营人员会在后台看到一串串莫名其妙的 %XX ，会非常崩溃（别问我怎么知道的，可能只是伤害过太多运营）

2. 格式刺客

格式刺客指的是，不管何种原因，不知何种场景，就是不小心配错了，打错了，漏打了等。

比如：https://www.baidu.com 就被打成了 htps://www.baidu.com、www.baidu.com 等。

// 检查URL格式是否正确

function isValidUrl(url: string): boolean {

  const urlPattern = new RegExp(

    "^(https?:\/\/)?" + // 协议

    "(([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,})" + // 域名

    "(:[0-9]{1,5})?" + // 端口号

    "(\/.*)?$", // 路径

    "i"

  );

  return urlPattern.test(url);

}

以上是一个很基础的判断，但是实际的应用场景中，有可能会需要填写相对路径，或者自定义的 scheme ，比如 wx:// ，所以检验的宽松度可以自行把握。

在校验到 url 配置可能存在问题时，可以上报到 sentry 或者其他异常监控平台，这样就可以比用户上报客服更早的发现潜在问题，避免长时间的运营事故。

3. 异形刺客

这种刺客在视觉上让人无法察觉，只有在跳转后才会让人疑惑不已。他也是最近被产品同学发现的，以下是当时的现场截图：

一段平平无奇的文本，跟着一段链接，视觉上无任何异常。

经过对跳转后的地址进行分析，发现了前面居然有一个这样的字符%E2%80%8B，好奇的在控制台中进行了尝试。

一个好家伙，这是什么，两个单引号吗？并不是，对比了很常用的 '%2B' ，单引号是自带的，那么我到底看到了什么，魔鬼嘛～

在进行了一番检索后知道了这种字符被称为零宽空格，他还有以下兄弟：

• \u202b-\u202f


• \ufeff


• \u202a-\u202e

具体含义可以看看参考资料，这一类字符完全看不见，但是却对程序的运行产生了恶劣的影响。

可以使用这个语句去掉

str.replace(/[\u200b-\u200f\uFEFF\u202a-\u202e]/g, "");

刺客的妙用

头一天还被刺客气的瑟瑟发抖。第二天居然发现刺客的妙用。

场景：

• 
  

  产品要求在微信环境隐藏标题

  
  

我方前端工程师：

• 大手一挥，发功完毕，准备收工

document.title = '';

测试：

• 
  

  来看看，页面A标题隐藏不了

  
  

我方前端工程师：

啊？怎么回事，本地调试还是好的，发上去就不行了，为什么页面A不可以，另外一个页面B只是参数变了变就行。

架构师出手：

页面A包含了开放标签，导致设置空Title失效，空，猛然想起了刺客，快用起来！

function setTitle(title: string) {

    if (title) {                

        document.title = title;            

    } else {                

        document.title = decodeURIComponent('%E2%80%8B');

    }

}

果然有效，成功解决了一个疑难杂症，猜测是微信里有不允许设置标题为空的机制，会在某些标签存在的时候被触发。（以上场景在 Android 微信 Webview 中可复现）

小结

以上只是工作中碰到 url 异常的部分场景和处理方案，如果小伙伴们也有类似的经历，可以在评论区中分享，帮助大家避坑，感谢朋友们的阅读，笔芯～

参考资料：

零宽字符 - 掘金LvLin

什么零宽度字符，以及零宽度字符在JavaScript中的应用 - 掘金whosmeya

前言

在Linux中，我们经常使用kill或者kill -9来杀死特定的进程，但是有些时候，这些方法可能无法终止某些进程。本文将详细解释为什么会出现这种情况，以及如何处理这种问题。

无法被杀死的进程：

首先，我们来理解一下为什么有些进程无法被杀死。通常，这是因为这些进程处于以下两种状态之一：

僵尸进程（Zombie Process）：

当一个进程已经完成了它的运行，但是其父进程还没有读取到它的结束状态，那么这个进程就会成为僵尸进程。僵尸进程实际上已经结束了，所以你无法使用kill命令来杀掉它。

内核态进程：

如果一个进程正在执行某些内核级别的操作（即进程处在内核态），那么这个进程可能无法接收到kill命令发送的信号。

查找和处理僵尸进程：

如果你怀疑有僵尸进程存在，你可以使用以下命令来查找所有的僵尸进程：

ps -A -ostat,ppid,pid,cmd | grep -e '^[Zz]'

这个命令实际上是由两个命令通过管道(|)连接起来的。管道在Linux中的作用是将前一个命令的输出作为后一个命令的输入。命令的两部分是 ps -A -ostat,ppid,pid,cmd 和 grep -e '^[Zz]'。

• ps -A -ostat,ppid,pid,cmd：这是ps命令，用来显示系统中的进程信息。
  
  
  
  • -A：这个选项告诉ps命令显示系统中的所有进程。
  
  
  • -o：这个选项允许你定义你想查看的输出格式。在这里，你定义的输出格式是stat,ppid,pid,cmd。这会让ps命令输出每个进程的状态（stat）、父进程ID（ppid）、进程ID（pid）以及进程运行的命令（cmd）。
  
  
  
  


• grep -e '^[Zz]'：这是grep命令，用来在输入中查找匹配特定模式的文本行。
  
  
  
  • -e：这个选项告诉grep命令接下来的参数是一个正则表达式。
  
  
  • '^[Zz]'：这是你要查找的正则表达式。^符号表示行的开始，[Zz]表示匹配字符“Z”或者“z”。因此，这个正则表达式会匹配所有以“Z”或者“z”开头的行。在ps命令的输出中，状态为“Z”或者“z”的进程是僵尸进程。
  
  
  
  

因为僵尸进程已经结束了，所以你无法直接杀掉它。但是，你可以试图杀掉这些僵尸进程的父进程。杀掉父进程之后，僵尸进程就会被init进程（进程ID为1）接管，然后被清理掉。

你可以使用以下命令来杀掉父进程：

kill -HUP [父进程的PID]

请注意，在杀掉父进程之前，你需要确定这样做不会影响到系统的其他部分。另外，这个方法并不保证能够清理掉所有的僵尸进程。

查找和处理内核态进程：

如果一个进程处在内核态，那么这个进程可能无法接收到kill命令发送的信号。在这种情况下，你需要首先找到这个进程的父进程，然后试图杀掉父进程。你可以使用以下命令来查找进程的父进程：

cat /proc/[PID]/status | grep PPid

这个命令会输出进程的父进程的ID，由两个独立的命令组成，通过管道（|）连接起来。我会分别解释这两个命令，然后再解释整个命令：

• cat /proc/[PID]/status ：
  
  
  
  • 这是一个cat命令，用于显示文件的内容。在这个命令中，它用于显示一个特殊的文件/proc/[PID]/status。
  
  
  • /proc是一个特殊的目录，它是Linux内核和用户空间进行交互的一种方式。在/proc目录中，每个正在运行的进程都有一个与其PID对应的子目录。每个子目录中都包含了关于这个进程的各种信息。
  
  
  • /proc/[PID]/status文件包含了关于指定PID的进程的各种状态信息，包括进程状态、内存使用情况、父进程ID等等；
  
  
  
  


• grep PPid ：


• 这是一个grep命令，用于在输入中查找匹配特定模式的文本行。在这个命令中，它用于查找包含PPid的行。在/proc/[PID]/status文件中，PPid一行包含了这个进程的父进程的PID；
  然后，你可以使用以下命令来杀掉父进程：

kill -9 [父进程的PID]

同样，你需要在杀掉父进程之前确定这样做不会影响到系统的其他部分。另外，这个方法并不保证能够杀掉所有的内核态进程。

结论：

在Linux系统中，处理无法被杀死的进程可以是一项挑战，尤其是当你无法确定进程状态或者无法影响父进程的时候。以上的方法并不保证能够解决所有问题。如果你尝试了所有的方法，但问题仍然存在，或者你不确定如何进行，那么你可能需要联系系统管理员，或者寻求专业的技术支持。

总的来说，处理无法被杀死的进程需要对Linux的进程管理有深入的理解，以及足够的耐心和谨慎。希望这篇文章能够帮助你更好地理解这个问题，以及如何解决这个问题。

1. 背景

一般业务也很少接触摄像头，有也是现成的工具库扫个二维码。难得用一次，记录下踩坑。

2.调用摄像头的方法

2.1. input

<!-- 调用相机 -->

<input type="file" accept="image/*" capture="camera">

<!-- 调用摄像机 -->

<input type="file" accept="video/*" capture="camcorder">

<!-- 调用录音机 -->

<input type="file" accept="audio/*" capture="microphone">

这个就不用多说了，缺点就是没办法自定义界面，它是调用的系统原生相机界面。

2.2. mediaDevices

由于我需要自定义界面，就像下面这样：

所以我选择了这个方案，这个api使用起来其实很简单：

<!-- 创建一个video标签用来播放摄像头的视屏流 -->

<video id="video" autoplay="autoplay" muted width="200px" height="200px"></video>

<button onclick="getMedia()">开启摄像头</button>

async getMedia() {

    // 获取设备媒体的设置，通常就video和audio

    const constraints = {  

    // video配置，具体配置可以看看mdn

        video: {  

            height: 200,  

            wdith: 200,  

        },  

    // 关闭音频

        audio: false  

    };  

    this.video = document.getElementById("video");  

    // 使用getUserMedia获取媒体流

    // 媒体流赋值给srcObject

    this.video.srcObject = await window.navigator.mediaDevices.getUserMedia(constraints);

    // 直接播放就行了

    this.video.play();  

}

可以看到这个效果。

这个api的配置可以参考MDN

// 截图拍照

takePhoto() {  

    const video = document.getElementById("video");  

    // 借助canvas绘制视频的一帧

    const canvas = document.getElementById("canvas");  

    const ctx = canvas.getContext('2d');  

    ctx.drawImage(this.video, 0, 0, 300, 300);  

},

// 停止

stopMedia() {  

    // 获取媒体流

    const stream = this.video.srcObject;  

    const tracks = stream.getTracks();  

    // 停止所有轨道

    tracks.forEach(function (track) {  

        track.stop();

    })  

    this.video.srcObject = null;  

}

3.坑

如果你复制我的代码，在localhost上肯定能运行，但是你想在手机上试试的时候就会发现很多问题。

3.1. 需要https

由于浏览器的安全设置，除了localhost和https连接，你都没办法获取到navigator.mediaDevices，打印出来是undefined。如果要在手机上测试，你要么用内网穿透代理一个https，要么部署在https域名的服务器上测试。

3.2. 设置前后摄像头

默认是使用user设备，也就是前摄像头，想要使用后摄像头也是有配置的，

async getMedia() {

    // ...

    let constraints = {  

        video: {  

            height: 200,  

            wdith: 200,  

            // environment设备就是后置

            facingMode: { exact: "environment" },  

        },  

        audio: false  

    };

    // ...

}

3.3. 设置显示区域大小

我的需求是铺满整个设备，所以我想当然的直接把video样式宽高设置成容器大小：

#video {

    width: 100%;

    height: 100%;

}

async getMedia() {

    // ....

    // 将宽高设置成容器大小

    const pageSize = document.querySelector('.page').getBoundingClientRect()  

    let constraints = {  

    video: {  

            height: pageSize.height,  

            width: pageSize.width,  

            facingMode: { exact: "environment" },

        },  

        audio: false  

    };

    //....

}

发现这个视频横着而且没有铺满屏幕。

通过输出video的信息可以看到，设备返回的视频流宽高是反的：

所以配置换一下就行了：

    let constraints = {  

        video: {  

            height: pageSize.width,  

            width: pageSize.height,  

        },  

    };

前言

前端本地化存储算是一个老生常谈的话题了，我们对于 cookies、Web Storage（sessionStorage、localStorage）的使用已经非常熟悉，在面试与实际操作之中也会经常遇到相关的问题，但这些本地化存储的方式还存在一些缺陷，比较明显的缺点如下：

1. 存储量小：即使是web storage的存储量最大也只有 5M


2. 存取不方便：存入的内容会经过序列化，当存入非字符串的时候，取值的时候需要通过反序列化。

当我们的存储量比较大的时候，我们一定会想到我们的 indexedDB，让我们在浏览器中也可以使用数据库这种形式来玩转本地化存储，然而 indexedDB 的使用是比较繁琐而复杂的，有一定的学习成本，但第三方库 localForage 的出现几乎抹平了这个缺陷，让我们轻松无负担的在浏览器中使用 indexedDB。

截止今天，localForage 在 github 的 star 已经22.8k了，可以说 localForage 和 indexedDB 算是相互成就了。

什么是 indexedDB

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象）。

存取方便

IndexedDB 是一个基于 JavaScript 的面向对象数据库。IndexedDB 允许你存储和检索用键索引的对象；可以存储结构化克隆算法支持的任何对象。

之前我们使用 webStorage 存储对象或数组的时候，还需要先经过先序列化为字符串，取值的时候需要经过反序列化，那indexedDB就比较完美的解决了这个问题，可以轻松存取对象或数组等结构化克隆算法支持的任何对象。

以 stackblitz.com/ 网站为例，我们来看看对象存到 indexedDB 的表现

异步存取

我相信你肯定会思考一个问题：localStorage如果存储内容多的话会消耗内存空间，会导致页面变卡。那么 IndexedDB 存储量过多的话会导致页面变卡吗？

不会有太大影响，因为 IndexedDB 的读取和存储都是异步的，不会阻塞浏览器进程。

庞大的存储量

IndexedDB 的储存空间比LocalStorage 大得多，一般可达到500M，甚至没有上限。

But.....关于 indexedDB 的介绍就到此为止，详细使用在此不再赘述，因为本篇文章我重点想介绍的是 localForage！

什么是 localForage

localForage 是基于 indexedDB 封装的库，通过它我们可以简化 IndexedDB 的使用。

兼容性

想必你一定很关注兼容性问题吧，我们可以看下 localStorage 与 indexedDB 兼容性比对，两者之间还是有一些小差距。

但是你也不必太过担心，因为 localforage 已经帮你消除了这个心智负担，它有一个优雅降级策略，若浏览器不支持 IndexedDB 则使用 WebSQL ，如果不支持 WebSQL 则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。

localForage 的使用

1. 下载

import localforage from 'localforage'

2. 创建一个 indexedDB

const myIndexedDB = localforage.createInstance({

  name: 'myIndexedDB',

})

3. 存值

myIndexedDB.setItem(key, value)

4. 取值

由于indexedDB的存取都是异步的，建议使用 promise.then() 或 async/await 去读值

myIndexedDB.getItem('somekey').then(function (value) {

  // we got our value

}).catch(function (err) {

  // we got an error

});

or

try {

  const value = await myIndexedDB.getItem('somekey');

  // This code runs once the value has been loaded

  // from the offline store.

  console.log(value);

} catch (err) {

  // This code runs if there were any errors.

  console.log(err);

}

5. 删除某项

myIndexedDB.removeItem('somekey')

6. 重置数据库

myIndexedDB.clear()

以上是本人比较常用的方式，细节及其他使用方式请参考官方中文文档localforage.docschina.org/#localforag…

VUE 推荐使用 Pinia 管理 localForage

如果你想使用多个数据库，建议通过 pinia 统一管理所有的数据库，这样数据的流向会更明晰，数据库相关的操作都写在 store 中，让你的数据库更规范化。

// store/indexedDB.ts

import { defineStore } from 'pinia'

import localforage from 'localforage'



export const useIndexedDBStore = defineStore('indexedDB', {

  state: () => ({

    filesDB: localforage.createInstance({

      name: 'filesDB',

    }),

    usersDB: localforage.createInstance({

      name: 'usersDB',

    }),

    responseDB: localforage.createInstance({

      name: 'responseDB',

    }),

  }),

  actions: {

    async setfilesDB(key: string, value: any) {

      this.filesDB.setItem(key, value)

    },

  }

})

我们使用的时候，就直接调用 store 中的方法

import { useIndexedDBStore } from '@/store/indexedDB'

const indexedDBStore = useIndexedDBStore()

const file1 = {a: 'hello'}

indexedDBStore.setfilesDB('file1', file1)

后记

以上就是本篇文章的所有内容，感谢观看，欢迎留言讨论。

在现代的网络世界里，5G 网络的普及，我们可以访问一个网站或者使用一个 App 的速度极其快，但是在没有网络的情况下你啥都看不了，只能大眼瞪小眼了。

离线应用是指通过离线缓存技术，让资源在第一次被加载后缓存在本地，下次访问它时就直接返回本地的文件，就算没有网络连接。

通过离线应用，主要有以下几个优点：

1. 在没有网络的情况下也能打开网页。


2. 由于部分被缓存的资源直接从本地加载，对用户来说可以加速网页加载速度，对网站运营者来说可以减少服务器压力以及传输流量费用。

离线应用的核心是离线缓存技术，要实现这种方式，我们可以使用 Service Worker 来实现这种缓存技术。

什么是 Service Worker

Service Worker 服务器和浏览器之间的之间的桥梁或者中间人。

Service Worker 运行在一个与页面 JavaScript 主线程独立的线程上，并且无权访问 DOM 结构。但是它能拦截当前网站所有的请求，对请求使用相应的逻辑进行判断，如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器。从而大大提高浏览体验。

注册 Service Worker

要使用 Service Worker，首先我们要判断浏览器是否支持 Service Worker，具体代码逻辑如下：

if (navigator.serviceWorker) {

  window.addEventListener("DOMContentLoaded", function () {

    navigator.serviceWorker.register("/worker.js");

  });

}

这段代码的主要目的是在支持 Service Worker 的浏览器中，当页面加载完成后注册一个指定的 Service Worker 脚本。这个传入的 worker.js 就是 Service Worker 的运行环境。

这个脚本被安装到浏览器中后，就算用户关闭了当前网页，它仍会存在。 也就是说第一次打开该网页时 Service Workers 的逻辑不会生效，因为脚本还没有被加载和注册，但是以后再次打开该网页时脚本里的逻辑将会生效。

Service Worker 安装和激活

注册完成后，worker.js 文件会自动下载、安装，然后激活。它提供了一些 API 给我们做一些监听事件:

self.addEventListener("install", function (e) {

  console.log("Service Worker 安装成功");

});



self.addEventListener("fetch", function (event) {

  console.log("service worker is fetch");

});

当 install 完成并且成功激活之后，就能够监听 fetch 操作了，如上代码所示，输出结构如下图所示：

使用 Service Workers 实现离线缓存

在上面的内容我们已经知道了 Service Workers 在注册成功后会在其生命周期中派发出一些事件，通过监听对应的事件在特点的时间节点上做一些事情。

在 Service Workers 安装成功后会派发出 install 事件，需要在这个事件中执行缓存资源的逻辑，实现代码如下：

// 当前缓存版本的唯一标识符，用当前时间代替

const cacheKey = new Date().toISOString();



// 需要被缓存的文件的 URL 列表

const cacheFileList = ["/index.html", "/index.js", "/index.css"];



// 监听 install 事件

self.addEventListener("install", function (event) {

  // 等待所有资源缓存完成时，才可以进行下一步

  event.waitUntil(

    caches.open(cacheKey).then(function (cache) {

      // 要缓存的文件 URL 列表

      return cache.addAll(cacheFileList);

    })

  );

});

在 install 阶段我们就已经指定了要被缓存的内容了，那么就可以在 fetch 阶段中听网络请求事件去拦截请求，复用缓存，代码如下：

self.addEventListener("fetch", function (event) {

  event.respondWith(

    // 去缓存中查询对应的请求

    caches.match(event.request).then(function (response) {

      // 如果命中本地缓存，就直接返回本地的资源

      if (response) {

        return response;

      }

      // 否则就去用 fetch 下载资源

      return fetch(event.request);

    })

  );

});

通过上面的操作,创建和添加了一个缓存的库,如下图所示:

缓存更新

线上的代码有时需要更新和重新发布，如果这个文件被离线缓存了，那就需要 Service Workers 脚本中有对应的逻辑去更新缓存。

这可以通过更新 Service Workers 脚本文件做到，浏览器针对 Service Worker 有如下机制：

1. 每次打开接入了 Service Workers 的网页时，浏览器都会去重新下载 Service Workers 脚本文件，如果发现和当前已经注册过的文件存在字节差异，就将其视为新服务工作线程。


2. 新 Service Workers 线程将会启动，且将会触发其 install 事件。


3. 当网站上当前打开的页面关闭时，旧 Service Workers 线程将会被终止，新 Service Workers 线程将会取得控制权。


4. 新 Service Workers 线程取得控制权后，将会触发其 activate 事件。

新 Service Workers 线程中的 activate 事件就是最佳的清理旧缓存的时间点，代码如下：

var cacheWhitelist = [cacheKey];



self.addEventListener("activate", function (event) {

  event.waitUntil(

    caches.keys().then(function (cacheNames) {

      return Promise.all(

        cacheNames.map(function (cacheName) {

          // 不在白名单的缓存全部清理掉

          if (cacheWhitelist.indexOf(cacheName) === -1) {

            // 删除缓存

            return caches.delete(cacheName);

          }

        })

      );

    })

  );

});

这样能确保只有那些我们需要的文件会保留在缓存中，我们不需要留下任何的垃圾，毕竟浏览器的缓存空间是有限的，手动清理掉这些不需要的缓存是不错的主意。

参考资料

• 构建离线应用

总结

Service Worker 作为服务器和浏览器两者之间的桥梁，它并且可以缓存技术，通过这种方式，在断网的时候，去获取缓存中相应的数据以展示给客户显示。

当断网之后，直接给他页面返回一个俄罗斯方块让他玩足一整天。

前言

从5月底离职到现在，一个半月的时间，通过内推+BOSS直聘，前前后后约到了10家面试，终于拿到了一个满意的offer，一家做saas系统的上市公司。

本文就跟大家分享下我这段时间找工作的心路历程，欢迎各位感兴趣的开发者阅读本文。

无所畏惧

6月1号，裸辞的第一天，制定了接下来的每日计划，终于可以全身心投入做自己喜欢的事情啦。

• 06:30，起床、洗漱、蒸包子


• 07:00，日常学英语


• 08:00，吃早餐，顺便刷一下BOSS直聘


• 08:30，日常学算法、看面试题


• 11:40，出门吃饭，午休


• 14:00，维护开源项目


• 18:00，出门吃饭，去附近的湖边逛一圈，放松下心情


• 20:30，将当天所学做一个总结，归纳成文章


• 23:00，洗澡睡觉，充实的一天结束

内推情况

通过在掘金、V站和技术群发的文章，为我带来了20多个内推，从大厂到中厂到小厂，约到面试的只有4个。其他的技术部认可我，但是HR卡学历（统招本科）。

无响应式网站开发经验被拒

这是一家杭州的公司，可以远程办公，跟我约了线上面试。做完自我介绍后，他对我的开源项目比较感兴趣，问了我：

• 你为什么会选择写一个聊天工具来作为开源项目？


• 你的截图功能是怎么实现的？

行，那我们来聊几个技术问题吧。

• 讲一下webpack的打包流程


• webpack的热更新原理是怎样的？


• 讲一下你对webpack5模块联邦的理解

这些问题回答完后，他问我你有做过响应式网站开发吗？

我：我知道怎么写一个响应式网站，在工作中我没接触过这方面的业务。

面试官：行，那你讲一下要怎么实现一个响应式网站？

我：用css3的媒体查询来实现，如果移动端跟PC端布局差异很大的话，就写两套页面，对应两个域名，服务端根据http请求头判断设备类型来决定是否要重定向到移动端。

面试官：还有其他方案吗？

我：嗯...，应该没有了吧，我只了解过这两种方式。

面试官：好吧，在seo优化方面，前端要从哪些点去考虑？

我：标签语义化、ssr服务端渲染、img标签添加alt属性来、在head中添加meta标签、优化网站的加载速度，提高搜索引擎的排名。

面试官：我的问题问完了，你有什么想了解的？

我：团队人员配比是怎么样的？

面试官：我们这个团队，前端的话有4个人，有2个后端。然后，前端有时候需要用node写一些接口。

我：如果我进去的话，主要负责哪块业务的开发？

面试官：负责一些响应式网站业务的开发，再就是负责我们内部系统的一个开发。

我：行，我的问题就这些。

面试官：OK，那今天的面试就先到这。

大概过了3天时间，也没有给我答复。因为这个是他们老板在v站看到了我的文章，觉得我还不错，加了微信，让他们技术面的我，我也不好意思问结果。

很大可能是因为我没有响应式网站的实际开发经验，所以拒了我吧。😔

期望太高被拒

这是一家上海的公司，他们的主要业务是做产品包装。有自己品牌的网站、小程序、app。他们公司一个负责公司内部事务的人加了我微信，跟我简单聊了下，让我体验下他们的产品，看看有没有什么我能帮到他们的地方。

聊完后，他一直没有主动联系我，我也没有约到其他面试，我就主动出击了，看能不能确定下来，约个面试。

我整理了一套方案，发到了他的邮箱，期望薪资我写了20k，过了两天，他给了我答复，告诉我期望太高。我说薪资可以商量的，但无济于事。

白嫖劳动力

这家公司是做物流的，是一个群友曾经面过的公司，但是最后没去。看到hr在朋友圈发了招聘信息，在招高级前端，就推给我了，约了线下面试。

到公司后，按照惯例填了一张表，写了基本信息。过了一会，一个男的来面我，让我做了自我介绍，顺着我的回答提问了公司的规模以及业务。

提问完成后，他说我看你期望薪资写了15k，你上家才12k，为什么涨幅会这么高？

我：因为我经过两年的努力以及公司业务的积累，自己的技术水平有显著提升。我对这一行很喜欢，平常80%的业余时间都用来学习了。

面试官：好，我让技术来面下你，看看你实力如何。

等了5分钟左右，他来了告诉我说：技术在开会，我先带你做一下机试吧。你把这两个页面（后台管理系统登陆页与后台首页）画出来就行。

我把页面画出来后，又过来一个人看我做的，他说 你就把页面画出来了？我说：对啊，刚才带我过来那个人说让我画页面出来的。

他说，那可能是他没说清楚，那这样肯定是不行的，你要自己重新建项目，把页面画出来后，要调接口的，把整个流程走通才行的。现在已经11点40多了，你下午再过来继续弄吧。

我直接满脸问号，把整个流程走通只是时间问题，你们这个机试到底想考察啥呢？

他说，页面在我们这里不重要，调接口，走通整个流程才重要。

我直接无语了，就说 抱歉，我下午有其他安排了，我就先走了。

焦虑不安

时间来到6月20日，已经好多天没有约到面试了，逐渐焦虑起来了，虽然兜里余粮还有很多，但始终无法静下心来做事情，充满了对未知的恐惧。

就在这时，我还迎来了别人的嘲讽。他成功让我生气了，我努力的平复心情，告诉自己不要把这件事放在心上，通过让自己忙起来转移注意力，通过学习来克制焦虑。

白天我可以通过学习来缓解焦虑，但是一到晚上躺在床上，我就会开始胡思乱想。想着自己一直找不到工作怎么办，难道我真的不适合吃这碗饭吗，我怎么这么差劲，连个面试都约不到...唉，怎么会这样，我明明已经很努力了，为什么结果会是这样...

完善打招呼语

内推无望，BOSS直聘发消息也是送达、已读未回。这个时候，有个网友建议我把招呼语改改，hr不懂什么开源不开源的，他们只会关键词匹配，只要包含了，就会收你简历，于是我就把打招呼语改成了：

招呼语改完后，效果好了一些，终于有HR愿意收我简历了🥳

学历歧视、贬低、pua、拒了offer

改完打招呼语后，我在BOSS直聘上约到了第一家面试，这家公司是做可视化VR编辑器的，团队有30来个人，BOSS直聘的薪资范围是20K～25K。

我经历了五轮面试，拿到了offer，给了18K，但是最终还是拒绝了，本章节就跟大家分享下这段故事。

技术面

技术面是去线下的，按照惯例做完自我介绍，面试官提问了我：

• 你刚才说你写了个web端的截图插件，你能讲一下你是怎么实现的吗？


• 我看你上家公司是做动画编辑器的，你在做这个项目的时候有遇到过哪些难点吗？


• 你刚才提到了你为编辑器做了一些性能优化，你都做了哪些优化？


• 你刚才说你还实现了svg类型的文本组件搜索功能，你能讲讲你是如何实现的吗？

问完这些后，他说我的问题问完了，你有什么想要了解的吗？

我：团队人员配比是怎么样的？

面试官：我们这边是重前端的，因为是做编辑器嘛，难点在前端这块，目前有4个前端，计划再招3个，再就是有几个做算法的、做c++的，1个产品经理，2个后端，2个UI，3个测试。

我：如果我进去的话，是做哪方面的项目？

面试官：你进来的话，主要是负责VR编辑器项目的，这个项目刚开始做。目前的话，比较累，会加班，基本上是早9晚8，有时候可能要10点才能走。再就是，我们这边是大小周，你能接受的吧？
我：哦哦 明白了，我可以接受

面试官：那行，你稍等下，我让我们的产品经理面下你。

产品经理面

过了一会儿，产品经理过来了。他说：我们的技术对你的评价很高，我再来面面你，你先做个自我介绍吧。做完自我介绍后，产品经理顺着我的介绍进行了提问：

• 你刚才说你这个截图插件Gitee的产品经理在网上看到了，是码云官方的吗？


• 我看你上家公司也是做编辑器的，你们这个产品主要面向的用户群体是哪些？


• 你们这个产品啥时候上线的，你主要负责的是什么？


• 你们的团队配比是怎么样的？


• 你们在开发项目时，是如何管理git分支的？

问完这些后，他让我稍等下，让HR来面下我。

过了3分钟左右，他过来说：我们HR这会儿太忙了，抽不开身，这样，你今晚有空吧，我让她跟你电话聊聊。我回答说，7点后我都有空。

HR电话面

因为约了晚上7点的电话面试，所以我就随便吃了点，就匆匆忙忙回家等电话了。我等到了晚上9点，也没电话打过来，我就在boss直聘问了下，对方说：可能是HR忙忘了，我让她明天给你打。

晚上躺床上睡觉的时候，不出意外，我又开始胡思乱想了，心想：我这煮熟的鸭子该不会飞了吧，会不会是面试表现的不好人家婉拒我了呢，会不会是...，又焦虑了。

到了第二天下午2点多的时候，HR终于给我打了电话，问我期望薪资多少。我说22k，她问我上家薪资多少，我说12k。不出意外，她很震惊：你这涨幅也太大了吧，能说说原因吗？我说：你们这里是大小周，工作强度比较大，而且做的项目也是较为复杂的，我看BOSS直聘标的价格也是20k～25k。

她说：我们这个岗位是中、高级前端都招聘的，你这边最低能接受的薪资是多少呢？
我说：20k

她说：行，了解了，我再跟面试官对接下，晚些时候我加你微信聊。

又过了一天，她加了我微信，跟我说：我只匹配他们的中级开发岗位，让架构师再跟我聊聊。

前端架构师面

跟架构师约的是电话面试，做完自我介绍后，他提问了我：

• 讲一下webpack的打包原理


• 讲一下webpack的loader和plugin


• 讲一下webpack5的模块联邦


• 讲一下Babel的原理，讲一下AST抽象语法树


• 讲一下你所知道的设计模式


• 讲一下浏览器的垃圾回收机制


• 讲一下浏览器的渲染流程


• 讲一下浏览器多进程的渲染优势


• 谈谈你对浏览器架构的理解

我回答完之后，他说：我大概知道你的技术水平了。你现在的水平还不到P6，也就P5多一点，远远不及P7。

我刚才问你的问题，你每回答完一个我都问你有没有要补充的，你都说没有，我从你嘴里没听到任何性能优化相关的东西，这些知识现在还都不是你的，你只知道这么个东西，缺乏实践。就好比，我刚问了你垃圾回收机制，你回答的是chrome的，那火狐呢？edge呢？

你对你未来的规划是怎么样的？

我说：我还是以技术为主，我会继续学习来充实自己，未来如果有机会的话，希望能做到技术管理的位置。

面试官冷笑了下说：你一个大专怎么做管理？

我沉默了一会儿说：未来我会把自己的学历提升下的

面试官：你要认清自己的地位，你要想一下你的价值是什么？你能给我们公司带来什么？我们要用到three.js，你只是学过它，没有落地项目做支撑，你进来后我们还是要给你时间来熟悉项目的，跟没学过的人没啥两样。就好比，我问你three.js的坐标系用的是啥，你都不知道。
我：这个我知道，它用的是右手坐标系

面试官楞了一下说：你知道这个也没啥的，这很简单的，我们这边随便拉一个人都会这些，而且比你厉害。

我继续保持沉默。

面试官：我对你的评价就这么多，你在我们这边是能学到很多东西的，你多想想我今天跟你说的，我不知道你的业务能力怎么样，回头我再跟其他面试官聊聊，今天的面试就先到这。

第二天，HR联系我了，跟我说薪资在16k～18k左右，跟我约了下午1点30的面试。

老板面

到公司后，HR直接带我进了老板办公室，跟我说这个是X总，你们聊吧。 跟老板聊了一个多小时，聊的内容大概是谈人生、理想，大概能记得起的一些问题有：

• 你觉得你是一个什么样的人？


• 你有哪些优点？


• 你想成为一个什么样的人？


• 你觉得你的技术水平怎么样？


• 如果让你给自己打标签，你会打什么标签？


• 回看你的过往人生，你后悔吗？

考虑再三 终拒offer

从公司回来后的第二天，HR告诉我面试结束了，最终给我定的薪资是17k，发了offer。

发了offer后，我本该高兴的，但是我却高兴不起来，那一晚我想了很多，觉得早9晚8，大小周。这个钱还是太少了，而且那个前端架构师说的话让我很不舒服，pua的气息太重了。入职后，跟这种人一起工作，我也不会开心。思考再三后，我最终还是拒掉了这个offer。

比较钟意的小外企

这是我在BOSS直聘约到的第二家面试（15k～20k），面试体验很好。到公司后，接待我的人很有礼貌，告诉我前端是技术总监来面的，他还没来，你先坐着等他一会儿。

等了一会儿后，看到了技术总监，主动跟我握了个手。然后说：他临时有个会开，让我稍等下他，然后安排我在会议室坐了会儿，倒了一杯水给我。

我在会议室坐了40多分钟，他会开完了，喊我去办公室聊，按照惯例做完自我介绍后。他问我：

• 你刚才提到了你做了编辑器的性能优化，你具体是怎么做的？


• 你们这个编辑器前端编辑的应该是dom吧，最后生成的视频是怎么生成的？


• 我看你的项目经验都是vue，你应该对vue全家桶都很熟了吧？

问完这些问题后，他用笔记本打开了我简历上的项目，边看边问我这块你是怎么实现的，有没有遇到过啥问题，你是怎么解决的。项目看完后，他说你技术没问题，我了解完了。我跟你介绍下我们这边的项目，我们在做...。介绍完了后，他问了我离职原因，以及我的期望薪资。

我说了20k，他说，站在客观角度来说，你的学历是大专，在我们这里拿到这个数很难，我们也不是什么特别有钱的公司。但是，我们的产品是很有发展前景的，已经拿了一轮800w美金的融资了，这个岗位我在boss直聘挂了1个月了，收到了300多份简历，有很多大厂出来的，但是我都不太满意，偶然间看到你的简历，觉得你是一个爱学习、肯钻研的人，就约你来面试了。你是我面的第一个前端。

我听他这么说后，我就说：那薪资17、18也可以。

他说：行，明白了，我回头跟老板说说，尽量帮你争取。我们这边工作氛围很棒，团队是一支很精湛的团队组成的，我们这边做算法的是麻省理工毕业的，这边的一个后端是之前抖音短视频架构组出来的。你在这里也能学到很多前端之外的东西，我们是早上10点上班，晚上6点30下班，不打卡，双休。

我听他这么说后，觉得很不错，就说：那15k也行。

他说：你也不用太勉强，不然你进来了也不开心，我们这里发展空间很大的，未来拿到更多的融资，你在这里是可以涨薪的。那今天我们就先到这里，后天就是端午节了，这样，我端午节后的那周给你具体的答复。

就这样，我又进入了焦灼的等待期。

端午节后的第2天，那边还没答复，我就主动问了下，他给我的答复是：

又过了3天，一直没约到面试，焦虑的很。我就又厚着脸皮问了下情况，得来的答复是他们还没找到合适的产品经理。（这个时候，心里很难受到极点了，泪水在眼珠里打转，我焦虑到哭了😔）

晚上躺在床上又开始胡思乱想了，觉得老天很不公平，为什么好运总是不能降临到我头上。唉...就这样想着想着，不知想了多久，也不知道自己睡着了没，只记得手机的闹钟响了，关了闹钟继续睡去了...

随遇而安

又浑浑噩噩的过了几天，时间来到7月3日，BOSS直聘有人跟我约面试了，一天下来约了3个面试，都是很多天之前联系的，今天才收了我简历，我的心情终于好了一些。

做物联网的公司

这家公司距离我住的地方很近，步行1.1公里就能到。BOSS直聘标的价格是（15k～18k），到了公司后，前台让我扫二维码关注他们的公众号，填写面试登记表（基本信息、期望薪资、上家公司薪资）。

填写完后，前台带我进了公司，等了5分钟左右，面试官来了，按照惯例做完自我介绍后，他问了我：

• 你讲一下vue双向绑定的原理


• 讲一下vue3相比vue2，它在diff算法上做了哪些优化？


• Vue2为什么要对数组的常用方法进行重写？


• Vue的nextTick是怎么实现的？


• 讲一下你对EventLoop的理解吧


• 讲一下webpack5的模块联邦

这里我讲一下EventLoop这个问题吧，我回答完之后，他反问我：你确定宏任务先执行的吗？我很确信的说，是的，宏任务先执行的。（之所以这么自信是因为我之前特意研究了这方面的知识，写了大量的用例做验证，写了文章做总结，绝对错不了）

那你意思是，setTimeout比Promise().then()先执行，

我回答：是的。

面试官：你回去再查查资料吧，看一看到底是哪个先执行吧。我的问题问完了，你有什么想问我的吗？

我问了他部门做的产品是什么、团队情况、如果我进来的话负责的是哪块的东西。了解完之后，他让我稍等下。

过了3分钟左右，HR过来了，她问我觉得这场面试咋样，刚才面你的人职级在我们这里算是比较高的了，然后她就跟我介绍了她们公司的情况以及福利制度。介绍完之后，她问我说：我对你写的这个期望薪资比较好奇，我看你上家薪资是12k，怎么期望薪资写了18k呢？涨幅这么高。

我说了理由后，她说：今年市场很差，求职者很多，很多公司都在降低成本，你要是放在互联网红利的时候，你这个涨幅没问题，但2023年这个大环境，你这个涨幅是不可能的。你这边最低期望薪资是多少？

我说：16k，她在求职表上用笔写了下。随后她说，那行，今天的面试就先到这，后面我们电话联系。

回到家后，我立马查了我写的那篇事件循环的文章，验证下我有没有记错。看完之后我发现我并没有记错，于是我又问了下AI，他给我的答案是：

我就纳闷儿了，于是我说宏任务先执行的吧，它的回答是：

它还在嘴硬，我就反问了句，你确定？它终于改变口风了。

这家公司是7月5号面的，等了3天都没联系我，看来是有人要价比我低🌚

做交易所的公司

这家公司是在一个技术交流群看到的招聘信息，公司在海外，远程办公的方式，给的薪资是20k～25k。按照惯例做完自我介绍后他问我：

• 讲一下vue的生命周期


• 讲一下computed与watch的区别


• 讲一下vue的双向绑定和原理


• 讲一下vue3相比vue2有哪些提升


• 你有开发过不用脚手架的项目吗？


• seo优化有了解过吗？讲一下你的见解


• 响应式网站开发你知道哪些方案？

回答完这些问题后，按照惯例我问了他团队的人员情况以及项目情况，就结束了这场面试。他问的问题也很简单，我回答的也不错。但是，过了3天，最终还是没下文。

做工具软件的公司

这家公司是朋友内推的，经历了三轮面试，我看了下BOSS直聘标价是15k~25k。先是用腾讯会议，让打开屏幕共享和摄像头，做一份笔试题。内容是填空题、判断题、代码题。填空跟判断就是一些简单的问题，代码题是：

• 观察一组数列，写一个方法求出第31个数字是什么？（通过观察后，发现那是一组斐波那契数列）


• 实现一个深拷贝函数


• 写一个通用的方法来获取地址栏的某个参数对应的值，不能使用正则表达式。

线上技术面

笔试题做完发给HR后，等待了半个小时，面试官进入了腾讯会议，按照惯例做完自我介绍后他问我：

• vue3的diff算法做了哪些改进


• vue双向绑定的原理是什么


• 假设要设计一个全局的弹窗组件你会怎么设计？


• 如果这个弹窗组件可以弹出多个，消息会垂直排列，新消息会把旧消息顶起来，每个消息都可以设置一个停留时间，到了时间后就会消失，这一块你会怎么设计？


• 你了解堆这种数据结构吗？讲一讲你对它的理解

回答完这些问题后，我按照惯例问了他项目情况以及我进去后所负责的模块，就结束了这场线上面试，第二天收到了一面通过的答复。

线下总监面

时间来到7月6日，本来是7月5日面试的，但是面试官临时有事改了时间。

这家公司在林和西地铁站这边，地处CBD，公司应该是很有钱的。到了公司后，HR接待了我，带我进了会议室，等了3分钟左右，技术总监过来了，做完自我介绍后，他问我：

• 挑一个你最拿手的项目讲一下吧


• 看你写了很多开源项目，是个爱捣鼓的人，讲一下你的开源项目吧


• 你会Java，是用的SpringBoot吗？你讲一下你这个开源项目的后端服务是怎么设计的吧


• 你都知道哪些数据库？进行SQL查询时，你有哪些优化手段来优化查询效率


• 你讲下vue3和vue2的一个区别吧


• 你觉得你跟别人相比，你的优势是什么？

回答完这些问题后，我问了他团队的规模以及公司的人员情况，他跟我说：我们公司总共有52个人，很大一部分都是程序员，他们都是全能的，任何一个人拉出来，前端、后端、运维都能做，就好比你让运维来写前端的业务代码他也能写，你也看到了，我们目前不缺人，是想招一个优秀的人做候补。我们这边的技术栈是vue和Electron，你进来的话，负责前端页面以及一些node后端服务的编写。你稍等下，我让我们的HR来面下你。

线下HR面

等了4分钟左右，HR来了，她带我去到了另一个会议室聊，她问了我：

• 你的离职原因是什么？


• 你对新工作的期望是怎么样的？


• 如果公司让你休年假，你必须要做一件事情，你会做什么事情？

问完这些问题后，她问了我期望薪资，我说了20k，她说了一些其他的东西，大概意思就是给不到的话你最低期望是多少，我说18k。

她说：行，了解了，我们这边要做一下横向对比，尽快给你答复，你放心无论结果如何，我们都会给你一个答复的。

面试完的第二天，那个hr跟我发消息说结果还没定。

进入新的一周后，她给我发来了感谢信。

只能感叹卷王太多了，全干工程师的价格已经被你们打到18k以下了👍

做旅游的公司

这是一家在BOSS直聘上约到的面试（11k～17k），到了公司后，HR先让我做了一份笔试题，这份笔试题全是八股文，我把答案短的都写了，比较长的就写了面试时候讲。

做完笔试题后，她带我进了会议室，是两个人面我，一个是前端负责人，另一个是他的领导，做完自我介绍后，那个前端负责人说：我之前在网上看到过你的截图插件，写的很不错。我相信你的技术肯定没问题的，他和他的领导交叉问了我问题：

• vue3相比vue2做了哪些提升？


• 讲一下vue的diff算法吧


• 讲一下V8的垃圾回收机制


• 讲一下chrome是如何渲染一个网页的


• 大文件分块上传以及断点续传，你会怎么实现

回答问这些问题后，他们让我稍等下，找来了HR跟我聊，HR问了我期望薪资，我说17K，她也惊讶的说，你上家才给你12k，你怎么一下子要求涨幅这么多，是出于什么考虑呢？我说了理由后，她说：结合我们公司的情况和制度，我们这边给不到你这么多。

我：那大概能给到多少呢？

HR：15k，有些事情我要提前跟你说清楚，我们这边试用期是一个月，现在项目组比较忙，是需要加班的，基本上是996，大概要忙到9月份，项目第一期做好后，就可以按照正常时间上下班了。忙的这段时间是可以累积调休的。试用期不缴纳社保，我们只有五险，没有公积金。

我听了这些后，头皮发麻，一时不知道说啥，我就说了：哦哦 好

HR：如果你能接受的话，我这边是没问题的。

我：我要考虑考虑，晚些时候给你答复。

到了第二天，HR在boss直聘上给我发了消息，问我考虑的如何了，我拒绝了她。

做saas系统的上市公司

这家公司是我6月13号在BOSS直聘上沟通的，6月27号收了我简历，7月3号跟我约了面试，一直持续到7月14号，经历了三轮面试，最终拿到了offer。

HR面（线上）

按照惯例做完自我介绍后，HR让我介绍下公司的产品，以及我在公司的一个职位，技术水平在公司排第几，为什么离职，职业规划和一些其他问题：

HR：你能接受出差吗？

我：这个看情况，如果距离不是很远，出差时间不超过1周，交通、住宿这些都能报销的话，我是接受的。

HR：交通、住宿这些肯定都报销，不然谁愿意出差，我们除了这个外，每天还有一个xxx块的补贴。你在广州这边，出差的话就是去深圳，一般也就去个3、4天，你是前端，几乎不怎么出差。

我：哦哦 那可以的

HR：你对加班是怎么看的？

我：加班的话，如果是项目比较急，我是没问题的，但是如果是其他原因的一些强迫加班，我就不太能接受了

HR：我们这边加班的话，是项目比较急的时候才会，加班不会太频繁。如果加班的话，是可以1:1兑换成调休的，法定节假日加班的话，我们会按照法律规定发放3倍工资

我：哦哦 行

HR：你这边是在广州，如果面试通过的话，是广州的编制。我们广州分部在xx，距离这块的话，你能接受吧？

我：我有查过公司的位置，从我住的这边过去也挺近的，40分钟左右就到了，我可以接受

HR：那行，今天的面试就先到这，后面会安排我们的技术面下你。

技术面（线上）

HR面完后，过了一天，跟我约了技术面。

时间来到7月5号，一男一女，两个人一起面的我。按照惯例做完自我介绍后，他们问了我：

• 我看你写了很多开源项目和技术文章，这是一个很好的习惯，能很多年坚持做一件事，并且能把这件事情做好，你很厉害。


• 刚才听你自我介绍说你会Java，你Java目前是一个什么水平？


• 我看你们公司项目是做web动画编辑器的，你在这个项目中担任的角色是什么？有没有什么印象比较深刻的难题，你是如何解决的？


• 我看你简历上还写了一个海外项目的重构经验，你能介绍下这个项目吗？以及你在这里面担任的角色是什么？


• 我看你简历上的项目都是以Vue为主的，那你应该对Vue很熟悉，你讲一下watch与computed的区别


• vue中组件通信都有哪些方式？


• vuex刷新后数据会丢失，除了把数据放本地存储外，你还知道其他什么方法吗？


• 我看你写的那个截图的开源项目用到了canvas，你应该对canvas很熟悉了吧，有这样一个场景：超市中的货架，上面有很多商品。现在要把这个货架用canvas画出来，商品需要支持一些交互，调整大小，移动位置，你会怎么实现？

问完这些问题后，按照惯例，我问了下他们的团队情况以及所做的业务，我进去后所负责的模块，就结束了这场面试。

事业部总经理面（线上）

过了一天，告知我技术面通过了，跟我约了第二天的面试，我看到她说：总经理同时面我跟其他两位候选人。我就压力有点大，从业4年了，第一次遇到这种大场面😂

到了约定好的面试时间，我跟其他两位候选人都进入了会议，过了10分钟，总经理还是没有进来，我就私聊问了下HR。过了一会儿，HR进入了会议。她说：总经理临时有点事情，要换个时间约面试了，真不好意思。

时间来到7月10号，总经理进入腾讯会议后，他先让我们轮流做自我介绍，然后抛出问题，让我们挨个回答，最后他做了总结，给我们三个人做了评价：

• A（1号面试者）：你的组织协调能力应该不错


• B（我）：我看了你在掘金上发的文章以及个人网站，能看出来你的技术实力是最强的。


• C（3号面试者）：你的业务能力应该不错

说完这些后，总经理说晚上会抽时间再单独打电话给我们再聊聊，到了第二天早上我一直没等到电话，我就问了下HR。

过了半个小时左右，电话打来了，他问了我离职原因和两个场景题：

• 前端的框架有很多，当有新项目的时候，你会通过哪些方面来考虑应该使用哪个框架？


• 有一个上线的项目它是vue2写的，如果想升级到vue3，但是没有太多的专用时间来做这件事，此时你会怎么做？

回答完这些问题后，挂断了电话，下午1点40多的时候，HR联系我说面试通过了，开始走发offer流程了，到时候会有她的另一个同事联系我。

时间来到7月14号，第一面面我的那个人打电话给我了，跟我聊了薪资、福利制度和五险一金，她说我们公司的五险一金是按照实际工资进行缴纳的，没有绩效，有季度奖和年终奖，会按照公司的盈利情况以及你的工作表现进行发放，后面还有其他问题的话，你随时联系加你微信的那个HR，她是华南区域的负责人。

电话挂断后，过了2小时左右吧，HR联系我说发offer了，我突然想到忘记问上下班时间了，我就确认了下（BOSS直聘标记了时间）。

截止发文时间，我已经入职这家公司很多天了，团队氛围很棒。入职的第一天下午，我接到了我们主管的电话，他让我第二天去一趟武汉，事业部的总经理是在武汉分部的，他要见一下你，那边也有前端在，跟你讲解下业务，熟悉熟悉团队的人。

广州这边的后端架构师同事告诉我出差是不需要自己花钱的，公司内部有一个平台可以直接在上面定高铁票和酒店，我的内部OA和钉钉账号后，他教了我怎么操作。

来武汉后，跟这边的团队成员熟悉了下，聊了下业务，主管告诉我说大概7月26号左右就可以回广州了。我们是双休，我入职后的第一个周六、日是在武汉过的，在这边跟群友面了基，逛了下附近的粮道街，去了玫瑰街、黄鹤楼等地方🥳

背景

愉快的双休周末刚过完，早上来忽然被运营通知线上业务挂了，用户无法下单。卧槽，赶紧进入debug模式，一查原来是服务端返回的数据有问题，赶紧问了服务端，大佬回复说是业务部门配置套餐错误。好在主责不在我们，不过赶紧写了复盘文档，主动找自己的责任，扛起这口大锅，都怪我们前端，没有做好前端监控，导致线上问题持续两天才发现。原本以为运营会把推辞一下说不，锅是她们的，可惜人家不太懂人情世故，这锅就扣在了技术部头上。虽然但是，我还是静下心来把前端异常监控搞了出来，下次一定不要主动接锅，希望看到本文的朋友们也不要随便心软接锅^_^

监控

因为之前基于sentry做了埋点处理，基础已经打好，支持全自动埋点、手动埋点和数据上报。相关的原理可以参考之前的一篇文章如何从0-1构建数据平台（2）- 前端埋点。本次监控的数据上报也基于sentry.js。那么如何设计整个流程呢。具体步骤如下：

1. 
   

   监控数据分类

   
   


2. 
   

   监控数据定义

   
   


3. 
   

   监控数据收集

   
   


4. 
   

   监控数据上报

   
   


5. 
   

   监控数据输出

   
   


6. 
   

   监控数据预警

   
   

数据分类

我们主要是前端的数据错误，一般的异常大类分为逻辑异常和代码异常。基于我们的项目，由于涉及营收，我们就将逻辑错误专注于支付异常，其他的代码导致的错误分为一大类。然后再将两大异常进行细分，如下：

1. 
   

   支付异常

   
   

   1.1 支付成功

   
   

   1.2 支付失败

   
   


2. 
   

   代码异常

   
   

   2.1 bindexception

   
   

    2.1.1  js_error
   
   
   
    2.1.2  img_error
   
   
   
    2.1.3  audio_error
   
   
   
    2.1.4  script_error
   
   
   
    2.1.5 video_error
   
   

   
   


3. 
   

   unhandleRejection

   
   

   3.1 promise_unhandledrejection_error

   
   

   3.2 ajax_error

   
   


4. 
   

   vueException

   
   


5. 
   

   peformanceInfo

   
   

数据定义

基于sentry的上报数据，一般都包括事件与属性。在此我们定义支付异常事件为“page_h5_pay_monitor”，定义代码异常事件为“page_monitor”。然后支付异常的属性大概为：

    pay_time,



    pay_orderid,



    pay_result,



    pay_amount,



    pay_type,



    pay_use_coupon,



    pay_use_coupon_id,



    pay_use_coupon_name,



    pay_use_discount_amount,



    pay_fail_reason,



    pay_platment

代码异常不同的错误类型可能属性会有所区别：

    // js_error



    monitor_type,



    monitor_message,



    monitor_lineno,



    monitor_colno,



    monitor_error,



    monitor_stack,



    monitor_url



    // src_error



    monitor_type,



    monitor_target_src,



    monitor_url



    // promise_error



    monitor_type,



    monitor_message,



    monitor_stack,



    monitor_url



    // ajax_error



    monitor_type,



    monitor_ajax_method,



    monitor_ajax_data,



    monitor_ajax_params,



    monitor_ajax_url,



    monitor_ajax_headers,



    monitor_url,



    monitor_message,



    monitor_ajax_code



    // vue_error



    monitor_type,



    monitor_message,



    monitor_stack,



    monitor_hook,



    monitor_url



    // peformanceInfo 为数据添加 loading_time 属性，该属性通过entryTypes获取



    try {



        const observer = new PerformanceObserver((list) => {



            for (const entry of list.getEntries()) {



                if (entry.entryType === 'paint') {



                    sa.store.set('loading_time', entry.startTime)



                }

            }



        })



        observer.observe({ entryTypes: ['paint'] })



    } catch (err) {



        console.log(err)



    }

数据收集

数据收集通过事件绑定进行收集，具体绑定如下：

import {



    BindErrorReporter,



    VueErrorReporter,



    UnhandledRejectionReporter



} from './report'



const Vue = require('vue')





// binderror绑定



const MonitorBinderror = () => {



    window.addEventListener(



    'error',



    function(error) {



        BindErrorReporter(error)



    },true )



}



// unhandleRejection绑定 这里由于使用了axios，因此ajax_error也属于promise_error



const MonitorUnhandledRejection = () => {



    window.addEventListener('unhandledrejection', function(error) {



        if (error && error.reason) {



            const { message, code, stack, isAxios, config } = error.reason



            if (isAxios && config) {



                // console.log(config)



                const { data, params, headers, url, method } = config



                UnhandledRejectionReporter({



                isAjax: true,



                data: JSON.stringify(data),



                params: JSON.stringify(params),



                headers: JSON.stringify(headers),



                url,



                method,



                message: message || error.message,



                code



                })



            } else {



                UnhandledRejectionReporter({



                isAjax: false,



                message,



                stack



                })



            }



        }



    })



}



// vueException绑定



const MonitorVueError = () => {



    Vue.config.errorHandler = function(error, vm, info) {



        const { message, stack } = error



        VueErrorReporter({



            message,



            stack,



            vuehook: info



        })



    }



}



// 输出绑定方法



export const MonitorException = () => {



    try {



        MonitorBinderror()



        MonitorUnhandledRejection()



        MonitorVueError()



    } catch (error) {



        console.log('monitor exception init error', error)



    }



}

数据上报

数据上报都是基于sentry进行上报，具体如下：

/*



* 异常监控库 基于sentry jssdk



* 监控类别：



* 1、window onerror 监控未定义属性使用 js资源加载失败问题



* 2、window addListener error 监控未定义属性使用 图片资源加载失败问题



* 3、unhandledrejection 监听promise对象未catch的错误



* 4、vue.errorHandler 监听vue脚本错误



* 5、自定义错误 包括接口错误 或其他diy错误



* 上报事件： page_monitor



*/



// 错误类别常量



const ERROR_TYPE = {



    JS_ERROR: 'js_error',



    IMG_ERROR: 'img_error',



    AUDIO_ERROR: 'audio_error',



    SCRIPT_ERROR: 'script_error',



    VIDEO_ERROR: 'video_error',



    VUE_ERROR: 'vue_error',



    PROMISE_ERROR: 'promise_unhandledrejection_error',



    AJAX_ERROR: 'ajax_error'



}



const MONITOR_NAME = 'page_monitor'



const PAY_MONITOR_NAME = 'page_h5_pay_monitor'



const MEMBER_PAY_MONITOR_NAME = 'page_member_pay_monitor'



export const BindErrorReporter = function(error) {



    if (error) {



        if (error.error) {



            const { colno, lineno } = error



            const { message, stack } = error.error



            // 过滤



            // 客户端会有调用calljs的场景 可能有一些未知的calljs



            if (message && message.toLowerCase().indexOf('calljs') !== -1) {



                return



            }



            sa.track(MONITOR_NAME, {



            //属性



            })



        } else if (error.target) {



            const type = error.target.nodeName.toLowerCase()



            const monitorType = type + '_error'



            const src = error.target.src



            sa.track(MONITOR_NAME, {



            //属性



            })



        }



    }



}



export const UnhandledRejectionReporter = function({



    isAjax = false,



    method,



    data,



    params,



    url,



    headers,



    message,



    stack,



    code



}) {



        if (!isAjax) {



            // 过滤一些特殊的场景



            // 1、自动播放触发问题



            if (message && message.toLowerCase().indexOf('user gesture') !== -1) {



                return



            }



            sa.track(MONITOR_NAME, {



                //属性



            })



        } else {



            sa.track(MONITOR_NAME, {



                //属性



            })



        }



    }



    export const VueErrorReporter = function({ message, stack, vuehook }) {



    sa.track(MONITOR_NAME, {



        //属性



    })



}



export const H5PayErrorReport = ({



    isSuccess = true,



    amount = 0,



    type = -1,



    couponId = -1,



    couponName = '',



    discountAmount = 0,



    reason = '',



    orderid = 0,



}) => {



    // 事件名：page_member_pay_monitor



    sa.track(PAY_MONITOR_NAME, {



        //属性



    })



}

以上，通过sentry的sa.track进行上报，具体不作展开

输出与预警

数据被上报到大数据平台，被存储到hdfs中，然后我们直接做定时任务读取hdfs进行一定的过滤通过钉钉webhook输出到钉钉群，另外如果有需要做数据备份可以通过hdfs到数据仓库再到kylin进行存储。

总结

数据监控对于大的，特别是涉及营收的平台是必要的，我们在设计项目的时候一定要考虑到，最好能说服服务端，让他们服务端也提供相应的代码监控。ngnix层或者云端最好也来一层。严重的异常可以直接给你打电话，目前云平台都有相应支持。这样有异常及时发现，锅嘛，接到手里就可以精准扔出去了。

前言

上家公司有个需求是批量导出学生的二维码，我一想这简单啊，不就是先批量获取学生数据，然后根据QRcode生成二维码，然后在用html2canvas导出成图片嘛。
由于公司工具库有现成的生成压缩包方法，我只需要获得对应的图片blob就可以了，非常的easy啊。

开始动手

思路没啥问题，但第一步就犯了难，用过react框架或者其他MVVM框架的都知道，这种类型的框架都是数据驱动视图，也就是说一般情况下，必须先获得数据，然后根据数据才能得到视图。

但是问题是，html2canvas也是必须需要获取真实dom的快照然后转换成canvas对象。

听着好像不冲突，诶，我先获取数据，然后渲染出视图，在依次通过html2canvas来生成图片不就完事了嘛！但是想归想，却不能这么做。

原因主要有两个，一个原因呢是交互逻辑上就行不太通，也不友好。你不能“啪”点一下导出按钮，然后获取数据之后再去等所有数据渲染出对应组件之后，再去延迟处理导出逻辑。（耗时太长）

另一个原因呢，主要是跟html2canvas这个工具库有关系了，它的原理简单来说呢，就是复制你期望获取截图的那个dom的渲染树，然后根据这个渲染树在当前页面生成一个你看不见的canvas dom对象来。那么问题来了，因为是批量下载，所以肯定会有大量的数据，那么如果不做处理，就会有大量的canvas对象存在当前页面。

而canvas标签是会占用内存的，那么当同时存在过多的canvas时，就会出现一个问题，页面卡顿甚至崩溃。所以，这是第二个原因。

那么这篇文章主要是解决第一个原因所带来的问题的。

编程！启动！

第一步

那么先简单的随便生成一个组件好了，因为是公司源码嘛，大家懂的都懂。

interface IProps {

  qrCode: string

  studentName: string

  className: string

}



const SaveQRCode = (props: IProps) => {

  const divRef = React.useRef<HTMLDivElement>(null)

  // 具体怎么渲染看你们需求了

  return (

    <div ref={divRef}>XXXXXX</div>  

  )

}

看到代码，用过html2canvas的小伙伴应该知道ref是干嘛用的了，html2canvas()这个方法的参数是HTMLElement，传统一点的办法呢，可以通过document.getXXXXX这个方法来获取真实的dom元素。那么Ref就是替代前者的，它可以直接通过react框架获取真实的dom元素。

第二步

那么最简单的组件我们已经写好了，接下来就是如何动态的挂载这个组件，并且在挂载完之后就立刻卸载它。

那么先来理一下思路：
1、动态地挂载这个组件，且不能被用户肉眼观察到
2、挂载动作执行完立刻执行html2canvas获取canvas对象
3、通过canvas对象转换成blob对象并返回，或者直接通过回调函数返回canvas对象
4、组件卸载，清空dom树

那么根据上面几点，可以得出：从外部获取的肯定是有组件这个东西，而挂载的位置则有要求，但并不一定需要从外部获取。

为了不被样式影响，我们直接在body标签下，再挂载一个div标签，来进行组件的动态渲染和卸载，同时也避免了影响之前dom树的结构。

思路就说到这了，接下来直接抛出代码：

const AsyncMountComponent = (

  getElement: (onUnmount: () => void) => ReactNode,

  container: HTMLElement,

) => {

  const root = createRoot(container)

  const element = getElement(() => {

    root.unmount()

    container.remove()

  })

  root.render(<Suspense fallback={null}>{element}</Suspense>)

}

这里我因为想做的更加通用一点，所以把根节点让外部进行处理，如果希望更加业务一点，比如当前这个场景必然不会让用户可见，可以直接改成

const AsyncMountComponent = (getElement: (onUnmount: () => void) => ReactNode) => {

  const div = document.createElement('div')

  div.style.position = 'absolute'

  div.style.left = '2000px'

  document.body.appendChild(div)

  const root = createRoot(div)

  const element = getElement(() => {

    root.unmount()

    container.remove()

  })

  root.render(<Suspense fallback={null}>{element}</Suspense>)

}

这里的隐藏方式看个人喜好，无所谓。但有一点要注意的是，一定要可见，不然的话html2canvas生成不了图片，这里是最简单粗暴的方式，直接偏移left。

第三步

那么地基打好了，我们该怎么用这两个东西呢

interface IProps {

  qrCode: string

  studentName: string

  className: string

  // 这里自然就是获取blob和canvas对象的地方了

  onConfirm?: (data: { canvas: HTMLCanvasElement, blob: Blob }) => void

  // 这里是卸载的地方，由外部决定何时卸载节点，更加自由

  onUnmount?: () => void

}



const SaveQRCode = (props: IProps) => {

  const divRef = React.useRef<HTMLDivElement>(null)

  useEffect(() => {

    if (divRef.current && props.onConfirm) {

      html2canvas(divRef.current).then((canvas) => {

        canvas.toBlob((blob) => {

          props.onConfirm!({canvas, blob: blob!})

          props.onUnmount!()

        })

      })

    }

  }, [])

  // 具体怎么渲染看你们需求了

  return (

    <div ref={divRef}>XXXXXX</div>  

  )

}

首先我们对组件进行修改，因为我的方案是第一种，没有太业务向，所以说一些业务逻辑必然是要到组件层面去处理的，所以添加两个参数，一个获取blob和canvas对象，另一个用来卸载节点。

至于useEffect就很容易理解了，挂载后用html2canvas处理组件顶层div获取截图，然后返回数据，并卸载节点。

组件改造完毕了，那我们接下来把这两个组合一下

const getQRCodeBlobCanvas = async (props: IProps): Promise<{

  canvas: HTMLCanvasElement, blob: Blob

}> => {

  return new Promise((resolve) => {

    const div = document.createElement('div')

    div.style.position = 'absolute'

    div.style.left = '2000px'

    document.body.appendChild(div)

    asyncMountComponent(

      (dispose) => (<SaveQRCode {...props} onConfirm={resolve} onUnmount={dispose}/>),

      div

    )

  })

}

那么一个简单的动态阅后即焚组件就完成了，且可以直接通过方法的形式使用，完美适配批量导出功能，当然也包括单个导出，至于批量导出的细节我就不写了，非常的简单。

升级V2

我只提供了最通用一种方式来做这么个阅后即焚组件，之后我闲着无聊，又把它做了一次业务向升级，获得了V2版本

这个版本呢，你只需要传入一个组件进去，且不用关心何时卸载，它是最真实的阅后即焚。至于数据，会通过Promise的方式返回给用户。

const Wrapper = ({callback, children}: {  

  callback: (data: { blob: Blob,canvas: HTMLCanvasElement }) => void,  

  children: ReactNode  

}) => {  

  const divRef = useRef<HTMLDivElement>(null)  

  useEffect(() => {  

    if (divRef.current) {  

      html2canvas(divRef.current).then((canvas) => {  

        canvas.toBlob((blob) => {  

          callback({canvas, blob: blob!})  

        })  

      })  

    }  

  }, [])  

  return <div ref={divRef}>  

    {children}  

  </div>

}  

  

const getComponentSnapshotBlobCanvas = (getElement: () => ReactNode): Promise<{canvas:HTMLCanvasElement, blob: Blob}> => {

  return new Promise((resolve) => {

    const div = document.createElement('div')

    div.style.position = 'absolute'

    div.style.left = '2000px'

    document.body.appendChild(div)

    const root = createRoot(div)

    root.render((

      <Wrapper

        callback={(values) => {

          root.unmount()

          div.remove()

          resolve(values)

        }}

      >

        {getElement()}

      </Wrapper>

    ))

  })

}

其实也没啥特别的，无非就是把业务层公共的东西封装进了方法里，思路还是上面那个思路。

那么这篇博客就到这里了，感谢阅读！

uCharts 小程序地图下钻功能

最近在研究小程序图表，其中提到了一个地图下钻的功能，感觉挺有意思的，分享一下共同学习！

项目简介

这个Uni-App项目旨在提供一个可交互的地图，允许用户在中国地图的不同层级之间自由切换。用户可以从国家地图开始，然后深入到各省份地图，最终进入城市地图，点击不同区域/县级市查看详细信息。

下面是最终效果图👇👇

文档地址

• 图表插件uCharts 文档地址：http://www.ucharts.cn/


• uCharts hbuildx插件市场地址：ext.dcloud.net.cn/plugin?id=2…


• 阿里云地图数据地址：datav.aliyun.com/tools/atlas…

准备工作

在开始之前，请确保你已经安装了Vue.js和Uni-App

并且准备好了模拟地图数据。这些数据将用于绘制地图。

地图数据遵循geoJson地图数据交换格式。如果你不熟悉geoJson，可以参考这里。

绘制中国地图

// 首先引入我们的mock数据

import mockData from '../../mock/index'



// onLoad中调用 drawChina 方法来绘制中国地图

    drawChina() {

      uni.setNavigationBarTitle({

        title: '中国地图'

      });

      setTimeout(() => {

        let series = mockData.china.features;

        // 这里循环一下series，把需要的数据增加到serie的属性中，fillOpacity是根据数据来显示的颜色层级透明度

        for (var i = 0; i < series.length; i++) {

          // 这里模拟了随机数据，实际开发中请根据实际情况修改

          series[i].value = Math.floor(Math.random() * 1000)

          series[i].fillOpacity = series[i].value / 1000

          series[i].color = "#0D9FD8"

        }

        // 这里把series赋值给chartData，这样就可以在页面中渲染出来了

        this.chartData = {

          series: series

        };

      }, 100);

    }

uCharts组件使用

插件导入后在uni_modules中,命名规则符合easyCom,可以直接在页面中使用

<qiun-data-charts

  type="map"

  canvas2d=""

  :chartData="chartData"

  :opts="opts"

  :inScrollView="true"

  :pageScrollTop="pageScrollTop"

  tooltipFormat="mapFormat"

  @getIndex="getIndex"

  @complete="complete"

/>

注释说明：

• chartData 包含地图数据


• opts 是我们在 data 中定义的配置项


• tooltipFormat 类型为字符串，需要指定为 config-ucharts.js 或 config-echarts.js 中 formatter 下的属性值，
  这里我们使用了 mapFormat，可以在 config-ucharts.js 中查看


• 在页面中必须传入 pageScrollTop，并将 inScrollView 设置为 true，否则可能导致某些地图事件无法触发

事件说明：

• @complete 事件是地图绘制完成后触发的事件，我们可以在这个事件中获取地图的实例，
  然后可以调用地图的方法进行进一步操作。


• @getIndex 事件是地图点击事件，我们可以获取到点击的地图信息，
  根据这个信息来判断是否需要进行下钻操作，如果需要下钻，可以替换 chartData 并重新绘制地图。

下钻操作

  // 点击地图获取点击的索引

  getIndex(e) {

    console.log('点击地图', e);

    if (e.currentIndex > -1) {

      switch (this.layout) {

        case 'china':

          this.layout = 'province';

          break;

        case 'province':

          this.layout = 'city';

          break;

        case 'city':

          this.layout = 'area';

          break;

        default:

          uni.showModal({

            title: '提示',

            content: '当前已经是最后一级地图，点击空白回到中国地图',

            success: () => {



            }

          });

          break;

      }



      this.drawNext(e.currentIndex);

    } else {

      this.layout = 'china';

      this.drawChina();

    }

  }

以上代码中，我们通过 currentIndex 来判断当前点击的是哪个地图，然后根据 layout 的值来判断是否需要进行下钻操作。
如果需要下钻，我们就调用 drawNext 方法来绘制下一级地图。

这个demo中，我们只模拟了中国地图、省级地图、市级地图和区县级地图，如果在开发中我们需要根据adcode请求后端接口来获取地图数据

具体代码：git仓库地址

本文章只做技术探讨，请勿用于非法用途。

目标网站

为持续加深对律法的学习, 我们需要再来收集一些数据。

本文来解决 credit.acla.org.cn/ 这个网站的字体加密问题。

网站分析

网站反爬

这个网站的各种反爬措施还挺多的, 接口加密啊, 验证码啊(每个页面都有), 无限 debugger 啊, 什么的, 还是挺烦的, 如果不要求效率的话可以考虑用 selenium 来过掉, 这里重点来解决一下字体加密的问题。

加密分析

首先来看下字体加密什么样子。

如图, 为律所详情页的截图, 可以看到啊, 这个 标签下的字体为加密字体, 这个网站他大多数数据信息都会像这样来做一个加密。

开整

首先来说下解决的方法。

1. 
   

   找到字体文件。

   
   


2. 
   

   确定文件字体与网站字体的映射关系。

   
   


3. 
   

   替换网站字体。

   
   

字体文件获取

刷新页面, 勾选字体栏即可看到返回的页面, 直接下载下来即可。

有些网站可能会返回多个字体文件来迷惑你, 这时候可以全局搜索 ttf 等字体文件的关键词, 来读相关代码来找到前端页面解密时用的具体是字体文件。

字体文件解析

字体文件处理可以用 TTFont 工具, 我们先将文件解析成可读的 xml 格式来看下这到底是什么个东西。

下载字体文件保存为本地 font.ttf, 然后解析为 font.xml。

可以看到文件里是一些映射关系, 和一些字形的信息, 如果是简单的数字加密或是很少的字体加密的话, 这一步直接拿到映射关系就可以用了, 但是这个网站他每次的字体文件都不一样, 所以这种简单的映射关系不可用。

在字体编辑软件里也可以看到是对哪些字体进行了修改加密, windows 可以用 font creator , mac 上我用的是 FontForge 来解析的。

映射关系获取

上一步我们拿到了字形信息, 这里来生成提供一个通用的方法来做映射关系。

font.ttf 文件中通过 unicode 码来标记对应的字体的字形信息, 我们也可以用同样的方式, 获取加密字体对应的原字体的字形信息(固定不变的), 以此为 key 来设计映射关系。

这里定义了一个全局变量 font_map 来存储映射关系, 通过 PIL 的 ImageFont 对象来将字体的字形信息复现出来, 然后通过 ocr 技术得到字的原型, 完成解密。将解密过的字存入 font_map, 随着收录的字越来越多, 解析效率会越来越高。

加密字体替换

这里没什么难度, 做一个简单的替换就好。

结语

这个也是我首次接触这种麻烦些的字体加密, 就想写出来权当分享, 思路也是借鉴于之前看到的一个帖子(找不见了。。)。 文中有些东西需要自己去调试后可能会理解更深些, 因为写的过程中被其他事情打断了几次, 之前整理的思路乱掉了, 写的可能不太顺畅, 大家哪里不懂的话可以留言讨论吧, 或者有什么更好的思路也欢迎来交流。

前言

最近微信小程序隐私指引这波骚操作实在是太好玩了，剧情跌宕起伏，让人不由得直呼周星驰在《唐伯虎点秋香》里的那句名言“人生大起大落得太快，实在是太刺激了”。

我自己因为有几个小程序需要做适配，所以全程体验了整个剧情，到今天感觉这过程实在是有点离谱，所以决定记录一下。以飨读者。

起因

让我们把时钟回拨到一个月前的8月14日，微信默默的发了一个足以影响所有小程序的公告 《关于小程序隐私保护指引设置的公告》。大概意思就是对于某些隐私接口，如相册，地理位置啥的，要给用户弹个窗，需要用户点同意以后才能调用。公告内容很多，总结起来有两个重点：

1. 这个弹窗要你们自己做哟。


2. 9月15号生效呦，在此之前要是没做弹窗，你的小程序就死定了呦。

然后小伙伴们不敢怠慢，纷纷开始研究怎么个改法，社区论坛里乱成了一锅粥。

有看文档看不懂的：

有没看到公告早上上班突然发现接口都出错一脸懵的：

还有先知先觉的：

骂街的我就不贴了，以防不能过审。

发展

由于推出的过于仓促，阻碍了开发调试，引起开发者不满，官方很快又默默回滚了此次更新。并且鉴于大家都看不懂文档，也不知道怎么改代码。在小伙伴们的强烈呼吁下

官方答应尽快推出demo。

终于在8天之后的8月22日，距离9月15日大限还有24天的时候，大家翘首以盼的官方demo终于出现了。而且不是1个，是3个（后来又多了1个，一共4个）。这下一脸懵变成三（四）脸懵了。

你让我用哪个？？？

demo都有了，那就开干吧，还有二十几天，来得及。于是天真的小伙伴们开始高ma高ma兴lie兴lie的写bug。这次改动不仅仅涉及代码层面，还需要后台配置，前台配置，更新缓存，uni/taro框架，基础库版本，第三方开发等等各种问题，大家也是磕磕绊绊的慢慢的都摸清楚了该怎么做。

由于此次改动涉及到所有的小程序，影响面太大，随着9月15号大限的临近，更多的问题渐渐浮出水面。

首先就是那些维护着几十上百个小程序的小朋友，改动看似不多，但每一个都要走开发测试发版流程，而且必须在这短短的不到一个月的时间内完成，听起来就头大有木有？改不完，根本改不完，加班加点不睡觉也改不完。

然后就是那些在线上跑了好几年没更新的小程序，有的是源代码都找不到了，有的原来的开发者早就提桶跑路了，直接欲哭无泪。

还有后知后觉的，剩下几天就到大限的时候来社区里问这个隐私协议是个啥？这么重要的事情平台为什么没有早点通知我？？？

最后，就是审核变的奇慢无比，原来几个小时就有结果，而现在有小程序审核了好几天了还是没有反应。这其实也是可以预见的，这种影响所有小程序的改动必然会导致版本发布量大增，微信这是人为的自己给自己制造了个审核DDOS，但后果都是开发者承担。就问你急不急吧

就剩几天的时候，有小伙伴被逼的没办法了，不得不使用了一年一次平时打死都不敢用的加急审核。

当时间来到今天，也就是9.15大限前最后一天的时候，上了车的暗自庆幸，没上车的放弃治疗，尘埃即将落定，大家各安天命的时候，意想不到的转折又来了。。。

高潮

9月14号晚上20点38分，也就是距离9月15号0点还有3个多小时的时候，微信官方又发布了一条公告：

总结下来就两点：

1. 原来说大限是还剩3个小时的9月15号，新的大限推迟到10月17号。


2. 代码不改也没关系，平台自己会弹窗。

啊？？？？？？？？？？？？？？？

啥？？？？？？？？？？？？？？？

就剩3个小时了你给我来个180度大转弯？？？？？？？？？？？

不瞒你们说，我晚上看到这个公告的开始的表情是：

然后是

这下原本上了车的直接被180度逮虾户给甩出去了，合着我吭哧吭哧费劲巴拉的折腾了一个月眼看就剩3个小时了你告诉我都是白干？？？你平台为什么不一开始就把方案定成你们自己处理，非要折磨我们开发者？？？我加班都是白加了？我的用掉的加急审核次数能不能退给我？？我怎么觉得有一种被人耍了的感觉？

离最后期限3个小时啊，不是3周，也不是3天，是3个小时啊。你们官方人员业余都是玩赛车的还是兼职开渣土车的啊，平时上下班开车是不是都是漂移过弯啊。

未完待续