正文

前端減少頁面加載時(shí)間的方法（前端減少頁面加載時(shí)間的方法有哪些）

發(fā)布時(shí)間：2023-04-14 00:31:27 稿源：創(chuàng)意嶺閱讀： 68

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于前端減少頁面加載時(shí)間的方法的問題，以下是小編對(duì)此問題的歸納整理，讓我們一起來看看吧。

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

只需要輸入關(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ù)請(qǐng)撥打電話175-8598-2043，或添加微信：1454722008

本文目錄:

1、如何進(jìn)行前端優(yōu)化
2、如何對(duì)前端性能進(jìn)行優(yōu)化
3、常見的前端性能優(yōu)化手段都有哪些？都有多大收益
4、APP常見加載方式

前端減少頁面加載時(shí)間的方法（前端減少頁面加載時(shí)間的方法有哪些）

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

1.減少 HTTP 請(qǐng)求....

2.使用 HTTP2

3.使用服務(wù)端渲染

4.靜態(tài)資源使用 CDN

5.將 CSS 放在文件頭部，JavaScript 文件放 ...

6.使用字體圖標(biāo) iconfont 代替圖片圖標(biāo)

7.善用緩存，不重復(fù)加載相同的資源

8.壓縮文件

9.圖片優(yōu)化

(1).圖片延遲加載

(2). 響應(yīng)式圖片

(3). 調(diào)整圖片大小

(4). 降低圖片質(zhì)量

(5). 盡可能利用 CSS3 效果代替圖片

(6). 使用 webp 格式的圖片

10. 通過 webpack 按需加載代碼，提取第三庫代碼，減少 ES6 轉(zhuǎn)為 ES5 的冗余代碼

11. 減少重繪重排

12. 使用事件委托

13. 注意程序的局部性

14. if-else 對(duì)比 switch

15. 查找表

16. 避免頁面卡頓

17. 使用 requestAnimationFrame 來實(shí)現(xiàn)視覺變化

18. 使用 Web Workers

19. 使用位操作

20. 不要覆蓋原生方法

21. 降低 CSS 選擇器的復(fù)雜性

(1). 瀏覽器讀取選擇器，遵循的原則是從選擇器的右邊到左邊讀取。

(2). CSS 選擇器優(yōu)先級(jí)

22. 使用 flexbox 而不是較早的布局模型

23. 使用 transform 和 opacity 屬性更改來實(shí)現(xiàn)動(dòng)畫

24. 合理使用規(guī)則，避免過度優(yōu)化

性能優(yōu)化主要分為兩類：

加載時(shí)優(yōu)化
運(yùn)行時(shí)優(yōu)化

二、如何對(duì)前端性能進(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請(qǐng)求次數(shù)
盡量合并圖片、CSS、JS。比如加載一個(gè)頁面有5個(gè)css文件的話，把這個(gè)5個(gè)文件合成一個(gè)的話，就只需要發(fā)出一次http請(qǐng)求，節(jié)省網(wǎng)絡(luò)請(qǐng)求時(shí)間，加快頁面的加載。

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)前頁面的URL作為它們的屬性值，從而把頁面的內(nèi)容加載進(jìn)來作為它們的值。所以要避免犯這樣的疏忽。

4. 為文件頭指定Expires

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

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

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

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

6. 把CSS放到頂部

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

7. 把JS放到底部

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

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

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

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

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

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

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

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

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

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

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

11. 精簡CSS和JS

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

12. 避免跳轉(zhuǎn)

有種現(xiàn)象會(huì)比較坑爹，看起來沒什么差別，其實(shí)多次了一次頁面跳轉(zhuǎn)。比如當(dāng)URL本該有斜杠（/）卻被忽略掉時(shí)。例如，當(dāng)我們要訪問 http:// baidu.com 時(shí)，實(shí)際上返回的是一個(gè)包含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（保存一個(gè)域名和另外一個(gè)域名之間關(guān)系的DNS記錄）來替代。

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

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

14. 配置ETags

