解锁前端新潜能：如何使用 Rust 锈化前端工具链

news2024/11/17 19:42:48

前言

近年来，Rust的受欢迎程度不断上升。首先，在操作系统领域，Rust 已成为 Linux 内核官方认可的开发语言之一，Windows 也宣布将使用 Rust 来重写内核，并重写部分驱动程序。此外，国内手机厂商 Vivo 也宣布使用 Rust 开发了名为“蓝河”的操作系统。除此之外，Rust 在图形渲染、游戏开发、中间件开发、边缘计算、计算安全等领域也是遍地开花，可以说，Rust 正在以惊人的速度重塑着各个领域的发展，让人不禁感叹 Rust 已经在重写万物了。

微软

那回到前端领域，正在进行一场构建工具的革命，除了老牌的 Babel 竞争对手swc，一些新兴的前端构建工具也都在使用 Rust 进行开发，例如Turbopack、Parcel，对标 Webpack 的Rspack，对标 Vite 的Farm等等。所以，对于广大前端同胞来说，C/C++ 太难，学习和掌握 Rust 是一个不错的选择，虽然 Rust 也不见得容易许多，它有着陡峭的学习曲线，但它或许是我们突破闭塞的前端区间的一把钥匙，帮助我们打开通往新世界的大门。

锈化开发工具的方式

虽说 Rust 的学习曲线可能相对陡峭，但笔者认为这是对于要全面掌握 Rust 这门语言而言的，而我们学习语言的目的最重要的是掌握一项可以帮我们解决问题的技能，因此，对于 Rust 不需要抱有太多的恐惧和敬畏之心，只需要摒除杂念立马开始学习 + 撸码，剩下的就交给时间来慢慢积累经验。此外，对于不是那么复杂应用来说，熟悉 Rust 基本语法和数据结构，翻过「所有权机制」和「生命周期」两座大山，基本也足以应付了。

本文建立在读者已经有一定的 Rust 知识基础上，对于 Rust 基本语法就不做赘述了。当前，大部分前端研发都是在 Node 环境下进行的，所以我们通过 Rust 来改造开发工具，主要有两种形式：

  • 使用 WASM 的方式，基于wasm-pack，将 Rust 代码编译成 WASM，以供 Node 调用

  • 将 Rust 应用编译成 Node addons，通过 Node API 的方式供 Node 调用，可以基于napi-rs和neon来实现

在这两种方式的选择上，主要取决于你是否需要完整地访问 Node API，WASM 出于安全性的考虑，对于 Node 能力的调用存在限制，那么此时就应该选择 Node addons 的方式了。而napi-rs和neon的选择的话，napi-rs相对而言比较简单和轻量，而且针对不同版本的 Node 不需要重新编译，所以我们考虑选择napi-rs作为锈化开发工具的方式。

初识 NAPI-RS

我们可以通过 napi-rs 的开发工具 ****@napi-rs/cli**以及项目模板来初始化一个应用，这里推荐使用项目模板，因为经过笔者的测试，开发工具创建的项目内容上相较于模板比较落后，对于后续深入使用上会造成一定的困惑。

NAPI-RS 项目模板

从 napi-rs 项目模板内容上看，可以发现项目结构完善，工程化相关能力非常齐全，提供了构建工具、测试用例编写、Github CI 工作流等等必须的能力，我们只需要关注编码就可以了。

我们先来关注一下生成的 napi-rs 项目文件。从package.json和npm分析可以看出，一个 napi-rs 项目主要是由主包和 npm 下的针对不同平台的编译构建结果子包组成，napi-rs 会根据用户的配置，将用户的 Rust 代码构建为不同平台下的 Node 扩展 binding 文件，这些文件会放到 npm 下对应的平台目录中，再由 package.json 中 main 字段指定导出，用户在安装主包的时候，会根据用户电脑情况加载对应构建结果子包。

