1. Speicherort der js-Dateien laden In HTML-Dateien können -Tags zum <head>-Bereich hinzugefügt werden. Aufgrund des Single-Threaded-Grunds für die JavaScript-Ausführung und das UI-Rendering wird beim Laden der JS-Datei der nachfolgende Parsing-Prozess der Seite blockiert. Die Seite wartet, bis die JS-Datei vollständig geladen und ausgeführt ist, bevor sie weiter ausgeführt wird die Operation. Dann tritt das Problem auf, die Seite ist möglicherweise leer oder hängt fest. Als Frontend-Entwickler ist es wichtig, nicht nur die Anforderungen zu realisieren, sondern auch ein hochwertiges Benutzererlebnis zu bieten. Dann müssen wir das langweilige Warten der Benutzer beseitigen. Um dieses Problem zu lösen, habe ich mir zwei Lösungen ausgedacht: </p> <p>1. Wenn für die js-Datei keine besonderen Anforderungen gelten, die darauf hinweisen, dass sie vor dem Rendern der Seite geladen und kompiliert werden muss, wählen Sie, die js-Datei vor dem </body> zu platzieren Der auf der Seite angezeigte Inhalt befindet sich weiterhin im <head>-Bereich (niemand möchte eine Seite mit einem unordentlichen Layout sehen). Dadurch können Benutzer eine Layoutseite anstelle einer leeren Seite sehen. Dann werden einige Leute darauf hinweisen: Die Daten müssen über js-Anfragen geladen werden. Das Laden von Daten, die dringend benötigt werden, kann zuerst ausgeführt werden, und gleichzeitig kann eine einfache Ladeanimation oder -aufforderung erstellt werden. </p> <p>2. Wenn diese js-Dateien angeben, dass sie zuerst ausgeführt werden müssen, um den Seiteninhalt besser anzuzeigen, dann fügen Sie eine kleine Ladeanimation auf die erste js oder Seite ein, die etwas Interessantes oder Niedliches sein kann. Dies kann auch die Langeweile des Wartens auf Benutzer besser vermeiden. Möglicherweise sind sie mehr an der Ladeanimation interessiert, was die Benutzererfahrung des Projekts verbessern kann. </p> <p><span style="color: #800000"><strong>Abschließende Empfehlung: </strong></span> Platzieren Sie das <script>-Tag so weit wie möglich vor dem </body>-Tag, um die Benutzererfahrung zu verbessern. </p> <p><strong>2. js-Dateien zusammenführen</strong><br> In vielen Teamentwicklungen platzieren wir möglicherweise Codeblöcke mit unterschiedlichen Funktionen in verschiedenen js-Dateien, sodass es für alle bequemer ist, während des Entwicklungsprozesses zusammenzuarbeiten, um Code zu schreiben. Schließlich müssen wir nur den entsprechenden Ordner oder die entsprechende Datei finden statt in einer Methode in einem sehr langen Dokument zu suchen. Dies wird tatsächlich die Effizienz der Teamentwicklung verbessern und es neuen Leuten erleichtern, nach dem Beitritt sekundäre Entwicklungs- und Wartungsarbeiten durchzuführen. Wie wäre es also, dieses Problem in die Seitenleistung einzubeziehen? Dies ist genau das Problem, das im Buch beschrieben wird: Jede HTTP-Anfrage bringt zusätzlichen Leistungsaufwand mit sich, sodass das Herunterladen einer einzelnen 100-KB-Datei schneller ist als das Herunterladen von vier 25-KB-Dateien.</p> <p>Das Herunterladen einer 100-KB-Datei ist schneller als das Herunterladen von vier 25-KB-Dateien, und es bietet große Vorteile, jede Datei während des Entwicklungsprozesses zu unterscheiden, sodass das Problem der Zusammenführung meiner Meinung nach nach Abschluss der Entwicklung behoben wird Ist jedem bekannt, oder? Es gibt mittlerweile so viele Front-End-Tools, also verwenden Sie einfach die Komprimierung, die Sie gewohnt sind~<br> Lassen Sie mich hier kurz erwähnen, dass Sie beim Laden von Dateien auch die Attribute „defer“ und „async“ verwenden können. Die meisten von ihnen unterstützen das Attribut „defer“ noch nicht. Ich weiß nicht, ob es irgendwelche spezifischen Probleme geben wird. Interessierte Freunde können diesen Wissenspunkt selbst googeln, ich werde ihn hier kurz erwähnen. </p> <p>Die meisten heutigen Frameworks unterstützen auch Lazy Loading und On-Demand-Loading. </p> <p><strong>3. Schnellerer Datenzugriff</strong></p> <p>Für den Browser ist es umso langsamer, ihn zu lesen und zu schreiben, je tiefer die Position eines Bezeichners liegt (dasselbe gilt für die Prototypenkette). Das sollte nicht schwer zu verstehen sein: Je weiter das Lebensmittelgeschäft von Ihrem Zuhause entfernt ist, desto länger brauchen Sie, um Sojasauce zuzubereiten ... Freches Kind, wenn Sie so lange brauchen, um Sojasauce und Gemüse zuzubereiten wird verbrannt -.-~ </p> <p>Wenn wir einen Variablenwert innerhalb der aktuellen Funktion mehrmals verwenden müssen, können wir ihn zuerst mit einer lokalen Variablen speichern. Der Fall ist wie folgt: </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> //修改前 function showLi(){ var i = 0; for(;i<document.getElementsByTagName("li").length;i++){ //一次访问document console.log(i,document.getElementsByTagName("li")[i]); //三次访问document }; }; //修改后 function showLi(){ var li_s = document.getElementsByTagName("li"); //一次访问document var i = 0; for(;i<li_s.length;i++){ console.log(i,li_s[i]); //三次访问局部变量li_s }; }; </pre><div class="contentsignin">Nach dem Login kopieren</div></div> </div> <p><strong>4. Optimierung von DOM-Operationen</strong></p> <p>Wie wir alle wissen, verbrauchen DOM-Operationen weitaus mehr Leistung als die Ausführung von JavaScript. Obwohl wir nicht umhin können, auf DOM zu arbeiten, können wir versuchen, den Leistungsverbrauch dieser Operation so weit wie möglich zu reduzieren. </p> <p>Lassen Sie uns dies anhand des Codes erklären: </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> function innerLi_s(){ var i = 0; for(;i<20;i++){ document.getElementById("Num").innerHTML="A"; //进行了20次循环，每次又有2次DOM元素访问：一次读取innerHTML的值，一次写入值 }; }; </pre><div class="contentsignin">Nach dem Login kopieren</div></div> </div> <p>Schreiben Sie die obige Methode neu: </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> function innerLi_s(){ var content =""; var i = 0; for(;i<20;i++){ content += "A"; //这里只对js的变量循环了20次 }; document.getElementById("Num").innerHTML += content; //这里值进行了一次DOM操作，又分2次DOM访问：一次读取innerHTML的值，一次写入值 }; </pre><div class="contentsignin">Nach dem Login kopieren</div></div> </div> <p><strong>5. Reduzieren Sie das Neuzeichnen und Neuanordnen von Dom </strong></p> <p>Änderungen am Elementlayout, hinzugefügte Inhalte, Löschungen oder Änderungen der Browserfenstergröße führen zu einem Umfließen, während Änderungen an der Schrift- oder Hintergrundfarbe zu einer Neuzeichnung führen. <br /> Für Vorgänge, die dem folgenden Code ähneln, wird gesagt, dass die meisten modernen Browser optimiert wurden (optimiert in eine Neuanordnungsversion): </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> //修改前 var el = document.getElementById("div"); el.style.borderLeft = "1px"; //1次重排版 el.style.borderRight = "2px"; //又1次重排版 el.style.padding = "5px"; //还有1次重排版 //修改后 var el = document.getElementById("div"); el.style.cssText = "border-left:1px;border-right:2px;padding:5px"; //1次重排版 </pre><div class="contentsignin">Nach dem Login kopieren</div></div> </div> <p>针对多重操作，以下三种方法也可以减少重排版和重绘的次数：</p> <p>1.Dom先隐藏，操作后再显示 2次重排 (临时的display:none)</p> <p>2.document.createDocumentFragment() 创建文档片段处理，操作后追加到页面 1次重排</p> <p>3.var newDOM = oldDOM.cloneNode(true)创建Dom副本，修改副本后oldDOM.parentNode.replaceChild(newDOM,oldDOM)覆盖原DOM 2次重排</p> <p><strong>六、循环的优化</strong></p> <p>这应该是较多人都知道的写法了，简单带过即可(后面还是用代码+注释形式说明)~</p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> //修改前 var i = 0; for(;i<arr.lengthli++){ //每次循环都需要获取数组arr的length console.log(arr[i]); } //修改后 var i = 0; var len = arr.length; //获取一次数组arr的length for(;i<len;i++){ console.log(arr[i]); } //or var i = arr.length;; for(;i;i--){ console.log(arr[i]); } </pre><div class="contentsignin">Nach dem Login kopieren</div></div> </div> <p><strong>七、合理利用二进制</strong></p> <p>如：对2取模，则偶数最低位是0，奇数最低位是0，与1进行位与操作的结果是0，奇数的最低位是1，与1进行位与操作的结果是1。</p> <p>代码如下：</p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> .odd{color:red} .even{color:yellow} <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </pre><div class="contentsignin">Nach dem Login kopieren</div></div> </div> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> var i = 0; var lis = document.getElementsByTagName("li"); var len = lis.length; for(;i<len;i++){ if(i&1){ lis[i].className = "even"; } else{ lis[i].className = "odd"; } }; </pre><div class="contentsignin">Nach dem Login kopieren</div></div> <br> </div> <p>虽说现代浏览器都已经做的很好了，但是本兽觉得这是自己对代码质量的一个追求。并且可能一个点或者两个点不注意是不会产生多大性能影响，但是从多个点进行优化后，可能产生的就会质的飞跃了</p> <p>JavaScript 总结的这几个提高性能知识点，希望大家牢牢掌握。</p>