它用來判斷瀏覽器緩存里的元素是否和原來服務(wù)器上的一致。比last-modified date更具有彈性，例如某個(gè)文件在1秒內(nèi)修改了10次，Etag可以綜合Inode(文件的索引節(jié)點(diǎn)(inode)數(shù))，MTime(修改時(shí)間)和Size來精準(zhǔn)的進(jìn)行判斷，避開UNIX記錄MTime只能精確到秒的問題。服務(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來完成AJAX請(qǐng)求

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

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

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

18. 避免404

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

19. 減少Cookie的大小

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

20. 使用無cookie的域

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

21. 不要使用濾鏡

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

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

22. 不要在HTML中縮放圖片

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

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

23. 縮小favicon.ico并緩存

三、常見的前端性能優(yōu)化手段都有哪些？都有多大收益

規(guī)則01：盡量減少HTTP請(qǐng)求

前端優(yōu)化的黃金準(zhǔn)則指導(dǎo)著前端頁面的優(yōu)化策略：只有10%-20%的最終用戶響應(yīng)時(shí)間花在接受請(qǐng)求的HTML文檔上，剩下的80%-90%時(shí)間花在為HTML文檔所引用的所有組件（圖片、腳本、樣式表等）進(jìn)行的HTTP請(qǐng)求上。因此，改善響應(yīng)時(shí)間的最簡單途徑就是減少組件的數(shù)量，并由此減少HTTP請(qǐng)求的數(shù)量。當(dāng)然很多人就會(huì)說，既然這樣，那我們就減少頁面組件的數(shù)量不就OK了嗎？那你試試，你會(huì)掀起一場(chǎng)性能優(yōu)化和產(chǎn)品設(shè)計(jì)之間的大PK。

所以，我們要減少HTTP請(qǐng)求是要平衡性能和設(shè)計(jì)的。如果找到這個(gè)平衡點(diǎn)呢？書中從以下幾個(gè)方面做了介紹，我逐一說明：

① 圖片地圖

初看“圖片地圖”四個(gè)字，對(duì)非專業(yè)的前端人員來說一頭霧水，我的第一印象就是這樣的，咱們以京東的移動(dòng)站點(diǎn)為例，右側(cè)用戶和購物車的圖標(biāo)，正常實(shí)現(xiàn)我會(huì)選擇如下方式：

</a>

</a>

這種方式無可厚非的，但是兩張圖片就有兩個(gè)HTTP請(qǐng)求，這明顯是增加了頁面中的HTTP請(qǐng)求。那么我們可以把這兩個(gè)HTTP請(qǐng)求變成一個(gè)嗎？

答案當(dāng)然是可以的，這就是圖片地圖：允許在一張圖片上關(guān)聯(lián)多個(gè)URL，而目標(biāo)URL的選擇取決于用戶單擊了圖片上的哪個(gè)位置。

這樣上面京東兩個(gè)圖標(biāo)合并成一張圖片，這樣圖片的HTTP請(qǐng)求就減少了一個(gè)。

示例代碼如下：

<areashape=”rect” coords=”0,0,40,40” href=”用戶跳轉(zhuǎn)頁面URL”>

<areashape=”rect” coords=”50,0,90,40” href=”購物車跳轉(zhuǎn)頁面URL”>

</map>

不過圖片地圖只支持矩形形狀，其他形狀不支持。

② 請(qǐng)CSS喝“雪碧”（CSS Sprites）CSS Sprites一句話：將多個(gè)圖片合并到一張單獨(dú)的圖片，這樣就大大減少了頁面中圖片的HTTP請(qǐng)求。

③ 內(nèi)聯(lián)圖片和腳本使用data:URL（Base64編碼）模式直接將圖片包含在Web頁面中而無需進(jìn)行HTTP請(qǐng)求。但是此種方法存在明顯缺陷：- 不受IE的歡迎；- 圖片太大不宜采用這種方式，因?yàn)锽ase64編碼之后會(huì)增加圖片大小，這樣頁面整體的下載量會(huì)變大；- 內(nèi)聯(lián)圖片在頁面跳轉(zhuǎn)的時(shí)候不會(huì)被緩存。（大圖片可以使用瀏覽器的本地緩存，在首次訪問的時(shí)候保存到瀏覽器緩存中，典型的是HTML5的manifest緩存機(jī)制以及LocalStorage等）。

