正文

頁面性能優(yōu)化

發(fā)布時間：2023-04-14 01:50:13 稿源：創(chuàng)意嶺閱讀： 56

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

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

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

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

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

本文目錄:

1、如何對前端性能進(jìn)行優(yōu)化
2、網(wǎng)站性能優(yōu)化有哪些
3、如何提高網(wǎng)站頁面速度？
4、為什么幀率達(dá)到60fps頁面就流暢？

頁面性能優(yōu)化

一、如何對前端性能進(jìn)行優(yōu)化

前端開發(fā)代碼優(yōu)化、可維護(hù)性、瀏覽器兼容性是非常重要的課題。從實(shí)際的工程應(yīng)用角度出發(fā)，最常遇見的前端優(yōu)化問題。前端性能進(jìn)行優(yōu)化規(guī)則，基本可以涵蓋現(xiàn)在前端大部分的性能優(yōu)化原則了，很多更加geek和精細(xì)優(yōu)化方法都是從這些原則里面延伸出來的。

前端性能進(jìn)行優(yōu)化都有哪些規(guī)則

減少HTTP請求次數(shù)
盡量合并圖片、CSS、JS。比如加載一個頁面有5個css文件的話，把這個5個文件合成一個的話，就只需要發(fā)出一次http請求，節(jié)省網(wǎng)絡(luò)請求時間，加快頁面的加載。

2. 使用CDN

網(wǎng)站上靜態(tài)資源即css、js全都使用cdn分發(fā)，包括圖片

3. 避免空的src和href

當(dāng)link標(biāo)簽的href屬性為空、script標(biāo)簽的src屬性為空的時候，瀏覽器渲染的時候會把當(dāng)前頁面的URL作為它們的屬性值，從而把頁面的內(nèi)容加載進(jìn)來作為它們的值。所以要避免犯這樣的疏忽。

4. 為文件頭指定Expires

Exipres是用來設(shè)置文件的過期時間的，一般對css、js、圖片資源有效。他可以使內(nèi)容具有緩存性，這樣下回再訪問同樣的資源時就通過瀏覽器緩存區(qū)讀取，不需要再發(fā)出http請求。如下例子：

新浪微博的這個css文件的Expires時間是2016-5-04 09:14:14.

5. 使用gzip壓縮內(nèi)容

gzip能夠壓縮任何一個文本類型的響應(yīng)，包括html，xml，json。大大縮小請求返回的數(shù)據(jù)量。

6. 把CSS放到頂部

網(wǎng)頁上的資源加載時從上網(wǎng)下順序加載的，所以css放在頁面的頂部能夠優(yōu)先渲染頁面，讓用戶感覺頁面加載很快。

7. 把JS放到底部

加載js時會對后續(xù)的資源造成阻塞，必須得等js加載完才去加載后續(xù)的文件，所以就把js放在頁面底部最后加載。

8. 避免使用CSS表達(dá)式

舉個css表達(dá)式的例子

font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );

這個表達(dá)式會持續(xù)的在頁面上計算樣式，影響頁面的性能。并且css表達(dá)式只被IE支持。

9. 將CSS和JS放到外部文件中

目的是緩存文件，可以參考原則4。但有時候為了減少請求，也會直接寫到頁面里，需根據(jù)PV和IP的比例權(quán)衡。

10. 權(quán)衡DNS查找次數(shù)

減少主機(jī)名可以節(jié)省響應(yīng)時間。但同時，需要注意，減少主機(jī)會減少頁面中并行下載的數(shù)量。

IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當(dāng)在一個頁面顯示多張圖片時，IE 用戶的圖片下載速度就會受到影響。所以新浪會搞N個二級域名來放圖片。

下面是新浪微博的圖片域名，我們可以看到他有多個域名，這樣可以保證這些不同域名能夠同時去下載圖片，而不用排隊。不過如果當(dāng)使用的域名過多時，響應(yīng)時間就會慢，因為不用響應(yīng)域名時間不一致。

11. 精簡CSS和JS

這里就涉及到css和js的壓縮了。比如下面的新浪的一個css文件，把空格回車全部去掉，減少文件的大小。現(xiàn)在的壓縮工具有很多，基本主流的前端構(gòu)建工具都能進(jìn)行css和js文件的壓縮，如grunt，glup等。

12. 避免跳轉(zhuǎn)

