Tinymce 接收器元素减少了页面加载时间

Question

对于博客文件，文章的所有评论由 php foreach 循环创建，每个都有自己的 Reply 按钮，可以在文本区域中使用 tinymce 打开模式对话框。注意，当有评论时，页面加载需要一些时间。当我查看浏览器检查器时，我看到最后 tiny 正在为每个文本区域加载一个 "sink" 元素，就在 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 需要一些时间，这会降低页面加载的性能。我可以做些什么来提高页面加载的性能吗？

Answer 1

正如 KIKO 所说，您需要为所有评论设置一个单一的回复模式。由于您没有指定您使用的平台，这里有一个通用的方法。

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

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

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

如果您在单个页面上显示多个博客 post 并且希望每个博客都有自己的回复按钮，只需添加数据属性 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 它应该准备 post 评论作为对另一个评论或博客的回复 post.

Tinymce 接收器元素减少了页面加载时间

Tinymce sink element decreases page loading time

php

foreach

tinymce

textarea

page-load-time