④ 樣式表的合并將頁面樣式定義、腳本、頁面本身代碼嚴(yán)格區(qū)分開，但是樣式表、腳本也不是分割越細(xì)越好，因?yàn)闆]多引用一個(gè)樣式表就增加一次HTPP請(qǐng)求，能合并的樣式表盡量合并。一個(gè)網(wǎng)站有一個(gè)公用樣式表定義，每個(gè)頁面只要有一個(gè)樣式表就OK啦。

通過以上四個(gè)努力之后，你會(huì)發(fā)現(xiàn)你的網(wǎng)頁響應(yīng)時(shí)間最多能減少一半，這不是作者說大話，也不是我狂吹，我親手用我的移動(dòng)網(wǎng)站首頁做了一個(gè)嘗試，本地測(cè)試之后響應(yīng)時(shí)間能減少40%左右。所以減少頁面HTTP請(qǐng)求數(shù)量，是一個(gè)很重要的原則。遵循此原則可以同時(shí)改善首次訪問和后續(xù)訪問的響應(yīng)時(shí)間，而每一個(gè)網(wǎng)站的首次響應(yīng)時(shí)間會(huì)決定用戶之后還來不來的重要原因。

規(guī)則02：使用內(nèi)容發(fā)布網(wǎng)絡(luò)（CDN的使用）

什么叫內(nèi)容發(fā)布網(wǎng)絡(luò)（CDN）？它是一組分布在多個(gè)不同地理位置的Web服務(wù)器，用于更加有效地向用戶發(fā)布內(nèi)容。主要用于發(fā)布頁面靜態(tài)資源：圖片、css文件、js文件等。如此，能輕易地提高響應(yīng)速度。關(guān)于CDN的具體詳細(xì)原理以及優(yōu)缺點(diǎn)，各位可以自行詢問度娘或者google。

規(guī)則03：添加Expires頭

瀏覽器使用緩存來減少HTTP請(qǐng)求的數(shù)據(jù)，并減小HTTP響應(yīng)的大小，使頁面加載更快。Web服務(wù)器使用Expires頭來告訴瀏覽器它可以使用一個(gè)組件的當(dāng)前副本，直到指定的deadline為止。HTTP規(guī)范中稱此頭為：在這一時(shí)間之后響應(yīng)被認(rèn)為失效。個(gè)人對(duì)這塊表示不想使用，其實(shí)就是一句話，把一些css、js、圖片在首次訪問的時(shí)候全部緩存到瀏覽器本地，從我做移動(dòng)網(wǎng)站的過程中發(fā)現(xiàn)，其實(shí)沒有這么復(fù)雜，完全可以使用HTML5提供的本地緩存機(jī)制就OK了。關(guān)于HTML5本地緩存機(jī)制，各位可以查閱相關(guān)資料。后續(xù)我也會(huì)對(duì)HTML5的緩存機(jī)制進(jìn)行介紹的。

規(guī)則04：壓縮組件（使用Gzip方式）

書中關(guān)于壓縮從gzip壓縮方式到如何壓縮講了很多，我想直接跳過，對(duì)于做PC網(wǎng)站或者移動(dòng)網(wǎng)站來說，急需要壓縮的是css文件和js文件，至于如何壓縮，網(wǎng)上有很多在線工具，去挑選一個(gè)自己用的順手看的順眼的就好，當(dāng)然也有人選擇對(duì)HTML進(jìn)行壓縮，這樣也可以。但是實(shí)際工作中我沒有這么做。之所謂沒有這么做，是因?yàn)槲矣X得很麻煩。不要鄙視我，畢竟我不是一個(gè)真正意義上的前端工程師，哈哈！

規(guī)則05：將CSS樣式表放在頂部

如果將css樣式定義放在頁面中或者頁面底部，會(huì)出現(xiàn)短暫白屏或者某一區(qū)域短暫白板的情況，這和瀏覽器的運(yùn)營機(jī)制有關(guān)的，不管頁面如何加載，頁面都是逐步呈現(xiàn)的。所以在每做一個(gè)頁面的時(shí)候，用Link標(biāo)簽把每一個(gè)樣式表定義放在head中。

規(guī)則06：將javascript腳本放在底部

