如何仅使用 JS 获取页面的加载大小
How to get the loaded size of a Page using only JS
我想在我的网站加载时构建一个加载栏。
要做到这一点，我需要知道如何获取整个文件大小 必须加载并且实际文件大小 已经加载，为此我想使用只有 JS.
这将是比值得做的更多的工作。
为了让您的网站显示进度条，它必须已经加载了显示进度条所需的代码——到那时您不再需要进度条，因为该网站已经已加载。
理论上，您可以让您的站点首先加载启动画面，该画面仅用于通过 AJAX 调用加载实际网站并显示进度条。该初始屏幕必须 check the Content-Length header of each file to be downloaded (though not all servers report this accurately; some always return "0"), and then poll the XHR "progress" event 来计算已经下载了多少。最后，一旦所有必要的文件都下载完毕，您就必须 bootstrap 显示实际站点 -- 我 认为 只要它们都是静态文件您应该能够重定向到您通常首先加载的文件，并且浏览器仍会将它们保存在缓存中，因此不会重新下载它们，但我不是 100% 确定这一点。
如您所见，实施起来会很痛苦，并且会有效地使您的网站变慢，因为下载启动画面代码而不是用户真正想要的东西所花费的时间。
相反，请考虑正常加载您的网站，隔离下载速度较慢的部分，并仅在这些特定元素上放置进度条（使用与上述相同的 XHR 技术）。如果您构建自己的网站，这会更容易使用客户端 SPA 框架，例如 React、Vue 或 Angular，尽管您当然需要应对框架本身的额外开销。
更新：查看 possible duplicate of this question linked above, I notice a plugin named PACE.js 的答案，它声称可以自动执行其中的一些操作（它似乎通过检测任何正在进行的 ajax 调用来工作，并观察特定定义的页面元素作为加载完成的信号。）如果足够接近足够接近，那可能是一个值得尝试的简单插入。
我想在我的网站加载时构建一个加载栏。
要做到这一点，我需要知道如何获取整个文件大小 必须加载并且实际文件大小 已经加载，为此我想使用只有 JS.
这将是比值得做的更多的工作。
为了让您的网站显示进度条，它必须已经加载了显示进度条所需的代码——到那时您不再需要进度条，因为该网站已经已加载。
理论上，您可以让您的站点首先加载启动画面，该画面仅用于通过 AJAX 调用加载实际网站并显示进度条。该初始屏幕必须 check the Content-Length header of each file to be downloaded (though not all servers report this accurately; some always return "0"), and then poll the XHR "progress" event 来计算已经下载了多少。最后，一旦所有必要的文件都下载完毕，您就必须 bootstrap 显示实际站点 -- 我 认为 只要它们都是静态文件您应该能够重定向到您通常首先加载的文件，并且浏览器仍会将它们保存在缓存中，因此不会重新下载它们，但我不是 100% 确定这一点。
如您所见，实施起来会很痛苦，并且会有效地使您的网站变慢，因为下载启动画面代码而不是用户真正想要的东西所花费的时间。
相反，请考虑正常加载您的网站，隔离下载速度较慢的部分，并仅在这些特定元素上放置进度条（使用与上述相同的 XHR 技术）。如果您构建自己的网站，这会更容易使用客户端 SPA 框架，例如 React、Vue 或 Angular，尽管您当然需要应对框架本身的额外开销。
更新：查看 possible duplicate of this question linked above, I notice a plugin named PACE.js 的答案，它声称可以自动执行其中的一些操作（它似乎通过检测任何正在进行的 ajax 调用来工作，并观察特定定义的页面元素作为加载完成的信号。）如果足够接近足够接近，那可能是一个值得尝试的简单插入。