怎麼優化一個網站的靜態檔案 (assets) 和資源 (resources) ?

靜態檔案、資源的種類

  1. .html

  2. .css

  3. .js

  4. .jpg/.png ....

  5. .html

以女人為例子好了

.html

.css

.js

如何優化呢？

html

 

  1. 把css、js放到外面去,不要寫在html裡
  2. 使用 gzip 壓縮
  3. 使用 cdn 
Accept-Encoding: gzip
User-Agent: my program (gzip)
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var names = ['Alice', 'Emily', 'Kate'];

      ReactDOM.render(
        <div>
        {
          names.map(function (name) {
            return <div>Hello, {name}!</div>
          })
        }
        </div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>
<script type="text/javascript" src="../build/js/framework7.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/kitchen-sink.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript" src="js/bookList.js"></script>
<script type="text/javascript" src="js/eReader.js"></script>
<script type="text/javascript" src="js/changePassword.js"></script>

js

 

  1. minify / uglify
  2. 把 script include 放在底部
$$(document).on('pageInit', '.page[data-page="bookList"]', function (e) {
  myApp.showPreloader('書籍清單載入中')
  $$.ajax({
    url: "/books",
    type:"POST",
    success: function(result){
      var books = JSON.parse(result);
      console.log(books);
      showBookList(books);
      myApp.hidePreloader();
      $$('#bookListLength').text(books.length+" 本書");
    },
    error:function(xhr, ajaxOptions, thrownError){
      myApp.alert(xhr.status);
      myApp.alert(thrownError);
    }
  });
})

$$(document).on("pageInit",'.page[data-page="bookList"]',
function(o){myApp.showPreloader("書籍清單載入中"),
$$.ajax({url:"/books",type:"POST",success:function(o){
var e=JSON.parse(o);console.log(e),showBookList(e),
myApp.hidePreloader(),$$("#bookListLength").text(
e.length+" 本書")},error:function(o,e,t){myApp.alert(
o.status),myApp.alert(t)}})});

Css

 

  1. minify / uglify
  2. Javascript 會阻擋 DOM 的建構
  3. CSS 會阻擋 Javascript 的執行
  4. CSS 會影響頁面的 Rendering
  5. 結論 include css放上面, js放下面
<html>
<head>
  <link href="layout.css" rel="stylesheet" type="text/css" />
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="script.js" />
</head>
<body>
  <p id="first">Hello this is a test page.</p>
</body>
</html>
p {
  color: red;
}
$(document).ready(function(){
  $("#first").css("color","blue");
});

http://jsfiddle.net/3hLkhjrx/1/

圖片

 

  1. 壓縮 .png、.jpg
  2. 使用 Inline Image 技巧
<img src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
   AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
   ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
   a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
   ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
   F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
   hhx4dbgYKAAA7"
   ALT="Larry">

http://www.mobify.com/blog/data-uris-are-slow-on-mobile/

缺點：

  1. 無法快取
  2. 在mobile上造成了反效果

如何實作優化呢？

使用glup

下集待續....

 

Made with Slides.com