JavaScript UI,requirejs和未样式化内容的闪烁

我目前正在使用requirejs主要是由于其资源加载器.我喜欢它管理后备方式的方式.

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

直到我开始使用requirejs之前,我什至都不知道FOUC是什么.它非常引人注目,因此目前我避免使用：

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

这是我所拥有的最好的,并且我发现的所有与该主题有关的在线资源都对这些内容提出了建议.

我的问题是,考虑到我所说的脚本仅影响用户界面,
这是值得吗？正如我所说,我想继续使用其资源后备系统,但是整个“ 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>

在main.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']);

解决方法:

之所以对剧本“右/前” /“正文”之类的原因表示敬意.是因为它们阻止了解析.

这很不好,特别是考虑到您的用例,在这种情况下,页面上可能有很多内容需要等待解析和呈现,而不是通过Javascript包含的内容.

最后包含脚本允许直接包含在HTML中的所有内容轻松地解析和呈现,而无需等待任何脚本(及其整个请求->解析->执行周期).

但是,此策略存在问题.那就是在您的身体末端堆积脚本标签,这不允许进行良好的(任何？)依赖管理.这是创建requirejs的主要原因之一(除其他目的外,例如代码封装,版本控制/后备,模板插件等).

您正在将requirejs用于有效目的,否则将很难管理,因此,我肯定会说在这种情况下requirejs是“值得的”.

至于您对“ FOUC修补程序”的评论似乎适得其反,我不确定您为什么会这样认为.考虑一下补丁为您提供的功能：平滑加载的UI和不受阻碍的HTML.将阻塞脚本扔到头部肯定是一个有效的决定,但前提是页面上的大多数内容都取决于尽快加载它们.很少有这种情况(实际上是在演示/开发用途之外的一种反模式).

考虑用户体验,特别是考虑某些老化的智能手机的慢速连接/慢速JS解析/执行速度.而不是让这些用户在空白屏幕上停留3-5秒,而是异步加载使您可以感觉到的加载时间要快得多.然后,当脚本最终可用时,UI铃声就会与您的FOUC补丁一起显示.

因此,您可以使用异步脚本提供看似快速的页面加载,并在加载时使用JS进行增强,而同时通过requirejs获得依赖关系管理/智能资源回退.听起来不错.

标签：jquery-ui,requirejs,fouc,javascript
来源： https://codeday.me/bug/20191030/1968022.html