正文

web頁面可以從哪些方面優(yōu)化

發(fā)布時間：2023-04-15 17:45:23 稿源：創(chuàng)意嶺閱讀： 144

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于web頁面可以從哪些方面優(yōu)化的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

開始之前先推薦一個非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準，寫出的就越詳細，有微信小程序端、在線網(wǎng)頁版、PC客戶端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務客戶遍布全球各地，如需了解SEO相關(guān)業(yè)務請撥打電話175-8598-2043，或添加微信：1454722008

本文目錄:

1、Web前端應該從哪些方面來優(yōu)化網(wǎng)站
2、網(wǎng)站性能優(yōu)化有哪些
3、如何進行網(wǎng)站性能優(yōu)化
4、前端優(yōu)化的目的是什么Web前端從哪方面來優(yōu)化網(wǎng)站

web頁面可以從哪些方面優(yōu)化

一、Web前端應該從哪些方面來優(yōu)化網(wǎng)站

這個應該叫站內(nèi)優(yōu)化，主要是網(wǎng)站架構(gòu)，網(wǎng)頁布局，代碼優(yōu)化，內(nèi)容優(yōu)化等方面

二、網(wǎng)站性能優(yōu)化有哪些

一、提高服務器并發(fā)處理能力

我們總是希望一臺服務器在單位時間內(nèi)能處理的請求越多越好，這也成了web服務器的能力高低的關(guān)鍵所在。服務器之所以可以同時處理多個請求，在于操作系統(tǒng)通過多執(zhí)行流體系設計，使得多個任務可以輪流使用系統(tǒng)資源，這些資源包括CPU、內(nèi)存以及I/O等。這就需要選擇一個合適的并發(fā)策略來合理利用這些資源，從而提高服務器的并發(fā)處理能力。這些并發(fā)策略更多的應用在apache、nginx、lighttpd等底層web server軟件中。

二、Web組件分離

這里所說的web組件是指web服務器提供的所有基于URL訪問的資源，包括動態(tài)內(nèi)容，靜態(tài)網(wǎng)頁，圖片，樣式表，腳本，視頻等等。這些資源在文件大小，文件數(shù)量，內(nèi)容更新頻率，預計并發(fā)用戶數(shù)，是否需要腳本解釋器等方面有著很大的差異，對不同特性資源采用能充分發(fā)揮其潛力的優(yōu)化策略，能極大的提高web站點的性能。例如：將圖片部署在獨立的服務器上并為其分配獨立的新域名，對靜態(tài)網(wǎng)頁使用epoll模型可以在大并發(fā)數(shù)情況下吞吐率保持穩(wěn)定。

三、數(shù)據(jù)庫性能優(yōu)化和擴展。

Web服務器軟件在數(shù)據(jù)庫方面做的優(yōu)化主要是減少訪問數(shù)據(jù)庫的次數(shù)，具體做法就是使用各種緩存方法。也可以從數(shù)據(jù)庫本身入手提高其查詢性能，這涉及到數(shù)據(jù)庫性能優(yōu)化方面的知識本文不作討論。另外也可以通過主從復制，讀寫分離，使用反向代理，寫操作分離等方式來擴展數(shù)據(jù)庫規(guī)模，提升數(shù)據(jù)庫服務能力。

四、Web負載均衡及相關(guān)技術(shù)

負載均衡是web站點規(guī)模水平擴展的一種手段，實現(xiàn)負載均衡的方法有好幾種包括基于HTTP重定向的負載均衡，DNS負載均衡，反向代理負載均衡，四層負載均衡等等。

對這些負載均衡方法做簡單的介紹：基于HTTP重定向的負載均衡利用了HTTP重定向的請求轉(zhuǎn)移和自動跳轉(zhuǎn)功能來實現(xiàn)負載均衡，我們熟悉的鏡像下載就使用這種負載均衡。DNS負載均衡是指在一個DNS服務器中為同一個主機名配置多個IP地址，在應答DNS查詢時返回不同的解析結(jié)果將客戶端的訪問引到不同的機器上，使得不同的客戶端訪問不同的服務器，從而達到負載均衡的目的。反向代理負載均衡也叫七層負載均衡，這是因為反向代理服務器工作在TCP七層結(jié)構(gòu)的第七層(應用層)，它通過檢查流經(jīng)的HTTP報頭，根據(jù)報頭內(nèi)的信息來執(zhí)行負載均衡任務。四層負載均衡是基于NAT技術(shù)的負載均衡，它將一個Internet上合法注冊的IP地址映射為多個內(nèi)部服務器的IP地址，對每次TCP連接請求動態(tài)使用其中一個內(nèi)部IP地址，達到負載均衡的目的。此外，還有工作在數(shù)據(jù)鏈路層(第二層)的直接路由方式下的負載均衡，它通過修改數(shù)據(jù)包目標MAC地址來實現(xiàn)。以及，基于IP隧道的負載均衡，在這種方式下可以將實際服務器根據(jù)需要部署在不同的地域，并根據(jù)就近訪問的原則來轉(zhuǎn)移請求，CDN服務便是基于IP隧道技術(shù)來實現(xiàn)的。

