私は1年以上フロントエンド開発に取り組んできましたが、フロントエンドに関するいくつかの洞察があります。今日はあなたと共有します。
さまざまな強力なツールは、フロントエンド開発に不可欠です。たとえば、GoogleブラウザーとHeavy Weapon Fiddllerの使用に慣れています。
1：元の状況
まず、次のコードを見てみましょう。
コードコピーは次のとおりです。
<％@ page Language = "c＃" autoeventwireup = "true" codebehind = "default.aspx.cs" enternits = "jsload.default"％>
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "styleSheet" type = "text/css"/>
<スクリプトsrc = "jquery/jquery-1.4.1.js" type = "text/javascript"> </scrip>
<スクリプトsrc = "js/hello.js" type = "text/javascript"> </script>
<スクリプトsrc = "js/world.js" type = "text/javascript"> </script>
</head>
<body>
<img src = "1.jpg" />
</body>
</html>
プログラマーの90％がJSファイルを頭に入れると推定されていますが、これを掘り下げたことはありますか？多くのブラウザは、単一のスレッドを使用して、「インターフェイスUIアップデート」と「JSスクリプト処理」を実行します。
つまり、実行エンジンが「<script>」に遭遇すると、ページのダウンロードとレンダリングが<script>の実行が完了するのを待つ必要があります。その後、ロックされたページを見て、ユーザーにとって悲しいことです。
この時点で、ユーザーはおそらくあなたのためにそれをオフにするでしょう。
上の滝図から、2つのポイントを見ることができます。
初め：
3つのJSファイルは並行してダウンロードされますが、上記の私の理論によれば、JSは1つずつ実行する必要があります。ただし、IE8では、Firefox 3.5とChrome 2の両方がJSの並列ダウンロードを実装しています。
これは非常に良いことですが、写真などの他のリソースのダウンロードを妨げます。
2番目：
画像1.JPGのダウンロードは、JSの実行が完了した後にトリガーされます。これにより、上記の状況も検証され、画像の読み込みが妨げられます。
2：最初のステップは最適化です
JSはUIレンダリングを防ぐため、JSを前に</body>の前に置くことを検討できます。これにより、<script>の前にHTMLを完全にレンダリングできるようにすることができます。
そして、苦しめられた状況は自然に友情を高めます。
コードコピーは次のとおりです。
<％@ page Language = "c＃" autoeventwireup = "true" codebehind = "default.aspx.cs" enternits = "jsload.default"％>
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "styleSheet" type = "text/css"/>
</head>
<body>
<img src = "1.jpg" />
<スクリプトsrc = "jquery/jquery-1.4.1.js" type = "text/javascript"> </scrip>
<スクリプトsrc = "js/hello.js" type = "text/javascript"> </script>
<スクリプトsrc = "js/world.js" type = "text/javascript"> </script>
</body>
</html>
以下の図は、1.JPGと3つのJSがほぼ並行してダウンロードされ、実行されることも示しています。時間は上記の「469ms+」から「326ms」に短縮されます。
3：最適化の2番目のステップ
上の「滝図」を見ると、3つのJSファイルが3つの「Get」リクエストを作成したことも誰もがわかります。誰もが、GETリクエストにはHTTPヘッダーが必要であることを知っています。
したがって、時間がかかるため、当然のことながら採用するソリューションは、ゲットリクエストを減らすことです。通常、2つのオプションがあります。
最初：上記の「hello.js」と「world.js」のマージなどのJSファイルのマージがマージされます。
2番目：PHPのMiniifyなどのサードパーティツールを使用します。
2番目の方法に関しては、Taobaoはかなり使用されています。スクリプトの1つを見て、3つのJSファイルを適用します。 3つのGetリクエストから1に変更します。
4番目：最適化の3番目のステップ
JSファイルを足の端に配置するか、3つを1つに組み合わせるかどうかにかかわらず、そのエッセンスは「ブロッキングモード」です。これは、ブラウザをロックすることを意味します。 Webページがますます複雑になると、ますます多くのJSファイルがあります。
私たちが頭痛の種にするのは、現時点では、JSスクリプトをロードするために「ブロッキングモードなし」を提唱します。つまり、すべてのページが表示され、JSが追加されます。これは、window.onloadイベントのトリガーに対応します。
Appending JSは、いわゆる「ブロッキングなし」ですが、注意する必要があることの1つは、JSの要件が厳密であるかどうかです。
最初：注文要件はありません。たとえば、「hello.js」と「world.js」の注文要件がない場合、jqueryを使用して動的に追加できます。
コードコピーは次のとおりです。
<％@ page Language = "c＃" autoeventwireup = "true" codebehind = "default.aspx.cs" enternits = "jsload.default"％>
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "styleSheet" type = "text/css"/>
</head>
<body>
<img src = "1.jpg" />
<スクリプトsrc = "jquery/jquery-1.4.1.js" type = "text/javascript"> </scrip>
<script type = "text/javascript">
window.onload = function（）{
$（ "＃head"）。append（ "<script src = 'js/hello.js' type = 'text/javascript'> <// script>"）
$（ "＃head"）。append（ "<script src = 'js/world.js' type = 'text/javascript'> <// script>"）;
}
</script>
</body>
</html>
図からわかるように、「hello.js」と「world.js」が青い線に表示されます。つまり、これらの2つのJSは、DomContentLoadが終了した後にロードされるようにトリガーされるため、ページがロックされません。
待って。
2番目：注文要件があります
なぜ注文する必要があるのですか？ IEシリーズでは、上記の「2つのJS」ファイルの動的に追加された「2つのJS」ファイルの場合、hello.jsがworld.jsの前に実行されることを保証することはできません。
サーバー側によって返される順序でのみコードを実行します。
コードコピーは次のとおりです。
<％@ page Language = "c＃" autoeventwireup = "true" codebehind = "default.aspx.cs" enternits = "jsload.default"％>
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "styleSheet" type = "text/css"/>
</head>
<body>
<img src = "1.jpg" />
<script type = "text/javascript">
function loadscript（url、callback）{
var script = document.createelement（ "script"）;
script.type = "text/javascript";
// IE
if（script.readystate）{
script.onreadystatechange = function（）{
if（script.readystate == "loaded" || script.readystate == "complete"）{
script.oneadystatechange = null;
折り返し電話（）;
}
}
} それ以外 {
// nonie
script.onload = function（）{
折り返し電話（）;
}
}
script.src = url;
document.getElementById（ "head"）。appentchild（script）;
}
//最初のステップはjQueryクラスライブラリをロードすることです
loadscript（ "jquery/jquery-1.4.1.js"、function（）{
// 2番目のステップは、hello.jsをロードすることです
loadscript（ "js/hello.js"、function（）{
// 3番目のステップは、world.jsをロードすることです
loadscript（ "js/world.js"、function（）{
}）;
}）;
}）;
</script>
</body>
</html>
ご覧のとおり、ページが完全にロードされるまでにかかる時間は実際には約310分しかありません。これにより、Webページのダウンロードとフレンドリーな外観が大幅に向上します。
Tencent.comをチェックすることもできます。これは彼がしていることです。
とても便利ではありませんか？ここでこれらの研究とテストを行うのに時間を費やしました。私はあなたがあなたの心の中でそれを見ることができることを願っています。結局のところ、これは「Mahua Vine」会社の解決策でもあります。それを参照してください。