你有没有遇到过这种情况：打开一个网页，内容半天出不来，先看到一片空白，等几秒后文字和图片才突然“蹦”出来？尤其在网速一般的时候更明显。这背后，很可能就是模块化脚本在“作怪”。
什么是模块化脚本
现代网页开发流行把JavaScript代码拆成一个个小文件，比如登录逻辑一个文件，轮播图一个文件，数据请求一个文件。这种写法叫模块化，用 import 和 export 来连接它们。开发时清爽，维护也方便。
但问题来了——浏览器要等这些模块一个个下载、解析、执行完，才能继续渲染页面。如果主内容依赖某个还没加载完的脚本，页面就得干等着。
HTML渲染被“卡住”的真实场景
想象你点进一个新闻页，页面结构其实早就下载好了，但正文区域始终空白。查看开发者工具发现，是因为一个用户行为统计的JS模块放在了 <head> 里，而且是同步加载。虽然这个脚本和内容展示毫无关系，但它硬生生把后续渲染拦下了。
更隐蔽的情况是动态导入。比如这样：
document.addEventListener('DOMContentLoaded', async () => {
const renderer = await import('./renderModule.js');
renderer.renderPage(data);
});看起来没问题，等DOM加载完再渲染。可用户看到的就是白屏直到所有资源就绪。对不熟悉技术的普通人来说，只会觉得“网站卡、不好用”。
安全风险不止于体验
模块越多，外部依赖越复杂。你引入一个轮播插件，它可能又依赖三个别人写的模块。其中一个被植入恶意代码，你的页面就可能被用来挖矿或跳转钓鱼页。去年就有案例，某个流行UI库的子模块被篡改，导致上百个网站中招。
还有种情况是CDN模块失效。你用了公共CDN上的模块，结果服务商出问题，脚本加载失败。整个页面交互瘫痪，甚至内容都无法展开。这不仅是体验问题，更是潜在的信息访问障碍。
怎么平衡模块化与可用性
不是说模块化不好，而是要用得聪明。关键内容对应的脚本尽量内联或提前加载，非核心功能延迟加载。比如评论区模块可以等主文章出来后再拉。
使用 async 或 defer 属性也很重要：
<script type="module" src="main.js" defer></script>这样脚本不会阻塞HTML解析，页面能更快呈现。再配合服务端渲染或静态生成，用户看到内容的速度会明显提升。
普通用户或许不懂代码，但能感知到“这个网站反应快”或“总要等”。作为开发者，别让技术便利变成用户体验的负担，更别给安全漏洞留后门。