mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Travis CI
515 lines
20 KiB
HTML
515 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<!--[if IE]><![endif]-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>Strumenti per la Performance | React</title>
|
|
<meta name="viewport" content="width=device-width">
|
|
<meta property="og:title" content="Strumenti per la Performance | React">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://facebook.github.io/react/docs/perf-it-IT.html">
|
|
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
|
|
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
|
<meta property="fb:app_id" content="623268441017527">
|
|
|
|
<link rel="shortcut icon" href="/react/favicon.ico">
|
|
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
|
|
|
|
<link rel="stylesheet" href="/react/css/syntax.css">
|
|
<link rel="stylesheet" href="/react/css/codemirror.css">
|
|
<link rel="stylesheet" href="/react/css/react.css">
|
|
|
|
<script src="//use.typekit.net/vqa1hcx.js"></script>
|
|
<script>try{Typekit.load();}catch(e){}</script>
|
|
|
|
<!--[if lte IE 8]>
|
|
<script src="/react/js/html5shiv.min.js"></script>
|
|
<script src="/react/js/es5-shim.min.js"></script>
|
|
<script src="/react/js/es5-sham.min.js"></script>
|
|
<![endif]-->
|
|
<script src="/react/js/codemirror.js"></script>
|
|
<script src="/react/js/javascript.js"></script>
|
|
<script src="/react/js/react.js"></script>
|
|
<script src="/react/js/react-dom.js"></script>
|
|
<script src="/react/js/babel-browser.min.js"></script>
|
|
<script src="/react/js/live_editor.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<div class="nav-main">
|
|
<div class="wrap">
|
|
<a class="nav-home" href="/react/index.html">
|
|
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
|
React
|
|
</a>
|
|
<ul class="nav-site nav-site-internal">
|
|
<li><a href="/react/docs/getting-started.html" class="active">Docs</a></li>
|
|
<li><a href="/react/support.html">Support</a></li>
|
|
<li><a href="/react/downloads.html">Download</a></li>
|
|
<li><a href="/react/blog/">Blog</a></li>
|
|
</ul>
|
|
|
|
<ul class="nav-site nav-site-external">
|
|
<li><a href="https://github.com/facebook/react">GitHub</a></li>
|
|
<li><a href="https://facebook.github.io/react-native/">React Native</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<section class="content wrap documentationContent">
|
|
<div class="nav-docs">
|
|
<!-- Docs Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Quick Start</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/getting-started.html">Getting Started</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/tutorial.html">Tutorial</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Community Resources</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/conferences.html">Conferences</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/videos.html">Videos</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="https://github.com/facebook/react/wiki/Complementary-Tools" class="external">Complementary Tools</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="https://github.com/facebook/react/wiki/Examples" class="external">Examples</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Guides</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/why-react.html">Why React?</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/displaying-data.html">Displaying Data</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-in-depth.html">JSX in Depth</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-spread.html">JSX Spread Attributes</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/multiple-components.html">Multiple Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/reusable-components.html">Reusable Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/transferring-props.html">Transferring Props</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/forms.html">Forms</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/more-about-refs.html">Refs to Components</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/tooling-integration.html">Tooling Integration</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/addons.html">Add-Ons</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/animation.html">Animation</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/two-way-binding-helpers.html">Two-Way Binding Helpers</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/clone-with-props.html">Cloning Elements</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/create-fragment.html">Keyed Fragments</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/update.html">Immutability Helpers</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/pure-render-mixin.html">PureRenderMixin</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/perf.html">Performance Tools</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/shallow-compare.html">Shallow Compare</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/advanced-performance.html">Advanced Performance</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/context.html">Context</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Reference</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/top-level-api.html">Top-Level API</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/component-api.html">Component API</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/tags-and-attributes.html">Supported Tags and Attributes</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/events.html">Event System</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/dom-differences.html">DOM Differences</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/special-non-dom-attributes.html">Special Non-DOM Attributes</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/webcomponents.html">Web Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/glossary.html">React (Virtual) DOM Terminology</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Flux</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="https://facebook.github.io/flux/docs/overview.html" class="external">Flux Overview</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="https://facebook.github.io/flux/docs/todo-list.html" class="external">Flux TodoMVC Tutorial</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<!-- Tips Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Tips</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/tips/introduction.html">Introduction</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/expose-component-functions.html">Expose Component Functions</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/children-undefined.html">this.props.children undefined</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/use-react-with-other-libraries.html">Use React with Other Libraries</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/dangerously-set-inner-html.html">Dangerously Set innerHTML</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="inner-content">
|
|
<h1>
|
|
Strumenti per la Performance
|
|
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/10.9-perf.it-IT.md" target="_blank">Edit on GitHub</a>
|
|
</h1>
|
|
<div class="subHeader"></div>
|
|
|
|
<p>React è solitamente assai veloce. Tuttavia, in situazioni nelle quali devi spremere fino all'ultima goccia di prestazioni dalla tua applicazione, fornisce un hook <a href="/react/docs/component-specs.html#updating-shouldcomponentupdate">shouldComponentUpdate</a> nel quale puoi aggiungere controlli di ottimizzazione per l'algoritmo di confronto di React.</p>
|
|
|
|
<p>Oltre a darti una panoramica sulle prestazioni generali della tua applicazione, ReactPerf è uno strumento di profilazione che ti dice esattamente dove è necessario aggiungere questi hook.</p>
|
|
|
|
<blockquote>
|
|
<p>Nota:</p>
|
|
|
|
<p>La build di sviluppo di React è più lenta della build di produzione, per via di tutta la logica aggiuntiva per fornire, ad esempio, gli avvisi amichevoli di React nella console (eliminati dalla build di produzione). Pertanto, il profilatore serve soltanto ad indicare le parti <em>relativamente</em> costose della tua applicazione.</p>
|
|
</blockquote>
|
|
<h2><a class="anchor" name="api-generale"></a>API Generale <a class="hash-link" href="#api-generale">#</a></h2>
|
|
<p>L'oggetto <code>Perf</code> documentato di seguito è esposto come <code>React.addons.Perf</code> quando si usa la build <code>react-with-addons.js</code> in modalità di sviluppo.</p>
|
|
<h3><a class="anchor" name="perf.start-and-perf.stop"></a><code>Perf.start()</code> and <code>Perf.stop()</code> <a class="hash-link" href="#perf.start-and-perf.stop">#</a></h3>
|
|
<p>Avvia/interrompe la misurazione. Le operazioni React intermedie sono registrate per analisi in seguito. Le operazioni che hanno impiegato un tempo trascurabile vengono ignorate.</p>
|
|
|
|
<p>Dopo l'interruzione, dovrai chiamare <code>Perf.getLastMeasurements()</code> (descritta in seguito) per ottenere le misurazioni.</p>
|
|
<h3><a class="anchor" name="perf.printinclusivemeasurements"></a><code>Perf.printInclusive(measurements)</code> <a class="hash-link" href="#perf.printinclusivemeasurements">#</a></h3>
|
|
<p>Stampa il tempo complessivo impiegato. Se non vengono passati argomenti, stampa tutte le misurazioni dall'ultima registrazione. Stampa una tabella gradevolmente formattata nella console, come segue:</p>
|
|
|
|
<p><img src="/react/img/docs/perf-inclusive.png" alt=""></p>
|
|
<h3><a class="anchor" name="perf.printexclusivemeasurements"></a><code>Perf.printExclusive(measurements)</code> <a class="hash-link" href="#perf.printexclusivemeasurements">#</a></h3>
|
|
<p>I tempi "esclusivi" non includono il tempo impiegato a montare i componenti: processare le proprietà, <code>getInitialState</code>, chiamare <code>componentWillMount</code> e <code>componentDidMount</code>, etc.</p>
|
|
|
|
<p><img src="/react/img/docs/perf-exclusive.png" alt=""></p>
|
|
<h3><a class="anchor" name="perf.printwastedmeasurements"></a><code>Perf.printWasted(measurements)</code> <a class="hash-link" href="#perf.printwastedmeasurements">#</a></h3>
|
|
<p><strong>La parte più utile in assoluto del profilatore</strong>.</p>
|
|
|
|
<p>Il tempo "sprecato" è impiegato nei componenti che non hanno di fatto visualizzato nulla, ad es. il rendering è rimasto inalterato, quindi il DOM non è stato toccato.</p>
|
|
|
|
<p><img src="/react/img/docs/perf-wasted.png" alt=""></p>
|
|
<h3><a class="anchor" name="perf.printdommeasurements"></a><code>Perf.printDOM(measurements)</code> <a class="hash-link" href="#perf.printdommeasurements">#</a></h3>
|
|
<p>Stampa le manipolazioni sottostanti del DOM, ad es. "imposta innerHTML" e "rimuovi".</p>
|
|
|
|
<p><img src="/react/img/docs/perf-dom.png" alt=""></p>
|
|
<h2><a class="anchor" name="api-avanzata"></a>API Avanzata <a class="hash-link" href="#api-avanzata">#</a></h2>
|
|
<p>I metodi di stampa precedenti utilizzano <code>Perf.getLastMeasurements()</code> per effettuare una gradevole stampa dei risultati.</p>
|
|
<h3><a class="anchor" name="perf.getlastmeasurements"></a><code>Perf.getLastMeasurements()</code> <a class="hash-link" href="#perf.getlastmeasurements">#</a></h3>
|
|
<p>Ottieni l'array delle misurazioni dall'ultima sessione di avvio-interruzione. L'array contiene oggetti, ciascuno dei quali assomiglia a quanto segue:</p>
|
|
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="p">{</span>
|
|
<span class="c1">// I termini "inclusive" ed "exclusive" sono spiegati in seguito</span>
|
|
<span class="s2">"exclusive"</span><span class="o">:</span> <span class="p">{},</span>
|
|
<span class="c1">// '.0.0' è l'identificativo React del nodo</span>
|
|
<span class="s2">"inclusive"</span><span class="o">:</span> <span class="p">{</span><span class="s2">".0.0"</span><span class="o">:</span> <span class="mf">0.0670000008540228</span><span class="p">,</span> <span class="s2">".0"</span><span class="o">:</span> <span class="mf">0.3259999939473346</span><span class="p">},</span>
|
|
<span class="s2">"render"</span><span class="o">:</span> <span class="p">{</span><span class="s2">".0"</span><span class="o">:</span> <span class="mf">0.036999990697950125</span><span class="p">,</span> <span class="s2">".0.0"</span><span class="o">:</span> <span class="mf">0.010000003385357559</span><span class="p">},</span>
|
|
<span class="c1">// Numero di istanze</span>
|
|
<span class="s2">"counts"</span><span class="o">:</span> <span class="p">{</span><span class="s2">".0"</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="s2">".0.0"</span><span class="o">:</span> <span class="mi">1</span><span class="p">},</span>
|
|
<span class="c1">// Scritture sul DOM</span>
|
|
<span class="s2">"writes"</span><span class="o">:</span> <span class="p">{},</span>
|
|
<span class="c1">// Informazioni aggiuntive per il debug</span>
|
|
<span class="s2">"displayNames"</span><span class="o">:</span> <span class="p">{</span>
|
|
<span class="s2">".0"</span><span class="o">:</span> <span class="p">{</span><span class="s2">"current"</span><span class="o">:</span> <span class="s2">"App"</span><span class="p">,</span> <span class="s2">"owner"</span><span class="o">:</span> <span class="s2">"<root>"</span><span class="p">},</span>
|
|
<span class="s2">".0.0"</span><span class="o">:</span> <span class="p">{</span><span class="s2">"current"</span><span class="o">:</span> <span class="s2">"Box"</span><span class="p">,</span> <span class="s2">"owner"</span><span class="o">:</span> <span class="s2">"App"</span><span class="p">}</span>
|
|
<span class="p">},</span>
|
|
<span class="s2">"totalTime"</span><span class="o">:</span> <span class="mf">0.48499999684281647</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
|
|
<div class="docs-prevnext">
|
|
|
|
<a class="docs-prev" href="/react/docs/pure-render-mixin-it-IT.html">← Prev</a>
|
|
|
|
|
|
<a class="docs-next" href="/react/docs/advanced-performance-it-IT.html">Next →</a>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<footer class="wrap">
|
|
<div class="left">
|
|
A Facebook & Instagram collaboration.<br>
|
|
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
|
</div>
|
|
<div class="right">
|
|
© 2013–2016 Facebook Inc.<br>
|
|
Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<div id="fb-root"></div>
|
|
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-41298772-1', 'facebook.github.io');
|
|
ga('send', 'pageview');
|
|
|
|
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
|
|
|
(function(d, s, id) {
|
|
var js, fjs = d.getElementsByTagName(s)[0];
|
|
if (d.getElementById(id)) return;
|
|
js = d.createElement(s); js.id = id;
|
|
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
|
|
fjs.parentNode.insertBefore(js, fjs);
|
|
}(document, 'script', 'facebook-jssdk'));
|
|
</script>
|
|
</body>
|
|
</html>
|