瀏覽器在加載css文件時(shí)，頁面逐步呈現(xiàn)會(huì)被阻止，直到所有css文件加載完畢，所以要把css文件的引用放到head中去，這樣在加載css文件時(shí)不會(huì)組織頁面的呈現(xiàn)。但是對(duì)于js文件，在使用的時(shí)候，它下面所有也頁面內(nèi)容的呈現(xiàn)都會(huì)被阻塞，將腳本放在頁面越靠下的地方，就意味著越多的內(nèi)容能夠逐步呈現(xiàn)。

規(guī)則07：避免使用CSS表達(dá)式

CSS表達(dá)式是動(dòng)態(tài)玩CSS的一種很強(qiáng)大的方式，但是強(qiáng)大的同時(shí)也存在很高的危險(xiǎn)性。因?yàn)閏ss表達(dá)式的頻繁求值會(huì)導(dǎo)致css表達(dá)式性能低下。如果真想玩css表達(dá)式，可以選用只求值一次的表達(dá)式或者使用事件處理來改變css的值。

規(guī)則08：使用外部javascript和CSS內(nèi)聯(lián)js和css其實(shí)比外部文件有更快的響應(yīng)速度，那為什么還要用外部呢？因?yàn)槭褂猛獠康膉s和css可以讓瀏覽器緩存他們，這樣不僅HTML文檔大小減少，而且不會(huì)增加HTTP請(qǐng)求數(shù)量。另外，使用外部js和css可以提高組件的可復(fù)用性。

規(guī)則09：減少DNS查詢

DNS查詢有時(shí)間開銷，通常一個(gè)瀏覽器查找一個(gè)給定主機(jī)名的IP地址需要20-120ms。緩存DNS：緩存DNS查詢可以很好地提高網(wǎng)頁性能，一旦緩存了DNS查詢，之后對(duì)于相同主機(jī)名的請(qǐng)求就無需進(jìn)行再次的DNS查找，至少短時(shí)間內(nèi)不需要。所以在使用頁面中URL、圖片、js文件、css文件等時(shí)，不要使用過多不同的主機(jī)名。

規(guī)則10：精簡javascript

如何精簡？

其實(shí)W3Cfuns已經(jīng)給大家準(zhǔn)備好精簡JS所需的所有工具“前端神器”，這點(diǎn)W3Cfuns為大家做的很不錯(cuò)，在這個(gè)規(guī)則里我們就用到“JS壓縮/混淆/美化工具”

最初始的精簡方式：就是移除不必要的字符減小js文件大小，改善加載時(shí)間。包括所有的注釋、不必要的空白字符。

高級(jí)一點(diǎn)的精簡方式就是：混淆。

它不但會(huì)移除不必要的字符，還會(huì)改寫代碼，比如函數(shù)和變量的名字會(huì)被改成很短的字符串，這樣使js代碼更簡練更難閱讀。

但是我一般很少使用混淆，一個(gè)現(xiàn)在互聯(lián)網(wǎng)時(shí)代，代碼沒有必要整的那么神秘，大可以大家一起share，天下代碼一起抄，只要抄出自己的特色就ok了。

而且一旦使用混淆，對(duì)于js代碼的維護(hù)和調(diào)試都很復(fù)雜，因?yàn)橛袝r(shí)候混淆之后的js代碼完全看不懂。其實(shí)實(shí)際開發(fā)過程中，從文件大小和代碼可復(fù)用性來說，不僅僅是js代碼需要精簡，css代碼一樣也很需要精簡。

規(guī)則11：避免重定向

重定向的英文是Redirect，用于將用戶從一個(gè)URL重新跳轉(zhuǎn)到另一個(gè)URL。

最常見的Redirect就是301和302兩種。

關(guān)于重定向的性能影響這里就不說了，自行查閱相關(guān)資料吧。

在我們實(shí)際開發(fā)中避免重定向最簡單也最容易被忽視的一個(gè)問題就是，設(shè)置URL的時(shí)候，最后的“/”，有些人有時(shí)候會(huì)忽略，其實(shí)你少了“/”，這時(shí)候的URL就被重定向了，所以在給頁面鏈接加URL的時(shí)候切記最后的“/”不可丟。

規(guī)則12：刪除重復(fù)腳本

重復(fù)的js代碼除了有不必要的HTTP請(qǐng)求之外，還會(huì)浪費(fèi)執(zhí)行js的時(shí)間。

