落地页打开速度要快姿势要帅？这么做就对了！
![[已注销]](https://img1.doubanio.com/icon/user_normal.jpg){kind=icon}
不同于某个运动，落地页坚决要做成一个快枪手。（滴 老年卡）
打开快不快，图片多不多
结构合理不合理，展现效果不自然
设计美观不美观...
请问，你也在思考这些关于落地页的问题吗？那你今天就算是来对了，今天只有干的，请随身配好500ml的水~我们开车开讲了
今天，小编特地请教了我们一个前端的小哥哥，并以他的帅气而又专业的角度来给大家专业的分析一下如何让你的落地页（LoadingPage）三秒内打开，甚至是一秒！
这里小编想问大家伙儿一个问题，
“你的落地页，打开速度够快吗？”
页面打开速度过慢无外乎这几个问题：
图片问题
代码问题
线程问题（客户端浏览器最高同时加载数）
服务器问题
1
图片问题
现在很多信息流广告的LP（落地页），都是设计成图片的形式然后切图排版，但是会出现加载过于缓慢的问题，解决方法如下：
1. 控制单张图片大小在200kb以内（根据服务器带宽可适当大一些）；
2. 非透明背景图片格式均修改为.jpg ；
3. .jpg图片品质控制在60左右（PhothShop打开-另存为web格式）；
4. 加载图片方式选择连续而不是优化 （连续：以多线程方式下载）
5. 有条件的小伙伴可以使用CDN静态资源加速，可以很只管看到解决效果。
解析：
将图片大小控制在服务器带宽加载速度以内，如:1Mbps=1024Kbps=1024/8KBps=128KB/s
同时，控制加载方式为连续的好处为：图片整体显示，以不清晰的方式慢慢变清晰！
2
代码问题
代码问题也是比较常见的问题，很多技术同学，为了达到运营同学要的效果（不择手段！）也是没有办法，
查看源代码你可能看到：
还有这样的：
看得懂代码的小伙伴，你知道什么问题吗？不懂得还不好好看？
1. 阻塞进程-未加载完成之前，不加载之后的内容；
document.writeln('lalallala');
alert('lalal');
2. 引用资源顺序不对，例如：jQuery没有在引用的脚本之前加载，会导致错误；
3. 引用资源地址错误/资源服务器过于缓慢；
解析：
在这里，小编很严肃的规劝大家，代码规范以及减少阻塞的方法应该都是咱们的基础必修课章鱼哥有待加强，争取超过前端小哥哥迎娶白富美走向人生巅峰，并且规范起来，对后期代码维护都是很有帮助滴！
3
线程问题
这个东西我们可以先来看一下基本概念：
当我们在浏览网页的时候，对浏览速度有一个重要的影响因素，就是浏览器的 并发数量 。
并发数量简单通俗的讲就是，当浏览器网页的时候同时工作的进行数量。
如果同时只有2个并发连接数数量，那网页打开的时候只能依赖于这2条线程，前面如果有打开慢的内容，就会直接影响到后面的内容打开。
但是如果同时有更多的并发连接数，这样就会大大的提高网页加载速度。 浏览器的并发连接数也并非越大越好 。
下表概括了基于主机上运行的IE浏览器的版本的最大并发连接数、主机的连接速度和服务器的受支持的协议版本。
看到这里，你发现一个问题没有，是不是发觉你平时使用谷歌还有火狐打开速度都很快？
是的，谷歌因为针对客户端开放的线程是最多的（最新版为6-10条），最高不超过10线程.
所以你懂的，最快的是谷歌，但是不一定是最高就最好，但是就目前的硬件水平，最高就是最好的这句话没毛病！
浏览器引擎在加载资源的同时会监测统一主域（同一域名）下的资源有多少，并且 最高不超过浏览器线程的情况下 同时加载。
那么如果当其中一个主域的进程（线程）被阻塞了，加载速度肯定就慢下来了，所以我在这里建议大家：
在加载资源的时候一定不要把所有的资源（img、js、css、fonts）放在同一主域下，可以根据资源类型建立不同的二级域名。
例如：
imgs.youdomain.site、js.yourdomain.site、css.yourdomain.stie
这样不就把你的资源分开了吗？
哪怕其中一个主域阻塞，也是不影响其他的主域同时加载，速度嗖的一下就上来了！
所以，老乡，鸡蛋不要放在一个篮子里嘛！
4
服务器问题
服务器坑爹有木有！选择运营商就像选择男朋友一样， 必须得靠谱 ！
那些年，做技术的小编被坑过很多次，好多锅都在我头上，不得不背！
在这里，含泪给大家分享一下我的心酸史：
之前遇到服务器，售后一点都不像厚昌的小伙伴对我们的客户的态度辣么友好，拍拍屁股推三阻四的，而且还老出问题，不是断电就是不稳定，三天两头的整个404~
吧啦吧啦吧啦……
反正最后，这个锅，还只能是我背~
所以，在这里我用血的教训告诉大家， 买服务器一定不要舍不得花钱，特别是做广告的，广告费都花了，为啥服务器不知道多花点钱？
买服务器，国内的，有备案的，我推荐阿里云/腾讯云/小鸟云 ，使用起来很方便，维护起来也很方便，售后很nice，经常有活动，大家感兴趣可以去他们官网看看！
打开快不快，图片多不多
结构合理不合理，展现效果不自然
设计美观不美观...
请问，你也在思考这些关于落地页的问题吗？那你今天就算是来对了，今天只有干的，请随身配好500ml的水~我们开车开讲了
今天，小编特地请教了我们一个前端的小哥哥，并以他的帅气而又专业的角度来给大家专业的分析一下如何让你的落地页（LoadingPage）三秒内打开，甚至是一秒！
这里小编想问大家伙儿一个问题，
“你的落地页，打开速度够快吗？”
页面打开速度过慢无外乎这几个问题：
图片问题
代码问题
线程问题（客户端浏览器最高同时加载数）
服务器问题
1
图片问题
现在很多信息流广告的LP（落地页），都是设计成图片的形式然后切图排版，但是会出现加载过于缓慢的问题，解决方法如下：
1. 控制单张图片大小在200kb以内（根据服务器带宽可适当大一些）；
2. 非透明背景图片格式均修改为.jpg ；
3. .jpg图片品质控制在60左右（PhothShop打开-另存为web格式）；
4. 加载图片方式选择连续而不是优化 （连续：以多线程方式下载）
5. 有条件的小伙伴可以使用CDN静态资源加速，可以很只管看到解决效果。
解析：
将图片大小控制在服务器带宽加载速度以内，如:1Mbps=1024Kbps=1024/8KBps=128KB/s
同时，控制加载方式为连续的好处为：图片整体显示，以不清晰的方式慢慢变清晰！
2
代码问题
代码问题也是比较常见的问题，很多技术同学，为了达到运营同学要的效果（不择手段！）也是没有办法，
查看源代码你可能看到：
还有这样的：
看得懂代码的小伙伴，你知道什么问题吗？不懂得还不好好看？
1. 阻塞进程-未加载完成之前，不加载之后的内容；
document.writeln('lalallala');
alert('lalal');
2. 引用资源顺序不对，例如：jQuery没有在引用的脚本之前加载，会导致错误；
3. 引用资源地址错误/资源服务器过于缓慢；
解析：
在这里，小编很严肃的规劝大家，代码规范以及减少阻塞的方法应该都是咱们的基础必修课章鱼哥有待加强，争取超过前端小哥哥迎娶白富美走向人生巅峰，并且规范起来，对后期代码维护都是很有帮助滴！
3
线程问题
这个东西我们可以先来看一下基本概念：
当我们在浏览网页的时候，对浏览速度有一个重要的影响因素，就是浏览器的 并发数量 。
并发数量简单通俗的讲就是，当浏览器网页的时候同时工作的进行数量。
如果同时只有2个并发连接数数量，那网页打开的时候只能依赖于这2条线程，前面如果有打开慢的内容，就会直接影响到后面的内容打开。
但是如果同时有更多的并发连接数，这样就会大大的提高网页加载速度。 浏览器的并发连接数也并非越大越好 。
下表概括了基于主机上运行的IE浏览器的版本的最大并发连接数、主机的连接速度和服务器的受支持的协议版本。
看到这里，你发现一个问题没有，是不是发觉你平时使用谷歌还有火狐打开速度都很快？
是的，谷歌因为针对客户端开放的线程是最多的（最新版为6-10条），最高不超过10线程.
所以你懂的，最快的是谷歌，但是不一定是最高就最好，但是就目前的硬件水平，最高就是最好的这句话没毛病！
浏览器引擎在加载资源的同时会监测统一主域（同一域名）下的资源有多少，并且 最高不超过浏览器线程的情况下 同时加载。
那么如果当其中一个主域的进程（线程）被阻塞了，加载速度肯定就慢下来了，所以我在这里建议大家：
在加载资源的时候一定不要把所有的资源（img、js、css、fonts）放在同一主域下，可以根据资源类型建立不同的二级域名。
例如：
imgs.youdomain.site、js.yourdomain.site、css.yourdomain.stie
这样不就把你的资源分开了吗？
哪怕其中一个主域阻塞，也是不影响其他的主域同时加载，速度嗖的一下就上来了！
所以，老乡，鸡蛋不要放在一个篮子里嘛！
4
服务器问题
服务器坑爹有木有！选择运营商就像选择男朋友一样， 必须得靠谱 ！
那些年，做技术的小编被坑过很多次，好多锅都在我头上，不得不背！
在这里，含泪给大家分享一下我的心酸史：
之前遇到服务器，售后一点都不像厚昌的小伙伴对我们的客户的态度辣么友好，拍拍屁股推三阻四的，而且还老出问题，不是断电就是不稳定，三天两头的整个404~
吧啦吧啦吧啦……
反正最后，这个锅，还只能是我背~
所以，在这里我用血的教训告诉大家， 买服务器一定不要舍不得花钱，特别是做广告的，广告费都花了，为啥服务器不知道多花点钱？
买服务器，国内的，有备案的，我推荐阿里云/腾讯云/小鸟云 ，使用起来很方便，维护起来也很方便，售后很nice，经常有活动，大家感兴趣可以去他们官网看看！