Web負載均衡在擴展web服務器規(guī)模的同時也給web站點性能優(yōu)化提供了一個更大更復雜也更靈活自由的平臺，基于該平臺性能優(yōu)化的策略包括共享文件系統(tǒng)，內(nèi)容分發(fā)與同步，分布式文件系統(tǒng)，分布式計算，分布式緩存等等。

五、web緩存技術(shù)

web緩存技術(shù)被認為是減輕服務器負載、降低網(wǎng)絡擁塞、增強萬維網(wǎng)可擴展性的有效途徑，其基本思想是利用客戶訪問的時間局部性(Temporal Locality)原理，將客戶訪問過的內(nèi)容在Cache中存放一個副本，當該內(nèi)容下次被訪問時，不必連接到駐留網(wǎng)站或重新計算生成，而是由Cache中保留的副本提供。Web緩存可以帶來如下的好處：

(1) 減少網(wǎng)絡流量，從而減輕網(wǎng)絡擁塞;這是因為緩存避免了一部分HTTP請求。

(2) 降低客戶訪問延遲，其主要原因有：①已緩存的內(nèi)容，客戶可以緩存獲取而不是從服務器獲取或重新計算生成，從而減小了傳輸延遲縮短了響應時間;②沒有被緩存的內(nèi)容由于網(wǎng)絡擁塞及服務器負載的減輕而可以較快地被客戶獲取;

(3) 由于客戶的部分或者全部請求內(nèi)容可以從通過緩存獲取，從而減輕了遠程服務器負載。

(4) 如果由于服務器故障或網(wǎng)絡故障造成服務器無法響應客戶請求，客戶可以從緩存中獲取緩存的內(nèi)容副本，使得web站點服務的魯棒性(Robustness)得到了加強。

可以看出web緩存能給web站點帶可觀的性能提升。其實在用戶發(fā)出請求到一幅完整的網(wǎng)頁呈現(xiàn)在用戶面前這一過程中緩存無處不在，下面是web性能優(yōu)化時常用的緩存技術(shù)，你會發(fā)現(xiàn)緩存被廣泛應用在各個環(huán)節(jié)。

瀏覽器緩存：瀏覽器一般會在用戶文件系統(tǒng)中創(chuàng)建一個目錄，用于存放緩存文件，并給每個緩存文件打上必要的標記，比如過期時間等。這些標記主要用于瀏覽器和服務器之間的緩存協(xié)商。

Web服務器緩存：一個URL在一段較長時間內(nèi)對應一個唯一的響應內(nèi)容，比如靜態(tài)內(nèi)容或者更新不太頻繁的動態(tài)內(nèi)容，web服務器可將響應內(nèi)容緩存起來，下次web服務器便可以在收到請求后立即拿出事先緩存好的響應內(nèi)容并返回給瀏覽器。

代理服務器緩存：暴露在互聯(lián)網(wǎng)中與后端的web服務器通過內(nèi)部網(wǎng)絡相連的前端服務器稱為反向代理服務器，建立在反向代理服務器上的緩存稱為反向代理緩存。暴露在互聯(lián)網(wǎng)中與后端的web客戶端通過內(nèi)部網(wǎng)絡相連的前端服務器稱為正向代理服務器，建立在正向代理服務器上的緩存稱為正向代理緩存。代理服務器緩存位于客戶端和web服務器之間，可以將它看做二者之間的一個中繼站。它的存在可以改善客戶端的訪問速度、提升web server的服務能力、安全性等等。

總共分析總結(jié)了五種技術(shù)，主要希望能夠?qū)eb server性能優(yōu)化這塊提供一個整體的認識。后續(xù)會專門就web緩存技術(shù)發(fā)表一些自己的看法。

三、如何進行網(wǎng)站性能優(yōu)化

一、前端優(yōu)化

