首先，讓咱們談談前端優(yōu)化。80%的用戶訪問網頁的期待工夫發(fā)生在閱讀器前端，尤其是頁面和頁面中各種元素（圖片、CSS、JavaScript、flash…）的下載。因此，在許多情況下，與花費大量工夫在艱巨和簡單的程序改進上相比，前端優(yōu)化往往可能事倍功半。

對于初次訪問您的網站但尚未將您的網站內容緩存在閱讀器緩存中的用戶，咱們可能執(zhí)行以下操作：

1） 縮小頁面訪問生成的HTTP銜接數(shù)

對于初次訪問您的網站的用戶，頁面熟成的HTTP銜接數(shù)是影響功能的要害瓶頸。

對策：

-保持頁面設計盡能夠簡略，盡量縮小圖片的利用，并經過放棄一些不必要的頁面效果來縮小JavaScript的利用。

-利用一些優(yōu)化技術，如應用圖片的背景位移來縮小圖片數(shù)量；影像地圖技術；利用inlineimages將CSS圖像捆綁到網頁中。

-嘗試合并JS和CSS文件以縮小獨立文件的數(shù)量。

2） 將CSS放在頁面頂部，將JS文件放在頁面底部

CSS引用應放在HTML的題目中，JS文件引用應盡能夠放在頁面底部標記的前面。其次要思維是盡快顯示外圍頁面內容。然而需求留意的是，對于一些利用了大量JS的頁面，底部的一些JS文件能夠會導致一些不可預知的成績，可能依據(jù)實踐情況適當利用。

詳細來說，一些JavaScript緊縮工具用于緊縮JS腳本、刪除空白字符和注釋以及最小化變量名。基于gzip緊縮，JS內容的緊縮可能將功能再提高5%。

3） 盡量縮小利用外部腳本并縮小DNS查詢工夫

對于網站的頻繁用戶，seo優(yōu)化，次要的優(yōu)化思維是很大限制天時用用戶閱讀器的緩存，以縮小服務器的開支。

4） 在題目中減少過期工夫（expiresheader）

向標頭中的靜態(tài)內容減少一個較長的過期工夫，以便用戶將來只能讀取緩存中的文件，而無需與服務器停止任何交互。但是，這樣做也存在一些成績。更新圖像、CSS和JS文件時，假設用戶不刷新閱讀器，則無奈獲得更新。這樣，當咱們修正圖像、CSS和JS文件時，咱們必須重命名它們，以確保用戶可以訪問有價值的內容。這能夠會給開發(fā)帶來很多費事，由于這些文件能夠會被站點中的許多文件引用。Flickr提出的解決方法是經過URL重寫使不同版本號的URL實踐指向同一個文件，這是一種聰明的方法，由于URL級別的操作效率很高，可認為開發(fā)過程提供很多便利。

要了解緣由，您必須了解閱讀器在訪問URL時的工作模式：

A.初次訪問URL時，用戶從服務器段獲取頁面內容，將相干文件（圖像、CSS、JS…）放入緩存，并在文件頭中保留過期工夫、LastModified、ETag和其余相干信息。

B當用戶反復訪問URL時，閱讀器首先反省緩存中能否存在同名文件。假設是，請反省文件的過期工夫；假設文件未過期，則間接從緩存讀取該文件，并且不再訪問服務器。

C假設緩存中文件的過期工夫不存在或已超過，閱讀器將訪問服務器以獲取文件的題目信息，反省LastModified、etags和其余信息。假設發(fā)現(xiàn)自上次訪問以來本地緩存中的文件未被修正，則將利用本地緩存中的文件；

依據(jù)我的閱歷，假設能夠的話，試著遵照這個準則為靜態(tài)文件添加過期工夫，從而大大縮小用戶對服務器資源的反復訪問。

5） CSS和JS文件在單獨的外部文件中引用

將CSS和JS文件放在單獨的文件中，以便它們單獨緩存，并且在訪問其余頁面時可能間接從閱讀器的緩存中讀取。有些網站的主頁能夠是例外。這些主頁的自閱讀量能夠不大，但這是用戶訪問網站的***印象，也是疏導用戶訪問其余頁面的起點。這些頁面自身也能夠利用大量Ajax本地刷新和技術。此時，CSS和JS文件可能間接寫入頁面中。

在ie中，蘊含反復的JS腳本將導致閱讀器的緩存不被利用。細心反省你的程序。刪除反復的引用腳本應該不難。

除了標頭中的人工重定向之外，網頁重定向通常是有意中發(fā)生的，重定向的內容不會利用閱讀器的緩存。例如，當用戶正在訪問時，服務器將轉到/經過301，后跟“/”。假設服務器配置不好，也會給服務器帶來額外的累贅。經過配置Apache的別名或利用Mod_uurewrite模塊和其余方法，可能盡能夠避免不必要的重定向。

還有其余一些，例如利用CDN散發(fā)機制、避免CSS表達式、避免ETag等。由于它們不常用，所以這里不再反復。

通過以上優(yōu)化后，可能嘗試用Yslow測試網頁的功能得分，普通可能達到70分以上。

當然，除了對閱讀器前端和靜態(tài)內容停止優(yōu)化外，還對程序腳本、服務器、數(shù)據(jù)庫和加載停止了優(yōu)化。這些更深層次的優(yōu)化方法對技術有更高的要求。本文的后半局部將重點探討后端優(yōu)化。

如何優(yōu)化網站功能？針對前后端代碼框架優(yōu)化

2、 后端優(yōu)化

本文標簽： 優(yōu)化網站性能 前后端優(yōu)化