山月周刊第 16 期: 加速你的 Javascript 运算性能

「这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战」

前端爱好者周刊 (Github: shfshanyue/weekly)，每周记录关于前端的开源工具、优秀文章、重大库版本发布记录等等，周刊中优秀文章会在公众号全栈成长之路逐一推送。每周一发布，订阅平台如下，欢迎订阅。

订阅网站: weekly.shanyue.tech
订阅 Github: shfshanyue/weekly

开发利器

一、 MetaTags，生成网页的 Meta 信息

生成网页的 Meta 信息，并可实时预览 Google 搜索、Twitter、Facebook 上你网站被索引/分享的样子

二、 cccreate，偏 CSS 的设计类工具合集

有关色彩搭配、布局、排版、图标、动画等设计类小工具的集合

三、 BundleScanner，找出一个网站上所使用的的 npm 库与对应的版本号。

输入一个网址，即可分析出该网站的所有 npm 依赖及其版本号，及其每一个 JS 资源的技术栈。

它的原理是对所有流行的 npm 库建立倒排索引(elasticsearch 那种)，再对目标网址资源根据特定提取出来的关键 token 进行匹配。

相对 Wappalyzer 而言，它提取出来的 npm 库更多更精确。现在就差一个浏览器插件了。

文章推荐

一、元宇宙下的前端现状

什么是元宇宙: 我们在虚拟世界中与一个全新的身份一一对应，并且不会间断地“生活下去”，很容易就能让人联想到《头号玩家》这部电影。

本文还介绍了 WebXR、WebAR 的优缺点及市场化的解决方案等。其中还提到关于渲染的性能方案，对于传统前端也有很大启发。

把纯计算的代码移到 WebGL 的 shader 或 Web Worker 里

WebGL 调用 GPU 加速，shader 可以用于加速只和渲染（重绘）有关的代码，无关渲染的代码放入 shader 中反而会造成重复计算
Web Worker，适用于事先计算或实时性要求不高的代码，如布局算法

WebAssembly
gpu.js，将简单的 JavaScript 函数转换为着色器语言并编译它们，以便它们在您的 GPU 上运行。如果 GPU 不可用，函数仍将在常规 JavaScript 中运行。
用滤波算法（比如卡尔曼滤波）将卡顿降到更小，让用户从视觉感受上似乎更流畅

二、 Rust 是 JavaScript 基础设施的未来

undefined

开源与库

一、 gpu.js: 加速你的 Javascript 运算性能

借助于 WebGL，在 GPU 下进行 Javascript 计算，提升性能。

const { GPU } = require("gpu.js");
const gpu = new GPU();
const multiplyMatrix = gpu
  .createKernel(function (a, b) {
    let sum = 0;
    for (let i = 0; i < 512; i++) {
      sum += a[this.thread.y][i] * b[i][this.thread.x];
    }
    return sum;
  })
  .setOutput([512, 512]);

const c = multiplyMatrix(a, b);
复制代码

二、 react-location: 另外一个 React 路由库

import { ReactLocation, Router } from "react-location";

const reactLocation = new ReactLocation();

return (
  <Router
    location={reactLocation}
    routes={[
      {
        path: "/",
        element: "Home on the range!",
      },
    ]}
  />
);
复制代码

另外一个 React 路由的库，你是不已经忍受不了 React Router 经常升级了？