越努力，越幸运！

或许对于现在很多人来说，浏览器是一个很少使用的 App，因为所有功能都可以在 App 做，不需要使用浏览器。一方面，是由于国内的大环境就是把用户当成傻瓜（事实上，即便是吾辈目前所在的公司，在 UI/UX 设计方面也倾向于将用户当成傻瓜），导致用户真的是越来越傻瓜，甚至遇到了除了微信其他的都不怎么会用的地步，更何况浏览器这种“高端”的 App 呢？
然而对于某些特定人群来说，尤其是不喜欢安装太多 App 的人来说，浏览器几乎是 App 上数一数二的应用了，甚至称之为互联网的入口都不为过（现在一般的傻瓜式用户大概认为微信才是吧，缅怀曾经互联网都是通过浏览器使用的时代）。
在使用过 UC => Chrome => FireFox => Kiwi browser 之后，吾辈可以确定的说，Kiwi browser 是目前 Android 上最好的浏览器，其中尤以支持 Chrome PC 版的 Plugin 最为有名。

使用过的浏览器

UC 浏览器（国内版）

在早期吾辈使用的浏览器中，UC 绝对是当年（2016 年之前）使用体验非常好的浏览器，直到后来被阿里系收购，导致它逐渐充斥着各种广告，甚至首先开辟出了浏览器收费这一跨世纪倒车壮举。

UC 国内版首页
UC 国内版搜索

附：这里的跨世纪倒车壮举指的是自从浏览器始祖 Netscape 被 MS 的 IE 使用系统捆绑 + 免费的策略干掉以后，后来流行起来的浏览器还从未出现过收费的（或许是吾辈孤陋寡闻了？）
附：所有的国内浏览器都有内置的黑名单，例如 GitHub 上的 996 icu 就被国内浏览器屏蔽了，不仅仅是墙，就连浏览器都是墙的帮凶。参考：国外网站无法访问？

UC 浏览器（国际版）

UC 国际版，这是一个比较有趣的版本，没有国内版那么多花俏无用的功能，但同时不支持简体中文（当然支持繁体中文），同时保留了 UC 的核心功能——怪不得手机上 UC 的使用占有率很高呢！
它默认支持的主要功能如下

广告过滤
黑暗模式
手势方面几近完美
下载功能
自带 QR

UC 国际版首页
UC 国际版搜索

看起来没什么太大的问题，然而，它却在隐私方面做的一如既往的烂，参考：美媒:中国人上网须防泄露隐私浏览器存安全隐患

Chrome for Android

后来，吾辈在 PC 上先后遇到了 FireFox 和 Chrome，简直比国内的各种浏览器干净整洁了一百倍。在实际使用过相当长的一段时间后，吾辈最终在 PC 上选择了 Chrome，手机上也安装了 Chrome 进行网页浏览，它的速度非常理想，使用体验也还算不错，尤其是翻译功能更是被完整地保留了下来。唯有一点，插件功能被整个砍掉了。

Chrome 首页
Chrome 搜索
Google 翻译功能

为什么 Chrome For Android 不支持插件？虽然官方说是为了使之能够在较旧的浏览器上也能正常运行，但实际上应该有两个原因

Android 是 Google 自己的，而 Google 对于 App 的控制力要超过网页，所以为了让用户使用 App，Google 不原因让用户更多的浏览网页。

大约 70％的 chrome 用户在 android 和 ios 端，只有 30％的 chrome 用户在台式机和 mac 上。谷歌知道，如果他们在智能手机上引入扩展功能，那么由于广告拦截器的存在，他们将损失很多钱，而且大多数互联网用户由于舒适性，大部分时间都倾向于将智能手机用于互联网。Google 在这里玩一个聪明的游戏。参考：https://www.quora.com/Why-arent-there-any-extensions-for-Google-Chrome-on-Android

FireFox for Android

所以，在知道 FireFox 在 Android 上亦支持插件后，吾辈感觉它就是吾辈理想中的手机浏览器，吾辈在手机上也开始尝试使用 FireFox 了。但事与愿违，它真的太慢了。。。在使用体验上和 Chrome 无法相提并论,而且翻译插件的支持不完善导致有时候想在移动端阅读大量英文网页时还需要切到 Chrome.