{
  "name": "@tarojs/parse-css-to-stylesheet-darwin-x64",
  "version": "0.0.25",
  "os": [
    "darwin"
  ],
  "cpu": [
    "x64"
  ],
  "main": "parse-css-to-stylesheet.darwin-x64.node",
  "files": [
    "parse-css-to-stylesheet.darwin-x64.node"
  ],
  "license": "MIT",
  "engines": {
    "node": ">= 10"
  },
  "repository": "https://github.com/NervJS/parse-css-to-stylesheet"
}

而在主包入口index.js中将根据用户宿主平台，加载对应的扩展文件。

...
switch (platform) {
  case 'win32':
    switch (arch) {
      case 'x64':
        localFileExisted = existsSync(
          join(__dirname, 'parse-css-to-stylesheet.win32-x64-msvc.node')
        )
        try {
          if (localFileExisted) {
            nativeBinding = require('./parse-css-to-stylesheet.win32-x64-msvc.node')
          } else {
            nativeBinding = require('@tarojs/parse-css-to-stylesheet-win32-x64-msvc')
          }
        } catch (e) {
          loadError = e
        }
        break
      ...
    }
    break
  ...
}
...

从@napi-rs/triples这个包中可以看到所有支持的平台列表，而对于常规性的 Node 应用来说，我们不需要构建这么多平台，一般来说构建x86_64-apple-darwin、aarch64-apple-darwin、x86_64-pc-windows-msvc、x86_64-unknown-linux-gnu这四个平台也足够了，这样也能减少 CI 的构建时间。

napi-rs 默认构建的平台是x86_64-apple-darwin、x86_64-pc-windows-msvc、x86_64-unknown-linux-gnu，在这里可以看到，所以为了增加 MAC Book M 系列电脑的支持，我们需要增加aarch64-apple-darwin的配置，可以在 package.json 中napi字段中添加，配置如下：

"napi": {
  "binaryName": "taro",
  "triples": {
    "default": true,
    "additional": [
      "aarch64-apple-darwin"
    ]
  }
},

接下来就可以开始我们的编码之旅咯！

基于 NAPI-RS 开发 Node 扩展

基于 napi-rs 开发 Node 扩展，除了 Rust 编码本身外，无非需要关注两种情况，即 JavaScript 调用 Rust 和 Rust 调用 JavaScript。

JavaScript 调用 Rust

调用 Rust 函数

这是最常见的用法，因为我们一般使用 Rust 开发 Node 扩展，也是为了将一些 CPU 密集型任务的任务使用 Rust 来实现，再暴露给 JS 来调用，从而达到提升应用性能的目的，最为常见的是 Rust 暴露方法给到 JS 调用，通过项目模板生成的 napi-rs 示例也可以看到。

// src/lib.rs 
use napi_derive::napi;

#[napi]
pub fn plus_100(input: u32) -> u32 {
  input + 100
}

如上代码，通过给plus_100函数添加#[napi]属性宏，这样可以标记该函数，表示该函数可以通过 N-API 在 Node.js 中调用，在项目编译后的 typing 文件中，我们能看到对应生成了 JS 函数.

export function plus100(input: number): number

可以看到这里生成 JS 函数名是 napi-rs 自己的规则，我们也可以自定义暴露的函数名，通过js_name属性可以指定。

#[napi(js_name = "plus_100")]
pub fn plus_100(input: u32) -> u32 {
  input + 100
}

当然，除了暴露函数这一基本操作之外，我们还可以暴露常量、对象、类、enum 等等给到 JS 侧去调用，这些可以通过 napi-rs 的官方文档可以查阅到。

以 Object 作为参数

而在 JS 调用 Rust 编码中，最需要关注的是调用函数时，JS 侧给 Rust 传对象作为参数，这里为了提升性能，建议提前在 Rust 中定义好传递对象的数据结构，在 JS 中以引入该数据结构定义，规范数据传递即可。

// 定义好数据结构
// napi(object) 表示紧随其后的 struct （结构体）将通过 N-API 以 JavaScript 对象的形式暴露出去
#[napi(object)]
pub struct Project {
  pub project_root: String,
  pub project_name: String,
  pub npm: NpmType,
  pub description: Option,
  pub typescript: Option,
  pub template: String,
  pub css: CSSType,
  pub auto_install: Option,
  pub framework: FrameworkType,
  pub template_root: String,
  pub version: String,
  pub date: Option,
  pub compiler: Option,
  pub period: PeriodType,
}

