登录 注册

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

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

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

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

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

当然，也有缺点：

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

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

大家觉得哪种方案好？

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

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

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

    246 引用 • 1338 回帖 • 1 关注
1 操作
88250 在 2019-08-27 20:15:36 更新了该帖
昆明 位置
11 关注
1 操作
27 回帖
3
2
2
9.0k 307 1.3k 1.8k 2.0k 500 7 901 2.2k

相关帖子

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

欢迎来到这里！

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

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

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

  • betou •

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

  • betou • • 1

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

  • InkDP • via Linux
    捐赠者

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

  • someone27889 • via macOS
    捐赠者

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

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

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

  • Vanessa • via macOS
    订阅者 付费者 支持者 捐赠者

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

  • 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 • via macOS
    捐赠者

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

  • yixiangblog •

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

  • someone27889 • via macOS
    捐赠者

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

    1 回复
  • jeffjade •

    嗯嗯，是的。

  • 88250 •
    订阅者 作者

    没事，我吃得消 doge

    @Vanessa

  • krbtgt •

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

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

  • zonghua •

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

    1 回复
  • csfwff • • 1
    捐赠者

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

    1 回复
  • zonghua •

    工作成果我收了哈

  • 2501224066 •

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

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

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

  • zwxbest • • 1

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

  • Blackman99 • • 1
    捐赠者

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

  • K • • 1

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

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

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

  • PeterChu • • 1

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

  • jeffjade •

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

    1 回复
  • 88250 •
    订阅者 作者

    嗯嗯。

    @participants 大家来投票吧！

请输入回帖内容 ...
88250
但行好事莫问前程 昆明
回帖
34429
 帖子
713
 积分
166732

近期热议

推荐标签 标签

  • OpenShift

    红帽提供的 PaaS 云，支持多种编程语言，为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 662 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高，单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 118 关注
  • Dubbo

    Dubbo 是一个分布式服务框架，致力于提供高性能和透明化的 RPC 远程服务调用方案，是 [阿里巴巴] SOA 服务化治理方案的核心框架，每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 615 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具，主要功能包括：位置相关的内容递送；用户认证和授权；集中式网络监控。

    1 引用 • 7 回帖 • 613 关注
  • API

    应用程序编程接口（Application Programming Interface）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

    79 引用 • 431 回帖
  • Chrome

    Chrome 又称 Google 浏览器，是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写，包括 WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖
  • Sandbox

    如果帖子标签含有 Sandbox ，则该帖子会被视为“测试帖”，主要用于测试社区功能，排查 bug 等，该标签下内容不定期进行清理。

    436 引用 • 1238 回帖 • 588 关注
  • 工具

    子曰：“工欲善其事，必先利其器。”

    298 引用 • 763 回帖
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    25993 引用 • 107852 回帖
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 184 关注
  • 互联网

    互联网（Internet），又称网际网络，或音译因特网、英特网。互联网始于 1969 年美国的阿帕网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。

    98 引用 • 367 回帖
  • 阿里巴巴

    阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的 18 人，于 1999 年在中国杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 58 关注
  • 链书

    链书（Chainbook）是 B3log 开源社区提供的区块链纸质书交易平台，通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书，我们共同构建这个全新的交易平台，让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线，也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • Love2D

    Love2D 是一个开源的， 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 560 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 396 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器，详细介绍请看 将 Java Swing 应用变成 Web 应用 。

    1 引用 • 15 回帖 • 645 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作，它正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 5 关注
  • Solo

    Solo 是一款小而美的开源博客系统，专为程序员设计。Solo 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    1443 引用 • 10082 回帖 • 496 关注
  • JSON

    JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    53 引用 • 190 回帖
  • 架构

    我们平时所说的“架构”主要是指软件架构，这是有关软件整体结构与组件的抽象描述，用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • 链滴

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

    记录生活，连接点滴

    180 引用 • 3878 回帖 • 1 关注
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 543 回帖
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    59 引用 • 25 回帖 • 1 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3201 引用 • 8216 回帖
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库，并提供多种语言的 API。从 2010 年 3 月 15 日起，Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始，Redis 的开发由 Pivotal 赞助。

    284 引用 • 248 回帖 • 2 关注
  • Flume

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

    9 引用 • 6 回帖 • 660 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 830 关注

最新标签