优化文本换行与排版：从JS到Go的高效解决方案

问题背景

在作家页面的个人简介和作品页面的作品简介中，发现：

1. 原始文本无换行处理，所有文字挤在一起，阅读体验差
2. 最初通过前端JS动态处理（加载后分割文本并插入<p>标签）
   • 遇到超长文本时出现渲染卡顿
   • 影响页面性能，尤其是移动端体验

第一版方案：前端JS处理（低效）

// 原始JS方案（已弃用）
document.querySelectorAll('.bio').forEach(el => {
  el.innerHTML = el.textContent
    .split('\n')
    .map(p => `<p style="text-indent: 2em">${p}</p>`)
    .join('');
});

缺陷：

• 需等待DOM加载完成后执行
• 长文本分割消耗主线程性能
• 页面会出现短暂"闪动"

最终方案：Go后端预处理（高效）

通过DeepSeek建议，改用Go的strings.Split在服务端完成文本分割：

1. 后端模板处理（HTML/Template）

// 在Go中传递已分割的段落数组
type Author struct {
    Bio []string `json:"bio"`  // 已按\n分割的简介段落
}

// 处理逻辑示例
func formatBio(rawBio string) []string {
    paragraphs := strings.Split(rawBio, "\n")
    // 过滤空段落
    return filterEmptyParagraphs(paragraphs)
}

2. 模板渲染（自动首行缩进）

<div class="bio">
  {{range .Bio}}
    {{if .}}
      <p style="text-indent: 2em; margin: 0.5em 0">{{.}}</p>
    {{end}}
  {{end}}
</div>

性能对比

额外优化技巧

1. 空行过滤：

   func filterEmptyParagraphs(paragraphs []string) []string {
       result := make([]string, 0)
       for _, p := range paragraphs {
           if strings.TrimSpace(p) != "" {
               result = append(result, p)
           }
       }
       return result
   }
   

2. 多分隔符支持（如\r\n）：

   strings.Replace(rawBio, "\r\n", "\n", -1) // 统一换行符
   

3. 敏感词过滤（可结合处理）：

   paragraphs[i] = filterSensitiveWords(paragraphs[i])
   

总结

1. 性能提升：服务端处理比前端JS快100倍以上
2. 体验优化：页面加载即呈现正确排版，无闪动
3. 扩展性：后续可轻松添加自动目录生成、关键词高亮等功能

通过这次优化，验证了能在服务端做的事，就不要交给客户端的原则。AI工具在提供思路后，仍需开发者根据实际场景选择最优解。