Tinymce sink 元素减少页面加载时间答案

【问题标题】：Tinymce sink element decreases page loading timeTinymce sink 元素减少页面加载时间
【发布时间】：2020-09-09 03:33:07
【问题描述】：

对于博客文件，文章中的所有 cmets 由 php foreach 循环创建，每个都有自己的 Reply 按钮，用于在文本区域中打开带有 tinymce 的模式对话框。 A 注意到，当有可能的 cmets 时，页面加载需要一些时间。当我查看浏览器检查器时，我看到最后 tiny 正在为每个文本区域加载一个“接收器”元素，就在 body 的关闭标记之前：

<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>
....and so on...

加载这些 div 需要一些时间，并且会降低页面加载的性能。我能做些什么来提高页面加载的性能吗？

【问题讨论】：

同样的问题你找到决定了吗？
显然你只需要一个回复模式。很难回答这个问题，因为完全不清楚您的回复模式是如何工作的，问题中缺少该代码。
你是怎么解决这个问题的？

标签： php foreach tinymce textarea page-load-time

【解决方案1】：

正如 KIKO 所说，您需要为所有 cmets 提供一个单一的回复模式。由于您没有指定您使用的平台，因此这里是一种通用方法。

每个回复按钮都应该有一个数据属性，其中包含您要回复的评论的 ID。例如

<button class="reply-button" data-comment-id="<?php echo $comment->id; ?>">Reply</button>

如果评论将附加到帖子中，而不是作为对其他评论的回复，则将 data-comment-id 属性留空。

如果您在一个页面上显示多篇博文并希望每个博文都有自己的回复按钮，只需添加数据属性post-id，如下所示：

<button class="reply-button" data-post-id="<?php echo $blog_post->id; ?>">Reply</button>

使用 JavaScript 打开评论模式并选择适当的数据属性。例如：

$('.reply-button').on('click', function() {
    const commentId = $(this).data('comment-id');
    const postId = $(this).data('post-id');
    showCommentModal(commentId, postId);
});

showCommentModal 函数应该显示页面上的单一模式。使用 commentId 和 postId 它应该准备发布评论作为对另一评论或博客文章的回复。

【讨论】：