2020-08-06 分類: 網站建設
在進行網站前端開發的時候,網頁加載速度往往是讓我們頭疼的問題,如何提高頁面加載速度呢?成都網站開發技術人員告訴你答案:
頁面中每發送一次HTTP請求,都需要完成請求+響應這個完整的HTTP事務,會消耗一些時間,也可能會導致HTTP鏈接通道的堵塞,為了提高頁面加載速度和運行的性能,我們應該減少HTTP的請求次數和減少請求內容的大小(請求的內容越大,消耗的時間越長)
1、采用CSS雪碧圖(CSS Sprit / CSS 圖片精靈)技術,把一些小圖合并在一張大圖上,使用的時候通過背景圖片定位,定位到具體的某一張小圖上
.pubBg{
background:url('../img/sprit.png') no-repeat;
background-size:x y; /*和原圖的大小保持一致*/
}
.box{
background-position:x y; /*通過背景定位,定位到具體的位置,展示不同的圖片即可*/
}
...
2、真實項目中,我們最好把CSS或者JS文件進行合并壓縮;尤其是在移動端開發的時候,如果CSS或者JS內容不是很多,我們可以采取內嵌式,以此減少HTTP請求的次數,加快頁面加載速度;
1)CSS合并成一個,JS也最好合并成一個
2)首先同過一些工具(例如:webpack)把合并后的CSS或者JS壓縮成 xxx.min.js,減少文件大小
3)服務器端開啟資源文件的GZIP壓縮
…
通過一些自動化工具完成CSS以及JS的合并壓縮,或者再完成LESS轉CSS,ES6轉ES5等操作,我們把這種自動化構建模式,稱之為前端“工程化”開發
3、采用圖片懶加載技術,在頁面開始加載的時候,不請求真實的圖片地址,而是用默認圖占位,當頁面加載完成后,在根據相關的條件依次加載真實圖片(減少頁面首次加載HTTP請求的次數)
真實項目中,我們開始圖片都不加載,頁面首次加載完成,先把第一屏幕中可以看見的圖片進行加載,隨著頁面滾動,在把下面區域中能夠呈現出來的圖片進行加載
根據圖片懶加載技術,我們還可以擴充出,數據的懶加載
1)開始加載頁面的時候,我們只把首屏或者前兩屏的數據從服務器端進行請求(有些網站首屏數據是后臺渲染好,整體返回給客戶端呈現的)
2)當頁面下拉,滾動到哪個區域,在把這個區域需要的數據進行請求(請求回來做數據綁定以及圖片延遲加載等)
3)分頁展示技術采用的也是數據的懶加載思想實現的:如果我們請求獲取的數據是很多的數據,我們最好分批請求,開始只請求第一頁的數據,當用戶點擊第二頁(微博是下拉到一定距離后,再請求第二頁數據…)的時候在請求第二頁數據…
4、對于不經常更新的數據,最好采用瀏覽器的304緩存做處理(主要由服務器端處理)
例如:
第一次請求CSS和JS下來,瀏覽器會把請求的內容緩存起來,如果做了304處理,用戶再次請求CSS和JS,直接從緩存中讀取,不需要再去服務器獲取了(減少了HTTP請求次數)
當用戶強制刷新頁面(CTRL+F5)或者當前緩存的CSS或者JS發生了變動,都會從新從服務器端拉取
…
對于客戶端來講,我們還可以基于localStorage來做一些本地存儲,例如:第一次請求的數據或者不經常更新的CSS和JS,我們都可以把內容存儲在本地,下一次頁面加載,我們從本地中獲取即可,我們設定一定的期限或者一些標識,可以控制在某個階段重新從服務器獲取
5、使用字體圖標代替一些頁面中的位圖(圖片),這樣不僅做適配的時候方便,而且更加輕量級,而且減少了HTTP請求次數(類似于雪碧圖)
6、如果當前頁面中出現了AUDIO或者VIDEO標簽,我們最好設置它們的preload=none:頁面加載的時候,音視頻資源不進行加載,播放的時候再開始加載(減少頁面首次加載HTTP請求的次數)
preload=auto:頁面首次加載的時候就把音視頻資源進行加載了
preload=metadata:頁面首次加載的時候只把音視頻資源的頭部信息進行加載
…
7、在客戶端和服務器端進行數據通信的時候,我們盡量采用JSON格式進行數據傳輸
[優勢]
1)JSON格式的數據,能夠清晰明了的展示出數據結構,而且也方便我們獲取和操作
2)相對于很早以前的XML格式傳輸,JSON格式的數據更加輕量級
3)客戶端和服務器端都支持JSON格式數據的處理,處理起來非常的方便
真實項目中,并不是所有的數據都要基于JSON,我們盡可能這樣做,但是對于某些特殊需求(例如:文件流的傳輸或者文檔傳輸),使用JSON就不合適了
8、采用CDN加速
CDN:分布式(地域分布式)
關于編寫代碼時候的一些優化技巧
除了減少HTTP請求次數和大小可以優化性能,我們在編寫代碼的時候,也可以進行一些優化,讓頁面的性能有所提升(有些不好的代碼編寫習慣,會導致頁面性能消耗太大,例如:內存泄漏)
1、在編寫JS代碼的時候,盡量減少對DOM的操作(VUE和REACT框架在這方面處理的非常不錯)
在JS中操作DOM是一個非常消耗性能的事情,但是我們又不可避免的操作DOM,我們只能盡量減少對于它的操作
[操作DOM弊端]
1)DOM存在映射機制(JS中的DOM元素對象和頁面中的DOM結構是存在映射機制的,一改則都改),這種映射機制,是瀏覽器按照W3C標準完成對JS語言的構建和DOM的構建(其實就是構建了一個監聽機制),操作DOM是同時要修改兩個地方,相對于一些其它的JS編程來說是消耗性能的
2)頁面中的DOM結構改變或者樣式改變,會觸發瀏覽器的回流(瀏覽器會把DOM結構重新進行計算,這個操作很耗性能)和重繪(把一個元素的樣式重新渲染)
…
2、編寫代碼的時候,更多的使用異步編程
同步編程會導致:上面東西完不成,下面任務也做不了,我們開發的時候,可以把某一個區域模塊都設置為異步編程,這樣只要模塊之間沒有必然的先后順序,都可以獨立進行加載,不會受到上面模塊的堵塞影響(用的不多)
尤其是AJAX數據請求,我們一般都要使用異步編程,最好是基于promise設計模式進行管理(項目中經常使用 fetch、vue axios 等插件來進行AJAX請求處理,因為這些插件中就是基于promise設計模式對ajax進行的封裝處理)
3、在真實項目中,我們盡可能避免一次性循環過多數據(因為循環操作是同步編程),尤其是要避免while導致的死循環操作
4、CSS選擇器優化
1)盡量減少標簽選擇器的使用
2)盡可能少使用ID選擇器,多使用樣式類選擇器(通用性強)
3)減少選擇器前面的前綴,例如:.headerBox .nav .left a{ } (選擇器是從右向左查找的)
…
5、避免使用CSS表達式
/*CSS表達式*/
.box{
background-color:expression((new Date()).getHours()%2?'red':'blue')
}
6、減少頁面中的冗余代碼,盡可能提高方法的重復使用率:“低耦合高內聚”
7、最好CSS放在HEAD中,JS放在BODY尾部,讓頁面加載的時候,先加載CSS,在加載JS(先呈現頁面,在給用戶提供操作)
8、JS中避免使用eval
1)性能消耗大
2)代碼壓縮后,容易出現代碼執行錯亂問題
9、JS中盡量減少閉包的使用
1)閉包會形成一個不銷毀的棧內存,過多的棧內存累積會影響頁面的性能
2)還會容易導致內存的泄漏
閉包也有自己的優勢:保存和保護,我們只能盡量減少,但是無可避免
10、在做DOM事件綁定的時候,盡量避免一個個的事件綁定,而是采用性能更高的事件委托來實現
事件委托(事件代理)
把事件綁定給外層容器,當里面的后代元素相關行為被觸發,外層容器綁定的方法也會被觸發執行(冒泡傳播機制導致),通過事件源是誰,我們做不同的操作即可
11、盡量使用CSS3動畫代替JS動畫,因為CSS3的動畫或者變形都開啟了硬件加速,性能比JS動畫好
12、編寫JS代碼的時候盡可能使用設計模式來構建體系,方便后期的維護,也提高了擴充性等
13、CSS中減少對濾鏡的使用,頁面中也減少對于FLASH的使用
文章題目:前端開發中提高頁面加載速度的小技巧講解
本文網址:http://m.newbst.com/news0/84800.html
成都網站建設公司_創新互聯,為您提供電子商務、軟件開發、定制開發、品牌網站設計、企業網站制作、用戶體驗
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容