注：FireFox 的桌面版插件支持存在一些问题，同时插件官方一直未曾修复，这也是吾辈放弃 FireFox 的重要原因之一。

FireFox 首页
FireFox 搜索

Kiwi browser

最终，吾辈遇到了 Kiwi browser，诚然，它也不是十全十美的，也有很多缺点。

默认主页的新闻资讯很讨厌，而且还无法关闭。
翻译功能没有 Chrome 强大，没有就地全文翻译的功能
不是一个非常流行的浏览器，没有桌面版本，没有同步功能

但有一个及其突出的优点，足以掩盖以上的所有缺点 – 支持 Chrome 桌面版插件。

Kiwi 首页
Kiwi 翻译

微型浏览器

事实上，吾辈也曾断断续续地使用过一些微型浏览器，在功能上做的比较简洁（但并不意味着不够用），但内核却薄弱不堪（其实就是用系统默认浏览器的内核）。
包括但不限于以下列表

其他吾辈没有使用过的浏览器可以参考：手机浏览器有哪些？安卓平台良心浏览器推荐

虽然这些微型浏览器理念很好：少即是多，简单就是美！，但实际上，这些没有内核的浏览器很多地方，尤其是性能方面，仍然受限于系统默认浏览器。大多数自带的插件系统，往往只是实现了一套加载 *.user.js 的机制罢了，而且生态之小与 Chrome/FireFox 这些主流其相比往往是天壤之别。

Kiwi browser 相关

Kiwi browser 推荐的插件

uBlock Origin：广告过滤
Dark Reader：为所有网站加上黑色主题，大部分情况下都还不错
Tabliss：美丽的新标签页
LastPass：全平台密码管理器
Tampermonkey：油猴脚本管理器

桌面的 Chrome 使用建议可以参考：优化 Google Chrome 的使用体验

二维码扫描

有时候需要使用二维码扫描使用手机去打开某个网站，而 Kiwi 并没有自带这个功能，所以需要配合 App 二维码扫描食用。

偶遇 HTML 中的奇妙字符

发表于 2020-04-28 更新于 2020-05-05 阅读次数： Changyan：本文字数： 2.6k 阅读时长 ≈ 2 分钟

虽然名字听起来就像是一本正经的胡说八道，但吾辈确实遇到了一个奇怪的问题，于此分享给大家。

事情的起始如下

下班回家 => 想要看动画 => 去动漫花园下载 BT 种子 => 动漫花园一片空白 => Why？

默认 uBlock 屏蔽页面

于是吾辈偷偷的的打开了控制台看了一下，发现是页面中的内容元素不见了。经过深思熟虑（好吧其实也就是稍微想了一下）首先把 uBlock 禁用，毕竟这个最容易被网站检测出来并且对抗嘛！果不其然，页面恢复了正常，但。。。同时广告也出现在了页面上。

默认 uBlock 不屏蔽页面

这可不行，重新启用了 uBlock 看了一下分析，很显然，内容不存在大概率是被 uBlock 的元素过滤功能隐藏掉了，查看被隐藏的内容元素，发现 id 为 1280_adv，但同时又包含了广告与主体内容，所以只要关掉 uBlock 的元素过滤就可以避免正常内容被误杀了。

之所以不在该网站整个禁用掉 uBlock 的原因在于 uBlock 并不只有元素过滤，它还阻止了一些广告资源的加载，仅在动漫花园就包括但不限于 _baidu.com, bebi.com, histats.com_。显而易见，禁用它们还能提高加载速度。

uBlock 屏蔽的脚本

既然无法使用 uBlock 的元素屏蔽了，那么吾辈便需要使用一个新的方式去阻止广告了，幸运的是吾辈安装了 Stylus 和 Tampermonkey 插件。

Stylus 能够使用被称为 user.css 的技术，能够在本地修改任意网站的样式 – 即自定义 UI 显示。
而 Tampermonkey 则更强大，支持 user.js – 可以在本地打开任意网站时载入自定义的 JavaScript 脚本，不再局限于修改 UI，几乎与插件无异（事实上它也确实被认为是更轻量的插件）。

原以为就几句 css 的事情，找到了广告的 id，于是吾辈写下了下面这些 css