JS 中调用

// 函数定义，其中 Project 由 Rust binding 中暴露
export function createProject(conf: Project)

// 函数调用
createProject({
  projectRoot: projectDir,
  projectName,
  template,
  npm,
  framework,
  css: this.conf.css || CSSType.None,
  autoInstall: autoInstall,
  templateRoot: getRootPath(),
  version: getPkgVersion(),
  typescript: this.conf.typescript,
  date: this.conf.date,
  description: this.conf.description,
  compiler: this.conf.compiler,
  period: PeriodType.CreateAPP,
})

Rust 调用 JavaScript

而 Rust 中也可以调用 JS 提供的方法，这在做 Node 开发工具的时候非常有用，因为有时候我们需要读取开发人员的配置代码给到 Rust 调用，其中就可能会遇到 Rust 调用 JavaScript 中函数的情况。

一个调用 JS 函数的简单例子

在 napi-rs 中调用 JS 函数主要通过ThreadsafeFunction来实现，请看例子：

#[napi]
pub fn call_threadsafe_function(callback: ThreadsafeFunction) -> Result<()> {
  for n in 0..100 {
    let tsfn = callback.clone();
    thread::spawn(move || {
      tsfn.call(Ok(n), ThreadsafeFunctionCallMode::Blocking);
    });
  }
  Ok(())
}

在上述例子中，call_threadsafe_function函数接受了一个类型为ThreadsafeFunction<u32>的参数，这表明call_threadsafe_function被编译为 JS 函数后将接受一个回调函数作为参数，而该回调函数的有效参数为u32即number类型，而在call_threadsafe_function函数体中，通过thread::spawn开辟子线程，以阻塞的方式调用这个传入的回调函数。

通过ThreadsafeFunction的call方法可以调用到传入的 JS 回调函数，但是我们会发现它拿不到返回值，如果我们需要获取到 JS 回调函数的返回值时，我们需要使用call_with_return_value和call_async两个方法。

获取 JS 函数的返回值

对比call与call_with_return_value的实现可以看出，call_with_return_value比call多一个回调函数参数，并且可以指定 JS 回调函数返回值的类型，并且该类型需要满足FromNapiValue这个 trait，因为call_with_return_value在处理 JS 回调函数时会调用它的from_napi_value方法将 JS 数据转为 Rust 的数据类型。

// https://github.com/napi-rs/napi-rs/blob/main/crates/napi/src/threadsafe_function.rs#L428
pub fn call(&self, value: Result, mode: ThreadsafeFunctionCallMode) -> Status {
  self.handle.with_read_aborted(|aborted| {
    if aborted {
      return Status::Closing;
    }

    unsafe {
      sys::napi_call_threadsafe_function(
        self.handle.get_raw(),
        Box::into_raw(Box::new(value.map(|data| {
          ThreadsafeFunctionCallJsBackData {
            data,
            call_variant: ThreadsafeFunctionCallVariant::Direct,
            callback: Box::new(|_d: Result| Ok(())),
          }
        })))
        .cast(),
        mode.into(),
      )
    }
    .into()
  })
}

pub fn call_with_return_value Result<()>>(
  &self,
  value: Result,
  mode: ThreadsafeFunctionCallMode,
  cb: F,
) -> Status {
  self.handle.with_read_aborted(|aborted| {
    if aborted {
      return Status::Closing;
    }

    unsafe {
      sys::napi_call_threadsafe_function(
        self.handle.get_raw(),
        Box::into_raw(Box::new(value.map(|data| {
          ThreadsafeFunctionCallJsBackData {
            data,
            call_variant: ThreadsafeFunctionCallVariant::WithCallback,
            callback: Box::new(move |d: Result| {
              d.and_then(|d| D::from_napi_value(d.0.env, d.0.value).and_then(cb))
            }),
          }
        })))
        .cast(),
        mode.into(),
      )
    }
    .into()
  })
}