有種現(xiàn)象會比較坑爹，看起來沒什么差別，其實(shí)多次了一次頁面跳轉(zhuǎn)。比如當(dāng)URL本該有斜杠（/）卻被忽略掉時。例如，當(dāng)我們要訪問 http:// baidu.com 時，實(shí)際上返回的是一個包含301代碼的跳轉(zhuǎn)，它指向的是 http:// baidu.com/ （注意末尾的斜杠）。在nginx服務(wù)器可以使用rewrite；Apache服務(wù)器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash來避免。

另一種是不用域名之間的跳轉(zhuǎn)，比如訪問 http:// baidu.com/bbs 跳轉(zhuǎn)到 http:// bbs.baidu.com/ 。那么可以通過使用Alias或者mod_rewirte建立CNAME（保存一個域名和另外一個域名之間關(guān)系的DNS記錄）來替代。

13. 刪除重復(fù)的JS和CSS

重復(fù)調(diào)用腳本，除了增加額外的HTTP請求外，多次運(yùn)算也會浪費(fèi)時間。在IE和Firefox中不管腳本是否可緩存，它們都存在重復(fù)運(yùn)算JavaScript的問題。

14. 配置ETags

它用來判斷瀏覽器緩存里的元素是否和原來服務(wù)器上的一致。比last-modified date更具有彈性，例如某個文件在1秒內(nèi)修改了10次，Etag可以綜合Inode(文件的索引節(jié)點(diǎn)(inode)數(shù))，MTime(修改時間)和Size來精準(zhǔn)的進(jìn)行判斷，避開UNIX記錄MTime只能精確到秒的問題。服務(wù)器集群使用，可取后兩個參數(shù)。使用ETags減少Web應(yīng)用帶寬和負(fù)載

15. 可緩存的AJAX

異步請求同樣的造成用戶等待，所以使用ajax請求時，要主動告訴瀏覽器如果該請求有緩存就去請求緩存內(nèi)容。如下代碼片段, cache:true就是顯式的要求如果當(dāng)前請求有緩存的話，直接使用緩存

$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }

16. 使用GET來完成AJAX請求

當(dāng)使用XMLHttpRequest時，瀏覽器中的POST方法是一個“兩步走”的過程：首先發(fā)送文件頭，然后才發(fā)送數(shù)據(jù)。因此使用GET獲取數(shù)據(jù)時更加有意義。

17. 減少DOM元素數(shù)量

這是一門大學(xué)問，這里可以引申出一堆優(yōu)化的細(xì)節(jié)。想要具體研究的可以看后面推薦書籍?？傊笤瓌t減少DOM數(shù)量，就會減少瀏覽器的解析負(fù)擔(dān)。

18. 避免404

比如外鏈的css、js文件出現(xiàn)問題返回404時，會破壞瀏覽器的并行加載。

19. 減少Cookie的大小

Cookie里面別塞那么多東西，因為每個請求都得帶著他跑。

20. 使用無cookie的域

比如CSS、js、圖片等，客戶端請求靜態(tài)文件的時候，減少了 Cookie 的反復(fù)傳輸對主域名的影響。

21. 不要使用濾鏡

IE獨(dú)有屬性AlphaImageLoader用于修正7.0以下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在于瀏覽器加載圖片時它會終止內(nèi)容的呈現(xiàn)并且凍結(jié)瀏覽器。在每一個元素（不僅僅是圖片）它都會運(yùn)算一次，增加了內(nèi)存開支，因此它的問題是多方面的。

完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替，這種格式能在IE中很好地工作。如果你確實(shí)需要使用AlphaImageLoader，請使用下劃線_filter又使之對IE7以上版本的用戶無效。

22. 不要在HTML中縮放圖片

比如你需要的圖片尺寸是50* 50

那就不用用一張500*500的大尺寸圖片，影響加載

23. 縮小favicon.ico并緩存

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

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

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

二、Web組件分離

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

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

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

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

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

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

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

五、web緩存技術(shù)

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

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

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

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

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

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

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

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

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

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

三、如何提高網(wǎng)站頁面速度？

網(wǎng)頁的加在一半就是代碼的加載，各種文件，以及一些因素，那么就從這些因素去考慮就可以：

1、合并Js文件和CSS

將JS代碼和CSS樣式分別合并到一個共享的文件，這樣不僅能簡化代碼，而且在執(zhí)行JS文件的時候，如果JS文件比較多，就需要進(jìn)行多次“Get”請求，延長加載速度，將JS文件合并在一起后，自然就減少了Get請求次數(shù)，提高了加載速度。

2、Sprites圖片技術(shù)