網(wǎng)站性能優(yōu)化是一個很綜合的話題，涉及到服務器的配置和網(wǎng)站前后端程序等各個方面，我只是從實際經(jīng)歷出發(fā)，分享一下自己所嘗試過的網(wǎng)站性能優(yōu)化方法。之所以在標題上掛一個web2.0，是因為本文更偏重于中小網(wǎng)站的性能優(yōu)化，我所使用的系統(tǒng)也是典型web2.0的LAMP架構(gòu)。

首先講講前端的優(yōu)化，用戶訪問網(wǎng)頁的等待時間，有80%是發(fā)生在瀏覽器前端，特別是頁面和頁面中各種元素（圖片、CSS、Javascript、 flash…）的下載之上。因此在很多情況下，相對于把大量的時間花在艱苦而繁雜的程序改進上，前端的優(yōu)化往往能起到事半功倍的作用。雅虎最近將內(nèi)部使用的性能測試工具yslow向第三方公開，并發(fā)布了著名的網(wǎng)站性能優(yōu)化的十三條規(guī)則，建議你下載并安裝yslow，并作為測評網(wǎng)站優(yōu)化效果的工具。下面我挑其中特別有價值的具體說明一下優(yōu)化的方法：

對于第一次訪問您網(wǎng)站，尚未在瀏覽器cache中緩存您網(wǎng)站內(nèi)容的用戶，我們可以做的事情包括：

1）減少一個頁面訪問所產(chǎn)生的http連接次數(shù)

對于第一次訪問你網(wǎng)站的用戶，頁面所產(chǎn)生的http連接次數(shù)是影響性能的一個關(guān)鍵瓶頸。

對策：

- 盡量簡潔的頁面設計，最大程度減少圖片的使用，通過放棄一些不必要的頁面特效來減少javascript的使用。

- 使用一些優(yōu)化技巧，比如利用圖片的背景位移減少圖片的個數(shù)；image map技術(shù)；使用Inline images將css圖片捆綁到網(wǎng)頁中。

- 盡量合并js和css文件，減少獨立文件個數(shù)。

2) 使用gzip壓縮網(wǎng)頁內(nèi)容

使用gzip來壓縮網(wǎng)頁中的靜態(tài)內(nèi)容，能夠顯著減少用戶訪問網(wǎng)頁時的等待時間（據(jù)說可達到60%）。主流的web服務器都支持或提供gzip壓縮，如果使用apache服務器，只需要在配置文件中開啟 mod_gzip（apache1.x）或mod_deflate(apache2.x)即可。凡是靜態(tài)的頁面，使用gzip壓縮都能夠顯著提高服務器效率并減少帶寬支出，注意圖片內(nèi)容本身已經(jīng)是壓縮格式了，務必不要再進行壓縮。

3）將CSS放在頁面頂端，JS文件放在頁面底端

CSS的引用要放在html的頭部header中，JS文件引用盡量放在頁面底端標簽的后面，主要的思路是讓核心的頁面內(nèi)容盡早顯示出來。不過要注意，一些大量使用js的頁面，可能有一些js文件放在底端會引起一些難以預料的問題，根據(jù)實際情況適當運用即可。

4）使JS文件內(nèi)容最小化

具體來說就是使用一些javascript壓縮工具對js腳本進行壓縮，去除其中的空白字符、注釋，最小化變量名等。在使用gzip壓縮的基礎上，對js內(nèi)容的壓縮能夠?qū)⑿阅茉偬岣?%。

5）盡量減少外部腳本的使用，減少DNS查詢時間

不要在網(wǎng)頁中引用太多的外部腳本，首先，一次dns的解析過程會消耗20-120毫秒的時間；其次，如果在頁面中引用太多的外部文件（如各種廣告、聯(lián)盟等代碼），可能會因為外部文件的響應速度而將你的網(wǎng)站拖得很慢。如果不得不用，那么就盡量將這些腳本放在頁腳吧。不過有一點需要提及，就是瀏覽器一般只能并行處理同一域名下的兩個請求，而對于不同子的域名則不受此限制，因此適當將本站靜態(tài)內(nèi)容（css,js）放在其他的子域名下（如 static.xxx.com）會有利于提高瀏覽器并行下載網(wǎng)頁內(nèi)容的能力。

對于您網(wǎng)站的經(jīng)常性訪問用戶，主要的優(yōu)化思路就是最大限度利用用戶瀏覽器的cache來減少服務器的開銷。

1）在header中添加過期時間(Expires Header)