/*屏蔽动漫花园的广告*/
.ad,
#1280_adv,
#1280_ad > a,
#bebiv3_ad {
  display: none;
}

但结果却是。。。只生效了一半！

屏蔽一半

可以看到，上面两个广告确实被隐藏了，但下面一个却并没有，而且吾辈在控制台直接使用 document.querySelector('#1280_adv') 也获取 dom 会抛出错误 SyntaxError: Document.querySelector: '#1280_adv' is not a valid selector。吾辈是直接复制的 id，理论上来说不会有错才是。

仔细想想，吾辈或许是漏掉了什么。。。于是，吾辈使用 Copy => Copy Selector 功能，有趣的东西出现了，复制出来的内容竟然是 '\31 280_adv'，wtf？

嗯，或许吾辈需要冷静一下，尝试使用 document.querySelector("#\\31 280_adv") 获取一下

注意：这里 JS 里面去查询 DOM Selector 的字符串又进行了转义。

Console 获取

OK，确实能够正常拿到。由于这些奇怪的字符在 css 中存在语法错误，那么接下来便用 user.js 去屏蔽掉它们吧！

基本实现如下

;[
  document.querySelector('#\\31 280_adv'),
  document.querySelector('.ad'),
  document.querySelector('#\\31 280_ad > a'),
].forEach((ad) => ad.remove())

甚至吾辈都发到了 GitHub 与 GreasyFork 上了。

然后，有个（万能的）网友就提出，可以转换思路，既然 #\\31 280_adv 在 css 中存在语法错误，那么使用属性选择器过滤 id 将值包裹在 '' 之中不就好了么？此话真是九言劝醒迷途仕，一语惊醒梦中人，吾辈瞬间 GET 到了这个点。

于是吾辈编写出了下面这段 user.css 样式

/*屏蔽动漫花园的广告*/
.ad,
div[id='\31 280_adv'],
div[id='\31 280_ad'] > a,
div[id='bebiv3_ad'] {
  display: none;
}

使用后效果如下

屏蔽后干净的网页

现在，初始目的达成了，吾辈开始有点好奇它是怎么实现这个功能，于是下载了它的源码，id 那里并未发现什么奇怪的东西，但吾辈却也无法复现一个 demo！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="test">2</div>
    <script>
      window.addEventListener('load', () => {
        document.querySelector('#test').setAttribute('id', '\\31 280_adv')
      })
    </script>
  </body>
</html>

demo 效果

如果有人知道原因的话，请务必不吝赐教！

参考：ASCII Wiki

后续，万能的网友 NiaMori 又来说明啦，实际上是 id 以数字开头的原因，具体问题参考：
是 id 以数字开头的原因，简单的 <div id="1">test<div> 就能复现这个效果。
document.getElementById('1') 能够选中，但 document.querySelector('#1') 不能，因为 HTML5 允许 id 以数字开头而 CSS 不允许
0x31 是 ‘1’ 的 Unicode 编码值，Copy selector 的时候 Chrome 做了一个智能的 escape
参考：

Using querySelector with IDs that are numbers

Css Spec

CSS.escape

JavaScript 禁止用户保存图片

发表于 2020-04-27 阅读次数： Changyan：本文字数： 3.9k 阅读时长 ≈ 4 分钟

场景

在业务需求中不希望用户保存图片，因为是一些供内部使用的图片。

思路

添加事件禁止选择、拖拽、右键（简单的禁止用户保存图片，但无法阻止用户打开控制台查看，或是直接抓包）
将之转换为 canvas（让浏览器认为不是图片以此禁止用户对之进行图片的操作，但无法阻止抓包）
禁止用户使用控制台查看源码（阻止浏览器打开控制台，但无法阻止抓包）
传输图片使用自定义格式（可以阻止抓包，但需要后台配合）

注：以下内容使用 react+ts 实现

添加事件禁止选择、拖拽、右键

简而言之，这是一种简单有效的方式，能够在用户不打开控制台的情况下阻止用户保存图片。

export function preventDefaultListener(e: any) {
  e.preventDefault()
}

;<img
  src={props.url}
  alt=""
  style={{
    //禁止用户选择
    userSelect: 'none',
    //禁止所有鼠标事件，过于强大，图片仅用于展示可用
    // pointerEvents: 'none',
  }}
  onTouchStart={preventDefaultListener}
  onContextMenu={preventDefaultListener}
  onDragStart={preventDefaultListener}
