为何浏览器解析HTML时仍处理text/plain类型的大体积script标签？

你遇到的问题本质是：哪怕给script标签设了非可执行的type，浏览器在解析HTML时还是会读取并处理script内部的大文本内容，导致页面加载阻塞。下面给你几个本地离线可用的可靠方案，能让浏览器在初始解析阶段完全跳过这些数据块：

首选方案：使用<template>标签 #

<template>是HTML5专门用来存储惰性内容的标签，浏览器在初始解析HTML时，只会识别这个标签本身，完全不会处理其内部的任何内容——既不会渲染，也不会解析文本，只是把内容原封不动地存起来，完全不阻塞页面解析流程。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test OBJ</title>
</head>
<body>
    <template id="large-3d-data">
        <!-- 直接把150MB的3D点数据放在这里 -->
    </template>
    <h3>这个标题打开页面就会立刻显示</h3>
    <script>
        // 等页面加载完成后，再按需读取数据
        const rawData = document.getElementById('large-3d-data').content.textContent.trim();
        // 后续处理数据的逻辑...
    </script>
</body>
</html>

这个方案的优势是：原生支持、无兼容性问题（现代浏览器都支持），数据存储安全，不会因为内容里有特殊字符（比如<、>）导致HTML解析出错。

备选方案：用注释块包裹数据 #

如果你的数据里绝对不会出现-->这个字符串，可以直接用HTML注释把大量数据包起来。浏览器解析时会跳过注释内容，不会花费时间处理里面的文本。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test OBJ</title>
</head>
<body>
    <!-- 3D数据开始
    150MB的3D点数据...
    3D数据结束 -->
    <h3>这个标题打开页面就会立刻显示</h3>
    <script>
        // 读取注释内容的示例
        const comments = Array.from(document.body.childNodes).filter(node => node.nodeType === Node.COMMENT_NODE);
        const rawData = comments.find(comment => comment.textContent.includes('3D数据开始')).textContent.trim();
        // 后续处理数据的逻辑...
    </script>
</body>
</html>

注意：如果数据里存在-->，会导致注释提前结束，泄露部分内容到HTML中，可能引发解析错误，所以这个方案只适合内容可控的场景。

为什么之前的script标签方案不行？ #

不管给script标签设置什么非可执行的type（比如text/plain），浏览器在解析HTML时，还是会把script内部的内容当作文本节点读取和解析——虽然不会执行脚本，但读取150MB的大文本本身就会占用大量解析时间，导致页面阻塞。而<template>和注释块则是让浏览器直接跳过内容处理，从根源上解决阻塞问题。

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