關(guān)于云平臺(tái)下Web前端的優(yōu)化問題探討

何賢芳

重慶信息技術(shù)職業(yè)學(xué)院 重慶 404000

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

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

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

2 使用瀏覽器緩存

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

3 啟用文件壓縮

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

4 CSS性能優(yōu)化

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

5 JavaScript性能優(yōu)化

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

6 結(jié)束語

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