/>

参考：https://www.cnblogs.com/dxzg/p/9930559.html

将之转换为 canvas

另一种思路是将图片转换为 canvas 避免用户使用 img 相关的操作。

将图片转成 canvas

export async function imageToCanvas(url: string, canvas: HTMLCanvasElement) {
  return new Promise((resolve, reject) => {
    //新建Image对象，引入当前目录下的图片
    const img = new Image()
    img.src = url
    const c = canvas.getContext('2d')!

    //图片初始化完成后调用
    img.onload = function () {
      //将canvas的宽高设置为图像的宽高
      canvas.width = img.width
      canvas.height = img.height

      //canvas画图片
      c.drawImage(img, 0, 0, img.width, img.height)
      resolve()
    }
    img.addEventListener('error', (e) => {
      reject(e)
    })
  })
}

禁用 canvas 事件

const throwFn = () => {
  throw new Error(
    "Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.",
  )
}

const $canvasRef = useRef<HTMLCanvasElement>(null)
 useEffect(() => {
     ;(async () => {
         await imageToCanvas(props.url, $canvasRef.current!)
         $canvasRef.current!.toBlob = throwFn
         $canvasRef.current!.toDataURL = throwFn
     })()
 }, [])
 return (
     <canvas
         ref={$canvasRef}
         onTouchStart={preventDefaultListener}
         onContextMenu={preventDefaultListener}
     />
 )

禁止用户使用控制台查看源码

如果能禁止用户操作控制台，那么自然能够避免用户查看源码了，下面是一个简单的实现。

/**
 * 兼容异步函数的返回值
 * @param res 返回值
 * @param callback 同步/异步结果的回调函数
 * @typeparam T 处理参数的类型，如果是 Promise 类型，则取出其泛型类型
 * @typeparam Param 处理参数具体的类型，如果是 Promise 类型，则指定为原类型
 * @typeparam R 返回值具体的类型，如果是 Promise 类型，则指定为 Promise 类型，否则为原类型
 * @returns 处理后的结果，如果是同步的，则返回结果是同步的，否则为异步的
 */
export function compatibleAsync<T = any, Param = T | Promise<T>, R = T>(
  res: Param,
  callback: (r: T) => R,
): Param extends Promise<T> ? Promise<R> : R {
  return (res instanceof Promise
    ? res.then(callback)
    : callback(res as any)) as any
}

/**
 * 测试函数的执行时间
 * 注：如果函数返回 Promise，则该函数也会返回 Promise，否则直接返回执行时间
 * @param fn 需要测试的函数
 * @returns 执行的毫秒数
 */
export function timing<R>(
  fn: (...args: any[]) => R,
  // 函数返回类型是 Promise 的话，则返回 Promise<number>，否则返回 number
): R extends Promise<any> ? Promise<number> : number {
  const begin = performance.now()
  const res = fn()
  return compatibleAsync(res, () => performance.now() - begin)
}
/**
 * 禁止他人调试网站相关方法的集合对象
 */
export class AntiDebug {
  /**
   * 不停循环 debugger 防止有人调试代码
   * @returns 取消函数
   */
  public static cyclingDebugger(): Function {
    const res = setInterval(() => {
      debugger
    }, 100)
    return () => clearInterval(res)
  }
  /**
   * 检查是否正在 debugger 并调用回调函数
   * @param fn 回调函数，默认为重载页面
   * @returns 取消函数
   */
  public static checkDebug(
    fn: Function = () => window.location.reload(),
  ): Function {
    const res = setInterval(() => {
      const diff = timing(() => {
        debugger
      })
      if (diff > 500) {
        console.log(diff)
        fn()
      }
    }, 1000)
    return () => clearInterval(res)
  }
}

useEffect(() => {
  const cancel1 = AntiDebug.cyclingDebugger() as any
  const cancel2 = AntiDebug.checkDebug(() =>
    console.log('请不要打开调试'),
  ) as any
  return () => {
    cancel1()
    cancel2()
  }
}, [])

return <img src={url} alt="" />

传输图片使用自定义格式