將你使用的js代碼模塊化，可以很好地避免這個(gè)問題，至于js模塊化如何實(shí)現(xiàn)，現(xiàn)在有很多可以使用的開源框架，我用的比較多的是我們公司玉伯的Sea.js。

規(guī)則13：配置ETag

Etag（Entity Tag），實(shí)體標(biāo)簽，是Web服務(wù)器和瀏覽器用戶確認(rèn)緩存組件的有效性的一種機(jī)制。寫的很復(fù)雜，對(duì)我這種非專業(yè)的前端開發(fā)人員來說，有點(diǎn)過了，關(guān)于這個(gè)原則有興趣的自己看吧。

規(guī)則14：使Ajax可緩存

針對(duì)頁面中主動(dòng)的Ajax請(qǐng)求返回的數(shù)據(jù)要緩存到本地，當(dāng)然這個(gè)是針對(duì)短期內(nèi)不會(huì)變化的數(shù)據(jù)。如果不確定數(shù)據(jù)變化周期的話，可以增加一個(gè)修改標(biāo)識(shí)的判斷，我正常處理過程中會(huì)給一些Ajax請(qǐng)求返回的數(shù)據(jù)增加一個(gè)MD5值的判斷，每次請(qǐng)求會(huì)判斷當(dāng)前MD5是否變化，如果變化了取最新的數(shù)據(jù)，如果不變化，則不變。

四、APP常見加載方式

本文僅供個(gè)人學(xué)習(xí)，轉(zhuǎn)自IT修真院。

一、加載

用戶在客戶端發(fā)出一個(gè)指令后，直到客戶端出現(xiàn)反饋結(jié)果時(shí)，這段時(shí)間內(nèi)計(jì)算機(jī)完成的一系列執(zhí)行動(dòng)作，可能包括有客戶端發(fā)出請(qǐng)求，服務(wù)器做出響應(yīng)，客戶端拿到數(shù)據(jù)后計(jì)算，渲染等。

二、加載方式

1、啟動(dòng)頁加載

這個(gè)主要是APP啟動(dòng)時(shí)的一個(gè)頁面，由于APP啟動(dòng)需要時(shí)間，因此可以加入一個(gè)啟動(dòng)頁來自然過渡，而且很多啟動(dòng)頁是廣告，這樣也可以帶來一些收益，這個(gè)頁面一般可以點(diǎn)擊跳過。

2、界面跳轉(zhuǎn)加載

這個(gè)加載模式又可分為當(dāng)前頁加載和跳轉(zhuǎn)下個(gè)頁面加載。當(dāng)前頁加載一般是帳號(hào)登錄的時(shí)候使用的，跳轉(zhuǎn)頁面加載一般用于新聞?lì)怉PP，點(diǎn)擊新聞標(biāo)題后跳轉(zhuǎn)至內(nèi)容頁面。

3、白屏加載

這個(gè)加載方式其實(shí)很多地方都用到了，只是平常沒有刻意關(guān)注它，在使用QQ或者微信時(shí)，如果別人發(fā)了一個(gè)鏈接過來，然后去點(diǎn)擊鏈接，當(dāng)時(shí)周圍的網(wǎng)絡(luò)信號(hào)又不太好的話，就會(huì)看到這種加載模式的完整過程。一般頂部會(huì)有進(jìn)度條，出結(jié)果就是整個(gè)頁面加載出來，加載失敗的話則頁面為空。

4、分步加載

顧名思義，就是分步驟的加載網(wǎng)頁，優(yōu)先加載占網(wǎng)絡(luò)資源較小的元素。如先文字和默認(rèn)圖標(biāo)后圖片，圖片加載完成前使用占位符顯示；當(dāng)加載的頁面內(nèi)容有固定的框架時(shí)，可以先加載框架，再加載框架內(nèi)的內(nèi)容。這個(gè)方式可以減少用戶等待內(nèi)容時(shí)間，即使網(wǎng)絡(luò)不太好，也可以先把文字等數(shù)據(jù)量較小的先顯示出來，可以讓用戶提前看到一些內(nèi)容。

類似的還有懶加載與預(yù)先加載，都可以算作是分步加載。