在header中給靜態(tài)內(nèi)容添加一個較長的過期時間，這樣可以使用戶今后訪問只讀取緩存中的文件，而不會與服務器產(chǎn)生任何的交互。不過這樣做也存在一些問題，當圖片、CSS和js文件更新時，用戶如果不刷新瀏覽器，就無法獲得此更新。這樣，我們在對圖片、css和js文件修改時，必須要進行重命名，才能保證用戶訪問到最新的內(nèi)容。這可能會給開發(fā)造成不小的麻煩，因為這些文件可能被站點中的許多文件所引用。flickr提出的解決辦法是通過url rewrite使不同版本號的URL事實上指向同一個文件，這是一個聰明的辦法，因為url級別的操作效率是很高的，可以給開發(fā)過程提供不少便利。

要理解為什么這樣做，必須要了解瀏覽器訪問url時的工作機制：

a. 第一次訪問url時，用戶從服務器段獲取頁面內(nèi)容，并把相關(guān)的文件（images,css,js…）放在高速緩存中，也會把文件頭中的expired time,last modified, ETags等相關(guān)信息也一同保留下來。

b. 用戶重復訪問url時，瀏覽器首先看高速緩存中是否有本站同名的文件，如果有，則檢查文件的過期時間；如果尚未過期，則直接從緩存中讀取文件，不再訪問服務器。

c. 如果緩存中文件的過期時間不存在或已超出，則瀏覽器會訪問服務器獲取文件的頭信息，檢查last modifed和ETags等信息，如果發(fā)現(xiàn)本地緩存中的文件在上次訪問后沒被修改，則使用本地緩存中的文件；如果修改過，則從服務器上獲取最新版本。

我的經(jīng)驗，如果可能，盡量遵循此原則給靜態(tài)文件添加過期時間，這樣可以大幅度減少用戶對服務器資源的重復訪問。

2）將css和js文件放在獨立外部文件中引用

將css和js文件放在獨立文件中，這樣它們會被單獨緩存起來，在訪問其他頁面時可以從瀏覽器的高速緩存中直接讀取。一些網(wǎng)站的首頁可能是例外的，這些首頁的自身瀏覽可能并不大，但卻是用戶訪問網(wǎng)站的第一印象以及導向到其他頁面的起點，也可能這些頁面本身使用了大量的ajax局部刷新及技術(shù)，這時可以將 css和js文件直接寫在頁面中。

3）去掉重復的腳本

在IE中，包含重復的js腳本會導致瀏覽器的緩存不被使用，仔細檢查一下你的程序，去掉重復引用的腳本應該不是一件很難的事情。

4）避免重定向的發(fā)生

除了在header中人為的重定向之外，網(wǎng)頁重定向常在不經(jīng)意間發(fā)生，被重定向的內(nèi)容將不會使用瀏覽器的緩存。比如用戶在訪問，服務器會通過301轉(zhuǎn)向到/，在后面加了一個“/”。如果服務器的配置不好，這也會給服務器帶來額外的負擔。通過配置apache的 alias或使用mod_rewrite模塊等方法，可以避免不必要的重定向。

還有一些，比如使用CDN分發(fā)機制、避免CSS表達式等、避免使用ETags等，因為不太常用，這里就不再贅述了。

做完了上述的優(yōu)化，可以試著用yslow測試一下網(wǎng)頁的性能評分，一般都可以達到70分以上了。

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

二、后端優(yōu)化

上次寫完web2.0網(wǎng)站前端優(yōu)化篇之后，一直想寫寫后端優(yōu)化的方法，今天終于有時間將思路整理了出來。

前端優(yōu)化可以避免我們造成無謂的服務器和帶寬資源浪費，但隨著網(wǎng)站訪問量的增加，僅靠前端優(yōu)化已經(jīng)不能解決所有問題了，后端軟件處理并行請求的能力、程序運行的效率、硬件性能以及系統(tǒng)的可擴展性，將成為影響網(wǎng)站性能和穩(wěn)定的關(guān)鍵瓶頸所在。優(yōu)化系統(tǒng)和程序的性能可以從以下的方面來入手：

1）apache、mysql等軟件的配置的優(yōu)化

盡管apache和mysql等軟件在安裝后使用的默認設置足以使你的網(wǎng)站運行起來，但是通過調(diào)整mysql和apache的一些系統(tǒng)參數(shù)，還是可以追求更高的效率和穩(wěn)定性。這個領域中有很多專業(yè)的文章和論壇（比如：），要想掌握也需要進行深入的研究和實踐，這里就不重點討論了。

2）應用程序環(huán)境加速

