DIV CSS 佈局教程網

網頁制作poluoluo文章簡介：把所有的CSS文件放在一起；並避免使用@import的方式倒入CSS文件.

昨天Steve的 講座涉及了一個我從沒考慮的領域，在沒法優化後台服務器的時候，如何合理的放置網頁的元件讓她們在浏覽器裡顯示得更加快。這裡，我就根據他的建議，把我對這博客的更新的過程記錄一下。如果想了解更多的信息，可以看他的主頁，那裡有不少他做的講座的視頻和講稿，還可以看到他在斯坦福開的課的視頻……再進一步就是去讀他的兩本書了《High Performance Web Sites: Essential Knowledge for Front-End Engineers》《Even Faster Web Sites: Performance Best Practices for Web Developers》。

優化的過程，實際上就是根據Yslow這個Firebug的插件的提示“升級”的過程（Yslow可用於不同大小的站點，我選擇了“Small Site or Blog”這個選項）。為什麼要優化？功利的講，是讓你的頁面在搜索引擎裡表現更好；但更重要的是，省下這1-2秒的時間，能讓你的讀者更加舒暢地浏覽你的站點。

我做了一下的幾步：

1. 把所有的CSS文件放在一起；並避免使用@import的方式倒入CSS文件，因為這種方法強制浏覽器在import的時候只能運行一個線程，而一般情況是兩個線程一起上的。
   對於我來說，我新建了一個styleall.css文件，把所有在”screen”情況下使用的CSS全部復制粘貼進去。使用Yslow中的“All CSS” 的工具，很容易就收集到了所有的CSS的信息——三個插件、Google和theme裡用的。最終，從9個不同的CSS文件，我縮到了2個，一個給 ”screen”用，一個給”print”用。在修改了theme調用的CSS的方法後，我到每個插件的設置頁面，禁止調用相應的CSS。如果插件不允許 修改的話，我就修改插件的源代碼，搜索“.css”，然後刪掉。
2. 把所用的javascript合到一起，然後盡可能的放在頁面的末尾，因為js的下載強制性的是單線程，放在頁面的尾部，給讀者印象是頁面已經完全下載好了，而實際上有些功能的js還在下載中。
   對於我，因為所有的js都不沒有使用document.write，可以放心大膽的合並並放到頁面的尾部。我使用Yslow中的“All JS Minified”工具，操作很快：所有插件使用的合並到一個min.js在插件的根目錄；所有主題使用的合並在theme的根目錄；我沒有合並來自Google的javascript到前面的兩個匯總文件中，因為根據我的理解，Google會根據浏覽器的不同把不同的js推送出來。

    

   
   <script type='text/javascript' src='/files/allimg/090608/2054090.jpg blocks parallel downloads; if only we could load it above style.css preload it!”，也就是利用兩個線程下載的優勢，在空擋把大文件先下載下來。