Question

我有一个拥有大量资产的SPA：

一个JavaScript文件：3Mb
一个样式表文件：几乎1Mb
两种字体：700Kb

通过正常连接，文件可以快速下载，不到3秒。但是你可以想象这种体验对于连接速度慢的用户来说是多么令人沮丧，他可能最终会关闭窗口。

一种解决方案是使用像 Pace 这样的经典预加载器，但这还不够好。

我的解决方案：

我会在大<?php session_start(); if (!isset($_SESSION['login'])) { $_SESSION['login']=0; } ?>文件的不同位置调用一些代码：

script

然后在底部我只是听console.log('progress at 0 %') // at the top // code to update the progress bar console.log('progress at 23 %') // Somewhere else // code to update the progress bar删除进度条。

我的问题：

是否有更好的解决方案，或从所有$(document).ready() {{1获得用户下载了多少和下载多少的方法} ...？

Answer 1

如果你要包含一个较小的内联javascript来引导应用程序的其余部分，你可以使用XHR进度事件。

想象一下这个javascript内联：

var appScript = document.createElement('script')
var xhr = new XMLHttpRequest();
xhr.addEventListener('progress', function (e) {
    var percent = e.loaded / e.total
    console.log('loaded', percent)
    // update loader
})
xhr.addEventListener('load', function () {
    appScript.innerHTML = this.responseText
    document.body.appendChild(appScript)
    // ^ at this point the app javascript will run
})
xhr.open('GET', '/js/app.js')
xhr.send()

这可以让您监控正在加载的应用的进度。

Answer 2

答案：没有更好的（现有）解决方案可以监视文档中所有资源下载进度的准确百分比。

JoshWillik的答案引用了XHR进度事件，它确实提供了可能性，因为可以监视ajax请求（https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress）中资源的实时下载进度。自然地，这将需要初始的，无监控的下载所需资源，这些资源用于发送那些请求，监视，计算和呈现它们的总体进度，并在完成时加载这些资源（或您想要执行的任何操作）。

您还必须考虑涉及服务器配置的众多障碍，媒体类型的差异，将这些类型相对于其他类型以正确的顺序从缓存中加载到页面上，ProgressEvent返回的资源可计算的长度（lengthComputable），实时计算的精确百分比，延迟加载以及现代网站和Web应用程序开发技术中涉及的其他因素的广泛安排。

许多人会认为这种功能违背UX原理，并专注于尽快交付文档和资源（我不反对），但我也希望看到类似的东西也存在。 / p>

A，我们仍然没有喷气背包，飞行汽车或实时进度预载器。

PS我听说过WebSocket在解决此类问题的另一个答案中提到了解决方案，但是我没有时间研究它。另一个想法是利用服务人员。

Gmail就像preloader一样

我的解决方案：

我的问题：

2 个答案: