HTML5 で最適化できる詳細の紹介

この記事では、HTML5 で最適化できる詳細を説明します。必要な方は参考にしていただければ幸いです。

最近コンパイルされた最適化の詳細をいくつか紹介します。画像圧縮については説明しません。これは最適化で行う必要があることです。今日は、コードを書くときに誰もが培うことができる最適化の詳細について話します。

• #float を乱用しないでください。 Web フォントを乱用しないでください。

Float はレンダリング中に大量の計算を必要とするため、標準から外れて折りたたまれます。代わりにフレックスレイアウトを使用できます。 Web フォントの導入には多大な労力がかかるため、あまり言いすぎず、デザイナーにそれを伝えるのが最善です。

• CSS での冗長なスタイル設定は避けてください。

color、font、line-height などはすべて継承できるため、子要素が同じ属性を持つ場合、特に font-family を繰り返し記述する必要があります。

#関数の戻り値をキャッシュできる複雑なメソッド。

• function cached (fn) {
      var cache = Object.create(null);
      return (function cachedFn (str) {
          var hit = cache[str];
          return hit || (cache[str] = fn(str))
      })
  };
  var fk = function (str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
  }
  var cacheFk = cached(fk)
  // 1 step
  cacheFk('ui') 
  //2 step
  cacheFk('ui')

これは、vue のソース コードを調べていたときに見つけたコードです。その機能は、複雑な関数の値をキャッシュし、パラメーターが次の場合に繰り返し計算を避けることです。同じ。ただし、ここで注意すべき点は、このキャッシュ機能はクロージャを通じて実行されるため、いくつかのトレードオフがあるということです。

レイアウトをできるだけ減らします。

• // 触发两次 layout
  var newWidth = p.offsetWidth + 50;
  p.style.width = newWidth + 'px';
  var newHeight = p.offsetHeight + 50;
  p.style.height = newHeight + 'px';
  
  // 只触发一次 layout
  var newWidth = p.offsetWidth + 50;
  var newHeight = p.offsetHeight + 50;
  p.style.width = newWidth + 'px';
  p.style.height = newHeight + 'px';

レイアウトをトリガーできるすべての操作は、レイアウト キューに一時的に置かれ、更新する必要がある場合、キュー全体のすべての操作の結果が計算されます。パフォーマンスを向上させるためにレイアウトを実行するだけです。

アニメーション要素はラベル外が最適であり、他のモジュールに影響を与えません。これも他の要素に影響を与えないようにするためです。

位置ではなく変換します。
CSS ディスプレイスメント効果を実行するには、配置ではなく変換を使用するのが最善です。最初にアニメーションカードを作成するためにpositionを使用しました~~~

dom要素を選択してIDを使用しますが、CSSを設定するためのIDは定義しません。
ID セレクターを使用する場合は、他のクラス制約を追加しないでください。定義する ID が多すぎると再利用性が低下し、メンテナンスが困難になるため、CSS で複数の ID を使用することはお勧めできません。

長さを複数回使用する場合は、変数を使用して保存します。

• var len = dom.length;
  for(var i = 0;i < len;i++){}；

この利点は、ループするたびに dom の長さを計算する必要がないことです。

requestAnimationFrame は setTimeout を置き換えます

• var start = null;
  var element = document.getElementById('SomeElementYouWantToAnimate');
  element.style.position = 'absolute';
  
  function step(timestamp) {
    if (!start) start = timestamp;
    var progress = timestamp - start;
    element.style.left = Math.min(progress / 10, 200) + 'px';
    if (progress < 2000) {
      window.requestAnimationFrame(step);
    }
  }
  
  window.requestAnimationFrame(step);
  //window.requestAnimationFrame(callback);
  返回值是一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

requestAnimationFrame は時間を設定する必要のないタイマーです。これは 1/60 秒ごとに実行されます。ブラウザの更新に基づいてフレーム数が異なります。ただし、使用する場合は互換性が問題になります。

可能であれば、グローバル検索は避けてください。

• //dom = document.querySelector("#id");
  function test() {
      dom = document.querySelector("#id");
  }

たとえば、dom をテストでのみ使用する場合は、dom をグローバルに定義しないでください。これは、実行中にテスト関数の内部スコープで検索されるためです。もっと早く。

トラバーサルの長さまたはトラバーサル オブジェクトがわからない場合を除き、for in を使用しないでください

•     function t1(){        //20ms
          var i = 0;
         for(item in anObj) {
             i++
         }
         if( i === 100000){
             console.log('for in ok')
         }
      }
      function t2(){     //4ms
          var len = anObj.length;
          var i = 0;
          for(var i = 0 ;i < len;i++){
              i++
          }
          if( i === 100000){
              console.log(&#39;for ok&#39;)
          }
      }

これは私自身のテストです100,000 要素の配列のループの結果の実行時間 (コードを参照)。したがって、これを使用しないのが最善です。通常、オブジェクトの横断は実際には使用されません。オブジェクトを通過するときに特別な状況がある場合にも注意する必要があります。 ！ ！通過するものはそれ自体ではありません。 for in はそのプロトタイプ チェーンを横断するだろうと思いました。

スケルトン画面
これは、読み込みの強化版と同様に、ユーザー エクスペリエンスを強化するためのものです。自動生成ソリューションがあります。興味があればご覧ください。

ios では、ページで携帯電話番号を特定することが禁止されています。 Android ではメール アドレスの認識が禁止されています。

• <meta name="format-detection" content="telephone=no" />
  <meta name="format-detection" content="email=no" />

Head CSS 下部の JS。
誰もが知っているように、js は dom の解析をブロックし、白い画面時間が増加します。必ず注意してください。

実際のところ、最適化には細かい部分がたくさんあるので、コーディングの習慣を身につけ、少しずつ積み重ねていくと、コードの品質が確実に違ってきます。

以上がHTML5 で最適化できる詳細の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。