如何在React加载前运行JS脚本，IE浏览器环境下不渲染React应用

方案1：在index.html中前置检测（最优，性能最好） #

这个方案优势是不需要加载任何React相关资源，检测不通过直接返回提示，节省带宽，执行时机最早，完全不会触发React的渲染逻辑。
你直接把检测脚本内联写在index.html中所有React相关资源引入的前面即可，示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>你的应用</title>
  <!-- 其他meta、样式等资源 -->
  <script>
    function isBrowserSupported() {
      const userAgent = window.navigator.userAgent
      // 检测所有IE版本
      return !userAgent.includes('MSIE ') && !userAgent.includes('Trident/')
    }
    if (!isBrowserSupported()) {
      // 直接渲染提示内容，不需要操作react-root节点
      document.body.innerHTML = '<h1 style="text-align: center; margin-top: 100px;">当前浏览器不受支持，请更换Chrome、Edge、Firefox等现代浏览器访问</h1>'
      // 阻止后续所有脚本执行，不会加载React相关资源
      throw new Error('浏览器不支持，终止脚本加载')
    }
  </script>
</head>
<body>
  <div id="react-root"></div>
  <!-- React的入口脚本、第三方依赖脚本都放在检测脚本后面 -->
  <script type="text/javascript" src="/static/js/main.xxxx.js"></script>
</body>
</html>

这个方案完全不需要额外引入detectUnsupportedBrowsers.js文件，内联脚本执行优先级最高，一旦检测到IE，直接重写body内容抛错终止后续脚本加载，根本不会触发React的任何逻辑，比原有删节点的方式规范很多。

方案2：在React入口文件中检测（适合需要自定义提示UI的场景） #

如果你需要更复杂的提示样式，或者要统一管理逻辑，可以在React的入口渲染逻辑之前做检测，检测不通过直接渲染提示内容，不挂载React应用即可，示例（以React 18为例）：

// index.js 入口文件
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

function isBrowserSupported() {
  const userAgent = window.navigator.userAgent
  return !userAgent.includes('MSIE ') && !userAgent.includes('Trident/')
}

const root = document.getElementById('react-root')

if (!isBrowserSupported()) {
  // 直接把提示内容写入root节点，不需要删节点
  root.innerHTML = '<h1 style="text-align: center; margin-top: 100px;">当前浏览器不受支持，请更换现代浏览器访问</h1>'
} else {
  // 只有浏览器支持的情况下才渲染React应用
  ReactDOM.createRoot(root).render(<App />)
}

这个方案的优势是可以复用React项目里的样式变量、组件等，提示内容可以做的更丰富，执行时机也在React渲染之前，不会有多余的渲染开销。

原有实现的优化点 #

你原来代码里用的removeNode()是IE专属的非标准API，在Chrome、Firefox等现代浏览器里会报错，建议替换成标准的remove()方法。

内容的提问来源于stack exchange，提问作者nerogatonevoso