Clever Geek Handbook

簡単なウェブサイトまたはブラウザをダイエットする方法

しかし、大規模なWebプロジェクトに携わった専門家を組み合わせて、フロントエンド開発を最適化するための包括的なガイドを作成したらどうでしょうか。

そして、結果として退屈な指示ではなく、もっと面白い何かを得るには？ Briza Bueno （Americanas.com）、 Davidson Fellipe（Globo.com）、 Giovanni Keppelen （元Peexe Urbano）、 Jaydson Gomes （Terra）、 Marcel Duran （Twitter）、 Mike Taylor （Opera）、 Renato Mangini （Google）に電話すると ）、およびSérgioLopes （Caelum）がベストプラクティスを収集しますか？



それが私たちがしたことです！ 高速サイトの作成方法をお教えします。



-Zeno Rocha 、プロジェクトマネージャー。









サイトの読み込み速度は本当に重要ですか？

間違いなく！ そして、そうではないと言ってはいけません。 では、なぜ彼らを訪れたユーザーの魂に不快な残留物を残す遅いサイトがまだ現れているのでしょうか？ ここで説明するルールに従うことで、サイトの読み込みを高速化できます。 WEBジャイアントのダウンロード速度の影響については触れません。



HTML



25.インラインおよびネストされたコードの使用を避ける


CSSおよびJavaScriptコードを組み込むには、次の3つの簡単な方法があります。

  1. インライン ：コードは要素タグに直接書き込まれます。 スタイル属性のCSS、およびonclick属性のJavaScriptの場合。
  2. : CSS JavaScript .





    : CSS , src



    JavaScript.











    , , HTTP , HTML . , . , . , . , , , .. HTTP .



    CSS/JS HTML . ( )



    . , . , .







    24. , 


    ,                .
      
    
        
        
        
      
    
    

<head>
  <meta charset="UTF-8">
  <title>   </title>
  <!-- CSS -->
  <link rel="stylesheet" href="style.css" media="all">
</head>


    , , .

    , JavaScript , .. . 

    
<body>
  <p>Lorem ipsum dolor sit amet.</p>
   <!-- JS -->
  <script src="script.js"></script>
</body>






    23. HTML


    , , . 

    
<p>Lorem ipsum dolor sit amet.</p>
<!--   -->
<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>


    . c HTML . 

    
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>


    , .

    HTML Compressor :

    BBC 77,054b 55,324b 28.2%
    CNet 86,492b 61,896b 28.4%
    FOX News 75,266b 64,221b 14.7%
    GameTrailers 112,199b 92,851b 17.2%
    Kotaku 134,938b 116,280b 13.8%
    National Post 75,006b 55,628b 25.8%
    SlashDot 158,137b 142,346b 10.0%
    StackOverflow 116,032b 100,478b 13.4%






    22.


    , , , , . 

    
<script src="example.js"></script>


    , , HTML . . . 

    
<script async src="example.js"></script>


    , , HTML . . , , .









    CSS



    21.


    HTML , : 

    .center {
  width: 960px;
  margin: 0 auto;
}
/* ---  --- */
.intro {
  margin: 100px;
  position: relative;
}


    , . 

    .center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}


    Sass, Less, Stylus .., , .







    20. CSS


    , : 

    
<link rel="stylesheet" href="structure.css" media="all">
<link rel="stylesheet" href="banner.css" media="all">
<link rel="stylesheet" href="layout.css" media="all">
<link rel="stylesheet" href="component.css" media="all">
<link rel="stylesheet" href="plugin.css" media="all">


    HTTP ( ). 

    
<link rel="stylesheet" href="main.css" media="all">


    CSS , .

    .







    19. link



    @import





    . link



    : 

    
<link rel="stylesheet" href="style.css">


    @import



    ( 
    ):
      
    
        
        
        
      
    
    

@import url('style.css');


    , , .









    JavaScript



    18.


    , Youtube like/tweet.



    , . : , firewall.



    , ( Friendly iFrame) 

    var script = document.createElement('script'),
    scripts = document.getElementsByTagName('script')[0];
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);


    , .







    17.


    JavaScript. .



    , , . 

    var arr = new Array(1000),
    len, i;

for (i = 0; i < arr.length; i++) {
  //  ,     1000 
}

for (i = 0, len = arr.length; i < len; i++) {
  //  ,      
}


    JSPerf



    : .



    DOM, Node(NodeList), , , document.getElementsByTagName('a')



    . " ", .. . 

    var links = document.getElementsByTagName('a'),
    len, i;
for (i = 0; i < links.length; i++) {
  //       ,   
}

for (i = 0, len = links.length; i < len; i++) {
  //    
}

//     
for (i = 0; i < links.length; i++) {
  document.body.appendChild(document.createElement('a'));
  //      ,        
  //      ,   .
}






    16. document.write





    document.write



    , .



    , , , , JavaScript .



    HTML5 Boilerplate, , jQuery Google . 

    
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>


    : document.write



    window.onload



    , . 

    
<span>foo</span>
<script>
  window.onload = function() {
    document.write('<span>bar</span>');
  };
