高性能ASPを構築する.NETサイトの二最適化HTTP要求(フロントエンド)

15215 ワード
ネット AS.NET レジャー 高性能ASPを構築する.NETサイト
前の文章は主に1つのページを要求する過程を述べて、同時にこの過程の中のいくつかの最適化点を提出して、本編はページの要求過程を細分化してそして最適化の方案を提出します.同時に、前の文章では、多くの友达もいくつかの質問を提出して、本編でもこれらの質問に答えました!
本編の議題は以下の通りです.
HTTPリクエストの最適化
HTTPリクエストの最適化
1つのページの要求過程において、実際にはページ全体のhtml構造(ページのhtmlスケルトン)が要求する時間は短く、一般的にページ全体の要求時間の10%-20%を占めている.ページのロードの残りの時間は実際にはページの中のflash、ピクチャ、スクリプトのリソースをロードします.すべてのリソースがロードされるまで、ページ全体が完全に表示されます.
次のページで説明します.
   
   
   
   
    
    
    
    
    
  1. html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 
    
    
    
    
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
    
    
    
    
  3. <head> 
    4. 
    
    
    
    
  4.  <title>  ,   title> 
    5. 
    
    
    
    
  5.  <script type="text/javascript" src="../demo.js"> 
    6. 
    
    
    
    
  6.    script> 
    7. 
    
    
    
    
  7.  head> 
    8. 
    
    
    
    
  8. <body> 
    9. 
    
    
    
    
  9.    <div> 
    10. 
    
    
    
    
  10.    <img src="../p_w_picpaths/1.gif" /> 
    11. 
    
    
    
    
  11.     <img src="../p_w_picpaths/2.gif" /> 
    12. 
    
    
    
    
  12.      <img src="http://yanyangtian.cnblogs.com/p_w_picpath/3.gif" /> 
    13. 
    
    
    
    
  13.     <img src="http://yanyangtian.cnblogs.com/p_w_picpath/4.gif" /> 
    14. 
    
    
    
    
  14.   <img src="http://yanyangtian.cnblogs.com/p_w_picpath/5.gif" /> 
    15. 
    
    
    
    
  15.    <img src="http://yanyangtian.cnblogs.com/p_w_picpath/6.gif" /> 
    16. 
    
    
    
    
  16.   <img src="http://yanyangtian.cnblogs.com/p_w_picpath/7.gif" /> 
    17. 
    
    
    
    
  17.    <img src="http://yanyangtian.cnblogs.com/p_w_picpath/8.gif" /> 
    18. 
    
    
    
    
  18.        <img src="http://yanyangtian.cnblogs.com/p_w_picpath/7.gif" /> 
    19. 
    
    
    
    
  19.         <img src="http://yanyangtian.cnblogs.com/p_w_picpath/8.gif" /> 
    20. 
    
    
    
    
  20.    div> 
    21. 
    
    
    
    
  21.  body> 
    22. 
    
    
    
    
  22.  html> 
    23.

 
サーバにこのページを要求すると、クライアントのブラウザが最初に要求するデータはhtmlスケルトンです.すなわち、
   
   
   
   
    
    
    
    
    
  1.  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 
    
    
    
    
  2.  <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
    
    
    
    
  3.  <head> 
    4. 
    
    
    
    
  4.      <title>  ,   title> 
    5. 
    
    
    
    
  5.    
    6. 
    
    
    
    
  6.     <script type="text/javascript" src="../demo.js"> 
    7. 
    
    
    
    
  7.      script> 
    8. 
    
    
    
    
  8.    
    9. 
    
    
    
    
  9.  head> 
    10. 
    
    
    
    
  10. body> 
    11. 
    
    
    
    
  11.   <div> 
    12. 
    
    
    
    
  12.        <img src="../p_w_picpaths/1.gif" /> 
    13. 
    
    
    
    
  13.       <img src="../p_w_picpaths/2.gif" /> 
    14. 
    
    
    
    
  14.       <img src="http://yanyangtian.cnblogs.com/p_w_picpath/3.gif" /> 
    15. 
    
    
    
    
  15.      <img src="http://yanyangtian.cnblogs.com/p_w_picpath/4.gif" /> 
    16. 
    
    
    
    
  16.     <img src="http://yanyangtian.cnblogs.com/p_w_picpath/5.gif" /> 
    17. 
    
    
    
    
  17.      <img src="http://yanyangtian.cnblogs.com/p_w_picpath/6.gif" /> 
    18. 
    
    
    
    
  18.     <img src="http://yanyangtian.cnblogs.com/p_w_picpath/7.gif" /> 
    19. 
    
    
    
    
  19.     <img src="http://yanyangtian.cnblogs.com/p_w_picpath/8.gif" /> 
    20. 
    
    
    
    
  20.      <img src="http://yanyangtian.cnblogs.com/p_w_picpath/7.gif" /> 
    21. 
    
    
    
    
  21.     <img src="http://yanyangtian.cnblogs.com/p_w_picpath/8.gif" /> 
    22. 
    
    
    
    
  22.   div> 
    23. 
    
    
    
    
  23. body> 
    24. 
    
    
    
    
  24. html> 
    25.

 
