正文

頁(yè)面性能優(yōu)化

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

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

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

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

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

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

本文目錄:

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

頁(yè)面性能優(yōu)化

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

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

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

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

2. 使用CDN

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

3. 避免空的src和href

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

4. 為文件頭指定Expires

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

新浪微博的這個(gè)css文件的Expires時(shí)間是2016-5-04 09:14:14.

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

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

6. 把CSS放到頂部

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

7. 把JS放到底部

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

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

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

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

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

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

目的是緩存文件，可以參考原則4。但有時(shí)候?yàn)榱藴p少請(qǐng)求，也會(huì)直接寫(xiě)到頁(yè)面里，需根據(jù)PV和IP的比例權(quán)衡。

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

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

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

下面是新浪微博的圖片域名，我們可以看到他有多個(gè)域名，這樣可以保證這些不同域名能夠同時(shí)去下載圖片，而不用排隊(duì)。不過(guò)如果當(dāng)使用的域名過(guò)多時(shí)，響應(yīng)時(shí)間就會(huì)慢，因?yàn)椴挥庙憫?yīng)域名時(shí)間不一致。

11. 精簡(jiǎn)CSS和JS

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

12. 避免跳轉(zhuǎn)

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

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

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

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

14. 配置ETags

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

15. 可緩存的AJAX

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

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

16. 使用GET來(lái)完成AJAX請(qǐng)求

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

17. 減少DOM元素?cái)?shù)量

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

18. 避免404

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

19. 減少Cookie的大小

Cookie里面別塞那么多東西，因?yàn)槊總€(gè)請(qǐng)求都得帶著他跑。

20. 使用無(wú)cookie的域

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

21. 不要使用濾鏡

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

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

22. 不要在HTML中縮放圖片

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

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

23. 縮小favicon.ico并緩存

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

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

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

二、Web組件分離

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

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

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

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

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

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

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

五、web緩存技術(shù)

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

(1) 減少網(wǎng)絡(luò)流量，從而減輕網(wǎng)絡(luò)擁塞;這是因?yàn)榫彺姹苊饬艘徊糠諬TTP請(qǐng)求。

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

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

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

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

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

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

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

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

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

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

1、合并Js文件和CSS

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

2、Sprites圖片技術(shù)

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

3、壓縮文本和圖片

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

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

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

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

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

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

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

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

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

8、使用 Progressive JPEGs

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

9、精簡(jiǎn)代碼

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

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

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

11、使用AJAX

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如何解決屏幕撕裂問(wèn)題？

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

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

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

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