The hello-houdini's discuss from lonekorean

hello-houdini's Issues

module script evaluate two times

hi, I try the last demo Animated Polka Dot Fade, and I notice that worklet.js is evaluated two times.

I just add some console in the demo code:

CSS.registerProperty({
    name: '--dot-color',
    syntax: '<color>',
    initialValue: '#fff'
});
console.log('hello 1');
CSS.paintWorklet.addModule('worklet.js');
console.log('hello 2');

worklet.js is:

console.log('worklet.js');
var num = 0;
class PolkaDotFadePainter {
    static get inputProperties() {
        return ['--dot-spacing', '--dot-fade-offset', '--dot-color'];
    }

    paint(ctx, size, props) {
        num ++;
        console.log(123, num);
        let spacing = props.get('--dot-spacing').value;
        let fadeOffset = props.get('--dot-fade-offset').value;
        let color = props.get('--dot-color').toString();

        ctx.fillStyle = color;
        for (let y = 0; y < size.height + spacing; y += spacing) {
            ....//not change
        }
    }
}

registerPaint('polka-dot-fade', PolkaDotFadePainter);

The output is.

hello 1
hello 2
worklet.js
worklet.js
123 1
123 1
123 2
123 3
123 4
123 2
123 3
123 5

Obviously paint callback is bind two times.

And in Performance, evaluate module appears two times.

My chrome is 65.0.3325.181 and I use localhost(http) to test it. Then I add console to the same demo in codepen, and console is executed once.
In Performance, evaluate module also appears two times, but it seem only executes once.

I think the difference result is because of https, but I don't have a real https environment, so it's just a guess. Have you face the same problem? :)

Recommend Projects