不同于某個(gè)運(yùn)動(dòng)，落地頁堅(jiān)決要做成一個(gè)快槍手。

打開快不快，圖片多不多

結(jié)構(gòu)合理不合理，展現(xiàn)效果不自然

設(shè)計(jì)美觀不美觀...

請問，你也在思考這些關(guān)于落地頁的問題嗎？那你今天就算是來對了，今天只有干的，請隨身配好500ml的水~我們開車開講了

今天，小編特地請教了我們一個(gè)前端的小哥哥，并以他的帥氣而又專業(yè)的角度來給大家專業(yè)的分析一下如何讓你的落地頁（LoadingPage）三秒內(nèi)打開，甚至是一秒！

這里小編想問大家伙兒一個(gè)問題，“你的落地頁，打開速度夠快嗎？”

頁面打開速度過慢無外乎這幾個(gè)問題：

圖片問題

代碼問題

線程問題（客戶端瀏覽器最高同時(shí)加載數(shù)）

服務(wù)器問題

1、圖片問題：

現(xiàn)在很多信息流廣告的LP（落地頁），都是設(shè)計(jì)成圖片的形式然后切圖排版，但是會(huì)出現(xiàn)加載過于緩慢的問題，解決方法如下：

1. 控制單張圖片大小在200kb以內(nèi)（根據(jù)服務(wù)器帶寬可適當(dāng)大一些）；

2. 非透明背景圖片格式均修改為.jpg ；

3. .jpg圖片品質(zhì)控制在60左右（PhothShop打開-另存為web格式）；

4. 加載圖片方式選擇連續(xù)而不是優(yōu)化 （連續(xù)：以多線程方式下載）

5. 有條件的小伙伴可以使用CDN靜態(tài)資源加速，可以很只管看到解決效果。

解析：

將圖片大小控制在服務(wù)器帶寬加載速度以內(nèi)，如:1Mbps=1024Kbps=1024/8KBps=128KB/s

同時(shí)，控制加載方式為連續(xù)的好處為：圖片整體顯示，以不清晰的方式慢慢變清晰！

2、代碼問題：

代碼問題也是比較常見的問題，很多技術(shù)同學(xué)，為了達(dá)到運(yùn)營同學(xué)要的效果（不擇手段！）也是沒有辦法，

查看源代碼你可能看到：

還有這樣的：

看得懂代碼的小伙伴，你知道什么問題嗎？不懂得還不好好看？

1. 阻塞進(jìn)程-未加載完成之前，不加載之后的內(nèi)容；

document.writeln('lalallala');

alert('lalal');

2. 引用資源順序不對，例如：jQuery沒有在引用的腳本之前加載，會(huì)導(dǎo)致錯(cuò)誤；

3. 引用資源地址錯(cuò)誤/資源服務(wù)器過于緩慢；

解析：

在這里，小編很嚴(yán)肅的規(guī)勸大家，代碼規(guī)范以及減少阻塞的方法應(yīng)該都是咱們的基礎(chǔ)必修課小編有待加強(qiáng)，爭取超過前端小哥哥迎娶白富美走向人生巔峰，并且規(guī)范起來，對后期代碼維護(hù)都是很有幫助滴！

3、線程問題：

這個(gè)東西我們可以先來看一下基本概念：

當(dāng)我們在瀏覽網(wǎng)頁的時(shí)候，對瀏覽速度有一個(gè)重要的影響因素，就是瀏覽器的 并發(fā)數(shù)量 。

并發(fā)數(shù)量簡單通俗的講就是，當(dāng)瀏覽器網(wǎng)頁的時(shí)候同時(shí)工作的進(jìn)行數(shù)量。

如果同時(shí)只有2個(gè)并發(fā)連接數(shù)數(shù)量，那網(wǎng)頁打開的時(shí)候只能依賴于這2條線程，前面如果有打開慢的內(nèi)容，就會(huì)直接影響到后面的內(nèi)容打開。

但是如果同時(shí)有更多的并發(fā)連接數(shù)，這樣就會(huì)大大的提高網(wǎng)頁加載速度。 瀏覽器的并發(fā)連接數(shù)也并非越大越好 。

下表概括了基于主機(jī)上運(yùn)行的IE瀏覽器的版本的最大并發(fā)連接數(shù)、主機(jī)的連接速度和服務(wù)器的受支持的協(xié)議版本。

看到這里，你發(fā)現(xiàn)一個(gè)問題沒有，是不是發(fā)覺你平時(shí)使用谷歌還有火狐打開速度都很快？

是的，谷歌因?yàn)獒槍蛻舳碎_放的線程是最多的（最新版為6-10條），最高不超過10線程.

所以你懂的，最快的是谷歌，但是不一定是最高就最好，但是就目前的硬件水平，最高就是最好的這句話沒毛病！

瀏覽器引擎在加載資源的同時(shí)會(huì)監(jiān)測統(tǒng)一主域（同一域名）下的資源有多少，并且 最高不超過瀏覽器線程的情況下 同時(shí)加載。

那么如果當(dāng)其中一個(gè)主域的進(jìn)程（線程）被阻塞了，加載速度肯定就慢下來了，所以我在這里建議大家：

在加載資源的時(shí)候一定不要把所有的資源（img、js、css、fonts）放在同一主域下，可以根據(jù)資源類型建立不同的二級域名。

例如：

imgs.youdomain.site、js.yourdomain.site、css.yourdomain.stie

這樣不就把你的資源分開了嗎？

哪怕其中一個(gè)主域阻塞，也是不影響其他的主域同時(shí)加載，速度嗖的一下就上來了！

所以，老鄉(xiāng)，雞蛋不要放在一個(gè)籃子里嘛！

4、服務(wù)器問題：

服務(wù)器坑爹有木有！選擇運(yùn)營商就像選擇男朋友一樣， 必須得靠譜 ！

那些年，做技術(shù)的小編被坑過很多次，好多鍋都在我頭上，不得不背！

在這里，含淚給大家分享一下我的心酸史：

之前遇到服務(wù)器，售后一點(diǎn)都不像厚昌的小伙伴對我們的客戶的態(tài)度辣么友好，拍拍屁股推三阻四的，而且還老出問題，不是斷電就是不穩(wěn)定，三天兩頭的整個(gè)404~

吧啦吧啦吧啦……

反正最后，這個(gè)鍋，還只能是我背~

所以，在這里我用血的教訓(xùn)告訴大家， 買服務(wù)器一定不要舍不得花錢，特別是做廣告的，廣告費(fèi)都花了，為啥服務(wù)器不知道多花點(diǎn)錢？

買服務(wù)器，國內(nèi)的，有備案的，我推薦阿里云/騰訊云/小鳥云 ，使用起來很方便，維護(hù)起來也很方便，售后很nice，經(jīng)常有活動(dòng)，大家感興趣可以去他們官網(wǎng)看看！

小編說：到這里就講完了，你可以去喝水了~