整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
站的速度非常重要，因為它直接影響訪問者的用戶體驗，事實證明，幾乎所有的互聯(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)系。