Spriting是一種網(wǎng)頁圖片應(yīng)用處理方式，它是將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，然后利用CSS技術(shù)展現(xiàn)出來。這樣一來，當(dāng)訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了，可以減少了整個網(wǎng)頁的圖片大小，并且利用CSSSprites能很好地減少網(wǎng)頁的http請求，從而大大的提高頁面的性能。CSSSprites在國內(nèi)很多人叫css精靈，很早就有了，在很多大型網(wǎng)站都有用到，特別是一些所有頁面都存在的圖標(biāo)用得比較多，很好的提升加載速度。

3、壓縮文本和圖片

壓縮技術(shù)如gzip可以有效減少頁面加載的時間。包括HTML，XML，JSON(JavaScript對象符號)，JavaScript和CSS等，壓縮率都可以在大小70%左右。文本壓縮用得比較多，一般直接在空間開啟就行，而圖片的壓縮就比較隨意，很多都是直接上傳，其實(shí)還有很大的壓縮空間。

4、延遲顯示可見區(qū)域外的內(nèi)容

為了確保用戶可以更快地看見可見區(qū)域的網(wǎng)頁可以延遲加載或展現(xiàn)可見區(qū)域外的內(nèi)容，為了避免頁面變形，可以使用占位符標(biāo)簽制定正確的高度和寬度。比如WP的jQueryImage LazyLoad插件就可以在用戶停留在第一屏的時候，不加載任何第一屏以下的圖片信息，只有當(dāng)用戶把鼠標(biāo)往下滾動的時候，這些圖片才開始加載。這樣很明顯提升可見區(qū)域的加載速度，提高用戶體驗。

5、確保功能圖片優(yōu)先加載

網(wǎng)站主要考慮可用性的重要性，一個功能按鈕要提前加載出來，用戶進(jìn)入下載頁，一個只需要8s時間的下載花了5s在等待、尋找下載按鈕圖片，誰能忍受?

6、重新布置Call-to-Action按鈕

其實(shí)這個和上面一條是差不多的，都是從用戶體驗速度著手，跳過了網(wǎng)頁的整體加載速度。速度沒變，只是讓一些行為按鈕提前，Call-to-Action按鈕一般習(xí)慣設(shè)計在頁面底部，這樣的習(xí)慣對于用戶來說并不總是好的，購買用戶需要等到最下面加載出來才能點(diǎn)擊下一步操作?？梢哉{(diào)整CTA按鈕的位置或使用滑動的圖片按鈕。很多大型購物網(wǎng)站的加入購物車就是這種類型。

7、圖片格式優(yōu)化

不恰當(dāng)?shù)膱D像格式是一種極為常見的減慢加載速度的罪魁禍?zhǔn)?。正確的圖片格式可以讓圖片縮小數(shù)倍，如果保存為最佳格式?？梢怨?jié)省大量帶寬，減少處理時間時間，大大加快頁面加載速度，這是一種很常見的做法。

8、使用 Progressive JPEGs

ProgressiveJPEGs圖片是JPEG格式的一個特殊變種，名為“高級JPEG”。在創(chuàng)建高級JPEG文件時，數(shù)據(jù)是這樣安排的：在裝入圖像時，開始只顯示一個模糊的圖像，隨著數(shù)據(jù)的裝入，圖像逐步變得清晰。它相當(dāng)于交織的GIF格式的圖片。高級JPEG主要是考慮到使用調(diào)制解調(diào)器的慢速網(wǎng)絡(luò)而設(shè)計的，快速網(wǎng)絡(luò)的使用者通常不會體會到它和正常JPEG格式圖片的區(qū)別。對于網(wǎng)速比較慢的用戶，這無疑有很好的體驗。

9、精簡代碼

這個可以說是最直接的一個方法，也是用得比較多的，對網(wǎng)頁代碼進(jìn)行瘦身，刪除不必要的沉冗代碼，比如不必要的空格、換行符、注釋等，包括JS代碼中的無用代碼也需要清除。其中對于注釋代碼的清除可能有些人存在誤區(qū)，甚至有的在里面堆砌關(guān)鍵詞。

10、延遲加載和執(zhí)行非必要腳本

網(wǎng)頁中有很多腳本是在頁面完全加載完前都不需要執(zhí)行的，可以延遲加載和執(zhí)行非必要腳本。這些腳本可以在onload事件之后執(zhí)行，避免對網(wǎng)頁上重要內(nèi)容的呈現(xiàn)造成影響。這些腳本可能是自己網(wǎng)頁的甲苯，往往更多的是一些第三方腳本，這樣的有很多，比如評論、廣告、智能推薦、百度云圖、分享等等，這些完全可以等主體內(nèi)容加載完后再執(zhí)行。

11、使用AJAX