call_with_return_value的使用方式如下：

#[napi]
pub fn call_threadsafe_function(callback: ThreadsafeFunction) -> Result<()> {
  callback.call_with_return_value(Ok(1), ThreadsafeFunctionCallMode::Blocking, move |result: u32| {
    println!("callback: {result:?}");
    Ok(())
  });
  Ok(())
}

可以看出，JS 回调函数的返回值是在call_with_return_value的第三个回调函数参数中获取到的，这就导致如果我们需要依赖这个 JS 函数返回值的话，我们后续的逻辑代码只能写在call_with_return_value的第三个回调函数参数中，对我们的代码逻辑书写造成诸多不便，代码可读性降低，所以推荐使用call_async方法来执行 JS 函数，并获取参数。

使用call_async获取 JS 函数返回值

从call_async的实现可以看出，它首先使用了tokio创建了一个 one-shot 通道，让 JS 函数以不阻塞的方式异步运行，并在执行完成后通过sender 发送操作结果，而使用receiver进行等待执行结果，并将结果返回，同时要使用call_async方法，需要在Cargo.toml中为napi依赖打开tokio_rt特性。

#[cfg(feature = "tokio_rt")]
pub async fn call_async(&self, value: Result) -> Result {
  let (sender, receiver) = tokio::sync::oneshot::channel::>();

  self.handle.with_read_aborted(|aborted| {
    if aborted {
      return Err(crate::Error::from_status(Status::Closing));
    }

    check_status!(
      unsafe {
        sys::napi_call_threadsafe_function(
          self.handle.get_raw(),
          Box::into_raw(Box::new(value.map(|data| {
            ThreadsafeFunctionCallJsBackData {
              data,
              call_variant: ThreadsafeFunctionCallVariant::WithCallback,
              callback: Box::new(move |d: Result| {
                sender
                  .send(d.and_then(|d| D::from_napi_value(d.0.env, d.0.value)))
                  .map_err(|_| {
                    crate::Error::from_reason("Failed to send return value to tokio sender")
                  })
              }),
            }
          })))
          .cast(),
          ThreadsafeFunctionCallMode::NonBlocking.into(),
        )
      },
      "Threadsafe function call_async failed"
    )
  })?;
  receiver
    .await
    .map_err(|_| {
      crate::Error::new(
        Status::GenericFailure,
        "Receive value from threadsafe function sender failed",
      )
    })
    .and_then(|ret| ret)
}

可见call_async使用时将引入 Rust 的异步编程，我们可以使用async/await关键字来进行调用，使用方式如下：

#[napi]
pub async fn call_threadsafe_function(callback: ThreadsafeFunction) -> Result {
  let result = match callback.call_async::(Ok(1)).await {
    Ok(res) => res,
    Err(e) => {
      println!("Error: {}", e);
      0
    }
  };
  println!("result: {result:?}");
  Ok(result)
}

此时生成的 JS 函数定义为如下，可以看出callThreadsafeFunction变成了一个异步函数：

export function callThreadsafeFunction(callback: (err: Error | null, value: number) => any): Promise<number>

所以在 JS 中调用方式及输出结果为：

const result = await callThreadsafeFunction((err, value) => {
  return value + 1
})
console.log(result)

// 输出结果
// result: 2
// 2

正确处理 JS 函数的返回值

从前面call_async的实现可以看出，call_async返回的数据，也即 JS 函数返回值需要满足如下泛型约束D: 'static + FromNapiValue，而 napi-rs 默认会为数值、字符串、布尔等基本 JS 数据类型实现FromNpiValuetrait，但是如果我们的 JS 回调想要返回一个对象时，则需要自己手动实现FromNpiValuetrait，这样可以让call_async获取到 JS 返回数据时自动调用FromNpiValuetrait 的from_napi_value方法将 JS 返回数据转换为 Rust 的数据格式，以下是一个简单的示例。

假如需要在 Rust 调用一个 JS 函数，JS 函数会返回一个对象，包含三个字段：

{
  setPageName?: string,
  changeExt?: boolean,
  setSubPkgName?: string
}

