javascript - 在 HTML5/CSS/Js 中绘制水平和垂直线的最便宜的方法是什么？

Question

我想找到在 HTML/CSS/Js 中绘制任意长度和宽度的线条的最便宜(CPU 方面)的方法。我有一个案例，除了其他 HTML 元素外，我的页面还会在页面上呈现 50-200 行此类内容。我想到的方法是:

• SVG。一个用于水平线，一个用于垂直线。使用 Javascript 通过参数注入(inject)和渲染它们。
• Canvas 。一张覆盖整个屏幕且背景透明的 Canvas 。
• 带有 border-left/border-top 的 DIV 标签。通过 Javascript 方法进行抽象。

其他建议？哪一个会表现最好？这两种方法有任何兼容性问题吗？

Answer 1

引自HTML5 Canvas vs. SVG vs. div

• SVG 可能更适合元素少的应用程序和应用程序(少于 1000 个？真的要看情况)
• Canvas 更适合数千个对象和仔细操作，但需要更多代码(或库)才能让它起步。
• HTML Div 很笨重且无法缩放，只能用圆 Angular 制作圆形，制作复杂的形状是可能的，但涉及数百个微小的像素宽 div。疯狂接踵而至。

许多带有事件的 DOM 对象(数以千计)对于某些机器来说处理起来会非常痛苦。由于这里只有200，所以可能问题不大。在 SVG 上使用 Canvas 和使用 DOM 合成图像时，性能仍然会提高。