寫前端優化的文章在博客園高手云集的地方有點班門弄斧的感覺，不過自己對有些地方的處理還是自我感覺良好，也的確看到了效果，好了，閑話少說，切入正題。

首先劃分頁面的重要區域，如圖：

由上圖可知，對于一個問題內容頁面來說，用戶進入頁面首先想看到的是問題區域和答案區域，也就是說這兩個區域對用戶來說最重要，所以關鍵是怎樣讓頁面上的其他資源不影響這兩個區域的加載。這里的其他資源對博問的問題頁面就是那些HTML編輯器的js，打開firebug分析如下：

從上圖可以看出，這些JavaScript嚴重影響了頁面的加載，所以為了不影響問題區域和答案區域的加載，我將編輯器的JavaScript放置在了緊挨著編輯器的上面，如圖：

解決了上面的問題之后，還有一個問題就是Google廣告的問題了，首先廣告位置在右側的頂部，這些廣告是通過JavaScript加載的，因此這些JavaScript是肯定不能放在head中的，如果網速慢的話是很影響頁面的加載的。如果放在左側和右側中間又影響了右側的加載。但是廣告又不能放在右側最下部，如何解決呢：

先看下圖：

?

主要是通過css設置postition完成改變div的位置

經過上面兩個方面的優化以后頁面的加載達到了自己想要的解決，當然可以優化的地方很多，我會繼續學習，不斷重構頁面。

最后推薦一些鏈接：

???? 如何提高網頁的效率——提高網頁效率的14條準則
???? Quickly Configure or Disable ETags in IIS7 or IIS6
???? Client Cache <clientCache>
???? IIS7: How to quickly and easily optimize your website using GZip compression
???? CSS之看穿絕對定位

如果你對前端感興趣的話，可以考慮這本書：

轉載于:https://www.cnblogs.com/dushouke/archive/2009/08/04/1539136.html

總結

以上是生活随笔為你收集整理的博问问题内容页面的前端优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。