1363684 - tip faster js offsetwith

Status: RESOLVED WONTFIX

(Developer Documentation Graveyard :: JavaScript, enhancement, P5)

Description

[peter]

:: Developer Documentation Request

      Request Type: Correction
     Gecko Version: 55 Branch
 Technical Contact: 

:: Details

I trying find fast method to detect position and widht columns of table with 800 rows. OffsetWidth is slow. I find something in google.

Somebody 1 - use create div, append body, innerHTML text, get offsetWidth
Somebody 2 - use canvas, put text, get metric width
2 is faster (tnative = 410, t1 = 460, t2 = 80).

function getTextWidth(text, font) {
    // re-use canvas object for better performance
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
}
getTextWidth.canvas = document.createElement("canvas")

Comment 1

[BMO Automation]

MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.