2025/08/25-2025/08/31

上周有点拖延，有点懒。这个星期得加油了。

Javascript沙盒的可行方法

iframe 这是浏览器自带的沙盒隔离方式。
porxy 这是微前端实现的沙盒的最佳方式了，之前项目实现的微前端改造就是使用该方式。
snapshot 这是微前端早期的一种方案，就是通过给window打快照，子应用卸载时重新恢复。但是这种如果子应用太多就不行了。
web worker webWorker 也算一种方式因为它跑在独立的线程上。但是很多API不可访问，例如DOM对象，通讯只能通过possmessage.
SES SES好像是Js一个特性并且还在提案中，了解即可。
ShadowRealm ShadomRealm是一个还在提案阶段的API，但是它简单易用，完全的上下文隔离，对ES Module的良好支持。期待提案完成。
AST Parser AST 相当于基于浏览器JavaScript解释器上层又构造了一个解释器子集，这也是一种可行的办法。
JavaScript in WebAssembly wasm也算是一种沙盒隔离的方案，因为它的运行与外部隔离，但是只能做运算，无法操作DOM。
Async Import 其实并不算是一种沙盒方案。
NodeJSVm Nodejs自带了vm模块，可以提供一个隔离的上下文环境，比eval的安全性要高很多，不过由于共享主进程，有可能会有逃逸的情况，

资料：

https://juejin.cn/post/7500636349087924261

网页截图的三种方式

html2canvas
snapdom
html-to-image 三者核心实现都是利用了svg的foreignObject标签，把截图目标节点渲染到该标签上然后再通过canvas画出来。

资料：

常见的404页面配置方式

spa页面，由路由匹配

// vue
const routes = [
  // 将匹配所有内容并将其放在 `route.params.pathMatch` 下
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
]

// react 
export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />

        {/* 兜底匹配：必须放在最后 */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

ssr/同构服务（nextjs nuxtjs）

// app/not-found.tsx
export default function NotFound() {
  return <h1>404 - Not Found</h1>;
}

// app/blog/[slug]/page.tsx
import { notFound } from "next/navigation";

export default async function Page({ params }) {
  const post = await getPost(params.slug);
  if (!post) notFound(); // 自动触发 404 页面和状态码
  return <Article post={post} />;
}

node/Express

// 兜底处理：放在所有路由后面
app.use((req, res) => {
  res.status(404);

  // SSR 页面
  res.render("404", { url: req.originalUrl });

  // 如果是 API
  // res.json({ error: "Not Found", path: req.originalUrl });
});

服务端由nginx配置

# 真实 404（例如 /assets/ 下未命中）
  error_page 404 /404.html;
  location = /404.html { internal; }

swc esbuild是什么

swc是使用Rust编写的编译器，目标是取代Babel。而esbuild的定位是构建工具 + 打包器，能够编译打包JS CSS 输出ESM CJS 支持tree shaking 压缩，本地服务器观察文件变更。

资料：

其他

关注“技术K记”公众号，不定时更新日志。

2025/08/25-2025/08/31 ​

Javascript沙盒的可行方法 ​

网页截图的三种方式 ​

常见的404页面配置方式 ​

swc esbuild是什么 ​

其他 ​

2025/08/25-2025/08/31

Javascript沙盒的可行方法

网页截图的三种方式

常见的404页面配置方式

swc esbuild是什么

其他