真正的胡子.js或车把.js具体问题,但如果您尝试优化 Web 应用程序的性能加载模板,这两个框架都会遇到此问题。
现在,我正在从与应用程序其余部分相同的域加载模板,但如果可能的话,我想从CDN加载模板。 最大的问题是我无法跨浏览器无法通过 AJAX 加载文本文件。
我还可以尝试哪些其他方法来优化跨域单个模板的加载时间?
我一直致力于优化加载顺序(工作)
在头部将模板作为 xDomain 脚本文件加载(失败)
<script type='text/html' src="http://domain.cdn.com"></script>
我认为 COR 支持将仅限于浏览器的数量。
使用 YQL 会很慢。
我可以以某种方式做JSONP所做的,但是使用XML,XHTML或HTML,显然没有javascript回调吗? 也许模板的末尾可以有一个小的回调函数,但我不想包装整个东西,需要将其转义为 json。
一个想法从我的头顶上消失。
使用 RequireJS 将模板构建到单个文件中。每个模板都将包装为定义模块,并且模板将作为字符串正确转义。
因为文件将被.js
所以它可以正常地从另一个域加载
因此,如果文本插件确定对资源的请求是 在另一个域上,它将尝试访问".js"版本的 资源,使用脚本标记。允许脚本标记 GET 请求 跨域。资源的.js版本应该只是一个 包含 define() 调用的脚本,该调用返回模块的字符串 价值。
示例:如果资源是"text!example.html",并且解析为 路径 在另一个 Web 域上,文本插件将执行脚本标签加载 对于"示例.html.js"。
https://github.com/requirejs/text#xhr-restrictions
如果您还编译了胡须/车把模板,它将更加高性能。下面是包装在定义调用中的已编译 Handlebars 模板的示例。Handlebars编译器负责输出,然后RequireJS构建器会将所有这些输出包含在一个文件中。
同样,没有尝试过此解决方案,但可能会使您走上正确的轨道。
我正在尝试回答一个老问题..通过在静态HTML文档中嵌入模板字符串,包装在属性类型="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/