日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網為廣大站長提供免費收錄網站服務,提交前請做好本站友鏈:【 網站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(50元/站),

點擊這里在線咨詢客服
新站提交
  • 網站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

減少請求資源大小或者次數 

1、盡量合并和壓縮css和js文件。(將css文件合并為一個。將js合并為一個)原因:主要是為了減少http請求次數以及減少請求資源的大小,打包工具:webpack、gulp、grunt.、....

2、盡量所使用的字體圖標或者SVG圖標來代替傳統png圖,因為字體圖標或者SVG是矢量圖,代碼編寫出來的,放大不會變形,而且渲染速度快。

3、采用圖片的懶加載(延遲加載),目的為了,減少頁面第一次加載過程中http的請求次數。

具體步驟:    

  • 頁面開始加載時不去發送http請求,而是放置一張占位圖。
  • 當頁面加載完時,并且圖片在可視區域再去請求加載圖片信息。

4、能用css做的效果,不要用js做,能用原生js做的,不要輕易去使用第三方插件。避免引入第三方大量的庫。而自己卻只是用里面的一個小功能。

5、使用雪碧圖或者是說圖片精靈,把所有相對較小的資源圖片,繪制在一張大圖上,只需要將大圖下載下來,然后利用圖片定位來將小圖展現在頁面中(background-position:百分比,數值)。

6、減少對cookie的使用(最主要的就是減少本地cookie存儲內容的大小),因為客戶端操作cookie的時候,這些信息總是在客戶端和服務端傳遞。如果上設置不當,每次發送一個請求將會攜帶cookie。

7、前端與后端進行數據交互時,對于多項數據盡可能基于json格式來進行傳送。相對于使用xml來說傳輸有這個優勢。目的:是數據處理方便,資源偏小。

8、前端與后端協商,合理使用keep-alive。

9、前端與服務器協商,使用相應資源的壓縮。

10、避免使用iframe,不僅不好管控樣式,而且相當于在本頁面又嵌套其他頁面,消耗性能會更大。因為還會去加載這個嵌套頁面的資源。

11、在基于ajax的get請求進行數據交互的時候,根據需求可以讓其產生緩存(注意:這個緩存不是我們常看到的304狀態碼,去瀏覽器本地取數據),這樣在下一次從相同地址獲取是數據時,取得就是上一次緩存的數據。(注意:很少使用,一般都會清空。根據需求來做)。

代碼優化相關

1、在js中盡量減少閉包的使用原因:使用閉包后,閉包所在的上下文不會被釋放。

2、減少對DOM操作,主要是減少DOM的重繪與回流(重排),關于重排(回流)的分離讀寫:如果需要設置多個樣式,把設置樣式全放在一起設置,不要一條一條的設置;使用文檔碎片或者字符串拼接做數據綁定(DOM的動態創建)。

3、在js中避免嵌套循環和"死循環"(一旦遇到死循環,瀏覽器就會直接卡掉)。

4、把css放在body上,把js放在body下面讓其先加載css(注意:這里關于優化沒有多大關系)。

5、減少css表達式的使用。

6、css選擇器解析規則所是從右往左解析的。減少元素標簽作為最后一個選擇對象。

7、盡量將一個動畫元素單獨設置為一個圖層(避免重繪或者回流的大小)。注意:圖層不要過多設置,否則不但效果沒有達到反而更差了。

8、在js封裝過程中,盡量做到低耦合高內聚。減少頁面的冗余代碼。

9、css中設置定位后,最好使用z-index改變盒子的層級,讓盒子不在相同的平面上。

10、css導入的時候盡量減少@import導入式,因為@import是同步操作,只有把對應的樣式導入后,才會繼續向下加載,而link是異步的操作。

11、使用window.requestAnimationFrame(js的幀動畫)代替傳統的定時器動畫  如果想使用每隔一段時間執行動畫,應該避免使用setInterval,盡量使用setTimeout代替setInterval定時器。因為setInterval定時器存在弊端:可能造成兩個動畫間隔時間縮短。

12、盡量減少使用遞歸。避免死遞歸。解決:建議使用尾遞歸。

13、基于script標簽下載js文件時,可以使用defer或者async來異步加載。

14、在事件綁定中,盡可能使用事件委托,減少循環給DOM元素綁定事件處理函數。

15、在js封裝過程中,盡量做到低耦合高內聚。減少頁面的冗余代碼。

16、減少Flash的使用。

存儲

1、結合后端,利用瀏覽器的緩存技術,做一些緩存(讓后端返回304,告訴瀏覽器去本地拉取數據)。(注意:也有弊端)可以讓一些不太會改變的靜態資源做緩存。比如:一些圖片,js,css。

2、利用h5的新特性(localStorage、sessionStorage)做一些簡單數據的存儲,避免向后臺請求數據或者說在離線狀態下做一些數據展示。

其他優化

1、頁面中的是數據獲取采用異步編程和延遲分批加載,使用異步加載是數據主要是為了避免瀏覽器失去響應。如果你使用同步,加載數據很大并且很慢那么頁面會在一段時間內處于阻塞狀態。目的:為了解決請求數據不耽擱渲染,提高頁面的渲染效率。解決方法:需要動態綁定的是數據區域先隱藏,等數據返回并且綁定后再讓其顯示,延遲分批加載類似圖片懶加載。減少第一次頁面加載時候的http請求次數。

2、頁面中出現音視頻標簽,我們不讓頁面加載的時候去加載這些資源(否則第一次加載會很慢)。解決方法:只需要將音視頻的preload=none即可。目的:為了等待頁面加載完成時,并且音視頻要播放的時候去加載安音視頻資源。

分享到:
標簽:性能 優化
用戶無頭像

網友整理

注冊時間:

網站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網站吧!
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲,玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學四六

運動步數有氧達人2018-06-03

記錄運動步數,積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定