如何控制 Xpages 主题中 JS 和 CSS 文件的顺序以获得更好的性能和特殊文件，如 Handlebars 和 Less答案

【问题标题】：How to control the order of JS and CSS files in Xpages themes for better performance and especial files like Handlebars and Less如何控制 Xpages 主题中 JS 和 CSS 文件的顺序以获得更好的性能和特殊文件，如 Handlebars 和 Less
【发布时间】：2014-01-13 19:29:09
【问题描述】：

我想知道是否有办法控制 XPages 主题或自定义控件中的 css 和 js 资源顺序。两个原因：

1.性能：众所周知，当您将 js 文件放在结束 body 标记之前时，用户的渲染速度会更快（link）。我可以在 Xpage 或自定义控件的底部放置一个 script 标记，但如果这样做，我将失去使用resource 标签，然后检查 Application > Properties > Xpages > Performance > Use runtime optimization Javascript 和 CSS 资源（在后一种情况下，js 文件是放在head标签中）。

2。 Handlebars 和 Less 之类的库：使用资源标签我可以使用 content-type text/css 或 application/x-javascript 添加 js 和 css，但使用类似的库Handlebars and Less（真正有用的库）我需要不同的内容类型或属性。

这个问题主要是关于性能的，因为它已经在这样的自定义控件中使用链接和脚本标签工作了：

车把：

<script id="entry-template" type="text/x-handlebars-template">
  template content
</script>

减：

<link rel = "stylesheet/less" type="text/css" href="css/styles.less" />
<script src = "js/vendor/less-1.6.0.min.js" type="text/javascript" ></script>

...但我觉得有点脏:)

【问题讨论】：

标签： optimization less httprequest xpages handlebars.js

【解决方案1】：

如果可能，请尝试为您的 JavaScript 库使用非阻塞模式。这应该可以防止性能问题：

<script>
   var s = document.createElement("script"),
   t = document.getElementsByTagName("script")[0];

   s.src="js/vendor/less-1.6.0.min.js";       
   t.parentNode.insertBefore(s, t);
</script>

编辑：

<xp:script clientSide="true" type="text/x-handlebars-template" contents="template content">
   <xp:this.attrs>
      <xp:attr name="id" value="entry-template" />
  </xp:this.attrs>
</xp:script>


<xp:linkResource type="text/css" href="css/style.less" rel="stylesheet/less" />

【讨论】：

感谢您的回答。我试图找到一种“服务器端方式”。你的建议似乎很有趣，但是，在客户端，我会想到require.js 或curl.js。您认为您对 document.createElement("script") 的建议与这些库相比有什么优势吗？
@JohannEchavarria：我已经用两个服务器端示例更新了我的答案。非阻塞模式的优点是浏览器在加载 JS 库时不会被阻塞（同时最多限制 2 个）。页面先加载，给用户更好的体验（加载过程中我们可见的页面）