如何让网页打开速度更快

发布日期：2018-04-25

合并网站小图片

在我们制作的网页中，经常会出现很多小图片，如一个按扭，一个边框的图片等等，这些小图片，一个只有几KB，而有的甚至1KB都不到。但是我们在css都这样写background-image:图片URL，这样写，是很不好的一种写法，如果有时间的话，作者在这里建议大家使用Css Sprite把整个网站所有的小图片都统统合并，然后再background-image:图片URL中去定位自己的的小图即可。

当然没有时间就算了。尊重原创转载留网址http://www.pc811.com/6/4/26025.html

因为默认直接写小图片的url，少的话，可能看不出来，如果多的话，那么我们就可以直接看到很多效果，如果直接合并成一个大图片，那么客户端只需要请求一次服务器就直接显示在浏览器中了。目前很多大站都在这样做。

合并css和js文件

明明一个css或是一个js可以做的效果，却分成几个甚至十几个文件，是非常蠢的做法。

作者看到不少网站光一个首页就多达近20个js，还有三五个css，非常的不理解这种做法。

css、js文件的摆放位置

css是样式，必需要放文件中的最上面，也就是head之中。而js最好是直接放在页面中的最底部。

原因：网页加载顺序是从上而下，如果css不放在上面，那么网页就会在没加载完时变形。

而js一般都是网页的特效，这个可以放在网页最底部，在加载完时才会显示，可以一定速度上提升速度。

电脑互助网注：JS如果放在网页中的某处，特别是一些外部JS或是ajax请求一类的js，轻者可卡上几百毫秒，重者可卡达长达半秒到一秒以上。

如果大家不信的话，可直接做一个js，然后ajax请求到后台，然后后台循环个几万遍，就明白了。

另外外部JS，除了外部域名的js解析请求的那50-300毫秒之外，人家服务器处理还要百十毫秒，那么算起来多达一秒很正常，

再打个比方：百度网盟大家都明白吧，可以把网速限制一下，然后再打开页面我们会发现在加载网盟那段会卡你0.2到0.5秒，才会显示网盟以下的代码。

压缩代码

对前台的html，css，及js文件统统进行压缩，压缩之后，我们会发现虽然代码不美观了，但是我们却发现文件的大小少了最少50%以上。

50%是什么情况？明明100KB的首页，却50KB的大小了。

压缩代码方法

最简单的方法，就是直接把html，css，及js文件，所有的空格统统都替换掉，然后再把换行的统统替换掉并保存，我们就会发现文件大小变了很多。

压缩代码优缺点

优点：网页文件变小，那么理所当然的从服务器下载的速度变快了。

缺点：代码比较乱，不美观。

(作者在这里就要说了，前台代码美观有个P用，打开百度右键源代码，也是这么乱呢。还需要说代码不美观后期改起来麻烦的吗？难道不知道存在一种代码格式化的工具吗？，格式化完代码再压缩不就行了，也就是多用你几分钟的事儿而已)

以上只是我自己做的，其实还有不少方法，如服务器的gzip压缩，避免多级派生选择器，使用高效的类选择器等就不细说了，因为我很少用到。