我们需要在 Rust 中获取到返回的对象，并转为 Rust 数据，那么首先我们可以定义一个类似的数据结构：

#[derive(Debug)]
pub struct JSReturnObject {
  pub set_page_name: Option,
  pub change_ext: Option,
  pub set_sub_pkg_page_name: Option,
}

同时为它实现FromNpiValuetrait 就可以了：

impl FromNapiValue for JSReturnObject {
  unsafe fn from_napi_value(env: napi_env, napi_val: napi_value) -> Result {
    let obj = JsObject::from_napi_value(env, napi_val)?;
    let mut js_return_object = JSReturnObject {
      set_page_name: None,
      change_ext: None,
      set_sub_pkg_page_name: None,
    };
    let has_set_page_name = obj.has_named_property("setPageName")?;
    let has_change_ext = obj.has_named_property("changeExt")?;
    let has_set_sub_pkg_page_name = obj.has_named_property("setSubPkgName")?;
    if has_set_page_name {
      js_return_object.set_page_name = Some(obj.get_named_property::("setPageName")?);
    }
    if has_set_sub_pkg_page_name {
      js_return_object.set_sub_pkg_page_name = Some(obj.get_named_property::("setSubPkgName")?);
    }
    if has_change_ext {
      js_return_object.change_ext = Some(obj.get_named_property::("changeExt")?);
    }
    Ok(js_return_object)
  }
}

在上述代码中，先调用JsObject::from_napi_value方法将传入数据转为JsObject，然后调用

JsObject的has_named_property方法获取到对应的属性值，经过处理后可以构建出JSReturnObject结构体数据，并进行返回。而使用的时候，为call_async指定泛型参数类型为JSReturnObject，接下来就可以获取到 JS 返回值进行处理了。

let result: JSReturnObject = js_handler
  .call_async(Ok(options.clone()))
  .await
  .with_context(|| format!("模板自定义函数调用失败: {}", file_relative_path))?;

使用 VSCode 进行调试

我们可以使用 VSCode 来调试我们的 napi-rs 应用，我们可以参考Taro 项目，在项目的 .vscode 目录下新增 launch.json 配置如下：

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "lldb", // 调试器类型，这里指定为lldb，通常用于C/C++/Rust等语言
      "request": "launch", // 请求类型，可以是'launch'或'attach'，'launch'表示启动一个新的调试会话
      "name": "debug-init", // 配置名称，显示在VS Code的启动配置下拉菜单中
      "sourceLanguages": ["rust"], // 指定源码语言，此处为Rust
      "program": "node", // 要调试的程序，这里是指Node.js的可执行文件
      "args": [
        // 程序参数，这里指定了使用node运行taro-cli包的初始化命令，创建一个名为test_pro的新项目
        "${workspaceFolder}/packages/taro-cli/bin/taro",
        "init",
        "test_pro"
	  ],
      "cwd": "${workspaceFolder}", // 当前工作目录，这里指工作区根目录
      "preLaunchTask": "build binding debug", // 调试前需要执行的任务的名称，这里指定了一个任务以在调试前构建项目
      "postDebugTask": "remove test_pro" // 调试后需要执行的任务的名称，此处指定了一个任务以在调试后清理或删除test_pro项目
    },
  ]
}

在上述配置中，指定调试器类型为lldb，启动一个新的调试会话来调试我们用 Rust 编写的程序，该程序主要通过 Node.js 来执行一个初始化新项目 test_pro 的命令，在调试开始前后会飞别执行 Rust binding 的构建以及 test_pro 项目的删除。

然后在要调试的代码处添加断点，然后执行调试即可。

调试

构建发布

napi-rs 的项目模板默认基于 Github Action 来实现自动构建产物及发布，并且已经有相当完整的配置了，从Github Action配置文件中可以看到 CI 具体执行的任务，CI 任务首先会执行 package.json 中的构建命令，构建出各个端的 binding，并会actions/upload-artifact@v3action 将构建产物上传，然后会对构建产物执行相关测试，测试通过后会将构建产物下载下来，并执行artifacts命令将构建产物移动到目的文件夹下，最后会进行发布，当 git 提交信息为semver规范版本号时，将会触发 CI 发布，将包发到 NPM 中去。

