網站前端優化 -saveForSelf

9、網站前端優化 – IMG

9.一、能夠優化的圖片

     圖片總共能夠分爲兩類，一個是CSS IMAGES，另外一個是產品圖片。

9.二、CSS IMAGES

     CSS圖片如今採用的方式是圖片合併的方式，這樣能夠減小HTTP請求；初期的規劃是網站最通用的圖片合併到一張圖片上，具體某張頁面本身用到的，針對每張頁面再合併一張圖片，即一張頁面除去插件裏面帶過來的背景圖片外，最理想的狀況是保留兩張背景圖。可是如今狀況很不如意，主要緣由有如下幾點：

1. 頁面改動太頻繁，不少原先合併好的圖片一改再改後，會保留不少副本
2. 如今CSS的模塊化，CSS模塊化後，一張新的頁面有原先定義好的樣式後，咱們就會直接引用，這樣的話就不會關係具體他的CSSIMAGES；若是不一樣的模塊來自不一樣的頁面，那麼機會致使頁面的背景圖過多而且過大。

9.三、產品圖片

     產品圖有兩種呈現方式，一個就是單獨展現在頁面中的，這樣的圖片處理方式是異步，就用lazyload，這個的處理方式相對簡單。

     另一張是幻燈片，這種圖片用lazyload不能達到異步的效果，由於幻燈片咱們首次只會看到第一張圖片，這樣的話就得要改幻燈片，這個根據不一樣的幻燈而定吧。

10、網站前端優化 – DOM

10.一、DOM優化方法

目前對DOM優化採用的方法是不渲染，即將對SEO不重要的內容用textarea或者script包裹，這樣的話他們在渲染時就會被當作字符串而不會解析成節點。

11、網站前端優化 – JS

JS是除圖片外，對前端性能影響最大的一個方面，也是最難優化的。整體來講，JS對性能有影響體如今兩個階段，一個是JS的下載階段，一個是執行階段。

JS同步時，下載和執行階段解析器都會暫停，等待JS下載和執行；而jS異步時，JS下載不會暫停解析器，所以不會阻塞頁面，可是執行時，仍然會暫停解析器。因此，對JS處理方式通常是異步而且放在頁面底部。這樣能夠對頁面的影響降到最小。

JS另外一個難點就是頁面中的JS代碼的邏輯處理，能夠用dynaTrace AJAX跟蹤查看。

12、網站前端優化 – 重繪&迴流

    當呈現樹中的一部分(或所有)由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建。這就稱爲迴流(其實我以爲叫從新佈局更簡單明瞭些)。每一個頁面至少須要一次迴流，就是在頁面第一次加載的時候。

當呈現樹中的一些元素須要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，好比background-color。則就叫稱爲重繪。

這塊內容是和瀏覽器渲染方式息息相關的，有興趣的童靴能夠在網站多找些資料；這裏只介紹些平時咱們可能使用的一些會形成重繪&迴流的方法，及改進意見

1. 不要1個1個改變元素的樣式屬性，最好直接改變className，但className是預先定義好的樣式，不是動態的，若是你要動態改變一些樣式，則使用cssText來改變
2. 讓要操做的元素進行"離線處理"，處理完後一塊兒更新，這裏所謂的"離線處理"即讓元素不存在呈現樹中
3. 不要常常訪問會引發瀏覽器flush隊列的屬性，若是你確實要訪問，就先讀取到變量中進行緩存，之後用的時候直接讀取變量就能夠了
4. 考慮你的操做會影響到呈現樹中的多少節點以及影響的方式，影響越多，花費確定就越多