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

Question

我想找到在HTML / CSS / Js中绘制任意长度和宽度行的最便宜（以CPU为单位）的方法。我有一个案例，除了其他HTML元素之外，我的页面将在页面上呈现50-200行此类行。发生在我身上的方法是：

• SVG。一个用于水平线，一个用于垂直线。使用Javascript按参数注入和渲染它们。
• 帆布。一个画布，覆盖整个屏幕，背景透明。
• 包含border-left / border-top的DIV代码。摘要通过Javascript方法。

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

Answer 1

引自HTML5 Canvas vs. SVG vs. div

• SVG可能更适用于项目很少的应用程序和应用程序（少于1000个？真的取决于此）
• Canvas对于成千上万个对象和仔细操作更好，但需要更多代码（或库）来实现它。
• HTML Divs很笨重，不会缩放，只能使用圆角来制作圆形，这使得复杂的形状成为可能，但涉及数百个微小的像素范围的div。疯狂随之而来。

对于某些机器来说，附加事件的很多DOM对象（数千个范围）将会非常痛苦。因为这里只有200，所以可能不是问题。使用canvas优先于SVG并使用DOM合成图像时，性能仍会提高。

Answer 2

200线？我不会那么担心CPU。这并不像你在渲染第一人称射击游戏或任何东西。

当然，这取决于上下文，但默认的想法是使用div上的边框。

另一方面，如果这是一个可以独立存在的视觉对象，那么SVG很有意义，毕竟它是一种图像格式。

在浏览器中有很多用于操作SVG的库。这里只有一个：http://snapsvg.io/