2

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

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

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

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

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

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

我认为对 COR 的支持将仅限于浏览器的数量。

使用 YQL 会很慢。

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

4

2 回答 2

3

一个想法从我的脑海中浮现。

使用 RequireJS将模板构建到单个文件中。每个模板都将被包装为一个定义模块，并且该模板将被正确地转义为一个字符串。

因为该文件可以.js正常从另一个域加载

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

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

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

如果您还编译了您的 Mustache/Handlebars 模板，它的性能会更高。这是一个包含在定义调用中的已编译 Handlebars 模板的示例。Handlebars 编译器负责输出，然后 RequireJS 构建器将为您将所有输出包含在一个文件中。

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

于 2013-01-31T17:08:27.760 回答
1

我知道我正在尝试回答一个老问题。通过将模板字符串嵌入到静态 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/

于 2013-11-20T18:04:39.863 回答