AJAX即“Asynchronous Javascript +XML“，是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。傳統(tǒng)的網(wǎng)頁(不使用AJAX)如果需要更新內(nèi)容，必須重載整個網(wǎng)頁面。

12、自動化的頁面性能優(yōu)化

自動化的頁面性能優(yōu)化也就是借助工具了，網(wǎng)站提速工具有很多，這里Radware推薦了自家的RadwareFastView，也算Radware給自家做了一個廣告，這里不多說了。

四、為什么幀率達(dá)到60fps頁面就流暢？

我們平時在做性能優(yōu)化的時候，經(jīng)常會提到一個指標(biāo)就是頁面幀率達(dá)到60fps，但是這個判斷值60是怎么來的呢?為什么不是50或者70fps？

帶著這個問題查閱了一些網(wǎng)絡(luò)資料，并整理成下文：

有人說可能是人眼的感知極限就是60fps，60hz對人眼識別來說已經(jīng)具備較高的平滑度，但是通過查閱百科得知85hz是人類大腦處理視頻的極限，人眼無法分辨更高頻率的差異。

人眼在看畫面時，畫面幀率高于每秒10-12幀的時候，就會認(rèn)為是連貫的。

一般電影的拍攝及播放幀數(shù)是每秒24幀。

有人會說：既然你說畫面幀率越高，用戶體驗越好，那為什么頁面性能優(yōu)化做到60fps就可以了？這是由于我們使用的設(shè)備引起的。

從機(jī)器的構(gòu)造來說，生成圖像的設(shè)備（如顯卡）和顯示圖像的設(shè)備（顯示器）是分離的。

目前，大多數(shù)顯示器根據(jù)其設(shè)定按 30Hz、 60Hz、 120Hz 或者 144Hz 的頻率進(jìn)行刷新。而其中最常見的刷新頻率是 60 Hz。這樣做是為了繼承以前電視機(jī)刷新頻率為 60Hz 的設(shè)定。

顯卡內(nèi)圖片的真正提供者是GPU，而這導(dǎo)致了另一個問題，由于 GPU 生成圖像的頻率與顯示器刷新的頻率是不相關(guān)的，那么在顯示器刷新時，GPU 沒有準(zhǔn)備好需要顯示的圖像怎么辦；或者 GPU 的渲染速度過快，顯示器來不及刷新，GPU 就已經(jīng)開始渲染下一幀圖像又該如何處理？

如果解決不了這兩個問題，就會出現(xiàn)上圖中的屏幕撕裂（Screen Tearing）現(xiàn)象，屏幕中一部分顯示的是上一幀的內(nèi)容，另一部分顯示的是下一幀的內(nèi)容。

我們用兩個例子來說明可能出現(xiàn)屏幕撕裂的兩種情況：

如果顯示器的刷新頻率為 75 Hz，GPU 的渲染速度為 100 Hz，那么在兩次屏幕刷新的間隔中，GPU 會渲染 4/3 個幀，后面的 1/3 幀會覆蓋已經(jīng)渲染好的幀棧，最終會導(dǎo)致屏幕在 1/3 或者 2/3 的位置出現(xiàn)屏幕撕裂效果；

那么 GPU 的渲染速度小于顯示器呢，比如說 50 Hz，那么在兩次屏幕刷新的間隔中，GPU 只會渲染 2/3 幀，剩下的 1/3 會來自上一幀，與上面的結(jié)果完全相同，在同樣的位置出現(xiàn)撕裂效果。

到這里，有人會說，如果顯示器的刷新頻率與 GPU 的渲染速度完全相同，應(yīng)該就會解決屏幕撕裂的問題了吧？其實(shí)并不是。顯示器從 GPU 拷貝幀的過程依然需要消耗一定的時間，如果屏幕在拷貝圖像時刷新，仍然會導(dǎo)致屏幕撕裂問題。

如何解決屏幕撕裂問題？

解決屏幕撕裂中最知名可能也是最古老的解決方案就是 V-Sync 技術(shù)。

V-Sync 的原理簡單而直觀：產(chǎn)生屏幕撕裂的原因是顯卡在屏幕刷新時進(jìn)行了渲染，而 V-Sync 通過同步渲染/刷新時間的方式來解決這個問題。顯示器的刷新頻率為 60 Hz，若此時開啟 V-Sync，將控制顯卡渲染速度在 60 Hz 以內(nèi)以匹配顯示器刷新頻率。這也意味著，在 V-Sync 的限制下，顯卡顯示性能的極限就限制為 60 Hz 以內(nèi)。

因此在屏幕的刷新頻率基本固定的情況下，我們只能控制GPU的渲染速度往60fps上靠攏。

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