登录 注册

代码语法高亮放前端还是后端？

本贴最后更新于 1916 天前，其中的信息可能已经时移世易

目前主流（比如 GitHub）的做法是在后端高亮，输出带样式类的 HTML；其他也有在前端通过 JS 语法高亮库进行处理的。

后端渲染语法高亮的优势是：

  • 不会“闪”一下，渲染效果更平滑
  • 统一处理，多端场景下升级方便

当然，也有缺点：

  • 消耗服务器资源，请求的整体响应时间变长
  • 处理稍微复杂，如果某种语言没有后端高亮库，就只能通过其他的高亮进程处理

我比较倾向于后端渲染，能一次做完的事情就不要分布出去了，那样有点浪费资源。

大家觉得哪种方案好？

单选 • 公开 • 永不结束 28 票
前端渲染
35% • 10 票
后端渲染
64% • 18 票

  • 语法高亮
    2 引用 • 32 回帖
  • 后端
    44 引用 • 126 回帖 • 1 关注
  • 前端

    前端技术一般分为前端设计和前端开发，前端设计可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1348 回帖 • 2 关注
1 操作
88250 在 2019-08-27 20:15:36 更新了该帖
昆明 位置
11 关注
1 操作
27 回帖
3
2
2
8.4k 305 1.3k 1.4k 2.0k 500 7 900 2.0k

相关帖子

27 回帖
代码语法高亮放前端还是后端？

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • dengwentong • • 1
    捐赠者

    @88250 @Vanessa
    居然说到，前端和后端，自然 D & V 。
    个人倾向后端。
    作为自身，后端操作比较友好；作为看客，前端有基本的语法高亮应该看起来也会友好吧。😄

  • betou •

    倾向于后端，有需求直接改就完了，如果是个 APP，出问题还要重新打包上架。

  • betou • • 1

    对现代硬件来说，那一丢丢资源不算是资源吧，当前情况应该是代码发展速度跟不上硬件的发展速度

  • InkDP •
    捐赠者

    后端，作为刚开发玩皮肤的人来说 后端会让前端很舒服

  • someone27889 •
    捐赠者

    看后端提供的服务类型吧？如果后端都是数据交换数据处理那么 渲染 放在前端合适，如果后端有一部分前端渲染引擎的话，那就放后端。

    1 回复
  • YLongo •
    订阅者 赞助者 支持者 捐赠者 勇士

    个人倾向放后端，代码高亮是通用的逻辑，可以一次开发，多处使用

  • Vanessa •
    订阅者 付费者

    做为前端，总担心辣么多的处理后端会吃不消。

  • jeffjade •

    看应用场景；放在前端，倘若处理得当，可以不显现“闪”一下；一般处理的话，那一闪而过的瞬间，应该也不太影响使用体验。

    对很多静态网站生成器而言，不需要后台的话，则也无需内置，用户可按需载入高亮库，这也是如今个人博客处理办法；如 Ghost：https://quickapp.lovejade.cn/how-to-elegantly-handle-quickapp-request/ 。

    对于当下流行使用 MVVM 框架来搭建的单页应用（SPA），首屏渲染、SEO 的解决之道，可以有很多法子，可不采取服务端渲染这种相对更复杂方法，那么高亮这种自然也还是前端自己处理（发布前预渲染，这种也算是在前端了吧）。

    1 回复
  • 88250 •
    订阅者 作者

    场景是 HTML 渲染，比如帖子里有代码块时需要高亮。

    发这个帖的原因是最近正在做社区 Markdown 渲染改造，以前用的是 markdown-it+ highlight.js（两个项目都是 JavaScript 的），目前正在改造为 Lute + Chroma（两个项目都是 golang 的）。因为我这边还有其他项目也有这个需求，所以和大家讨论一下看看，是否还有什么我没有考虑到的情况，集思广益 🙏

  • 88250 •
    订阅者 作者

    嗯，还是看应用场景。

    Go 实现的一个静态站点生成系统 Hugo 用的也是 Chroma，这也算是“预渲染”操作吧 😅

    2 回复
  • Sunnnner •
    捐赠者

    前端吧- -后端主要还是负责数据，因为我就是负责数据的别的还没到达那种地步，另外如果放在后端，服务器一定要 hold 住，不然崩了怎么办

  • yixiangblog •

    直接 highlight.js 呗。用国内 cdn，印象中不会闪，用起来也方便，也可以不用管后端是啥语言写的。if it ain't broken, don't fix it.

  • someone27889 •
    捐赠者

    V 说怕你吃不消，那就前端渲染？

    1 回复
  • jeffjade •

    嗯嗯，是的。

  • 88250 •
    订阅者 作者

    没事，我吃得消 doge

    @Vanessa

  • krbtgt •

    后端想为前端分担压力，前端担心后端吃不消。

    我怀疑你们俩在撒狗粮，并且我有证据 😂

  • zonghua •

    当然是前端啦，减少我后端工作量，上班多摸鱼

    1 回复
  • csfwff • • 1
    捐赠者

    huaji 当然是后端啦，减少我前端工作量，上班多摸鱼

    1 回复
  • zonghua •

    工作成果我收了哈

  • 2501224066 •

    前端只会调接口，给他搞不放心

  • jenphyjohn • • 1
    订阅者 支持者 勇士

    这狗粮我先干了！后端统一处理易于维护，但是增加服务端渲染时间，看如何取舍了。个人倾向前端处理，能提高一丁点儿的体验效果也是好的，前提是有方法能解决闪一下的问题。

  • zwxbest • • 1

    前端啊，渲染这种功能放前端，可以减轻服务器压力，同时前端调试也比较方便。

  • Blackman99 • • 1
    捐赠者

    如果可以的话不必限制在一端，两种方式都提供，使用者可以根据具体应用场景进行选择

  • K • • 1

    对与这种，不影响使用的优化项 在前端处理也算是一种边缘计算，这个的优点大家也都清楚。

    如果放到后端处理，
    对于少量用户来说 貌似也没有什么不可以〜
    但是稍稍多一点儿，就要用更多的 money（服务器）来换取用户体验来，简直不要太划算。

    但是这个时候，出与前端的求生欲： 我还是要说，支持后端渲染 +1 trollface

  • PeterChu • • 1

    我的想法是，这种问题应该不是简单一元一次方程，而应该是多元的，也就是说决定最终取舍的影响因素应该有多个，不同的影响因素大小下会产生不同的最终结果。所以，就这个问题可能需要考虑有几个，一个是服务器的能力，一个是访问量，一个是时间。🤔

  • jeffjade •

    这类帖子，社区的投票功能蛮有使用的必要，:)。

    1 回复
  • 88250 •
    订阅者 作者

    嗯嗯。

    @participants 大家来投票吧！

