即时将文本转换为超链接或将其存储在数据库中？

Question

我在网页上有一个评论部分（类似于SO上的评论），人们可以在这里留下文字，也可以留下链接。它使用标准文本字段，不允许包含HTML。没有格式化选项等。

因为不允许使用HTML，所以我需要解析链接（基本上是以http或www开头的文本），然后将其包装在<a>标记中。

在服务器上执行此操作意味着使用类似JSoup的东西来解析文本，然后在将其余的注释文本插入到我的数据库中之前进行包装。

或者，我认为JQuery可以扫描页面上的所有评论，并使用<a>标记包含以http或www开头的任何内容。

哪一个是正确/更好/更有效的方法？我有一种预感，即JQuery方式会导致页面速度降低，因为它会不时地更新DOM，但是需要专家的确认！

Answer 1

如果您认为您可能在某些时候想要解析降价或用图像等替换表情符号，那么考虑性能影响是一个很好的决定。

通常，您有3个选项：

1。转换后端的超链接

我会在这里假设PHP，但原则保持不变：

function renderComment($comment) {
  $commentHtml = transformLinks($comment->comment_text);
  // render $commentHtml
}

这样做的缺点是必须在每个页面请求上替换每个注释的文本，因此不建议这样做。从正面看，与选项2相比，您只需存储一次评论文本。

2。转换后端的超链接并将它们存储在数据库中

假设PHP和MySQL：

CREATE TABLE comments (id ..., comment_text TEXT, comment_html TEXT, ...)
                                                  ^^^^^^^^^^^^
function saveComment($createdOrChangedComment) {
  $comment->comment_html = transformLinks($comment->comment_text);
  saveToDatabase($comment);
}

function renderComment($comment) {
  $commentHtml = $comment->comment_html;
  // render $commentHtml
}

这意味着您必须将注释文本两次存储在数据库中，一次作为文本存储，一次存储为html - 假设您需要某种“编辑”按钮;如果没有，只保存html就好了 在占用更多数据库空间的同时，此解决方案仅从数据库中提取预呈现的HTML，因此性能更佳。

3。转换前端的超链接

jQuery(document).ready(function(){
  jQuery('.comment').each(function(commentElement) {
    // Do magic
    transformCommentToHTML(commentElement);
  });
});

当你只有几百条评论时，这应该是很好的表现。 如果一次有数千个注释加载到DOM（这本身就可能是性能损失，但是现在让我们忽略它），解析可能是显而易见的，因为它同步发生并阻塞浏览器。
在这种情况下，您可以一次解析/替换一包注释（例如300），并在解析之间将控制权返回给浏览器。

3.b转换前端中的超链接，逐批

jQuery(document).ready(function(){
  var $comments = jQuery('.comment');
  var currentComment = 0;
  (function transformCommentBatch() {
    for (var batchLimit = currentComment + 300; currentComment < $comments.length && currentComment < batchLimit; currentComment++) {
      // Do magic
      transformCommentToHTML($comments[currentComment]);
    }
    if (currentComment < $comments.length) {
      // Don't freeze the browser, continue in the next frame
      setTimeout(transformCommentBatch, 1);
    }
  }());
});

这样，浏览器可以处理事件并且不会向用户显示“冻结”，而DOM中的前300个注释首先被转换 - 这些注释最有可能在页面顶部，而且只有在页面上可见的注释负荷。