作为使用web技术的代码编辑器从业者,关注web平台的各种新建议是工作的一部分。随着monacoeditor被许多服务所使用,我也开始收到各种新提案的发起人的邀请,以便对他们的提案提供反馈。这些建议中有一些与编辑的开发效率和性能优化密切相关,但它们还处于非常早期的阶段,具有很大的潜力,因此我认为它们值得大家分享,以便大家能够参与到这些建议的设计讨论中来。
方案名称:键盘地图
我想首先介绍的提案键盘图实际上是在我以前的博客中详细介绍的。如果您的产品用户使用非美国标准键盘,请详细阅读以下文章。
简而言之,在不同的标准键盘上,按同一物理键时输入系统的字符可能不同。例如,在美国标准键盘上,shift旁边的键是Z,而在德国键盘上是y。
此建议旨在为您提供物理密钥和字符之间的映射关系。至于它能解决什么问题,请阅读以上系列文章。对不起,500字可能无法完全解释。
建议名称:editcontextapi wicg
要为web平台制作文档或代码编辑器,仅使用文本区域和输入是不够的。要实现多样式文本快捷键支持和文档虚拟化呈现,通常使用以下两种方案
种方案是创建一个不可见的textaea,记录它上面发生的所有事件,例如inputKeydown等,然后根据格式呈现页面中的输入内容。也就是说,textarea事件,用户看到的所有内容都是虚拟呈现的。
这个方案的工作量非常大,因为甚至光标和选择都是自己呈现的。更重要的是,这意味着在触摸屏上,用手指选择文本基本上是不可能的。
contenteditable API的引入是为了方便所见即所得编辑器API的实现,但是contenteditable在其早期存在太多的bug,我们在文本领域已经做了很多工作。Contenteditable现在已经成熟了很多,但是它有几个限制
editcontext方案的解决方案是分离用户输入的一系列api。应用程序只需要通过editcontext的新接口接收用户输入。换句话说
这个提议似乎有很大的潜力。如果终的实现能够提高触摸屏上的用户体验和可访问性,那就值得一试。
高亮度API,建议名称:msedgeexplainers/highlight
edge团队的另一个有趣的提议是highlight API。这是更好的理解。可以异步通知浏览器调整DOM节点的样式。
现在每个人的方法都是在生成HTML时直接引入样式信息(内联或通过CSS)。highlight API使这个过程异步化,简化了结构并使呈现更可控。理论上,highlight API的性能更好更干净。
如果上面的建议与编辑器密切相关,那么下面的两个建议相对更通用,对于大多数web应用程序的性能优化具有潜在的价值。
一般来说,页面中的DOM结构和节点越复杂,对浏览器渲染的挑战就越大。解决这个问题的主要方法之一是将用户暂时看不到的内容保留在dom之外。问题解决了
这优化了性能,但带来了许多经验问题:
前两个问题,一般来说,只要你用主流框架来开发项目,基本的坑已经填好了,你可以根据框架名virtualist来搜索找到答案。解决方案通常是
为了完成上述方案,对算法基础和浏览器渲染机制都有一定的要求,每个框架都可能需要自己的虚拟机。