Question

我正在处理一个处理冗长文档的基本WYSIWYG文字处理器。目前，我正在使用大约5000 article的HTML divs元素并应用一些jQuery代码来设置样式并对其进行格式化。 5000可能是绝对最大值。

首先，我使用正则表达式来应用CSS，这很有效 107ms。
其次，我迭代div，存储它们的高度和每1000px，插入一些HTML作为分页符（分页是垂直的 - 想象MS Word中的页面。第二部分需要1200ms。

对于初始页面加载，我没关系。不幸的是，article元素必须是contenteditable。

当用户更改文章的内容时，我可以简单地将我的正则表达式应用于他们已更改的div（0-1ms），这没有问题，但是，对内容的任何更改都意味着（可能）改变分页符之间的高度，因此需要重新分页。

每次用户点击return，delete时，浏览器锁定一秒，最终会出现新线路或许多其他会改变分页的其他事件显然不切实际。虽然在接近文档末尾进行更改时性能更好，但在更改第一页时，用户需要具有相同级别的响应能力。

我需要解决这个性能问题，并在重新分页时使UI响应。

这是在运行JS代码之前的HTML示例：

<article contenteditable="true">
    <header contenteditable="false"><h1>Header Text</h1></header>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    ...
    <footer contenteditable="false"><h3>Footer Text</h3></footer>
</article>

运行JS代码后：

<article contenteditable="true">
    <header contenteditable="false"><h1>Header Text</h1></header>
    <div class="regex-set-class">Content</div>
    <div class="regex-set-class">Content</div>
    <div class="regex-set-class">Content</div>
    <section contenteditable="false">
        <h3>Footer Text</h3>
        <figure><hr><hr></figure>
        <h1>Header Text</h1>
        <h2>Page Number</h2>
    </section>
    <div class="regex-set-class">Content</div>
    <div class="regex-set-class">Content</div>
    <div class="regex-set-class">Content</div>
    ...
    <footer contenteditable="false"><h3>Footer Text</h3></footer>
</article>

以下是执行分页的JS代码：

function PaginateDocument()
{
    // Variables
    var height = 0;
    var page_count = 1; 

    // Remove existing page breaks
    $("section").remove();

    // Iterate over each div elements
    $("div").each(function()
    {
        // Check whether page is too long
        if (height + $(this).outerHeight(true) > 1000) 
        {
            // Create page break
            $(this).before("<section contenteditable=\"false\"><h3>" + page_footer + "</h3><figure><hr /><hr /></figure><h1>" + page_header + "</h1><h2>" + page_count + ".</h2></section>");            

            // Adjust variables
            page_count++; height = 0;
        }

        // Increment current page height
        height += $(this).outerHeight(true);
    });
}

将“contenteditable”文章拆分为带有页眉和页脚的垂直页面

0 个答案: