Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Startup and canvas render window resize that updates devicePixelRatio is expensive

See original GitHub issue

After https://github.com/sourcelair/xterm.js/pull/938

Repro:

Launch xterm.js

Open demo
Start performance timeline
Press cmd/ctrl and + 3 times

The reason this happens is because it redraws the char atlas, that’s also the reason the time gets greater the more cmd/ctrl + is pressed (more pixels). This could be done using OffscreenCanvas and web workers for browsers that support?

Issue Analytics

State:
Created 6 years ago
Comments:10 (10 by maintainers)

Top GitHub Comments

1reaction

Tyriarcommented, Oct 6, 2017

One off process is what I’m thinking as it’s generally a pretty infrequent thing. If they take a little while to spin up then we could add some time after it’s stopped before terminating? (eg. ctrl++ multiple times)

1reaction

Tyriarcommented, Oct 5, 2017

The best solution to these two issues is to pull the CharAtlas generation into a web worker. This is blocked on OffscreenCanvas support so that we can draw on a worker thread.

The great thing about this solution is that the terminal can start drawing immediately just fine, the CharAtlas is just an optimization that can come in whenever and it will be picked up and used from that point on,.

Top Results From Across the Web

Scale Pixels for the Canvas with devicePixelRatio in React

[00:26] The key to this working is to get the ratio between the number of hardware pixels to software pixels, from window.devicePixelRatio. You' ......

Scaling performance - React Three Fiber Documentation

This is a short primer on how to scale performance. Running WebGL can be quite expensive depending on how powerful your devices are....

WebGL best practices - Web APIs - MDN Web Docs - Mozilla

Avoid alpha:false, which can be expensive. Specifying alpha:false during context creation causes the browser to composite the WebGL-rendered ...

(Three.js) Bloom effect performance - javascript - Stack Overflow

This problem is causing you to render a full window sized canvas and effects ... The next issue is that blur/bloom is an...

PIXI.Application - PixiJS API Documentation

WebGL renderer if available, otherwise CanvasRenderer. resizeTo Window | HTMLElement. The HTML element or window to automatically resize the ...