登录 注册

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

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

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

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

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

当然，也有缺点：

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

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

大家觉得哪种方案好？

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

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

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

    247 引用 • 1347 回帖
1 操作
88250 在 2019-08-27 20:15:36 更新了该帖
昆明 位置
11 关注
1 操作
27 回帖
3
2
2
8.0k 301 1.3k 1.1k 1.9k 500 7 892 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
但行好事莫问前程 昆明
回帖
32519
 帖子
712
 积分
171782

近期热议

推荐标签 标签

  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台，它支持多种框架、语言、运行时环境、云平台及应用服务，使开发人员能够在几秒钟内进行应用程序的部署和扩展，无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 152 关注
  • 音乐

    你听到信仰的声音了么？

    59 引用 • 509 回帖
  • Google

    Google（Google Inc.，NASDAQ：GOOG）是一家美国上市公司（公有股份公司），于 1998 年 9 月 7 日以私有股份公司的形式创立，设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”，它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎，它提供了简单易用的免费服务。不作恶（Don't be evil）是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • H2

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

    11 引用 • 54 回帖 • 642 关注
  • 设计模式

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

    198 引用 • 120 回帖 • 1 关注
  • 钉钉

    钉钉，专为中国企业打造的免费沟通协同多端平台， 阿里巴巴出品。

    15 引用 • 67 回帖 • 369 关注
  • 域名

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

    43 引用 • 208 回帖 • 1 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 462 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。

    313 引用 • 1666 回帖
  • 持续集成

    持续集成（Continuous Integration）是一种软件开发实践，即团队开发成员经常集成他们的工作，通过每个成员每天至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。

    14 引用 • 7 回帖 • 1 关注
  • 负能量

    上帝为你关上了一扇门，然后就去睡觉了....努力不一定能成功，但不努力一定很轻松 (° ー °〃)

    85 引用 • 1201 回帖 • 449 关注
  • 新人

    让我们欢迎这对新人。哦，不好意思说错了，让我们欢迎这位新人！
    新手上路，请谨慎驾驶！

    51 引用 • 226 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务，可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务，所以该项目也已经停止维护了！

    34 引用 • 467 回帖 • 693 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量，事件及实时分析。

    2 引用 • 56 关注
  • OpenStack

    OpenStack 是一个云操作系统，通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成，同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 6 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起，它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 5 关注
  • 国际化

    i18n（其来源是英文单词 internationalization 的首末字符 i 和 n，18 为中间的字符数）是“国际化”的简称。对程序来说，国际化是指在不修改代码的情况下，能根据不同语言及地区显示相应的界面。

    7 引用 • 26 回帖
  • 反馈

    Communication channel for makers and users.

    123 引用 • 906 回帖 • 192 关注
  • 京东

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

    14 引用 • 102 回帖 • 404 关注
  • 人工智能

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

    75 引用 • 145 回帖
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 10 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎，可以结合 MySQL、PostgreSQL 做全文搜索，它可以提供比数据库本身更专业的搜索功能，使得应用程序更容易实现专业化的全文检索。

    1 引用 • 180 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    131 引用 • 3639 回帖
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 6 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis，2010 年这个项目由 Apache 软件基金会迁移到了 google code，并且改名为 MyBatis ，2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 429 关注

最新标签