请输入回帖内容 ...
88250
但行好事莫问前程 昆明
回帖
33796
 帖子
712
 积分
167876

近期热议

推荐标签 标签

  • Typecho

    Typecho 是一款博客程序，它在 GPLv2 许可证下发行，基于 PHP 构建，可以运行在各种平台上，支持多种数据库（MySQL、PostgreSQL、SQLite）。

    12 引用 • 65 回帖 • 439 关注
  • 倾城之链
    23 引用 • 66 回帖 • 138 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 619 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖 • 2 关注
  • BND

    BND（Baidu Netdisk Downloader）是一款图形界面的百度网盘不限速下载器，支持 Windows、Linux 和 Mac，详细介绍请看这里。

    107 引用 • 1281 回帖 • 28 关注
  • 前端

    前端技术一般分为前端设计和前端开发，前端设计可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1348 回帖 • 2 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    568 引用 • 3532 回帖
  • V2Ray
    1 引用 • 15 回帖 • 2 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖 • 2 关注
  • 小说

    小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    28 引用 • 108 回帖
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本，加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较（vimdiff）、语法高亮、全面的帮助系统、本地脚本（Vimscript）和便于选择的可视化模式。

    29 引用 • 66 回帖 • 1 关注
  • 人工智能

    人工智能（Artificial Intelligence）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    133 引用 • 189 回帖
  • 京东

    京东是中国最大的自营式电商企业，2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月，京东在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD），是中国第一个成功赴美上市的大型综合型电商平台，与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 374 关注
  • Flume

    Flume 是一套分布式的、可靠的，可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 632 关注
  • 大数据

    大数据（big data）是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖 • 1 关注
  • B3log

    B3log 是一个开源组织，名字来源于“Bulletin Board Blog”缩写，目标是将独立博客与论坛结合，形成一种新的网络社区体验，详细请看 B3log 构思。目前 B3log 已经开源了多款产品：Sym、Solo、Vditor 和 思源笔记。

    1063 引用 • 3453 回帖 • 203 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据（或者事件）流的 API。它组合了观察者模式，迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 156 关注
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 537 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
    及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 101 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎，采用 Java 语言编写，不受平台的限制，同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式，可以兼容一些主流的数据库，因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 653 关注
  • 域名

    域名（Domain Name），简称域名、网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

    43 引用 • 208 回帖 • 1 关注
  • 房星科技

    房星网，我们不和没有钱的程序员谈理想，我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源，遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 585 关注
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    8131 引用 • 37068 回帖 • 160 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎，它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 64 关注
  • gRpc
    11 引用 • 9 回帖 • 74 关注
  • 设计模式

    设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖 • 1 关注

最新标签