似乎每一個(gè)運(yùn)營(yíng)人都在擔(dān)憂(yōu)落地頁(yè)的問(wèn)題，例如：
打開(kāi)快不快，圖片多不多
結(jié)構(gòu)合理不合理，展現(xiàn)效果不自然
設(shè)計(jì)美觀不美觀…
今天，輝輝輝以一個(gè)前端的角度來(lái)給大家專(zhuān)業(yè)的分析一下如何讓你的落地頁(yè)(loadingpage)三秒內(nèi)打開(kāi)，甚至是一秒!
這里我想問(wèn)大家伙一個(gè)問(wèn)題，
“你的落地頁(yè)，打開(kāi)速度夠快嗎?”
頁(yè)面打開(kāi)速度過(guò)慢無(wú)外乎這幾個(gè)問(wèn)題：
圖片問(wèn)題
代碼問(wèn)題
線(xiàn)程問(wèn)題(客戶(hù)端瀏覽器最高同時(shí)加載數(shù))
服務(wù)器問(wèn)題
一、圖片問(wèn)題
現(xiàn)在很多信息流廣告的lp(落地頁(yè))，都是設(shè)計(jì)成圖片的形式然后切圖排版，但是會(huì)出現(xiàn)加載過(guò)于緩慢的問(wèn)題，解決方法如下：
1. 控制單張圖片大小在200kb以?xún)?nèi)(根據(jù)服務(wù)器帶寬可適當(dāng)大一些);
2. 非透明背景圖片格式均修改為.jpg ;
3. .jpg圖片品質(zhì)控制在60左右(phothshop打開(kāi)-另存為web格式);
4. 加載圖片方式選擇連續(xù)而不是優(yōu)化 (連續(xù)：以多線(xiàn)程方式下載)
5. 有條件的小伙伴可以使用cdn靜態(tài)資源加速，可以很只管看到解決效果。
解析：
將圖片大小控制在服務(wù)器帶寬加載速度以?xún)?nèi)，如:
1mbps=1024kbps=1024/8kbps=128kb/s
同時(shí)，控制加載方式為連續(xù)的好處為：圖片整體顯示，以不清晰的方式慢慢變清晰!
二、代碼問(wèn)題
代碼問(wèn)題也是比較常見(jiàn)的問(wèn)題，很多技術(shù)同學(xué)，為了達(dá)到運(yùn)營(yíng)同學(xué)要的效果(不擇手段!)也是沒(méi)有辦法，
查看源代碼你可能看到：
還有這樣的：
看得懂代碼的小伙伴，你知道什么問(wèn)題嗎?
1. 阻塞進(jìn)程-未加載完成之前，不加載之后的內(nèi)容;
document.writeln(\\\’lalallala\\\’);
alert(\\\’lalal\\\’);
2. 引用資源順序不對(duì)，例如：jquery沒(méi)有在引用的腳本之前加載，會(huì)導(dǎo)致錯(cuò)誤;
3. 引用資源地址錯(cuò)誤/資源服務(wù)器過(guò)于緩慢;
解析：
在這里，我很?chē)?yán)肅的規(guī)勸大家，代碼規(guī)范以及減少阻塞的方法應(yīng)該都是咱們的基礎(chǔ)必修課，并且規(guī)范起來(lái)，對(duì)后期代碼維護(hù)都是很有幫助的!
三、線(xiàn)程問(wèn)題
這個(gè)東西是我肯可以先來(lái)看一下基本概念：
當(dāng)我們?cè)跒g覽網(wǎng)頁(yè)的時(shí)候，對(duì)瀏覽速度有一個(gè)重要的影響因素，就是瀏覽器的 并發(fā)數(shù)量 。
并發(fā)數(shù)量簡(jiǎn)單通俗的講就是，當(dāng)瀏覽器網(wǎng)頁(yè)的時(shí)候同時(shí)工作的進(jìn)行數(shù)量。
如果同時(shí)只有2個(gè)并發(fā)連接數(shù)數(shù)量，那網(wǎng)頁(yè)打開(kāi)的時(shí)候只能依賴(lài)于這2條線(xiàn)程，前面如果有打開(kāi)慢的內(nèi)容，就會(huì)直接影響到后面的內(nèi)容打開(kāi)。
但是如果同時(shí)有更多的并發(fā)連接數(shù)，這樣就會(huì)大大的提高網(wǎng)頁(yè)加載速度。 瀏覽器的并發(fā)連接數(shù)也并非越大越好 。
下表概括了基于主機(jī)上運(yùn)行的ie瀏覽器的版本的最大并發(fā)連接數(shù)、主機(jī)的連接速度和服務(wù)器的受支持的協(xié)議版本。
看到這里，你發(fā)現(xiàn)一個(gè)問(wèn)題沒(méi)有，是不是發(fā)覺(jué)你平時(shí)使用 谷歌 還有 火狐 打開(kāi)速度都很快?
是的，谷歌因?yàn)獒槍?duì)客戶(hù)端開(kāi)放的線(xiàn)程是最多的(最新版為6-10條)，最高不超過(guò)10線(xiàn)程.
所以你懂的，最快的是谷歌，但是不一定是最高就最好，但是就目前的硬件水平，最高就是最好的這句話(huà)沒(méi)毛病!
瀏覽器引擎在加載資源的同時(shí)會(huì)監(jiān)測(cè)統(tǒng)一主域(同一域名)下的資源有多少，并且 最高不超過(guò)瀏覽器線(xiàn)程的情況下 同時(shí)加載。
那么如果當(dāng)其中一個(gè)主域的進(jìn)程(線(xiàn)程)被阻塞了，加載速度肯定就慢下來(lái)了，所以我在這里建議大家：
在加載資源的時(shí)候一定不要把所有的資源(img、js、css、fonts)放在同一主域下，可以根據(jù)資源類(lèi)型建立不同的二級(jí)域名。
例如：
imgs.youdomain.site、js.yourdomain.site、css.yourdomain.stie
這樣不就把你的資源分開(kāi)了嗎?
哪怕其中一個(gè)主域阻塞，也是不影響其他的主域同時(shí)加載，速度嗖的一下就上來(lái)了!
所以，老鄉(xiāng)，雞蛋不要放在一個(gè)籃子里嘛!
四、服務(wù)器問(wèn)題
服務(wù)器坑爹有木有!選擇運(yùn)營(yíng)商就像選擇男朋友一樣， 必須得靠譜 !
那些年，做技術(shù)的小編被坑過(guò)很多次，好多鍋都在我頭上，不得不背!
在這里，含淚給大家分享一下我的心酸史：
某安服務(wù)器(免得說(shuō)我打廣告)!
天那!就是他，一年時(shí)間出過(guò)三次問(wèn)題，平均三個(gè)月多出一次問(wèn)題!
服務(wù)器斷電?我遇到兩次!
還有一次是服務(wù)器宕機(jī)了，整個(gè)機(jī)房全部斷網(wǎng)!
要了我的親命!老子為了這個(gè)事兒背了三次鍋，客戶(hù)投放廣告至少有兩天打開(kāi)lp是404狀態(tài)!
后來(lái)我找他們說(shuō)事兒，他們說(shuō)這個(gè)他們不管的，最多給你服務(wù)器延期三天…
我要你個(gè)錘子!
三天有什么用?
能挽回我的損失嗎?
所以，在這里我用血的教訓(xùn)告訴大家， 買(mǎi)服務(wù)器一定不要舍不得花錢(qián)，特別是做廣告的，廣告費(fèi)都花了，為啥服務(wù)器不知道多花點(diǎn)錢(qián) ?