该功能需要服务端配合，故而此处赞不实现，可以参考微信读书，就是将文本转为 canvas，数据传输也进行了加密，可以在很大程度上防止普通用户想要复制/下载的行为了。

总结

如同所有的前端限制用户的技术一样，这是一个没有终点的斗争。。。

参考广告屏蔽和屏蔽复制粘贴的发展。。。

在现代前端项目中使用 Worker

发表于 2020-04-18 阅读次数： Changyan：本文字数： 3.2k 阅读时长 ≈ 3 分钟

场景

由于需要在 Browser 进行大量的（音频转解码）计算，所以吾辈开始尝试使用 webworker 分离 CPU 密集型的计算操作，最终找到了 comlink 这个库，但之前在 vue 中使用时发生了错误，目前看起来已经得到了解决，所以在此记录一下。

调研方案

web-worker-proxy：结合了 proxy/promise/webworker 的强大工具库，但如何在 ts 中使用却是个问题
Orc.js：一个简单的 worker 封装
VueWorker：结合 vue 的 worker 封装，无法理解，难道真的会有人在 vue 组件中进行大量计算么？
comlink：Chrome 的一个基于 proxy/promise/webworker 的封装库
worker-plugin：和上面的同属 chrome 实验室的一个 webpack 插件

最后决定使用 comlink 结合 worker-plugin 实现简单的 worker 使用。

安装与配置

在 GitHub 上有可运行示例 demo
相关问题：comlink-loader 工作不正常

添加相关依赖

1 2	yarn add comlink yarn add -D worker-plugin

在 webpack 配置中添加插件

1
2
3

{
  plugins: [new WorkerPlugin()]
}

这里一般不需要特殊参数配置，如果需要，可以参考：worker-plugin

示例

基本示例

添加一个简单的 hello.worker.ts

import { expose } from 'comlink'

const obj = {
  counter: 0,
  inc() {
    this.counter++
  },
}

expose(obj)

在 main.ts 中使用

const obj = wrap(new Worker('./hello.worker.ts', { type: 'module' })) as any
alert(`Counter: ${await obj.counter}`)
await obj.inc()
alert(`Counter: ${await obj.counter}`)

但这里并不是类型安全的，所以我们可以实现正确的类型。

添加一个 hello.worker.ts 暴露出来的类型 HelloWorkerType

export interface HelloWorkerType {
  counter: number
  inc(): void
}

同时为了支持在 main.ts 中使用正确的类型，需要使用泛型

main.ts 修改如下

const obj = wrap<HelloWorkerType>(
  new Worker('./hello.worker.ts', { type: 'module' }),
)
alert(`Counter: ${await obj.counter}`)
await obj.inc()
alert(`Counter: ${await obj.counter}`)

纯函数

声明函数的类型 HelloCallback.worker.type.d.ts

type ListItem<T extends any[]> = T extends (infer U)[] ? U : never

export type MapWorkerType = <List extends any[], U>(
  arr: List,
  cb: (val: ListItem<List>) => U | Promise<U>,
) => Promise<U[]>

声明一个纯函数 HelloCallback.worker.ts

import { MapWorkerType } from './HelloCallback.worker.type'
import { expose } from 'comlink'

export const map: MapWorkerType = (arr, cb) => Promise.all(arr.map(cb))

expose(map)

注：此处最好使用变量的形式，主要是为了方便将函数类型剥离出去。

在 main.ts 中使用

const map = wrap<MapWorkerType>(
  new Worker('./HelloCallback.worker.ts', {
    type: 'module',
  }),
)
const list = await map(
  [1, 2, 3],
  proxy((i) => i * 2),
)
console.log('list: ', list)

使用 class 的形式

声明接口 HelloClass.worker.type.d.ts

1
2
3

export class HelloClassWorker {
  sum(...args: number[]): number
}

worker 文件 HelloClass.worker.ts

import { HelloClassWorker } from './HelloClass.worker.type'
import { expose } from 'comlink'

class HelloClassWorkerImpl implements HelloClassWorker {
  sum(...args: number[]): number {
    return args.reduce((res, i) => res + i, 0)
  }
}

expose(HelloClassWorkerImpl)