$ git commit -m '0.0.1'

前面提到我们一般只需要针对x86_64-apple-darwin、aarch64-apple-darwin、x86_64-pc-windows-msvc、x86_64-unknown-linux-gnu这四个平台进行构建，所以我们可以调整 Github Action 配置，去掉不需要构建的平台以提升 CI 速度。

此外，当我们有特殊需求的时候，例如不需要重新生成胶水 JS 代码、需要将构建产物移动到其他目录（默认是当前目录下的 npm 目录）下等等，可以查看@napi-rs/cli的文档进行相应调整。

不需要重新生成胶水 JS 代码，可以通过在napi build命令下添加--no-js实现：

"scripts": {
	...
  "build": "napi build --platform --release --no-js --dts binding.d.ts",
  "build:debug": "napi build --platform --no-js --dts binding.d.ts"
	...
}

需要将构建产物移动到其他目录，可以通过在napi artifacts命令下添加 --cwd 和 --npm-dir 参数来实现，前者指定工作目录，后者指定要移动的目录的相对路径

"scripts": {
	...
  "artifacts": "napi artifacts --npm-dir ../../npm2 --cwd ./",
	...
}

总结

Rust 在前端领域的应用无疑将成为未来的重要发展趋势，随着越来越多的公司和团队开始投入到这一领域，我们看到了 Rust 在前端研发生态构建中的独特优势和潜力，Rust 的高效性和安全性使其成为优化 Node 工具的理想选择。本文简单介绍了如何使用 NAPI-RS 来开发、调试和发布 Node 扩展，可以有效地优化我们的开发工具，并提升其性能。

在未来，我们可以预见 Rust 与前端结合的可能性将会更加广泛。随着 WebAssembly（WASM）的发展，我们可以期待 Rust 将在前端应用的性能优化、复杂应用的开发以及多线程等领域发挥更大的作用。同时，Rust 的出色的内存管理和错误处理机制也将帮助前端开发者构建更加健壮、安全的应用。

当然，Rust 与前端的结合并不仅仅限于性能优化，Rust 的优秀特性，如模式匹配、类型推断和零成本抽象，也为前端开发带来了新的编程范式和思维方式，这将有助于提升前端代码的可读性和可维护性，为前端开发提供了新的思考角度和工具，并可能引领前端开发进入一个全新的阶段。

作者：京东零售 李伟涛

来源：京东云开发者社区 转载请注明来源

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1368289.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【推文】企业级AI问答知识库训练营，火热开营中！

【推文】企业级AI问答知识库训练营，火热开营中！

简介&#xff1a;阿里云人工智能平台PAI【企业AI成长营】系列课程上线&#xff01;第一弹&#xff1a;企业AI问答知识库训练营&#xff0c;手把手带你从入门到实操快速完成知识库搭建&#xff0c;助力企业AI应用落地。 &#x1f4da; 企业AI问答知识库训练营&#xff1a;点击报…
阅读更多...
【习题】应用程序框架

【习题】应用程序框架

判断题 1. 一个应用只能有一个UIAbility。错误(False) 正确(True)错误(False) 2. 创建的Empty Ability模板工程&#xff0c;初始会生成一个UIAbility文件。正确(True) 正确(True)错误(False) 3. 每调用一次router.pushUrl()方法&#xff0c;页面路由栈数量均会加1。错误(Fal…
阅读更多...
综合智慧能源监测管理平台，实现能源管理“透明”化

综合智慧能源监测管理平台，实现能源管理“透明”化

能源问题是全球面临的最大问题&#xff0c;在提高经济增长的同时&#xff0c;也引发了能源供应危机及环境严重等问题&#xff0c;降低能源管理、低碳环保是我们未来发展的必经之路。 为了解决这一问题&#xff0c;智慧能源管理平台应运而生。平台采用微服务架构&#xff0c;整…
阅读更多...
局域网IP地址冲突、环路的罪魁祸首是什么？

