Question

我是javascript和jQuery的初学者。我有JavaScript代码，该代码基于<h2> <h3>标签生成目录。当呈现整个页面时，它运行很慢。我试图将window.onload替换为document.onload，但是没有用。还有其他方法可以提高其速度。可复制的示例-https://jsfiddle.net/mja3xpfr/

window.onload = function () {
    var toc = "";
    var level = 0;
    var maxLevel = 3;

    document.getElementById("contents").innerHTML =
        document.getElementById("contents").innerHTML.replace(
            /<h([\d]).*>\s*[\d]*\s?[.]?\s?([^<]+)<\/h([\d])>/gi,
            function (str, openLevel, titleText, closeLevel) {

                if (openLevel > maxLevel) {return str;}

                if (openLevel > level) {
                    toc += (new Array(2)).join("<ol>");
                } else if (openLevel < level) {
                    toc += (new Array(level - openLevel + 1)).join("</ol>");
                }

                level = parseInt(openLevel);

                var anchor = titleText.replace(/[^a-zA-Z]+/g, "-");

                toc += "<li><a href=\"#" + anchor + "\">" + titleText
                    + "</a></li>";

                return "<a name=\"" + anchor + "\">"
                    + "<h" + openLevel + " style=\"padding-top: 60px; margin-top: -60px;\">"+ str + "</h" + closeLevel + ">" +"</a>";
            }
        );

    if (level) {
        toc += (new Array(level + 1)).join("</ol>");
    }

    document.getElementById("toc").innerHTML += toc;
};

Answer 1

这是使用DOM脚本创建TOC的一种方法（因此，没有字符串操作）。可能并非完全满足您的需要，但是您当然可以fiddle with it随心所欲。

这应该工作更快。此外，如果您的javascript标签位于您的html底部附近（就在结束</body>标签之前，那么您实际上就不需要加载处理程序。

(() => {
  const headers = Array.from(document.querySelectorAll("h1, h2, h3, h4"));
  const maxLevel = 4;
  let tocLis = [];

  for(let header of  headers) {
    const level = parseInt(header.nodeName.replace(/[^\d]/g, ""));
      if (level < maxLevel) {
        
        // 1. create and insert anchor
        let anchor = document.createElement("a");
        anchor.name = header.textContent;
        header.parentNode.insertBefore(anchor, header);
        
        // 2. create and add a list item
        let li = document.createElement("li");
        let liRef = document.createElement("a");
        liRef.href = `#${header.textContent}`;
        liRef.textContent = header.textContent;
        li.appendChild(liRef);
        tocLis.push(li);
    }
    
    // 3. if list items were created, add them to #toc
    if (tocLis.length) {
      const ul = document.createElement("ul");
      tocLis.forEach( el => ul.appendChild(el));
      document.querySelector("#toc").appendChild(ul);
    }
  }
})();

<div id="toc">
  <span>Table of Contents</span>
</div>

<hr />

<div id="contents">
  <h2>Apple</h2>
  adsdasdsa  
  
  <h2>Orange</h2>
  adsdasd
</div>

<!--to check if anchors work -->
<div style="height:2000px;"></div>

Answer 2

使用

$..event.add(window, 'load', () => { //your code to run here });

尽管使用纯JavaScript仍然是最快的选择

Answer 3

window.onload在加载所有内容（图像，文本等）之后发生。除了使用window.load之外，您还可以使用jQuery的$ {document）.ready（）使用的DOMContentLoaded事件。

因此，为了使其更快，您可以按以下方式更改代码：

$(function() {
...
});

$使您的函数在加载DOM内容时运行。与

相同

$(document).ready(function() { ... })

加快window.onload

3 个答案: