it-swarm-eu.dev

Porušení Dlouhé spuštění JavaScriptu trvalo xx ms

Nedávno jsem dostal tento druh varování a tohle je poprvé, co jsem ho dostal:

[Violation] Long running JavaScript task took 234ms
[Violation] Forced reflow while executing JavaScript took 45ms

Pracuji na skupinovém projektu a nemám tušení, odkud pochází. nikdy předtím. Najednou se objeví, když se do projektu zapojí někdo jiný. Jak zjistím, který soubor/funkce způsobuje takové varování? Hledal jsem odpověď, ale hlavně řešení, jak to vyřešit. Nemohu to vyřešit, když nemůžu najít ani zdroj problému.

Poznámky: v tomto případě se varování objeví pouze na chromu. Snažil jsem se použít Edge, nedostal jsem žádná podobná varování. Ještě jsem to nezkoušel na mozille.

Aktualizace: Dokonce dostanu chybu z jquery.min.js říká:

[Violation] Handler took 231ms of runtime (50ms allowed)            jquery.min.js:2
226
procatmer

Aktualizovat: Chrome 58+ skryl tyto a další ladicí zprávy ve výchozím nastavení. Chcete-li je zobrazit, klepněte na šipku vedle položky „Info“ a vyberte položku „Verbose“.

Aktualizace 2: Chrome 57 je ve výchozím nastavení zapnut. Chcete-li je znovu zapnout, musíte povolit filtry a zrušit zaškrtnutí políčka „Skrýt porušení“.

najednou se objeví, když se do projektu zapojí někdo jiný

Myslím, že je to více pravděpodobné, že jste aktualizovali na Chrome 56. Toto varování je (imo) báječná nová funkce - prosím, vypněte ji pouze v případě, že jste zoufalí a váš hodnotitel vás odtrhne. Základní problémy jsou v jiných prohlížečích, ale prohlížeče vám neříkají, že je problém. Vstupenka Chromium je zde, ale na ní není žádná zajímavá diskuse: https://bugs.chromium.org/p/chromium/issues/detail?id=662497

Tyto zprávy jsou varování namísto chyb, protože to opravdu nebude způsobovat velké problémy. To může způsobit upuštění rámců nebo jinak způsobit méně hladký zážitek.

Stojí za to prozkoumat a upevnit, aby se zvýšila kvalita vaší aplikace. Způsob, jak toho dosáhnout, je věnovat pozornost okolnostem, ve kterých se zprávy zobrazují, a provádět testování výkonu, aby se zúžit, kde se problém vyskytuje. Nejjednodušším způsobem, jak spustit testování výkonu, je vložit nějaký kód takto:

function someMethodIThinkMightBeSlow() {
    const startTime = performance.now();

    // Do the normal stuff for this function

    const duration = performance.now() - startTime;
    console.log(`someMethodIThinkMightBeSlow took ${duration}ms`);
}

Chcete-li být pokročilejší, můžete také použít profiler Chrome: https://developers.google.com/web/tools/chrome-devtools/rendering-tools/

Nebo použijte knihovnu benchmarking, jako je tato: https://benchmarkjs.com/

Jakmile najdete nějaký kód, který trvá dlouhou dobu (50 ms je práh Chrome), máte několik možností:

  1. Vystřihněte některé z těchto úkolů, které mohou být zbytečné
  2. Zjistěte, jak dělat stejný úkol rychleji
  3. Rozdělte kód do několika asynchronních kroků

(1) a (2) může být obtížné nebo nemožné. Ale někdy je to opravdu snadné a měly by to být vaše první pokusy. V případě potřeby by mělo být vždy možné (3). K tomu budete používat něco jako

setTimeout(functionToRunVerySoonButNotNow);

nebo

// This one is not available natively in IE, but there are polyfills available.
Promise.resolve().then(functionToRunVerySoonButNotNow);

Více o asynchronní povaze JavaScriptu si můžete přečíst zde:

http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/

203
voltrevo

To jsou jen varování, jak všichni zmínili. Nicméně, pokud máte zájem o vyřešení těchto (které byste měli), pak musíte nejprve zjistit, co způsobuje varování. Neexistuje žádný důvod, kvůli kterému můžete získat varování o přetlaku.
Někdo vytvořil seznam pro některé možné možnosti. Další informace naleznete v diskusi.
Zde je shrnutí možných příčin -

Jaké síly rozložení/přetavení

Všechny níže uvedené vlastnosti nebo metody, když jsou požadovány/vyvolávány v JavaScriptu, spustí prohlížeč pro synchronní výpočet stylu a rozložení *. To se také nazývá reflow nebo thrashing layout , a je běžným problémovým místem.

Živel

Kolonkové metriky
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
Scroll stuff
  • elem.scrollBy(), elem.scrollTo()
  • elem.scrollIntoView(), elem.scrollIntoViewIfNeeded()
  • elem.scrollWidth, elem.scrollHeight
  • elem.scrollLeft, elem.scrollTop také, nastavení
Soustředit se
  • elem.focus() může spouštět double nucené rozvržení ( source )
Taky…
  • elem.computedRole, elem.computedName
  • elem.innerText ( zdroj )

getComputedStyle

window.getComputedStyle() bude typicky vynutit recalc stylu ( source )

window.getComputedStyle() vynutí také rozvržení, pokud platí některá z následujících skutečností:

  1. Prvek je ve stínu stromu
  2. Existují mediální dotazy (ty, které souvisí s výřezem). Konkrétně jedna z následujících možností: ( zdroj ) * min-width, min-height, max-width, max-height, width, height * aspect-ratio, min-aspect-ratio, max-aspect-ratio
    • device-pixel-ratio, resolution, orientation
  3. Požadovaná vlastnost je jedna z následujících: ( source )
    • height, width * top, right, bottom, left * margin [-top, -right, -bottom, -left, nebo zkratka] pouze pokud je marže pevná. * padding [-top, -right, -bottom, -left, nebo zkratka] pouze pokud je výplň pevná. * transform, transform-Origin, perspective-Origin * translate, rotate, scale * webkit-filter, backdrop-filter * motion-path, motion-offset, motion-rotation * x, y, rx, ry

okno

  • window.scrollX, window.scrollY
  • window.innerHeight, window.innerWidth
  • window.getMatchedCSSRules() pouze síly styl

Formuláře

  • inputElem.focus()
  • inputElem.select(), textareaElem.select() ( zdroj )

Události myši

  • mouseEvt.layerX, mouseEvt.layerY, mouseEvt.offsetX, mouseEvt.offsetY ( zdroj )

dokument

  • doc.scrollingElement pouze síly styl

Rozsah

  • range.getClientRects(), range.getBoundingClientRect()

SVG

spokojený

  • Spousta věcí,… včetně kopírování obrázku do schránky ( zdroj )

Více zde .

Aktualizovat:

robocat z komentářů

Další informace: zdrojový kód chromu z původní vydání a diskuse o výkonnostním API pro varování.

Aktualizace 2:
Je zde článek o tom, jak minimalizovat přetáčení vzhledu na PageSpeed ​​Insight společnosti Google . Vysvětluje, co je reflow prohlížeče -

Reflow je název procesu webového prohlížeče pro přepočítání pozic a geometrií prvků v dokumentu za účelem přeložení části dokumentu nebo celého dokumentu. Vzhledem k tomu, reflow je uživatel-blokování operace v prohlížeči, je užitečné pro vývojáře, aby pochopili, jak zlepšit reflow čas a také pochopit účinky různých vlastností dokumentu (DOM hloubka, CSS pravidla účinnosti, různé typy změn stylu) na reflow čas. Někdy přeformátování jednoho prvku v dokumentu může vyžadovat přeformátování jeho rodičovských prvků a také všech prvků, které jej následují.

A jak to minimalizovat -

  1. Snižte zbytečnou hloubku DOM. Změny na jedné úrovni ve stromě DOM mohou způsobit změny na každé úrovni stromu - až do kořene a celou cestu dolů do dětí upraveného uzlu. To vede k více času strávenému prováděním reflow.
  2. Minimalizujte pravidla CSS a odstraňte nepoužívaná pravidla CSS.
  3. Pokud provádíte komplexní změny vykreslování, například animace, proveďte to mimo tok. K dosažení tohoto cíle použijte polohu-absolutní nebo pozici-fix.
  4. Vyvarujte se zbytečných složitých CSS selektorů - zvláště pak voličů - které vyžadují vyšší výkon procesoru, aby bylo možné volit selektor.
60
noob

Několik nápadů:

  • Odstraňte polovinu kódu (možná prostřednictvím komentování).

    • Je tam problém? Skvělé, omezili jste možnosti! Opakovat.

    • Není tam problém? Ok, podívejte se na polovinu, kterou jste okomentovali!

  • Používáte systém pro správu verzí (např. Git)? Pokud ano, git checkout některé z vašich nedávných potvrzení. Kdy byl problém zaveden? Podívejte se na závazek a zjistěte, jaký kód se změnil, když se problém poprvé objevil.

26
therobinkim

V mém případě jsem zjistil, že to bylo vlastně způsobeno kódem z rozšíření (v mém případě Adblock).

Chcete-li identifikovat zdroj problému, spusťte aplikaci a nahrajte ji v kartě Výkon v prohlížeči Chrome.

Tam můžete zkontrolovat různé funkce, které trvalo dlouho. V mém případě byl ten, který byl napsán s varováním v konzole, ze souboru, který byl načten rozšířením Adblocku, ale ve vašem případě by to mohlo být něco jiného.

Zkontrolujte tyto soubory a zkuste zjistit, zda se jedná o kód rozšíření nebo o váš.

8
Matt Leonowicz

Podívejte se do konzoly Chrome pod záložkou Síť a najděte skripty, které se načtou nejdéle.

V mém případě existovala množina Angular přidaných do skriptů, které jsem v aplikaci zahrnula, ale dosud nebyly v aplikaci použity:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-aria.min.js"></script>

Jednalo se pouze o soubory jazyka JavaScript, které se načítaly déle než doba, po kterou byla zadána chyba „Dlouhé spuštění úlohy“.

Všechny tyto soubory běží na mých dalších webových stránkách bez chyb, ale generoval jsem tuto chybu "Dlouhé spuštění úlohy" na nové webové aplikaci, která sotva měla jakoukoli funkci. Chyba se ihned po vyjmutí zastavila.

Nejlepším odhadem je, že tyto Angular přidávaly rekurzivně do stále se prohlubujících sekcí DOM pro jejich počáteční značky - žádné nebyly, musely projít celým DOMem před ukončením, což trvalo déle než očekává Chrome - varování.

5
Jordan Reddick

Pokud jej používáte, mohlo by to být z Chrome 56 beta.

Ale není to na changelogu: https://blog.chromium.org/2016/12/chrome-56-beta-not-secure-warning-web.html

Toto můžete skrýt na panelu filtrů konzoly pomocí zaškrtávacího políčka Skrýt porušení .

4
Bastien

Našel jsem kořen této zprávy v mém kódu. Funkce: vyhledávání, které skrývá/zobrazuje uzly (offline). Bylo:

search.addEventListener('keyup', function() {
    for (const node of nodes)
        if (node.innerText.toLowerCase().includes(this.value.toLowerCase()))
            node.classList.remove('hidden');
        else
            node.classList.add('hidden');
});

Na kartě Výkon (profiler):  Chromium performance profiler layour recalculation reflow

Nyní:

search.addEventListener('keyup', function() {
    const nodesToHide = [];
    const nodesToShow = [];
    for (const node of nodes)
        if (node.innerText.toLowerCase().includes(this.value.toLowerCase()))
            nodesToShow.Push(node);
        else
            nodesToHide.Push(node);

    nodesToHide.forEach(node => node.classList.add('hidden'));
    nodesToShow.forEach(node => node.classList.remove('hidden'));
});

Na kartě Výkon (profiler):  Chromium profiler dark

A mám pocit, že vyhledávání funguje rychleji (229 uzlů).

3

pokud používáte chromovaný kanár, zaškrtněte volbu 'hide violations' . viz zde

3
zhaoming

Našel jsem řešení ve zdrojovém kódu Apache Cordova. Realizují to takto:

var resolvedPromise = typeof Promise == 'undefined' ? null : Promise.resolve();
var nextTick = resolvedPromise ? function(fn) { resolvedPromise.then(fn); } : function(fn) { setTimeout(fn); };

Jednoduchá implementace, ale chytrá cesta.

Přes Android 4.4 použijte Promise. Pro starší prohlížeče použijte setTimeout()


Používání:

nextTick(function() {
  // your code
});

Po vložení tohoto trikového kódu jsou všechna varovná hlášení pryč.

3
wf9a5m75

Jedná se o chybu narušení v prohlížeči Google Chrome, která ukazuje, kdy je zapnuta úroveň Verbose protokolování.

Příklad chybové zprávy:

 screenshot of the warning 

Vysvětlení:

Reflow je název procesu webového prohlížeče pro přepočítání pozic a geometrií prvků v dokumentu za účelem přeložení části dokumentu nebo celého dokumentu. Vzhledem k tomu, reflow je uživatel-blokování operace v prohlížeči, je užitečné pro vývojáře, aby pochopili, jak zlepšit reflow čas a také pochopit účinky různých vlastností dokumentu (DOM hloubka, CSS pravidla účinnosti, různé typy změn stylu) na reflow čas. Někdy přeformátování jednoho prvku v dokumentu může vyžadovat přeformátování jeho rodičovských prvků a také všech prvků, které jej následují.

Původní článek: Minimalizovat prohlížeč reflow Lindsey Simon, UX Developer, zveřejněn na developers.google.com.

A to je odkaz Google Chrome vám dává v profilu výkonu, na profilech rozložení (fialové oblasti), pro více informací o varování.

0
brokenthorn

nucený reflow často se stane když vy máte funkci volal násobek před koncem provádění.

Můžete například mít problém na smartphonu a ne na klasickém prohlížeči.

Doporučuji použít setTimeout k vyřešení problému.

To není příliš důležité, ale opakuji, problém vzniká, když voláte funkci několikrát, a ne když je funkce delší než 50 ms. Myslím, že se ve svých odpovědích mýlíte.

  1. Vypněte volání 1 na 1 a znovu načtěte kód, abyste zjistili, zda došlo k chybě produktu.
  2. Pokud druhý skript způsobí chybu, použijte setTimeOut na základě trvání narušení.
0
Cherif

1 Dostal se ke konzole

2 Klikněte na ikonu filtru v blízkosti (zaškrtávací políčko „Protokol Preserv“)

3 Zaškrtněte "Skrýt porušení" Zaškrtávací políčko


UPRAVIT

Tato funkce je z Chrome 58 odstraněna

Změnit rozevírací úrovně protokolování na podrobnější zobrazit porušení.

0
Sajan