ブロックのリソースを消去する

6794 ワード
javascript テキストリンク
今日、私はWordPressから静的なものにサイトを変えました.積載速度は大いに向上します.
私はそれをチェックGoogle PageSpeed Insights , その結果に応じて最適化を行う.

この記事では、インラインとJavaScript/CSSの違いを説明し、ページ読み込み速度を向上させる方法を説明します.
ページで参照される外部ファイル:JavaScript、CSSなどは、しばしばページをレンダリングすることからブラウザをブロックします.
フロントエンドのパフォーマンス調整は、ブラウザが可能な時間の最短の量で全体のページをレンダリングできるように、任意の潜在的なレンダリングブロックポイントを排除する必要があります.

ジャバスクリプト


この単純なHTMLを見てみましょう.
<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="page.js"></script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
上記のコードでは、ブラウザがscript ブラウザが何を知らないのでpage.js ページには、ブラウザがレンダリングを停止し、ダウンロードして実行する必要がありますかpage.js その後、ページの残りの部分をレンダリングし続ける.ダウンロードの遅延page.js ページ全体のレンダリングにも影響します.
だから、それを避ける方法?

インライン


ページの初期のレンダリングがページに依存するならば.JSは、インラインJavaScriptを使用することができます.
<!doctype html>
<html>
  <head>
    <script type="text/javascript">
    /* content of page.js */
    </script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

遅延負荷


ページの初期レンダリングが依存しない場合page.js , の負荷を遅らせることができましたpage.js そして、ページの初期の内容の後、それをロードしてください.
<!doctype html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello World</h1>
    <script type="text/javascript" src="page.js"></script>
  </body>
</html>

非同期/遅延読み込み


AsyncとDeferという2つのスクリプト属性があり、スクリプトのダウンロード時間を短縮できます.
この場合、ブラウザはダウンロードしたページの残りの部分をレンダリングしますpage.js .
<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="page.js" async></script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
それらの間には些細な違いがあります.

CSS


CSSはDOM要素のスタイルとレイアウトを決定するので、ブラウザはCSSファイルをロードして、それが遭遇したときにページをレンダリングする前に解析するのを待ちます.

インラインCSS


これらのページの最初の画面のレンダリングに必要なCSSコードにインラインCSSを追加できます.
<!doctype html>
<html>
  <head>
    <style tpe="text/css">
    .blue {
        color: blue;
    }
    </style>
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>

CSSの遅延読み込み


最初の画面レンダリングに必要とされないCSSの場合は、ページの内容がレンダリングされた後にファイル形式を使用して読み込むこともできます.
<!doctype html>
<html>
  <head>
    <style tpe="text/css">
    .blue {
        color: blue;
    }
    </style>
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <link href="other.css" rel="stylesheet" />
  </body>
</html>

結論


ページの最初のレンダリングに必要なJSとCSSは、<head> コード形式のタグ.すべての外部ファイルの参照は、ページの内容の後に配置することができますし、JSファイルもすることができますloaded asynchronously .
[Swift]構文(Ver.簡易整理)
UILabelの文字列に点線の下線をつける