這里僅以我最常應用的php開發(fā)環(huán)境為例，有一些工具軟件可以通過優(yōu)化PHP運行環(huán)境來達到提速的目的，其基本原理大致是將PHP代碼預編譯并緩存起來，而不需要改變?nèi)魏未a，所以比較簡單，可以將php的運行效率提升50%以上。比較常用的php加速工具有：APC( http: //pecl.php.net/package-info.php?package=APC)、Turck MMCache（）、php accelebrator()，還有收費的Zend Performance Suite

3）將靜態(tài)內(nèi)容和動態(tài)內(nèi)容分開處理

apache是一個功能完善但比較龐大的web server，它的資源占用基本上和同時運行的進程數(shù)呈正比，對服務器內(nèi)存的消耗比較大，處理并行任務的效率也一般。在一些情況下，我們可以用比較輕量級的web server來host靜態(tài)的圖片、樣式表和javascript文件，這樣可以大大提升靜態(tài)文件的處理速度，還可以減少對內(nèi)存占用。我使用的web server是來自俄羅斯的nginx，其他選擇方案還包括lighttpd和thttpd等。

4）基于反向代理的前端訪問負載均衡

當一臺前端服務器不足以應付用戶訪問時，通過前端機實現(xiàn)web訪問的負載均衡是最快速可行的方案。通過apache的mod_proxy可以實現(xiàn)基于反向代理的負載均衡，這里推薦使用nginx做代理服務器，處理速度較apache更快一些。

5）應用緩存技術(shù)提高數(shù)據(jù)庫效能，文件緩存和分布式緩存

數(shù)據(jù)庫訪問處理并發(fā)訪問的能力是很多網(wǎng)站應用的關(guān)鍵瓶頸，在想到使用主從結(jié)構(gòu)和多farm的方式構(gòu)建服務器集群之前，首先應該確保充分使用了數(shù)據(jù)庫查詢的緩存。一些數(shù)據(jù)庫類型（如mysql的innoDB）自身內(nèi)置對緩存的支持，此外，還可以利用程序方法將常用的查詢通過文件或內(nèi)存緩存起來。比如通過 php中的ob_start和文件讀寫函數(shù)可以很方便的實現(xiàn)文件形式的緩存，而如果你擁有多臺服務器，可以通過memcache技術(shù)通過分布式共享內(nèi)存來對數(shù)據(jù)庫查詢進行緩存，不僅效率高而且擴展性好，memcache技術(shù)在livejournal和Craigslist.org等知名網(wǎng)站應用中都得到了檢驗。

6）服務器運行狀態(tài)的檢測，找到影響性能的瓶頸所在

系統(tǒng)優(yōu)化沒有一勞永逸的方法，需要通過檢測服務器的運行狀態(tài)來及時發(fā)現(xiàn)影響性能的瓶頸，以及可能存在的潛在問題，因為網(wǎng)站的性能，永遠取決于木桶中的短板?？梢跃帉懸恍┠_本來檢測web服務的運行，也有一些開源的軟件也提供了很好的功能

7）良好的擴展架構(gòu)是穩(wěn)定和性能的基礎

一些技巧和竅門可以幫你度過眼前的難關(guān)，但要想使網(wǎng)站具備應付大規(guī)模訪問的能力，則需要從系統(tǒng)架構(gòu)上進行徹底的規(guī)劃，好在很多前人無私的把他們架構(gòu)

網(wǎng)站的經(jīng)驗分享給我們，使我們可以少走甚多彎路。我最近讀到的兩篇有啟發(fā)的文章：

- 從LiveJournal后臺發(fā)展看大規(guī)模網(wǎng)站性能優(yōu)化方法

- Myspace的六次重構(gòu)

最后不得不提到程序編碼和數(shù)據(jù)庫結(jié)構(gòu)對性能的影響，一系列糟糕的循環(huán)語句，一個不合理的查詢語句、一張設計不佳的數(shù)據(jù)表或索引表，都足以會使應用程序運行的速度成倍的降低。培養(yǎng)全局思考的能力，養(yǎng)成良好的編程習慣，并對數(shù)據(jù)庫運行機制有所了解，是提高編程質(zhì)量的基礎。

四、前端優(yōu)化的目的是什么Web前端從哪方面來優(yōu)化網(wǎng)站

雖然不做前端，但與網(wǎng)頁源碼優(yōu)化打交道比較多，前段要注意的有這幾方面：

1、代碼清晰、即功能標注明確，便于維護

2、js、css盡量不要寫在源碼頁中，便于維護，也減輕瀏覽器加載速度

3、用戶體驗度，頁面排版要合理，便于瀏覽

4、盡量學點簡單的seo基礎，這個對于網(wǎng)站以后做優(yōu)化是有好處的

以上就是關(guān)于web頁面可以從哪些方面優(yōu)化相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。