关于此处 implements class 的问题，吾辈偶然一试之下没报错也很奇怪，所以找到了相关问题 Typescript: How to extend two classes?，官方文档也同样说明了这个特性 Mixins。

在 main.ts 中使用

const HelloClassWorkerClazz = wrap<typeof HelloClassWorker>(
  new Worker('./HelloClass.worker.ts', {
    type: 'module',
  }),
)
const instance = await new HelloClassWorkerClazz()
console.log(await instance.sum(1, 2))

总结

总的来说，使用 worker 的基本分三步

编写需要放在 worker 里内容的类型定义
根据类型定义实现它
在主进程的代码中使用它

注：当然，如果是复杂的东西，可以直接在单独的文件中实现，然后声明一个 .worker.ts 暴露出去，不在 .worker.ts 中包含任何

参考

TypeScript 函数根据第一个参数推导后面参数的类型

发表于 2020-04-02 阅读次数： Changyan：本文字数： 2.2k 阅读时长 ≈ 2 分钟

问题

在编写一个重载函数时，吾辈发现了 ts 的方法签名问题。

enum TypeEnum {
  A,
  B,
}

type A = {
  a: string
}
type B = {
  b: number
}

//region 普通参数

function fn1(type: TypeEnum.A, obj: A): void
function fn1(type: TypeEnum.B, obj: B): void
function fn1(type: TypeEnum, obj: A | B) {}

//endregion

上面是一个简单的重载函数，吾辈希望在输入第一个参数 type 之后，ts 就能匹配到正确的参数，然而事实上，ts 并没能完全做到。

ts 类型提示

当然，如果真的这样写 ts 的类型检查仍然能正确地抛出错误消息，然而未能推导终究是有点问题的。

// TS2769: No overload matches this call.   Overload 1 of 2, '(type: TypeEnum.A, obj: A): void', gave the following error.     Argument of type '{ a: string; b: number; }' is not assignable to parameter of type 'A'.       Object literal may only specify known properties, and 'b' does not exist in type 'A'.   Overload 2 of 2, '(type: TypeEnum.B, obj: B): void', gave the following error.     Argument of type 'TypeEnum.A' is not assignable to parameter of type 'TypeEnum.B'
fn1(TypeEnum.A, {
  a: '',
  b: 1,
})

然后，吾辈想到了几种方式可以尝试解决。

解决

继承

尝试使用继承限制字段的类型。

//region 对象参数

function fn2(arg: { type: TypeEnum.A; obj: A }): void
function fn2(arg: { type: TypeEnum.B; obj: B }): void
function fn2(arg: { type: TypeEnum; obj: A | B }) {}

fn2({
  type: TypeEnum.A,
  obj: {
    a: '',
  },
})

//endregion

很遗憾的是，这是行不通的，即便是下面的这种变体，仍然是不可行的。

interface Base<T extends TypeEnum> {
  type: T
}

interface IA extends Base<TypeEnum.A> {
  obj: A
}
interface IB extends Base<TypeEnum.B> {
  obj: B
}

function fn2(arg: IA | IB) {}

泛型

事实上，使用泛型确实可以做到让 ts 的类型更加正确。

缺点：

不能使用 ts 的重载
需要函数的作者改变思维

//region 泛型

type EnumTypeMapGen<T extends string[], M extends { [P in TypeEnum]: any }> = []
type TypeMap = {
  [TypeEnum.A]: A
  [TypeEnum.B]: B
}

function fn3<T extends TypeEnum, Arg extends TypeMap[T]>(type: T, obj: Arg) {}

fn3(TypeEnum.A, {
  a: '',
})

//endregion

高阶函数

最后，高阶函数可以简单的解决这个问题，它将一次调用更改为两次调用，第一次调用返回的函数便已经确认了类型。

高阶函数

缺点：

需要使用者接收这种 函数式 的调用方式

//region 高阶函数

function fn4(type: TypeEnum.A): (obj: A) => void
function fn4(type: TypeEnum.B): (obj: B) => void
function fn4(type: TypeEnum): any {}

fn4(TypeEnum.A)({
  a: '',
})

//endregion

总结

总的而言，泛型和高阶函数都能解决这个问题，吾辈个人倾向于泛型，因为它并未改变调用者的使用方式，而是让作者去改变，避免改变函数的接口本身。