History.js 加载其他脚本和极端 CPU 使用率的问题答案

【问题标题】：History.js issue with loading other scripts and extreme CPU usageHistory.js 加载其他脚本和极端 CPU 使用率的问题
【发布时间】：2018-07-13 10:11:37
【问题描述】：

我的History.js/Ajaxify 脚本存在一些严重问题。主要问题是在页面加载了 history.js 之后（通过单击链接），<header> 标记中的其他 javascript 没有加载，实际上就好像它们已经被卸载了一样。

为了解决这个问题，我决定用statechangecomplete 加载脚本，一段时间后我意识到，这只会导致更多问题。因为它不仅每次我点击一个链接都会加载脚本，而且在几次页面更改后，Chrome 的 CPU 使用率达到了 100%。

$(window).on('statechangecomplete', function() {
    $.getScript(document.location.origin + "/js/myscript1.js");
    $.getScript(document.location.origin + "/js/myscript2.js");
    $.getScript(document.location.origin + "/js/myscript3.js");
});

同时我的<head> 包含以下内容：

<head>
    <title>Example</title>
    <meta charset="utf-8" />

    <meta NAME="ROBOTS" CONTENT="NOODP">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//balupton.github.io/jquery-scrollto/lib/jquery-scrollto.js"></script>
    <script src="//browserstate.github.io/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
    <script src="/js/ajaxify-html5.js"></script>

    <script src="/js/uikit.min.js"></script>

    <script src="https://unpkg.com/mithril/mithril.js"></script>

    <script src="/js/myscript1.js"></script>
    <script src="/js/myscript2.js"></script>
    <script src="/js/myscript3.js"></script>
</head>

最奇怪的是uikit.min.js 和mithril.js 在页面更改后都可以工作。在查看了他们的代码并将其与我的代码进行比较后，我开始怀疑我的代码无法正常工作的原因是因为它们都包含 $(document).ready(function({}); 而 mithril 和 uikit 不包含。

最后我想知道为什么它会导致我的脚本在页面更改/历史推送状态后无法加载？

【问题讨论】：

...问题是什么？您希望我们从 HTML 代码列表中诊断为什么您在 chrome 中获得 100% 的 CPU 使用率？例如，我们不可能知道“myscript1.js”中有什么可能导致它。
@MikeMcCaughan 哦，很抱歉。我用“真正的”问题更新了 OP！
如果与问题无关，请删除有关 CPU 使用率的内容。另外，请提供显示它不起作用的 MCVE。见minimal reproducible example。

标签： javascript jquery browser-history

【解决方案1】：

我发现了问题，对于和我有同样问题的人，我所做的就是删除

    var result = String(html)
                    .replace(/<\!DOCTYPE[^>]*>/i, '')
                    .replace(/<(html|head|body|title|meta|script)([\s\>])/gi,'<div class="document-$1"$2')
                    .replace(/<\/(html|head|body|title|meta|script)\>/gi,'</div>')
                ;

return $.trim(result);

来自ajaxify-html5.js。这将使它不会删除脚本标签等。

【讨论】：