</script>


    bar, foobar. , window.onload





    , , . 

    
<span>foo</span>
<script>
  setTimeout(function() {
    document.write('<span>bar</span>');
  }, 1000);
  window.onload = function() {
    // ...
  };
</script>






    15.


    , DOM, .



    . Nicole Sullivan background-color



    .



    , , .



    , . , : 

    var div = document.getElementById("to-measure"),
    lis = document.getElementsByTagName('li'),
    i, len;

for (i = 0, len = lis.length; i < len; i++) {
  lis[i].style.width = div.offsetWidth + 'px';
}


    : 

    var div = document.getElementById("to-measure"),
    lis = document.getElementsByTagName('li'),
    widthToSet = div.offsetWidth,
    i, len;

for (i = 0, len = lis.length; i < len; i++) {
  lis[i].style.width = widthToSet + 'px';
}


    style.width



    , . , , .. . , , offsetWidth



    , , .



    , , .







    14. DOM


    DOM, .



    , . , JavaScript , DOM.



    : , DOM. , : 

    //    !
for (var i = 0; i < 100; i++) {
  document.getElementById("myList").innerHTML += "<span>" + i + "</span>";
}
//     :)
var myList = "";

for (var i = 0; i < 100; i++) {
  myList += "<span>" + i + "</span>";
}

document.getElementById("myList").innerHTML = myList;


    JSPerf



    13.


    CSS HTML, .

    : 

    BrowserDiet.app = function() {

  var foo = true;

  return {
    bar: function() {
      //    ...
    }
  };

};


    : 

    BrowserDiet.app=function(){var a=!0;return{bar:function(){}}}








    12. js


    , CSS, HTTP , . 

    
<script src="navbar.js"></script>
<script src="component.js"></script>
<script src="page.js"></script>
<script src="framework.js"></script>
<script src="plugin.js"></script>


    , : 

    
<script src="main.js"></script>


    DOM? .









    jQuery



    11. jQuery


    jQuery , .



    jQuery, : 

    
http://code.jquery.com/jquery-latest.js

      
      
    
        
        
        
      
    
    
        
        
        
      
      
    
        
        
        
      
    
    
    


    .         , ..           .   ,    .
      
    
        
        
        
      
    
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


    : " " :P







    10.


    , jQuery, . . . , , ID find()



    children()



    .



    , ID , .. DOM: 

    $("#foo");


    JSPerf



    9. for



    each





    JavaScript , jQuery. jQuery.each



    JavaScript.



    , . for in



    jQuery.each



    .



    , , . 

    for ( var i = 0, len = a.length; i < len; i++ ) {
    e = a[i];
}


    , for



    while



    . . , .



    JSPerf



    8. jQuery...


    ... :)



    JavaScript jQuery.



    attr()



    ID ? 

    $('a').on('click', function() {
  console.log( $(this).attr('id') );
});


    : 

    $('a').on('click', function() {
  console.log( this.id );
});


    .



    JSPerf







    7. CSS


    .







    CSS. 

    .icon-foo {
  background-image: url('mySprite.png');
  background-position: -10px -10px;
}

.icon-bar {
  background-image: url('mySprite.png');
  background-position: -5px -5px;
}


    , HTTP .



    , . , .



    , , . . , .







    6. Data URI


    - CSS .



    Data-URI , , . Data-URI .

    : 

    .icon-foo {
  background-image: url('foo.png');
}


    : 

    .icon-foo {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D');
}


    IE8 base64.



    , . Data-URI , , . , CSS, . gzip , .. HTTP .







    5.


    width



    height



    , . 

    
<img width="100" height="100" src="logo.jpg" alt="Logo">


    , 700x700px 5050px.

    , .



    : ,







    4.


    Web . , JPEG Exif (, , .). PNG , . , .



    . .



    . . JPEG, ( 0 100). , . PNG , PNG-24 PNG-8.



    JPEG . JPEG . ().











    3.


    - . - . , , . .



    ( , ). , , Apache, .htaccess



    : 

    ExpiresActive On
ExpiresByType image/gif "access plus 6 months"
ExpiresByType image/jpeg "access plus 6 months"
ExpiresByType image/png "access plus 6 months"
ExpiresByType text/css "access plus 6 months"
ExpiresByType text/javascript "access plus 6 months"
ExpiresByType application/javascript "access plus 6 months"


    , , CSS JS 6 - . .



    : , , . , . , timestamp. , home.js



    , home-v1.js



    , , home-v2.js



    ..



    GET URL. , home.js?v=1



    home.js?v=2



    , GET .







    2. gzip


    (HTML, CSS, JavaScript, JSON, XML ..). GZIP .



    GZIP , " " . . GZIP.



    . , Apache, .htaccess



    : 

    AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript


    ( !). .











    1. -


    , , YSlow PageSpeed. .



    , WebPageTest, HTTP Archive PageSpeed.



    , .



    0.


    , , :)



    : , , . - , .



    , .



    \o/







    -1.


    / http://browserdiet.com/.

    25 , , -, . , , , , .

















More articles:


All Articles