局域网IP地址冲突、环路的罪魁祸首是什么？

中午好&#xff0c;我的网工朋友。 这个时代&#xff0c;网络已经贯穿了人们的生活&#xff0c;对企业而言&#xff0c;办公信息化更是离不开网络支持。 为了提高安全管理和信息化水平&#xff0c;很多企业都建立了完善的办公信息系统&#xff0c;但一些企业在网络建设方面还…
阅读更多...
代码随想录算法训练营第二十八天 | 93.复原IP地址、78.子集、90.子集II

代码随想录算法训练营第二十八天 | 93.复原IP地址、78.子集、90.子集II

93.复原IP地址 题目链接&#xff1a;93.复原IP地址 有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0 到 255 之间组成&#xff0c;且不能含有前导 0&#xff09;&#xff0c;整数之间用 . 分隔。 例如&#xff1a;"0.1.2.201" 和 "192.168.1.1"…
阅读更多...
网站如何创建百度地图显示地理位置

网站如何创建百度地图显示地理位置

在做企业网站的时候&#xff0c;我们会放置一个地理位置&#xff0c;我们可以引用百度地图&#xff0c;来显示我们的店铺所在位置 效果演示&#xff1a; 操作步骤 1、打开百度地图https://map.baidu.com/&#xff0c;搜索输入地址 2、点击地址 3、会出现如下视图 4、点击分享…
阅读更多...
typora导出html添加目录

typora导出html添加目录

typora导出html添加目录 使用方法 首先要从typora导出html文件&#xff0c;之后用记事本编辑器html文件 找到文档最后面&#xff0c;如图&#xff1a; 用文字编辑类工具打开sideBar.txt&#xff0c;复制其中所有内容【内容在下面】 在如上图的位置插入所复制的内容 打开修改…
阅读更多...
Linux下安装JET2

Linux下安装JET2

0. 说明&#xff1a; JET2是一个基于Joint Evolutionary Trees的利用序列和结构信息预测蛋白质界面的软件&#xff0c;详情见: http://www.lcqb.upmc.fr/JET2/JET2.html&#xff0c;http://www.lgm.upmc.fr/JET/JET.html 和 https://doi.org/10.1371/journal.pcbi.1004580 本…
阅读更多...
计算机体系结构动态调度（计分板及Tomasulo）学习记录

计算机体系结构动态调度（计分板及Tomasulo）学习记录

1.动态调度核心思想&#xff1a;允许就绪指令越过前方停顿指令&#xff0c;提前进入运行&#xff08;乱序执行&#xff09; 就绪指令指不存在资源冲突、操作数已就绪的指令&#xff0c;例如&#xff0c;计分板算法使用计分板来实现&#xff0c;Tomasulo使用保留站来实现&#…
阅读更多...
白灯和黄灯哪个更保护视力？安利保护视力的护眼台灯

白灯和黄灯哪个更保护视力？安利保护视力的护眼台灯

现代社会&#xff0c;人们的生活和工作都离不开电子产品&#xff0c;长时间面对电脑、手机等设备造成的眼睛疲劳和视力衰退的问题也愈发普遍。为此&#xff0c;护眼台灯应运而生&#xff0c;旨在为用户提供更加舒适、健康的光源&#xff0c;减少对眼睛的伤害&#xff0c;同时提…
阅读更多...
pytorch09：可视化工具-TensorBoard，实现卷积核和特征图可视化

pytorch09：可视化工具-TensorBoard，实现卷积核和特征图可视化

目录 一、TensorBoard简介二、TensorBoard安装三、TensorBoard运行可视化四、TensorBoard详细使用4.1 SummaryWriter4.2 add_scalar()4.3 add_scalars()4.4 add_histogram()4.4.1实际项目开发使用 4.5 add_image()4.6 torchvision.utils.make_grid4.7 卷积核和特征图可视化4.7.…
阅读更多...
IntelliJ IDEA开发工具常规设置、插件、快捷键、Debug和集成工具一篇快速入门

IntelliJ IDEA开发工具常规设置、插件、快捷键、Debug和集成工具一篇快速入门

