何賢芳

重慶信息技術職業(yè)學院 重慶 404000

伴隨著這些Web應用平臺的使用和使用，在平臺的設計上相繼出現(xiàn)了一些問題，其中最典型的是：代碼過多，兼容性差，平臺頁面打開緩慢，用戶提供相關信息等待時間過長(特別是在大訪問量的情況下)，用戶體驗差，用戶連接低。如何快速加載網(wǎng)站，提高網(wǎng)站對各種用戶請求的響應速度，提高用戶滿意度和保存率，是不同應用平臺開發(fā)建設所面臨和要解決的問題。一般而言，Web前端具體包括以下幾個方面：瀏覽器下載，圖片下載，網(wǎng)站瀏覽等等；主要負責后臺的功能實現(xiàn)。Web前端的設計是否成功，直接影響用戶的使用體驗，一般來說，優(yōu)化Web前端的方法有兩種：基于頁面的優(yōu)化，比如控制HTTP請求的數(shù)量，使用瀏覽器緩存，控制Cookie的傳輸，以及激活文件壓縮。另外一些是基于代碼的優(yōu)化，比如 CSS優(yōu)化，HTML結構優(yōu)化，JavaScript優(yōu)化等等。

1 優(yōu)化HTTP請求數(shù)量

降低 HTTP請求的數(shù)量非常重要，為了提高音樂資源查詢平臺的訪問性能，增加服務器與瀏覽器之間的通信帶寬，需要恢復一個新的通信鏈路（通常，任何要求都包含相關的通信數(shù)據(jù)），以便占用有限的帶寬。若查詢量超過瀏覽器所支持的量，網(wǎng)站對用戶查詢的響應時間會大幅增加。與此同時，通過合并 CSS（合并瀏覽器所需的一些CSS文件）減少了 HTTP請求的數(shù)量，這樣，瀏覽器只需要請求 HTTP就可以了，因為有許多工具可以合并或壓縮CSS文件（如 Grant、 Web pack等），合并圖片（瀏覽器必須把一些小圖片合并成一張圖片，這樣可以有效地減少圖片請求的數(shù)量，提高網(wǎng)站的加載速度），JS等等，值得注意的是，1.1版本之后，HTTP協(xié)議可以在 TCP/IP連接中發(fā)送多個HTTP連接請求，而不必按照查詢順序等待答案。但是，為了確保Web平臺的性能，開發(fā)人員應該考慮如何在平臺設計期間減少 HTTP請求的數(shù)量。

2 使用瀏覽器緩存

該平臺包含了大量的靜態(tài)資源文件，無須頻繁更新，如CSS文件、JS文件、圖像文件、PDF文件等，默認情況下都需要通過 HTTP請求讀取。如平臺開發(fā)人員將上述文件放入瀏覽器緩存，用戶只需在第一次訪問該頁面時下載文件，再次訪問該頁面時直接從瀏覽器緩存中讀取文件，這無疑會大大加快對平臺的訪問速度。事實上，可以通過配置諸如 Expires和Lastmodified屬性等 HTTP頭文件的某些屬性來啟用瀏覽器緩存。這些 Expires屬于可用于指定瀏覽器緩存的有效時間（在這段時間內(nèi)，瀏覽器不發(fā)布上述資源文件），如果開發(fā)人員能夠及時掌握上述資源文件的變更時間，則通?？稍O置為一個星期，否則可設置為較長但不超過一年。需要說明的是：Expires屬性對于服務器和客戶機的時間是否同步的要求非常嚴格。不同步的話，很容易導致緩存提前失敗。Certified屬性用于確定最終修改的具體時間。在用戶首次請求訪問某一頁時，服務器將在相應的返回頭信息中包含上次修改的屬性。在瀏覽器緩存被打開之后，可以使用專業(yè)工具進行驗證（不同瀏覽器應具有不同工具）。拿 Firebox瀏覽器來說，用 Httpfox測試這個頁面。經(jīng)過測試發(fā)現(xiàn)：當?shù)谝淮卧L問測試頁面時，結果值為200；當再次訪問測試頁面時，結果值為304。這樣就足夠說明瀏覽器緩存已經(jīng)成功啟用了。

3 啟用文件壓縮

網(wǎng)絡文件（包括 CSS、 JavaScript、 HTML等）可以在用戶的服務器和瀏覽器上被壓縮，極大地減少了網(wǎng)絡文件的數(shù)量（壓縮率可達到80%以上），節(jié)省了校園網(wǎng)的帶寬，提高了用戶的訪問速度。當前，g-zip壓縮廣泛應用于服務器或用戶瀏覽器上的 Web文件壓縮。第一，是的在 UNIX系統(tǒng)中使用g-zip壓縮。在壓縮技術不斷發(fā)展和更新的今天，壓縮已成為網(wǎng)絡中最流行的方式。注：g-zip壓縮增加了 CPU負載。我們應該提前計劃g-zip壓縮，避免服務器和瀏覽器的工作壓力[1]，如果服務器支持g-zip，就可以使用專業(yè)工具（不同瀏覽器有不同工具）查看，例如 Google Browser。借助于它的開發(fā)工具，你可以查看音樂資源和平臺首頁的標題信息。顯示的內(nèi)容代碼非常專業(yè)，因為 Gzip顯示的結束指示文件壓縮已成功激活。

4 CSS性能優(yōu)化

在開發(fā)搜索音樂資源的平臺時，相應的CSS（層疊樣式表）就變成了自己的Web文檔。主要目標是提高用戶瀏覽器的速度，下載頁面（瀏覽器會先下載，然后加載和呈現(xiàn)所有內(nèi)容）CSS.如果相應的CSS（class）（class樣式表）放在Web文檔的其他部分，比如 Web文檔的底部，則可能導致一些主流瀏覽器停止按順序呈現(xiàn)內(nèi)容。另外，還優(yōu)化了 CSS代碼。該優(yōu)化方法主要有以下幾個方面：第一，刪除一些不必要的字符（如空格、換行、注釋、縮進等）；第二，盡量使用縮寫；第三，合并相同的樣式；第四，刪除不用的樣式。可以有效地減少CSS文件大小和站點加載的時間。

5 JavaScript性能優(yōu)化

許多 JavaScript代碼在開發(fā)音樂資源檢索平臺時，只是一種解釋和執(zhí)行語言，只能在單線程機制下運行，無法有效地保證用戶瀏覽器的性能。原因在于在生成新變量時使用了 with語句。當 with ()語句必須被訪問時， JavaScript引擎將搜索 with ()語句創(chuàng)建的新變量，這將不可避免地增加搜索時間；第三，不要使用 for in循環(huán)。如果使用for-in-loop，那么需要花費更多時間處理其他數(shù)據(jù)元素；第四，刪除重復的腳本。反復執(zhí)行腳本不僅會產(chǎn)生冗余的 HTTP請求，還會增加 JavaScript的計算量，這無疑會影響到平臺性能。

6 結束語

云平臺的Web前端優(yōu)化不僅提高了各自網(wǎng)站的加載速度，而且提高了用戶體驗和保留率，另一方面減少了對寶貴資源的不必要使用，保證了效率和資源價值。