中国建设银行招聘网站通知专业做网站的页面设计

中国建设银行招聘网站通知,专业做网站的页面设计,灰色项目推广渠道,上海还能推seo吗1分钟看图掌握核心观点#x1f447;图片一、前言在如今基于AI搜索的对话舞台上#xff0c;如果一段文字像老式打字机一样逐字逐句展现在屏幕上#xff0c;那将是一种具有独特魅力的吸引力。话不多说#xff0c;先来看下最终的实现效果。图片二、引言在AI搜索场景中#xf…1分钟看图掌握核心观点图片一、前言在如今基于AI搜索的对话舞台上如果一段文字像老式打字机一样逐字逐句展现在屏幕上那将是一种具有独特魅力的吸引力。话不多说先来看下最终的实现效果。图片二、引言在AI搜索场景中由于大模型基于流式输出文本需要多次响应结果到前端因此这种场景十分适合使用打字机效果。打字机效果是指在生成内容的场景中文字逐字符动态显示模拟人工打字的过程主要是出于提升用户体验、优化交互逻辑和增强心理感知等方面的考量缓解等待焦虑降低“无反馈”的负面体验。内容是逐步响应的打字机效果可以很好地提供“实时反馈”用户可以感知到系统正在工作从而减少了等待过程中的不确定性和焦虑感。模拟自然交互增强“类人对话”的沉浸感。对话交流具有停顿、强调等节奏感通过实时打字的模拟跟容易拉近与用户的心理距离增强对话感和沉浸感。优化信息接收效率避免“信息过载”。如果一次性展示大量密密麻麻的文字用户需要花时间筛选重点容易产生抵触通过打字机效果可以缓和阅读节奏减少视觉和认知负担。强化“AI生成”的感知降低对“标准答案”的预期。使用户感知到是AI实时计算结果而非预存的标准答案有助于用户理性客观地使用工具。三、早期实现方案——纯文本逐字符打字效果最开始的产品功能需要根据用户输入的搜索词流式输出并逐字符展示到页面上这可以说是打字机效果的入门级实现了不依赖任何复杂的技术其流程图大致如下所示。图片3.1 详细说明前端会定义一个字段用来缓存全量的markdown文本每次服务端流式响应markdown文本到前端时前端都会将其追加到这个缓存字段后然后基于marked依赖库将全量的markdown文本转换为html片段。要实现逐字符渲染的动画效果就需要定时更新文本。定时功能一般采用setTimeout或setInterval来实现而更新文本可以考虑innerHTML和appendChild的方式这里采用的innerHTML方式插入文本核心代码如下所示。let fullText test text;// 全量的html文本let index 0;// 当前打印到的下标let timer window.setInterval(() {index;$dom.innerHTML fullText.substring(0, index);}, 40);3.2 innerHTML与appendChild的核心区别对比图片为什么选择innerHTML而非appendChild由于服务端是流式返回markdown文本因此每次返回的markdown文本可能不是完整的。举个例子如下。先返回下面一段markdown文本** 这是一个再返回下面一段markdown文本标题 **先返回的文本会当作纯文本展示再返回的文本会与先返回的文本结合生成html片段如下strong这是一个标题/strong如果使用appendChild的话就不好处理上述场景。3.3 小结这种方式的优点就是简单易懂很容易上手实现也没有任何依赖。但是它的缺点也是显而易见的。比如我们无法方便的添加一些额外的动画效果来增强视觉体验如光标闪烁效果对于一些复杂文本内容或者需要更加灵活地控制展示细节时也会显得捉襟见肘并且每次通过innerHTML渲染文本时都触发了dom的销毁与创建性能消耗大。四、需求难度进一步提升随着产品的迭代业务要求打字内容不仅是纯文本还需要穿插展示卡片等复杂样式效果如下图所示。卡片的类型包括应用、股票、影视等需要可扩展、可配置并且还会包括复杂的交互效果如点击、跳转等。图片很明显基于早期的实现方案已经远远不能满足日益增强的业务诉求了必须考虑更加灵活高效的技术方案。五、现代框架下的实现——基于Vue虚拟dom动态更新通过上述的分析打字内容中要穿插展示卡片显然需要使用单例模式否则如果每次打字都重新创建元素的话不仅性能低下而且数据和状态还无法保持一致。而要使用单例模式就必须根据现有数据对已插入节点进行插入、更新、移除等操作以保持数据的一致性这就很自然地会想到使用现代前端框架来对打字机效果进行改进。Vue是基于虚拟dom的渐进式javascript框架仅在数据变化时计算差异并更新必要的部分因此可以借助其数据驱动开发、组件化开发等特性轻松地构建一个可复用的打字机效果组件。5.1 设计思路要实现打字正文中穿插卡片的效果首先需要定义好返回的数据结构它需要具备可扩展方便解析兼容markdown等特性所以使用html标签是一种比较合适的方式例如要展示一个应用卡片可以下发如下所示数据。app id /从下发的数据中可以获取到标签名和属性键值对这样就可以通过标签名来渲染关联到的组件模板通过属性键值对去服务端加载对应的数据于是就可以水到渠成的把应用卡片展示出来其流程图如下图所示。图片5.2 详细说明组件模板文件按照一定规则组织在特定的目录下在构建时打包到资源里关键代码如下所示。privateinit(){let fileList require.context(/components/common/box, true, /\.vue$/);fileList.keys().forEach((filePath) {let startIndex filePath.lastIndexOf(/);let endIndex filePath.lastIndexOf(.);let tagName filePath.substring(startIndex 1, endIndex);this.widgetMap[tagName] fileList(filePath).default;});}之前版本在每次接收到服务端下发的markdown文本时都会做一次转换成html的操作如果多次响应之间的间隔时间很短则会出现略微卡顿的现象因此这里转换为html时再增加一个防抖功能可以很有效的避免卡顿。每次定时截取到待渲染的html文本以后会基于ultrahtml库将其转换为dom树并过滤掉注释、脚本等标签核心代码如下。let toRenderHtml this.rawHtml.substring(0, this.curIndex);let dom {type: ELEMENT_NODE,name: p,children: parse(toRenderHtml).children};最后就是全局注册一个递归组件用来渲染转换后的dom树核心代码如下。render(h: any) {// 此处省略若干代码// 处理子节点let children this.dom[children] || [];let renderChildren children.map((child: any, index: number) {return h(CommonDisplay, {props: {dom: child,displayCursor: this.displayCursor,lastLine: this.lastLine index children.length - 1,ignoreBoxTag: this.ignoreBoxTag}});});// 此处省略若干代码// 处理文本节点if (this.dom[type] TEXT_NODE) {returnthis.renderTextNode({h, element: this.dom});}// 处理自定义组件标签let tagName this.dom[type] ELEMENT_NODE ? this.dom[name] : div;if (this.$factory.hasTag(tagName)) {// 此处省略若干代码let widget this.$factory.getWidget(tagName);return h(widget, {key: tagId,props: {displayCursor: this.displayCursor,lastLine: this.lastLine,text,...attributes}}, isLastLeaf this.displayCursor ? [h(commonCursor)] : []);}// 处理html原始标签return h(tagName, {attrs: {displayCursor: this.displayCursor,lastLine: this.lastLine,...this.dom[attributes]}}, renderChildren);}5.3 问题整理和解决打字机功能终于正常运行了流畅度还是不错的但是在体验的过程中也发现了一些细节问题。①打字文本中如果存在标签如 pxxx/p 会出现先展示 ,再展示 p 最后展示空的效果也就是字符回退极大影响阅读体验。原因分析定时截取待渲染文本时是通过定义一个下标递增逐字符截取的这就导致标签并没有作为一个原子结构被整体截取于是就出现了字符回退的现象。解决方案当下标指向的字符为 时则往后截取到 的位置核心代码如下。if (curChar ) {let lastGtIndex this.rawHtml.indexOf(, this.curIndex);if (lastGtIndex -1) {this.curIndex lastGtIndex 1;returnfalse;}}② 打字文本中如果存在转义字符如 quot; 则会依次出现这些字符最后再展示 也就是字符闪烁也十分影响阅读体验。原因分析原因同上述字符回退一样也是没有把转义字符当作一个整体截取。解决方案当下标指向的字符为 时则往后截取到转义字符结束的位置核心代码如下。// 大模型大概率只下发有限类别的转义字符做成配置动态下发不仅解析方便定制下发也很及时if (curChar ) {let matchEscape this.config[writer][escapeArr].find((item: any) {returnthis.rawHtml.indexOf(item, this.curIndex) this.curIndex;});if (matchEscape) {this.curIndex matchEscape.length;returnfalse;}}③ 打字过程中的速度是固定的缺少一点抑扬顿挫的节奏感不够自然。原因分析定时器的间隔时间是固定的一个数值所以表现为一个固定不变的打字节奏。解决方案可以根据未打印字符数来动态调整每次打字的速度一种可选的实现方案如下。假设未打印字符数为 N 速度平滑指数为 a 实际打字速度为 Vcurrent 逻辑应达到的打字速度为 Vnew 。if N 10 , Vnew 100 ms / 1字符if 10 N 20 , Vnew 100 - 8 * ( N - 10 ) ms / 1字符if 20 N , Vnew 20 ms / 4字符Vcurrent a * Vcurrent ( 1 - a ) * Vnew上述策略可能会比较多而且上线以后还有可能更换数值对照效果因此为了支持配置化我们可以对Vnew进行表达式归纳如下所示。Vnew Vinit - w * ( N - min ) bVinit 为默认初始打字速度w 为每条策略的权重值N 为未打印字符数min 为每条策略的最小字符数量比较值b 为每条策略的偏置。关键代码如下所示。privatespeedFn({curSpeed, curIndex, totalLength}: any){let leftCharLength Math.max(0, totalLength - curIndex);let matchStrategy this.config[writer][strategy].find((item: any) {return (!item[min] || item[min] leftCharLength) (!item[max] || item[max] leftCharLength);});let speed this.config[writer][initSpeed] - matchStrategy[w] * (leftCharLength - (matchStrategy[min] || 0)) matchStrategy[b];returnthis.config[writer][smoothParam] * curSpeed (1 - this.config[writer][smoothParam]) * speed;}④ 打字过程中会时不时的回退到之前字符的位置重新开始打字例如当前展示 a b c 等到下一次渲染时会从 a 开始重新打完这一段。原因分析由于markdown文本结合会生成html标签从而导致字符数量增多那么当前下标指向的字符就相对之前落后了。let curIndex 5;// 当前下标let prevMarkdown **hello;// 上一次打印时的全量markdown文本let prevHtml p**hello/p;// 上一次打印时的全量html片段let prevRenderHtml p**p;// 上一次打印到页面上的html片段// 页面上会渲染 **// 当服务端继续下发了 ** 的markdown文本时curIndex会递增1变为6let curMarkdown **hello**;// 当前打印时的全量markdown文本let curHtml pstronghello/strong/p;// 当前打印时的全量html片段let curRenderHtml pstrong/strongp;// 当前打印到页面上的html片段// 页面上会渲染空标签然后重新开始打字尤其是在数学公式场景中非常容易复现解决方案解决这个问题需要分两步走。首先需要判断打印到页面上的html片段是否有变化因为只有变化时才会出现这种情况而判断是否有变化只需要记录一下上一次的html片段和这一次的html片段是否不同即可比较好处理。其次就是需要重新定位下标到上一次打印到的位置这里相对比较难处理因为html的结构和内容都在变化很难准确的定位到下标应该移动到什么位置。虽然我们不能准确定位但是只要能够使当前打印到页面上的字符比上一次的字符多就可以满足诉求了。于是我想到了textContent这个属性它可以获取当前节点及其后代的所有文本内容。那么问题就转化为找到一个下标使得当前截取的html片段的textContent长度要比上一次的textContent长度大。综上所述可以得到核心代码如下所示。if (this.isHtmlChanged()) {let domRange: any document.createRange();let prevFrag domRange.createContextualFragment(this.prevRenderHtml);let prevTextContent prevFrag.textContent;let diffNum 1;do {this.curIndex diffNum;let curHtml this.rawHtml.substring(0, this.curIndex);let curFrag domRange.createContextualFragment(curHtml);let curTextContent curFrag.textContent;diffNum prevTextContent.length - curTextContent.length;if (diffNum 0) {break;}} while (this.curIndex this.rawHtml.length);}5.4 小结通过现代前端框架构建打字机组件不仅减少了不必要的渲染和性能消耗而且还能高效灵活的穿插各种酷炫的样式效果实现更多复杂的产品功能。六、未来展望本文详细介绍了AI搜索中前端打字机效果的实现方案演进过程从最初的纯文本逐字符打字效果到借助现代前端框架实现灵活可复用的打字机组件每一个技术难点的技术突破无不体现了前端技术的持续进步和产品不断追求卓越的态度。同时我也希望本文可以抛砖引玉为读者打开思路提供借鉴。随着人工智能和前端技术的不断发展和创新生态的日益完善未来一定会不断涌现大量的新技术和新理念。我相信只要时刻保持积极学习和不断尝试的探索精神就能开拓出更多精彩创新的实现方案和应用场景。