Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Learn More

slow graphic function canvascontext.createLinearGradient()

  • 11 trả lời
  • 1 gặp vấn đề này
  • Trả lời mới nhất được viết bởi frank.schiller

more options

Hello together,

when implementing canvas graphics with 2D context, I notified that the latest FF 87.0 on windows is much slower than chrome/edge/opera on windows and also much slower as safari on mac. I drilled into detail and detected that it was caused when drawing polygons with color gradient (see attached image). Means that using canvascontext.createLinearGradient() instead of flat colors makes it slow. On the other hand using flat colors is perfectly fast.

I wondered, because I had much better experience with FF and installed an earlier version (78.9.0esr) on the same windows workstation and the problem was gone. Seams, that some change made the newer FF slower with this type of graphic..

CPU is i7 8650U 1.90 - 2.11 GHZ, OS is Windows 10 version 20H2

But the effect is the same on all windows workstations I tested. Would be happy to see, that I can use FF again with these type of graphic apps.

Đính kèm ảnh chụp màn hình

Giải pháp được chọn

OK, my Nightly that I use doesn't show any differences between those two, but I managed to run moz-regression and it really shows a regression. It points to Bug 1547286: Enable remote Canvas 2D in Windows Nightly builds.

So Bug 1548487 - Let remote 2D canvas ride the trains has been fixed in 84, and it confirms your query.

It also shows that this bug is fixed in 89 due Bug 1697344 - GPU acceleration of canvas creates a memory leak that can rapidly crash Firefox.

Đọc câu trả lời này trong ngữ cảnh 👍 0

Tất cả các câu trả lời (11)

more options

Hi, can you test this bug using mozregression? Thanks.

Hữu ích?

more options

Maybe also test this in the current Nightly build to see if this issue is still present.

Hữu ích?

more options

latest nightly build 88.0b8 does not show a better performance. same behaviour. I will have a look onto mozregression.

Thank you so far.

Hữu ích?

more options

Hi again,

used mozregression, but this caused some messages by virus protection. This seems to be acceptable, but I simply installed FF versions by downloading historic versions manually. So I found that V83.0 was fast in drawing and V84.0 was much slower which is still the case in the latest version. I have not drilled it down to the exact subversion. I try the next days if that helps.

KInd regards

Hữu ích?

more options

So IMHO it could be some edge case of the webrender. Try to set gfx.webrender.force-disabled = true in about:config and restart the browser to confirm it.

Hữu ích?

more options

Thank you for the hint. Switched the flag from false to true and restarted FF (Version87). But no effect, was still slow as before. Perhaps I reduce the program to a minimal sample. Some lines should be enough.

Hữu ích?

more options

Hope not to bother you, but the when used as index.html the below code shows that the current FF (V87) is several 100 times slower in gradient color fill as other browsers or FF with Version 83 or older. If you switch to flat colors, (which is prepared in code as comment) the problem does not appear.

<!DOCTYPE html>
<html lang="de">
<head>
    <title>dataviewer</title>
</head>
<body>
    <div class="top" id="root"></div>
    <script>

    function redraw(zoom)
    {
        let root = document.getElementById("root");
        canvas   = root.firstChild;
        let width  = window.innerWidth;
        let height = window.innerHeight;
        canvas.width  = width;
        canvas.height = height;
        let ctx = canvas.getContext("2d");
        ctx.fillStyle   = "black";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        let unit = zoom * Math.min(width,height)/100;

        for(let x = 0; x < 50; x++)
        {
            for(let y = 0; y < 50; y++)
            {
                grad = ctx.createLinearGradient(x*unit+x,y*unit+y,x*unit+x+unit,y*unit+y+unit);
                grad.addColorStop(0.0,"#0000ff");
                grad.addColorStop(0.5,"#000040");
                grad.addColorStop(1.0,"#0000ff");
                ctx.fillStyle = grad;     // this is much to slow with current FF
                //ctx.fillStyle = "blue"; // this is as fast as it should be
                ctx.fillRect(x*unit+x,y*unit+y,unit,unit)
            }
        }

        zoom *= 1.05;

        if(zoom > 2.0) zoom = 1.0;

        setTimeout (function() {redraw(zoom);},1);
    }

    let root = document.getElementById("root");
    let canvas = document.createElement("CANVAS");
    root.appendChild(canvas);
    redraw(1.0);

    </script>
</body>
</html>

Được chỉnh sửa bởi cor-el vào

Hữu ích?

more options

Sorry, my comment above was stripped somehow. So its unusable. . Any chance to post a few lines of html & javascript ?

Hữu ích?

more options

Oh, it was repaired. Thank you very much.

Hữu ích?

more options

Giải pháp được chọn

OK, my Nightly that I use doesn't show any differences between those two, but I managed to run moz-regression and it really shows a regression. It points to Bug 1547286: Enable remote Canvas 2D in Windows Nightly builds.

So Bug 1548487 - Let remote 2D canvas ride the trains has been fixed in 84, and it confirms your query.

It also shows that this bug is fixed in 89 due Bug 1697344 - GPU acceleration of canvas creates a memory leak that can rapidly crash Firefox.

Hữu ích?

more options

Yes indeed. The version 89.0a1 has a much better performance and is as fast as expected when running the sample above. Thank you very much for your interest and support.

Hữu ích?

Đặt một câu hỏi

Bạn phải đăng nhập vào tài khoản của bạn để trả lời bài viết. Vui lòng bắt đầu một câu hỏi mới, nếu bạn chưa có tài khoản.