站的速度非常重要,因為它直接影響訪問者的用戶體驗,事實證明,幾乎所有的互聯(lián)用戶都希望在不到兩秒的時間內(nèi)加載網(wǎng)頁,一旦超過這個時間,很多用戶都會選擇直接關(guān)閉網(wǎng)頁。而加載網(wǎng)站的速度與多個元素有關(guān),如:服務(wù)器,網(wǎng)絡(luò)帶寬,頁面代碼等,那么如何才能提升網(wǎng)站的加載速度吶?
一、壓縮或簡化Javascript和CSS代碼
不管網(wǎng)站的類型是怎樣的,當(dāng)用戶第一次點擊網(wǎng)站時,網(wǎng)站的Javascript和CSS代碼都會被加載,假設(shè)代碼是多余的,它將不可避免地降低打開網(wǎng)站的速度。若出現(xiàn)這樣的情況,代碼必須壓縮或精簡,關(guān)于壓縮方面,目前互聯(lián)網(wǎng)中有很多免費的壓縮工具,而關(guān)于精簡,沒有必要控制風(fēng)格,只要保證無冗長無用代碼即可。
二、避免使用@import
由于@importCSS語法允許你加載其它的CSS文件,有的時候使用它非常有幫助,但是需要知道的是它并不是和主文件一起下載的,因此使用它的話很可能會增加頁面的加載時間。因此,天津網(wǎng)站建設(shè)建議大家,使用link這個標(biāo)簽,這將更加的高效,有助于提升頁面的加載速度。
三、減少HTTP請求
通常用戶在打開一個網(wǎng)頁時,后臺程序響應(yīng)用戶所需的時間并不多,用戶等待的時間主要花費在下載網(wǎng)頁元素商,即HTML、CSS、JavaScript、Flash、圖片等。據(jù)統(tǒng)計顯示,每增加一個元素,網(wǎng)頁載入的時間就增加25-40毫秒,所以,想要提高網(wǎng)頁打開速度,就要減少HTTP請求數(shù),而方法有3種:
1)、減少不必要的HTTP請求:如:用CSS圓角代替圓角圖片,減少圖片的使用。
2)、合并文件:對于文本文件,可直接合并內(nèi)容,如:將多個JS文件合并成一個,將多個CSS文件合并成一個。
3)、優(yōu)化緩存:對于沒有變化的網(wǎng)頁元素,用戶再次訪問的時沒有必要重新下載,直接從瀏覽器緩存里讀取即可。
四、簡潔的代碼
讓你的代碼更加的簡潔,減少哪些復(fù)雜無用的代碼,這點非常的重要,這意味著打包壓縮你的HTML、JavaScipt和CSS文件到更小的文件中來運行。如:若您的移動網(wǎng)站有五個JavaScript文件,瀏覽器將發(fā)出五個單獨的HTTP請求來獲取它們,為減少堵塞和等待時間,縮小和連接這5個文件到一起。
五、壓縮圖像
數(shù)據(jù)顯示,圖片是導(dǎo)致網(wǎng)站速度過慢的最大因素,因此一定要控制圖片的大小,若網(wǎng)站上存在大量的jpg格式的圖片,需要盡可能壓縮圖片,以減少圖片本身的大小,但一定要在不影響視覺效果的情況下。關(guān)于圖片壓縮其實與Javascript文件類似,互聯(lián)網(wǎng)中也有大量的免費的圖片壓縮工具,并且還存在大量的圖像編輯軟件。
六、跳轉(zhuǎn)代碼加載順序
網(wǎng)站被點擊后,頁面代碼是從上到下加載的,因為這個原因,我們就可以對<head>部分的腳本代碼做相應(yīng)的調(diào)整。較為簡單的我們通過查看<head>與</head>之間的代碼,主要是Javascript腳本代碼,將一些不重要的,非必須的調(diào)整到頁面底部,只要頁面能正常顯示,那么其余的統(tǒng)計代碼等都可以后一步加載。
七、嘗試CDN加速
內(nèi)容交付網(wǎng)絡(luò)的價值在于它可以獲取一個網(wǎng)站的靜態(tài)文件,如:CSS、圖像和JavaScript,并通過更接近用戶物理位置的Web服務(wù)器傳遞它們,更短的接近等于更快的加載時間,如:AWSCloudFront或者CloudFlare都是很好的CDN加速。CDN另外的好處是,即使停止加載帶寬,依然可以降低在下載高峰時期的中斷風(fēng)險,所以嗎,綜合來說,CDN都能帶來雙贏的局面。
八、在服務(wù)器上啟用gzip壓縮
Gzip壓縮屬于一種非常高效的數(shù)據(jù)壓縮格式,若打開gzip壓縮,壓縮率一般可達(dá)到75%左右,效果非常的明顯。大部分服務(wù)器,如:虛擬主機,VPS等已默認(rèn)啟用此功能,如果未啟用,您將無法設(shè)置相應(yīng)的設(shè)置,所以天津網(wǎng)站建設(shè)建議您直接聯(lián)系空間提供商,讓他們幫您解決問題。
其實,關(guān)于如何增加網(wǎng)站的加載速度,在互聯(lián)網(wǎng)中有很多的方式,相信看過上述文率科技的分享,您自己的心理應(yīng)該有了答案,在實際的網(wǎng)頁中可以是參考一下以上的幾個方法來幫你提升加載速度。
原文地址:http://www.wenshuai.cn/home/article/detail/id/1276.html
文由 ChatMoney團(tuán)隊出品
在我們開發(fā)網(wǎng)站應(yīng)用時,我們可能會遇到腳本加載失敗的情況,導(dǎo)致腳本加載失敗的原因有很多,比如用戶的網(wǎng)絡(luò)問題、終端設(shè)備問題、用戶瀏覽器版本等諸多因素。
在 JavaScript 中,我們可以創(chuàng)建一個監(jiān)聽來監(jiān)聽腳本加載失敗的情況,然后針對加載失敗的腳本進(jìn)行重新加載。
重新加載的方案,一般是通過更換域名來解決。我們給每個腳本添加一個映射關(guān)系表,用來在加載失敗時匹配新的域名進(jìn)行重試。
具體的解決方案,下面我一步一步講解,另外希望大家可以仔細(xì)閱讀注釋中的內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>腳本加載失敗如何重試</title>
<script>
window.addEventListener(
"error", // 監(jiān)聽全局錯誤
function (e) {
console.log(e);
},
true // 由于腳本加載失敗不會冒泡,所以我們要在捕獲階段進(jìn)行監(jiān)聽
);
</script>
</head>
<body>
<script src="https://www.zowlsat.com/api/1.js"></script>
<script src="https://www.qqqqqqq.com/api/2.js"></script>
<script src="https://www.zowlsat.com/api/3.js"></script>
</body>
</html>
此時我們可以在瀏覽器控制臺看到以下效果
但是這個監(jiān)聽方法會監(jiān)聽到很多其他的錯誤,我們只需要監(jiān)聽腳本加載失敗的錯誤,所以我們要通過這個監(jiān)聽事件的參數(shù) e 來判斷了
根據(jù)上圖我們可以發(fā)現(xiàn),普通錯誤的類型是 ErrorEvent,而腳本加載失敗的類型是 Event,并且他的 target 會指向 script 標(biāo)簽,所以我們根據(jù)這個區(qū)別過濾掉其他的錯誤,這樣剩下的情況才是我們需要處理的。
window.addEventListener(
"error",
function (e) {
if (e.target.tagName !=="SCRIPT" || e instanceof ErrorEvent) return;
console.log(e);
},
true
);
接下來就是如何來實現(xiàn)重新加載,我們先給需要重新加載的域名建立一個映射關(guān)系,用于替換映射關(guān)系表中的域名。然后就是挨個匹配,當(dāng)還是加載失敗時繼續(xù)匹配下一個,直到成功為止。
const domainList=["www.aaaaa.com", "www.bbbbb.com", "www.zowlsat.com"];
const retry={};
window.addEventListener(
"error",
function (e) {
if (e.target.tagName !=="SCRIPT" || e instanceof ErrorEvent) return;
// 創(chuàng)建一個URL對象
const url=new URL(e.target.src);
// 獲取文件路徑
const key=url.pathname;
// 假如映射表中沒有這個文件路徑,那么就初始化一個映射鍵
if (!(key in retry)) {
retry[key]=0;
}
// 假如匹配完整個映射表都沒重新加載成功,則放棄
const index=retry[key];
if (index >=domainList.length) {
return;
}
// 獲取新的完整路徑
const domain=domainList[index];
// 替換域名
url.host=domain;
// 創(chuàng)建新的script標(biāo)簽
const script=document.createElement("script");
script.src=url.toString();
// 將新的script標(biāo)簽追加到加載失敗的script標(biāo)簽之前
document.body.insertBefore(script, e.target);
retry[key]++;
},
true // 由于腳本加載失敗不會冒泡,所以我們要在捕獲階段進(jìn)行監(jiān)聽
);
到此為止,我們功能已經(jīng)基本實現(xiàn),效果如下圖
但是有一個很關(guān)鍵的問題,就是假如我 2.js 這個文件中的內(nèi)容,在 3.js 中要使用,那這樣的話,2.js 就必須加載到 3.js 之前,否則就會報錯。此時,我們就需要在 2.js 加載失敗時,阻塞瀏覽器的解析,知道重新加載完成或者放棄重新加載時,再繼續(xù)渲染之后的內(nèi)容。
那這樣的話我們該怎么做呢?
其實很簡單,在我們?nèi)腴T js 時就學(xué)到過一個知識點,就是使用document.write
document.write這個方法在解析期間使用的話,會阻塞瀏覽器的解析,而我們現(xiàn)在就是需要阻塞瀏覽器解析,那此時我們只需要將創(chuàng)建 script 標(biāo)簽的方法更換為document.write方法即可。
修改之后的代碼如下:
const domainList=["www.aaaaa.com", "www.bbbbb.com", "www.zowlsat.com"];
const retry={};
window.addEventListener(
"error",
function (e) {
if (e.target.tagName !=="SCRIPT" || e instanceof ErrorEvent) return;
const url=new URL(e.target.src);
const key=url.pathname;
if (!(key in retry)) {
retry[key]=0;
}
const index=retry[key];
if (index >=domainList.length) {
return;
}
const domain=domainList[index];
url.host=domain;
// 此處加上轉(zhuǎn)譯是因為防止編譯器識別script標(biāo)簽為結(jié)束標(biāo)簽報錯
document.write(`\<script src="${url.toString()}">\<\/script>`);
// const script=document.createElement("script");
// script.src=url.toString();
// document.body.insertBefore(script, e.target);
retry[key]++;
},
true
);
現(xiàn)在我們再打開控制臺查看,現(xiàn)在js文件按它原來的順序執(zhí)行了,這樣既不會改變原有的代碼邏輯,又可以在可控范圍內(nèi)進(jìn)行重新加載。
效果如下圖:
以上是簡單實現(xiàn)了一個js文件重新加載錯誤的方案,其實這個方案也可以運用到其他很多類型的文件,不限于js文件。
然后我們還需要更加細(xì)化這個方法的話,我們可能還需要考慮到這個script標(biāo)簽是否帶有async、defer等屬性,還有諸多需要考慮的點,但是沿著這個方向解決的話,大體是沒有問題的。
本文由ChatMoney團(tuán)隊出品,ChatMoney專注于AI應(yīng)用落地與變現(xiàn),我們提供全套、持續(xù)更新的AI源碼系統(tǒng)與可執(zhí)行的變現(xiàn)方案,致力于幫助更多人利用AI來變現(xiàn),歡迎進(jìn)入ChatMoney獲取更多AI變現(xiàn)方案!
大家推薦一個網(wǎng)站(css-loaders.com),這個網(wǎng)站真的是特別好用,將來同學(xué)在開發(fā)項目的時候基本上都需要用到各種各樣的加載狀態(tài),各種各樣的加載動畫。這個網(wǎng)站就提供了各種各樣的加載動畫,而且用起來超級簡單,就不可能不會用,特別簡單。
大家看到了嗎?這么一堆的加載中動畫就很方便,而且我告訴你怎么用。舉個例子,比如這個,大家看我喜歡想要哪個動畫,只需要把鼠標(biāo)放上去,有一個叫copy the CSS,把它的CSS樣式復(fù)制下來。
然后去干什么?找到代碼,這是一個空的文件,直接Ctrlv粘貼,它就能自動的把剛才所看中動畫的樣式給復(fù)制進(jìn)來了。對于頁面來說就只需要加一個div,這個div在這就加一個class,名字為loader的DIV,這樣一個加載中動畫就有了。
然后就直接打開看一下,大家會看到了嗎?這個動畫就有了,特別方便。想換成別的樣式的就隨便切換就行了。只要有DIV,將來想用什么動畫就直接copy它的CSS樣式,比如這個,再復(fù)制一下,點擊一下就行了。把之前的樣式刪掉,再粘進(jìn)來,剛才復(fù)制過來的,再粘貼,動畫也就出來了。
是不是特別的好用?而且這里面的動畫效果特別多,能夠讓網(wǎng)頁變得非常炫酷。這些足夠用了,真的是多的不能再多了,給我看的都眼花繚亂了。這樣一個鬧鐘的效果,什么樣的都有。而且做的很簡單,只需要替換掉CSS,有這樣一個div,效果就有了。
看到了嗎?各位,就這個網(wǎng)站的,必須收藏,真的好用。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。