在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/