0

これら 2 つのスニペットに実際に違いはありますか? メリットはありますか？それらは両方ともスクリプトタグを介して私のhtmlドキュメントに埋め込まれています

<script>
window.onload = function () {
    var masthead = document.getElementById("js-masthead"),
        pageWidth = masthead.offsetWidth,
        viewportHeight = window.innerHeight,
        fluidPadding = (viewportHeight / pageWidth) * 100;

    masthead.style.paddingTop = fluidPadding + "%";
};
</script>

と

<script>
var masthead       = document.getElementById("js-masthead");
var pageWidth      = masthead.offsetWidth;
var viewportHeight = window.innerHeight;
var fluidPadding   = (viewportHeight/pageWidth) * 100;

masthead.style.paddingTop = fluidPadding + "%";
</script>

私のjavascriptをコーディングするためのより良い代替案またはより良い方法を提案できますか?

4

1 に答える 1

0

これら 2 つのスニペットに実際に違いはありますか?

はい、いくつかの違いがあります。

最初のスニペットは、ウィンドウ ロード イベントが送出されたときに呼び出される関数を登録します。これは、ウィンドウのロード後に最初のスクリプトを動的にロードした場合、コードが実行されないことを意味します。

2 番目のスニペットは、スクリプト タグが解析された後に実行されます。これは、スクリプトが HTML 内のどこに配置されているかによって、操作する#js-masthead要素がある場合とない場合があることを意味します。

最初のスニペットはコードを関数でラップしているため、すべての変数はその関数に対してローカルです。2 番目のスニペットは、おそらく二度と使用しない変数でグローバル スコープを汚染します。ヒント: ここでは IIFE が役立ちます。

たとえば、script タグが id "js-masthead" の div の直下に配置されている場合、onload と比較して速度に大きな違いはありますか?

はい、しかし、あなたが期待する方法ではありません。本文に DOM と対話するコードを含むタグを配置するscriptと、パフォーマンスに悪影響を及ぼします。最新のブラウザーはページの読み込みを可能な限り最適化し、コンテンツをできるだけ早く表示するために複数のことを同時に (パイプライン処理) 実行します。ドキュメントの準備が整う前に DOM プロパティの読み取りまたは書き込みを行うと、ページで使用されるデータ構造間で一貫した状態をブラウザーに強制することになり、パイプライン処理の可能性がなくなります。bodyスクリプトがタグの末尾にある場合、この影響は緩和されます。

TL;DR: パフォーマンスを気にする場合は、onload ハンドラーで DOM 操作を行ってください。

于 2013-10-03T13:33:46.447 に答える