依赖于缓慢加载javascript的UI

我为某个页面编写的所有脚本都正在连接/优化（requireJS）到一个文件中。目前，根据浏览器和网络连接，我的脚本需要一段时间才能加载，因为它的容量约为0.5 MB

在我的一个主要登录页面上，用户被引导到其中一个页面，我有一些依赖于该脚本的交互（例如，一个按钮，我们称之为“单击我按钮”）——事件处理程序等。换句话说，在下载并加载脚本之前，该按钮不起任何作用：例如，一个空的

href

目前，如果在旧浏览器或慢速连接上进行测试，用户可能会在脚本加载完成之前看到全部或大部分DOM，包括“click me button”。因此，在点击此按钮时会出现延迟（有时长达几秒钟），根本不起任何作用

我想知道：

是否有一种方法可以设计这个，这样我就可以消除按钮显示到可点击之间的延迟（通过JS交互）。请记住，此页面的所有脚本都连接到一个文件中。我总是可以尝试缩小文件的大小，但这仍然感觉不对，因为理论上总是可能存在延迟

在我的描述中，是否还有其他不受欢迎的架构。比如给按钮一个默认的、不依赖js的行为，这样如果用户立即点击它，就会发生一些事情——这也让人觉得有点奇怪，因为根据用户点击按钮的速度，会有两种不同的行为

---

一个可能的解决方案是使用单独的JS函数隐藏有问题的按钮，直到相关的较大JS文件加载完毕。在特定按钮DIV上使用类似on.load（'yourjsfile'）命令和隐藏的css类

   onload=function() {

     document.getElementById('BUTTON').className='visible';
}

您也可以考虑将问题中的JS函数分离，并在DOM准备就绪时立即加载它。document.ready，以保证在后台加载其他UI和JS功能时，此特定功能可用

---

从你的描述中不确定，如果在你的特定情况下，这些都是可行的，但我会考虑的。另外，您是否缩小了所讨论的网页/CSS/JS代码以帮助缩短加载时间？您的文件大小似乎很大，您是否包括不需要的公共图书馆？

我在我的应用程序中有相同的情况，我在登录页上向用户显示一个按钮以登录。但是这个按钮还不能使用，因为JS还没有下载。我只需在用户点击按钮时显示一个掩码，表示应用程序正在初始化，并等待文件下载，然后在文件中隐藏掩码（无论是否在前面显示）

对于您的情况，我又添加了一个标志（全局变量），表示是否单击了按钮。在用户单击按钮时设置该标志，然后在下载的文件中使用该标志检查用户是否单击了按钮，然后在单击按钮时执行您想执行的任何操作

在您的

index.html

    var initializationComplete = false;
    var buttonClicked = false;
    function doStuff() {
        if (!initializationComplete) {
            showMask('Initializing App...'); 
            buttonClicked = true;
        }
    }
    document.getElementById('click-me-button').onclick = doStuff;

    function showMask(textToShow) {
        var mask = document.getElementById('mask')
        mask.style['z-index'] = 32767;
        mask.style['display'] = "";
        mask.innerHTML = textToShow;
    }
    function hideMask() {
        var mask = document.getElementById('mask')
        mask.style['z-index'] = 0;
        mask.style['display'] = "none";
        mask.innerHTML = "";
    }

在你的脚本中，在它准备好做这些事情之后

    hideMask();
    initializationComplete = true;
    if(buttonClicked){
         buttonEventHandler();
    }

    function buttonEventHandler(){
       //Do button click stuff here
    } 

---

一个脚本的500kB相当大。。。您不能将CDN用于公共库吗？这样，如果它被用户访问的另一个站点使用，它将位于用户的缓存中，无需再次下载。至于按钮：只需用一个可以作为链接的表单包装它，然后用脚本禁用它即可。简单的解决方案：默认情况下，在页面加载之前隐藏所有内容，然后公开交互内容。@MarcB它很简单，但对于禁用JS的用户来说并不可靠（如果OP甚至关心他们，我不这么认为）@blex我同意文件的大小。但是，即使我将按钮包装在表单中并通过JS禁用它（这是我现在正在做的事情），用户是否仍有可能在脚本加载完成之前单击按钮并提交表单（不需要），同步脚本设置“预加载”状态，并让大型异步脚本设置“后加载”状态。我已缩小了文件。但是你是对的，我现在有很多多余的库，这些库是相关页面不需要的；所以这是可以重构的。然而，这仍然让我感到不安，因为无论我制作的脚本有多小，仍然有可能单击按钮而不产生任何效果（如果脚本由于任何原因加载缓慢）。也许我所能做的就是优化，直到它大部分时间都能快速加载。从用户体验的角度来看，在脚本加载之前隐藏按钮是不可行的。@Jke如果使用内联css（例如：

）隐藏按钮，它将很快被隐藏，用户无法看到它。然后，在加载时用JS将其显示出来。@blex抱歉，我可能没有正确解释：我的意思是，从用户体验的角度来看，这是不可行的，因为用户看到页面上突然出现按钮（想想主页顶部的一个大注册按钮）是没有意义的。我确实知道它在技术上是可以实现的，但我认为它的用户体验并不好。@Jke哦，好吧，我没明白。很多重磅网站在内联CSS中隐藏主要内容，显示加载动画（图像或CSS），并在加载JS时显示所有内容。我想当你删除任何无关库时，你会惊讶于性能的提高。如果你更进一步，让公共服务从一个公共位置提供，当用户从另一个使用它的站点缓存这些服务时，你将减少负载。在大多数情况下，用户可能无法在加载JS之前单击该按钮。不过，正如我所说的，我了解你的用户体验，我不确定你的具体情况。只是扔掉了一些在