typescript - Prestandaproblem med Promises, setTimeout, async/await på Edge


Finns det något som är inneboende fel med följande blandade användning av async/await, promise och setInterval? Det fungerar som önskat, men prestandan är fruktansvärd i Edge. Mitt testfall körs på ungefär 3,5 sekunder i Chrome, men tar över 2 minuter i Edge. Observera att detta är en metod från en TypeScript-klass.

public async exportPdf(sourceGraph: IGraph, filters: EntityFilter) {
        if (sourceGraph) {
            ...snip....
            for (let verticalPageIndex = 0; verticalPageIndex < pagesHighWithMargins; verticalPageIndex++) {
                for (let horizontalPageIndex = 0; horizontalPageIndex < pagesWideWithMargins; horizontalPageIndex++) {
                    // run with setTimeout so we can process other events between pages and prevent locking up the browser
                    await new Promise(resolve => setTimeout(resolve, 0)).then(async () => {
                        ...snip...
                        const svgElement = await exporter.exportSvgAsync(exportComponent) as SVGElement;
                         ....snip - expensive code to convert SVG to PDF page...
                    });
                }
            }

            return jsPdf.output('datauristring');
        } else {
            return new Promise((_, reject) => {
                reject(new Error('graph argument is null'));
            });
        }
    }

Självklart är jag nybörjare med JS och TS, men jag har varit med tillräckligt länge för att veta att det förmodligen är fel att blanda tre olika tekniker för att hantera asynkrona operationer. :-)

Svar #1

Jag stänger detta frågor eftersom jag har isolerat mitt huvudsakliga problem -- prestanda vid användning av Edge-webbläsaren -- till ett bibliotek jag använder för att konvertera SVG till PDF och inte min användning av promises, setTimeout eller async/await, men all ytterligare insikt om de ytterligare fynden nedan uppskattas!

@Bergis förslag uppskattas verkligen, men jag missar troligen fortfarande något. Om jag inte inkluderar raderna efter await new Promise(...) inuti then(), avslutas mina loopar innan jag har genererat innehållet på mina PDF-sidor, vilket gör att nästa steg -- exportera det kompletta PDF-innehållet som en sträng och spara till disk -- misslyckas. Jag behöver att denna loop slutförs synkront så att jag får allt PDF-innehåll i korrekt ordning. Den enda anledningen till att jag använder new Promise(resolve => setTimeout(resolve, 0)) är att lite förbättra webbläsarens respons under loopen, vilket fungerar ungefär som visas i det ursprungliga inlägget.

Jag tog bort async från then's callback och bytte till en synkron version av exportSvg-funktionen och det fungerar bra. Att helt enkelt vänta på anropet till exporter.exportSvgAsync utan att omsluta det i await new Promise(resolve => setTimeout(resolve, 0)).then(...) gjorde dock att webbläsaren inte alls var responsiv inne i loopen.