懶加載主要是針對(duì)前端頁面比較大而設(shè)計(jì)出來的一種方式，假如一個(gè)網(wǎng)頁很大，又含有很多圖片、視頻內(nèi)容，那么想一次性加載就會(huì)等待很久，懶加載就是只有在屏幕顯示范圍內(nèi)的資源，被用戶看到的內(nèi)容才會(huì)真正去加載。

預(yù)加載就是提前加載，比如啟動(dòng)APP時(shí)，當(dāng)顯示啟動(dòng)畫面時(shí)，就可以預(yù)先把首頁內(nèi)容加載出來，這樣可以減少用戶加載內(nèi)容時(shí)的等待時(shí)間，還有一個(gè)很典型的使用場(chǎng)景就是瀏覽視頻網(wǎng)站或者購物網(wǎng)站，當(dāng)我們快要滑到頁面底部時(shí)，下面圖片已經(jīng)幾乎加載完成了，這就是預(yù)加載的好處，在使用上感覺更加流暢。

5、智能加載

這個(gè)加載模式我經(jīng)常使用到，假如是在WIFI情況下，使用QQ瀏覽器去看視頻，那么它會(huì)自動(dòng)加載視頻播放，而使用4G的流量去訪問視頻頁面的話，會(huì)有一個(gè)彈窗來確認(rèn)是否要播放，以免耗費(fèi)大量流量造成用戶扣費(fèi)。智能加載模式就是根據(jù)用戶使用場(chǎng)景來改變加載形式的。

6、緩存加載

就是用戶在沒有網(wǎng)絡(luò)的情況下，依靠緩存數(shù)據(jù)來加載內(nèi)容，可以在斷網(wǎng)的情況下顯示數(shù)據(jù)，不會(huì)因?yàn)閿嗑W(wǎng)APP就啥也不顯示了。而且由于有緩存數(shù)據(jù)，還可以提高正常模式下的加載速度，缺點(diǎn)就是會(huì)占用用戶本地存儲(chǔ)空間，設(shè)計(jì)時(shí)需要考慮好限制條件。

7、全頁面加載

將整個(gè)頁面一起加載。這一過程用戶不需要了解，不需要等待，在正常情況下體驗(yàn)是非常棒的。

8、占位色塊加載

在頁面即將出現(xiàn)的位置加載占位色塊，等到數(shù)據(jù)加載完成后將數(shù)據(jù)陸續(xù)填進(jìn)色塊（給用戶加載很快的感覺，體驗(yàn)會(huì)比全頁面加載流暢）。讓等待時(shí)間變得更加有趣，保持用戶感受的連續(xù)性。

9、進(jìn)度條加載

可以清楚的看到當(dāng)前進(jìn)度，反饋十分明確。反饋明確，清晰易懂缺點(diǎn)：頁面無內(nèi)容，美觀度較低。

10、混合加載模式

為了能讓產(chǎn)品有一個(gè)流暢的體驗(yàn)，很多app會(huì)根據(jù)產(chǎn)品的各種不同場(chǎng)景來組合使用不同加載方式。根據(jù)不同場(chǎng)景來設(shè)計(jì)，體驗(yàn)升級(jí)缺點(diǎn)：需要對(duì)各場(chǎng)景制定對(duì)應(yīng)的加載規(guī)范，保證交互一致性。

11、后臺(tái)加載

用戶在操作后，客戶端立刻反饋操作成功，然后把請(qǐng)求放到后臺(tái)與服務(wù)器交互。這一過程用戶不需要了解，不需要等待，在正常情況下體驗(yàn)是非常棒的。

12、漸進(jìn)加載

在 PC 端用瀏覽器看圖片的時(shí)候，經(jīng)常是先看到一張模糊圖，然后再漸漸的變得清晰，這種效果就叫做漸進(jìn)式加載。

三、加載遇到的問題

有些加載過程的時(shí)間可能會(huì)比較長，甚至用戶不知道此時(shí)應(yīng)用是卡死了還是在執(zhí)行命令，這樣就會(huì)導(dǎo)致用戶體驗(yàn)降低，用戶會(huì)對(duì)應(yīng)用失去耐心。

原文鏈接：https://blog.csdn.net/jnshu_it/article/details/89282461

以上就是關(guān)于前端減少頁面加載時(shí)間的方法相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。