JavaScript UI, requirejs and the Flash Of Unstyled Content

我目前正在使用requirejs，主要是因为它的资源加载器。我喜欢它管理回退的方式。

我的javascript应用程序一点也不复杂，只是一些jQuery UI小部件和其他小的调整。

什至不知道FOUC是什么，直到我开始使用requirejs。这很明显，所以目前我正在避免它：

var protect_from_FOUC = function(element) {
    if(typeof element === 'string') {
        element = document.querySelector(element);
    }
    element.classList.add('ui-helper-hidden');
};
<div id="main" class="main_block" role="main">
<!-- a block affected by FOUC -->
</div>
<script>protect_from_FOUC('#main');</script>

在我的脚本中：

require(['jquery', 'jquery-ui' /*, ...*/], function($) {
var recover_from_FOUC = function(element) {
    $(element).show({
        effect: 'blind',
        duration: 200
    }).removeClass('ui-helper-hidden');
};
$(document).ready(function() {
    // Themed buttons:
    $(':button, :submit, :reset, .button').button();
    // ... Some other similar changes
    recover_from_FOUC('#main');
});  // document.ready
});  // require

这是我拥有的最好的，我发现的所有关于该主题的在线资源都推荐了类似的东西。

我的问题是，考虑到我谈论的是仅影响 UI 的脚本，需求值得吗？正如我所说，我想继续使用其资源回退系统，但整个"FOUC 修补的东西"似乎适得其反......

每个jQuery UI示例都包含脚本，但互联网上的每个人都建议在关闭正文或使用异步加载器之前包含脚本。此建议是否仅适用于"非 UI"脚本？

在这种情况下，什么是最好的？

请注意，即使接近，这不仅仅是另一个"如何避免FOUC问题"。

编辑：添加我的页面和require.config中包含的外部文件：

<!-- This is in my head right below the meta tags and exactly in this order -->
<link rel="shortcut icon" href="images/favicon.ico"/>
<!-- Keep before the site css to allow overriding jquery's style -->
<link rel="stylesheet" href="style/lib/jquery-ui/ui-lightness/jquery-ui.css"/>
<link rel="stylesheet" href="style/lib/chosen/chosen.css"/>
<link rel="stylesheet" href="style/lib/icheck/minimal/yellow.css">
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/style.css"/>
<!-- Here I have the definition of `protect_from_FOUC` in an inline script -->
<script data-main="js/main" src="js/lib/require.js"></script>

主要.js：

require.config({
    paths: {
        // Common:
        'jquery': ['//code.jquery.com/jquery-2.0.3.min', 'lib/jquery'],
        'sugar': ['//cdnjs.cloudflare.com/ajax/libs/sugar/1.3.9/sugar.min', 'lib/sugar'],
        // UI:
        'jquery-ui': ['//code.jquery.com/ui/1.10.3/jquery-ui.min', 'lib/jquery-ui'],
        'autosize': ['//cdnjs.cloudflare.com/ajax/libs/autosize.js/1.17.1/autosize-min', 'lib/jquery.autosize'],
        'chosen': ['//cdnjs.cloudflare.com/ajax/libs/chosen/0.9.15/chosen.jquery.min', 'lib/chosen.jquery'],
        'icheck': ['lib/jquery.icheck'],
        // django i18n:
        'gettext': [translations_url + '?noext']
    },
    shim: {
        'jquery-ui': {
            deps: ['jquery']
        },
        'autosize': {
            deps: ['jquery']
        },
        'chosen': {
            deps: ['jquery']
        },
        'icheck': {
            deps: ['jquery']
        }
    }
});
require(['style', 'interaction']);