その前に、まずページロードの小さな知識を普及させましょう.
ページのhtmlスケルトンがロードされると、ブラウザはページ内のラベルの解析を開始し、上から下へ解析を開始する.
まずheadラベルの解析である、headに参照するjsスクリプトがあることが発見されると、ブラウザはスクリプトを要求し始め、ページ全体の解析プロセスが停止し、js要求が完了するまで停止する.
その後、ページは下に解析され、bodyタグを解析するようになり、bodyにimgタグがあればブラウザはimgのsrc対応するリソースを要求し、複数のimgタグがあればブラウザは1つずつ解析し、解析はjsのように待つことはなく、imgのurlアドレスが同じアドレスであることが発見されると、ブラウザはこの開いたtcp接続順序を十分に利用して1つ1つの要求画像を除去し、あるimgのurlアドレスが異なることを発見すると、ブラウザは別のtcp接続を開き、http要求を送信する.
注意する前にjsの区別を要求します:jsを要求して、ブラウザはずっと待っていて、下のhtmlラベルを解析していません
しかし、imgを解析する際には、この時点でピクチャをロードする必要があるにもかかわらず、ページの解析プロセスは継続する、新しいtcp接続ロードリソースを送信するか否かが決定される.
これまでのコードクリップは同じで、確かにコードは同じだと思いますが、最初はhtmlのコードだけをブラウザに送信し、jsスクリプトや画像はまだ送信されていません。 htmlコードがブラウザに到着すると、ブラウザはこれらのコードを一歩一歩解析し始め、ロードするリソースに遭遇すると、ブラウザはサーバにhttp要求を発行し、必要なリソースを要求する. ページ全体のロード時間図は次のとおりです。 皆さんは図から次のように見えます。 1本目の線を半分に分ける×××半分の青と、実は×××の部分はtcp接続を開くのにかかる時間を表し、後ろの青い部分はhtmlスケルトンドキュメント全体を要求する時間である.htmlスケルトンを要求する時間は短いことがわかる.残りの青い線は画像を表し、スクリプトリソースのロードにかかる時間を表す. ページ全体のロード時間が長くなるのは明らかです。ページのロードはほぼ順番のロードであるため、時間はすべてのリソースのロード時間の総和である. 次に、上記のページコードを次のように置き換えます。 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>  <title>小洋、燕洋天title>       <script type="text/javascript" src="../demo.js">      script>    head>  <body>      <div>          <img src="http://demo1.com/p_w_picpaths/1.gif" />          <img src="http://demo1.com/p_w_picpaths/2.gif" />          <img src="http://demo2.com/p_w_picpath/3.gif" />          <img src="http://demo2.com/p_w_picpath/4.gif" />          <img src="http://demo3.com/p_w_picpath/5.gif" />          <img src="http://demo3/p_w_picpath/6.gif" />          <img src="http://demo4.com/p_w_picpath/7.gif" />          <img src="http://demo4.com/p_w_picpath/8.gif" />          <img src="http://yanyangtian.cnblogs.com/p_w_picpath/7.gif" />          <img src="http://yanyangtian.cnblogs.com/p_w_picpath/8.gif" />      div>  body>  html>    ページのロードタイムチャートを見てみましょう これがいわゆる「並列」のロードである. 2つのコードの違いを比較してみましょう。実はimgのsrc属性の上にあります。 第1段のページのコード:imgのsrc属性はすべて1つのドメイン名を指している. 2番目のページのコード:imgのsrc属性は異なるドメイン名を指します このようにした結果は何ですか。 imgのsrcの違いに注意してください。 説明する前に、まず小さな常識を見てみましょう(前の文章でも述べました): ページ要求がサーバにリソースを要求するとき、ブラウザがクライアントとサーバの前にtcp接続を開いており、要求されたリソースも接続を開いたサーバ上にある場合、後でリソースの要求はこの接続を十分に利用してリソースを取得する.これが最初のタイムチャートの由来である. 要求された画像がそれぞれ異なるサーバサイトにある場合、またはその要求されたサーバサイトに複数のドメイン名がある場合、ブラウザはドメイン名ごとにtcp接続を開き、http要求を送信するため、結果として複数のtcp接続が同時に開かれ、これも第2のタイムチャートの由来である. パラレルロードといえば、確かにページのロードが速くなったが、各ピクチャや他のリソースが異なるドメイン名を作るわけではない。前の2番目のパラレルロードピクチャの例のように、2つのピクチャに1つのtcp接続を利用させることでもある.画像ごとに接続を開くと、ブラウザは多くの接続を開き、リソースがかかり、ブラウザは「硬直する」可能性があります。また、性能に重大な影響を及ぼす場合もある. だから、これはバランスが必要です。  上記の最適化方式に加えて、他の画像最適化のロード方式もある.主にhttpのリクエストを減らすことで最適化 皆さんはすべてウェブサイトの1つのmenuメニューを知っていて、いくつかのメニューはピクチャーで作ったのです.のように 上の画像が一つ一つロードされると、速度に影響を与えるに違いない。また、画像もそれほど大きくないので、menu全体に必要な画像を一度に画像全体としてロードし、map方式で画像の位置をクリックすることでナビゲーションの効果を達成する. このような問題は、画像の座標を算出し、「ホームページ」の画像をクリックできず、「ヘルプ」ページにジャンプしたことである。 本編はここまで述べて、次の編はその他の資源のファイルの最適化を述べて、多く提案することを望んで、このシリーズを書くように努力します!
Redisラーニングノート-Slow Logスロークエリーログ
[ baekjoon ] 1260. DFSとBFS