加载新页面而不刷新时CSS加载缓慢答案

【问题标题】：CSS is loading slow when loading a new page without refresh加载新页面而不刷新时CSS加载缓慢
【发布时间】：2019-07-29 11:42:02
【问题描述】：

我正在尝试在 window.history.pushState('','',url); 的帮助下使用 jquery 刷新加载不同的页面

function goto(event,el)
{
    url=el.href;
    event.preventDefault();
    window.history.pushState('','',url);
    //$('html').load(url);
    $.get(url, function(data) {
        var head=data.match(/<head[^>]*>[\s\S]*<\/head>/gi);
        $('head').html(head[0]);
        //$('#content').html($(data).find('#content').html());
        var body=data.match(/<body[^>]*>[\s\S]*<\/body>/gi)
        $('body').html(body[0]);
    }); 
}

HTML 在 CSS 之前加载，会有大约 1-2 秒的裸 html 显示然后 css 完全加载

我所有的页面都是不同的，所以我每次都必须加载不同的 css、脚本。

有什么方法可以比 html 更快地加载 css，或者有没有更好的方法来加载整个页面或用新页面替换当前页面内容。

我真的不想用任何插件

【问题讨论】：

如果您还是要更改整个页面，那么使用 pushState 和自定义 .get() 请求有什么意义？这种情况看起来像是传统的多 HTML 页面网站共享一些脚本或 css 文件将是首选的情况，因为无论如何您都会替换整个头部和身体。
@Shilly 有没有更好的方法在不刷新页面的情况下加载新页面
如果您已经加载了页面，CSS 应该是即时的，因为它将在缓存中。在大多数情况下，加载相同页面的大多数浏览器甚至都不会得到一闪而过的未设置样式的内容，甚至是一闪而过的无页面。我要检查的一件事是，您的服务器正在发送什么到期标头。更改页面也可以像 - 一样简单。 location.href = url.
“我所有的页面都是不同的，所以我每次都必须加载不同的 css、脚本” - 这是一种常见的误解和反模式。现代浏览器（尤其是 chrome）会缓存 interpreted 代码，所以如果它是相同的，甚至不需要重新解析你的 javascript。如果每页加载不同的文件，实际上会减慢加载速度。
我们的观点是，如果您想使用.get() 请求进行导航，您希望在每次更改页面内容时尽量减少更改。然后，例如，您可以保留一个 CSS 文件和一个 JS 文件（可以是几个不同的文件串联在一起），而不必每次都加载新文件。通过在每个链接上完全替换和，您将失去与没有基于 ajax 导航的基本网站相比所获得的任何优势。

标签： javascript jquery html css html5-history

【解决方案1】：

简单的解决方案是尝试在页面加载时使用 Spinner 或加载器，这可以防止您裸露 HTML 表单用户这是链接 How to show Page Loading div until the page has finished loading

【讨论】：