前端资源加载指南

织梦js文件引入正确写法

织梦模板里引入 JS 看似简单，写不对就会出现 404、加载顺序错乱、甚至把整站拖慢。常见错误包括路径写死成绝对路径导致换域名失效、把脚本堆在 head 里阻塞渲染、用织梦标签拼接路径语法错误等。本文把正确写法和常见坑讲清楚。

一、JS 路径的两种写法

1. 织梦全局变量写法（推荐）

<script src="{dede:global.cfg_cmspath/}/js/main.js"></script>

{dede:global.cfg_cmspath/} 是织梦的全局路径变量，输出站点的根路径。优点是换域名、装子目录都不用改模板，自适应性强。

2. 绝对路径写法

<script src="/js/main.js"></script>

以 / 开头表示从站点根目录开始。简单直接，但站点装在子目录（如 /cms/）时会 404。仅适合确认站点根目录部署的场景。

3. 相对路径写法（不推荐）

<script src="../js/main.js"></script>

相对路径依赖当前页面的 URL 层级。织梦生成的静态页层级不固定（首页、列表页、文章页深度不同），相对路径会失效，强烈不推荐。

二、引入位置：head 还是 body

放 head 里

<head>
  <script src="{dede:global.cfg_cmspath/}/js/jquery.min.js"></script>
</head>

放在 head 会阻塞页面渲染，浏览器要等 JS 下载执行完才继续解析 HTML。只对必须提前执行的脚本（如现代izr、关键 polyfill）这么做。

放 body 结尾（推荐）

<body>
  <!-- 页面内容 -->
  <script src="{dede:global.cfg_cmspath/}/js/main.js"></script>
</body>

放在 </body> 之前，页面先渲染完再加载 JS，用户能更快看到内容。绝大多数业务脚本都该放这里。

三、defer 与 async 的正确使用

如果脚本必须放 head，用 defer 或 async 避免阻塞：

<!-- defer：等HTML解析完，按顺序执行 -->
<script defer src="{dede:global.cfg_cmspath/}/js/main.js"></script>

<!-- async：下载完立即执行，不保证顺序 -->
<script async src="{dede:global.cfg_cmspath/}/js/ads.js"></script>
  • defer 适合有依赖关系的脚本，按引入顺序执行
  • async 适合独立脚本，如统计代码、广告代码
  • 两者都不阻塞 HTML 解析

四、织梦模板里用 PHP 输出路径

如果路径需要动态拼接（如带版本号），用 PHP：

<?php
$cmspath=$GLOBALS['cfg_cmspath'];
$js_ver=filemtime(DEDEROOT.'/js/main.js');
?>
<script src="<?php echo $cmspath; ?>/js/main.js?v=<?php echo $js_ver; ?>"></script>

这样既走织梦的路径变量，又能自动加版本号防缓存。

五、常见错误写法

1. 把织梦标签写进 JS 文件里

// main.js 里写
var url="{dede:global.cfg_cmspath/}/api.php";  // 错误！

JS 文件是静态资源，不经过织梦模板引擎解析，里面的 {dede:} 标签不会被替换，会原样输出。正确做法是在 HTML 里用 data-* 属性传值：

<script src="main.js" data-cmspath="{dede:global.cfg_cmspath/}"></script>
<!-- main.js 里 -->
var cmspath=document.currentScript.dataset.cmspath;

2. 引入 jQuery 重复

织梦部分模板自带 jQuery，再手动引入一次会冲突或重复加载。引入前先 grep 模板文件确认是否已有 jQuery。

3. 路径用了模板目录前缀

<!-- 错误：把 JS 放模板目录里再引用 -->
<script src="{dede:global.cfg_templets_skin/}/js/main.js"></script>

cfg_templets_skin 是模板皮肤目录，JS 放这里虽能用，但不利于浏览器缓存和 CDN 加速。JS/CSS 建议放在站点根的 /js/ /css/ 目录，与模板解耦。

六、动态加载 JS 的场景

有些 JS 只在特定页面需要（如文章页的评论组件），不必全站引入。可以按页面判断：

{dede:field name='typeid' runphp='yes'}
if(@me==5){  // 只在 typeid=5 的栏目加载
  @me='<script src="/js/comment.js"></script>';
} else {
  @me='';
}
{/dede:field}

或用 field.aid 判断是否文章页。

七、注意事项

  • JS 文件保存为 UTF-8 无 BOM，含中文的脚本有 BOM 会报语法错误
  • 引入第三方 JS（如统计、分享）尽量用 async，避免拖慢首屏
  • 开发期关闭 JS 压缩，上线用工具压缩减小体积
  • CSP 安全策略严格的站点，外链 JS 要在 script-src 白名单里
  • 移动端慎用大体积 JS，首屏 JS 总量建议控制在 100KB 以内（gzip 后）

引入 JS 的写法直接影响页面加载性能和后续维护成本。建议把全站公共脚本统一在 head.htm 用 defer 引入，页面级脚本在对应模板底部按需加载，配合版本号机制保证更新生效。这套规范确立后，前端资源管理会清晰很多。