bs与cs架构是中文的bs与cs架构。它们是两种不同类型的软件系统架构，具有不同的优缺点。

BS体系结构是指浏览器/服务器架构，这意味着软件运行在网络浏览器上，并与服务器通信。这种架构的一些好处是：

可以实现跨平台兼容，在客户端实现零维护，而且部署和更新都很方便。

它可以使用丰富多样的网络技术和语言来创建用户界面和功能。

它可以通过到达一个广泛的和未知的用户组。

这种架构的一些缺点是：

个性化能力低，响应速度慢，安全隐患大。

它在很大程度上依赖于服务器的性能和网络带宽。

它不能实现一些需要客户端处理的复杂或特殊功能。

CS体系结构代表客户机/服务器体系结构，这意味着软件运行在专用的客户机程序上，并与服务器通信。这种架构的一些好处是：

可以利用客户端的计算能力，减轻服务器负载，达到较快的响应速度。

它可以提供美观、多样、个性化的用户界面和功能。

它可以处理复杂的业务流程，并确保高度的安全性和数据保护。

这种架构的一些缺点是：

它需要在每台客户机上安装、配置和维护专门的客户机软件。

对不同平台和工具的兼容性和灵活性较低。

它的开发和维护成本高，难度大。

小程序富文本能力的深入研究与应用

前言

在开发小程序的过程中，很多时候会需要使用富文本内容，然而现有的方案都有着或多或少的缺陷，如何更好的显示富文本将是一个值得继续探索的问题。

现有方案WxParse

WxParse 作为一个应用最为应用最广泛的富文本插件，在很多时候是大家的首选，但其也明显的存在许多问题。

rich-text

rich-text 组件作为官方的富文本组件，也是很多人选择的方案，但也存在着一些不足之处

共同问题

方案构建

因此要解决上述问题，就得构建一个新的方案来实现

渲染方式

对于该节点下没有图片、视频、链接等的，直接使用 rich-text 显示（可以减少标签数，提高渲染效果），否则则继续进行深入迭代，例如：

对于迭代的方式，有以下两种方案：

解析脚本

从 包进行改写，其通过状态机的方式取代了正则匹配，有效的解决了容错性问题，且大大提升了解析效率

//不同状态各通过一个函数进行判断和状态跳转
for (; this._index < this._buffer.length; this._index++)
    this[this._state](this._buffer[this._index]);

处理style标签解析方式匹配方式遇到的问题

图片显示的问题

在 html 中，若 img 标签没有设置宽高，则会按照原大小显示；设置了宽或高，则按比例进行缩放；同时设置了宽高，则按设置的宽高进行显示；在小程序中，若通过 image 组件模拟，需要通过 来获取图片宽高，再进行 setData，当图片数量较大时，会大大降低性能；另外，许多图片的宽度会超出屏幕宽度，需要加以限制

解决方案

用 rich-text 中的 img 替代 image 组件，实现更加贴近 html 的方式 ；对 img 组件设置默认的效果 max-width:100%;

视频显示的问题

当一个页面出现过多的视频时，同时进行加载可能导致页面卡死

解决方案

在解析过程中进行计数，若视频数量超过3个，则用一个 wxss 绘制的图片替代 video 组件，当受到点击时，再切换到 video 组件并设置 以模拟正常效果，实现了一个类似懒加载的功能

<view wx:if="{{item.attrs.id>'media3'&&!controls[item.attrs.id].play}}" class="video" data-id="{{item.attrs.id}}" bindtap="_loadVideo">
  <view class="triangle_border_right">view>
view>
<video wx:else src='{{controls[item.attrs.id]?item.attrs.source[controls[item.attrs.id].index]:item.attrs.src}}' id="{{item.attrs.id}}" autoplay="{{item.attrs.autoplay||controls[item.attrs.id].play}}" />

文本复制的问题

小程序中只有 text 组件可以通过设置 属性来实现长按复制，在富文本组件中实现这一功能就存在困难

解决方案

在顶层标签上加上 user-select:text;-webkit-user-select

实现更加丰富的功能

在此基础上，还可以实现更多有用的功能

最终效果

经过一个多月的改进，目前实现了这个功能丰富，无层数限制，渲染效果好，轻量化（30.0KB），效率高，前后端通用的富文本插件，体验小程序的用户数已经突破1k啦，欢迎使用和体验

github 地址

npm 地址

总结

以上就是我在开发这样一个富文本插件的过程大致介绍，希望对大家有所帮助；本人在校学生，水平所限，不足之处欢迎提意见啦！