文章目录 常规设置同步设置快捷键&#xff08;Windows&#xff09;搜索层级关系查看光标选择代码定位代码操作Git操作编辑器操作 Debug操作集成本地Git集成本地Maven集成本地Tomcat实用插件 版本说明&#xff1a; 注意&#xff1a;若和上面的IDEA版本差异较大&#xff0c;可能存…
阅读更多...
第二证券：主力为什么要砸盘？

第二证券：主力为什么要砸盘？

砸盘就是在股票的某个阶段有许多卖出单&#xff0c;这些许多的卖出单不断的成交使股票价格出现快速下跌。一般是受到主力资金洗盘或者出货所影响形成的。 1、洗盘 个股通过长时间上涨之后&#xff0c;盘中的散户较多&#xff0c;主力为了洗掉盘中的散户&#xff0c;在低位吸筹…
阅读更多...
Android性能优化系列——APK包优化

Android性能优化系列——APK包优化

业务功能开发完之后&#xff0c;就需要对App打包了。 有时候明明功能不多&#xff0c;但是包体很大&#xff0c;一是影响上架&#xff0c;二是就几个功能但是很大心里会膈应&#xff0c;于是包体有时候也需要进行优化。同类型的竞品只要40m,你要200M&#xff0c;那我肯定愿意先…
阅读更多...
性能分析与调优: Linux 内存观测工具

性能分析与调优: Linux 内存观测工具

目录 一、实验 1.环境 2.vmstat 3.PSI 4.swapon 5.sar 6.slabtop 7.numstat 8.ps 9.top 10.pmap 11.perf 12.bpftrace 二、问题 1.接口读写报错 2.slabtop如何安装 3.numactl如何安装 4.numad启动服务与关闭NUMA 5. perf如何安装 6. kernel-lt-doc与kern…
阅读更多...
【卡梅德生物】稳定细胞系构建的原理及流程

【卡梅德生物】稳定细胞系构建的原理及流程

稳定细胞株构建的基本原理&#xff1a; 首先改造原始细胞基因组&#xff0c;通过基基因编辑工具&#xff0c;使改造后的细胞拥有某些特定表型&#xff0c;并经过抗性筛选或其他筛选方法&#xff0c;使其表型能够长期稳定传代。 构建稳定细胞株的实验流程&#xff1a; 首先将外源…
阅读更多...
外贸企业建站步骤有哪些？海洋建站怎么做？

外贸企业建站步骤有哪些？海洋建站怎么做？

外贸企业建站平台推荐&#xff1f;做外贸如何搭建贸易网站&#xff1f; 外贸企业要想在激烈的市场竞争中立于不败之地&#xff0c;建立一个专业而吸引人的网站是至关重要的一环。海洋建站将深入探讨外贸企业建站的关键步骤&#xff0c;为您提供一个清晰的指南&#xff0c;助您…
阅读更多...
Spring - 配置支持多数据源

Spring - 配置支持多数据源

目录 SpringBoot整合多数据源整合步骤具体整合步骤如下&#xff1a;1、在application.properties中配置出多个数据源2、在代码中创建出mapper目录&#xff0c;在mapper目录下创建出不同数据源的目录创建出目录MySQL数据源的MapperSQL Server数据源的Mapper 3、创建config packa…
阅读更多...
(N-138)基于springboot,vue在线教育平台

(N-138)基于springboot,vue在线教育平台

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;maven 数据库&#xff1a;mysql5.7 系统分前后台&#xff0c;项目采用前后端分离 前端技术&#xff1a;vueelementUI 服务端技术&#xff1a;springbootmybatis-plusredis…
阅读更多...
vue3 封裝一个常用固定按钮组件（添加、上传、下载、删除）

vue3 封裝一个常用固定按钮组件（添加、上传、下载、删除）

效果图 这个组件只有四个按钮&#xff0c;添加&#xff0c;上传、下载、删除&#xff0c;其中删除按钮的颜色默认是灰色&#xff0c;当表格有数据选中时再变成红色 实现 组件代码 <script lang"ts" setup> import { Icon } from /components/Icon/index im…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023