Question

这不是真正的Mustache.js或Handlebars.js特定问题，但如果您尝试优化Web应用程序的性能加载模板，这两个框架都会出现此问题。

现在我正在从与应用程序的其余部分相同的域中加载模板，但是如果可能的话，我想从CDN加载我的模板。最大的问题是，我无法跨浏览器无法通过AJAX加载文本文件。

我可以尝试哪些其他方法来优化跨域的单个模板的加载时间？

我一直致力于优化负载顺序（工作）

将模板作为xdomain脚本文件加载到头部（失败）

<script type='text/html' src="http://domain.cdn.com"></script>

我认为CORs支持仅限于浏览器数量。

使用YQL会很慢。

我可以以某种方式做JSONP的工作，但使用 XML ， XHTML 或 HTML ，显然没有javascript回调？也许模板的结尾可能有一个小的回调函数，但我不想包装整个东西，需要将它作为json转义。

Answer 1

我的头脑中有一个想法。

将RequireJS用于build the templates into a single file。每个模板都将作为定义模块包装，模板将作为字符串正确转义。

由于该文件为.js，因此可以从其他域正常加载

因此，如果文本插件确定对资源的请求是   在另一个域上，它将尝试访问“.js”版本的   资源使用脚本标记。允许脚本标记GET请求   跨域。资源的.js版本应该只是一个   在其中调用define（）的脚本，它返回模块的字符串   值。

示例：如果资源是'text！example.html'并且解析为a   在另一个web域上的路径，文本插件将执行脚本标记加载   对于'example.html.js'。

https://github.com/requirejs/text#xhr-restrictions

如果您还compiled your Mustache/Handlebars templates，那将会更高效。这是an example of a compiled Handlebars template wrapped in a define call。 Handlebars编译器负责输出，然后RequireJS构建器将所有这些包含在一个文件中。

同样，没有尝试过这个解决方案，但可能会让你走上正轨。

Answer 2

我知道我正在尝试回答一个老问题。通过将模板字符串嵌入到静态HTML文档中，包含在具有属性type =“text / x-handlebars-template”的元素中，这是非常可行的。这被称为微模板。由于type属性，浏览器不会尝试执行脚本。例如 -

<script id="list-template" type="text/x-handlebars-template">
    <p>YUI is brought to you by:</p>

    <ul>
        {{#items}}
            <li><a href="{{url}}">{{name}}</a></li>
        {{/items}}
    </ul>
</script>

完成后，我们必须编译然后渲染它传递数据对象。

<script>
YUI().use('handlebars', 'node-base', function (Y) {
// Extract the template string and compile it into a reusable function.
var source   = Y.one('#list-template').getHTML(),
    template = Y.Handlebars.compile(source),
    html;

// Render the template to HTML using the specified data.
html = template({
    items: [
        {name: 'pie', url: 'http://pieisgood.org/'},
        {name: 'mountain dew', url: 'http://www.mountaindew.com/'},
        {name: 'kittens', url: 'http://www.flickr.com/search/?q=kittens'},
        {name: 'rainbows', url: 'http://www.youtube.com/watch?v=OQSNhk5ICTI'}
    ]
});

// Append the rendered template to the page.
Y.one('body').append(html);

}）;

有关详情，请参阅此处 - http://yuilibrary.com/yui/docs/handlebars/

加载Mustache.js / Handlebars.js模板跨域或CDN的最佳实践

2 个答案: