时间戳

首页 > 解决方案 > Tinymce sink 元素减少页面加载时间

php - Tinymce sink 元素减少页面加载时间

问题描述

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

标签： phpforeachtinymcetextareapage-load-time

解决方案

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

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

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

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

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

推荐阅读