提高网站打开速度的18点要素

发布时间:2021-10-21沉默小管-技术博客提高网站加载速度，提高用户体验 794 1
原文地址: https://www.php-china.com//detail/7
<strong><span style="line-height:1;">1、减少HTTP请求</span></strong><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp; 图片、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用&nbsp;</span><a target="_blank" href="http://www.alistapart.com/articles/sprites"><span style="line-height:1;">CSS sprites</span><span style="line-height:1;">&nbsp;</span></a><span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">将小图拼合后利用background来定位。</span><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp;&nbsp;</span><strong><span style="line-height:1;">2、设置头文件过期或者静态缓存</span></strong><br />
<span style="background-color:#F8F8F8;color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;">&nbsp; &nbsp; &nbsp; 浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。不过这样如果页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，看自己衡量了~ 这项可以通过修改.htaccess文件来实现。</span><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp;&nbsp;</span><strong><span style="line-height:1;">3、Gzip压缩</span></strong><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp; Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%。压缩没压缩，可以到这里测试：</span><a target="_blank" href="http://pagespeed.webkaka.com/youhua/gzip/"><span style="line-height:1;">gzip压缩检测</span></a><span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">。</span><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp;</span><strong><span style="line-height:1;">&nbsp;4、不要在HTML中缩放图片</span></strong><br />
<span style="background-color:#F8F8F8;color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;">&nbsp; &nbsp; &nbsp; 图片要用多大的就用多大的，1000X1000的图片被width=”100″ height=”100″以后，本身的KB数是不会减少的。</span><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp;&nbsp;</span><strong><span style="line-height:1;">5、优化图片</span></strong><br />
<span style="background-color:#F8F8F8;color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;">&nbsp; &nbsp; &nbsp; 将你的GIF转为PNG8会是个减小体积的好办法，另外有很多方法处理你的JPG及PNG图片以达到优化效果。</span><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp;&nbsp;</span><strong><span style="line-height:1;">6、不要出现404页面</span></strong><br />
<span style="background-color:#F8F8F8;color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;">&nbsp; &nbsp; &nbsp; 站点本身里（非搜索结果）出现404页面，无意义的404页面会影响用户体验并且会消耗服务器资源。</span><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp;&nbsp;</span><strong><span style="line-height:1;">7、减小Cookie</span></strong><br />
<span style="background-color:#F8F8F8;color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;">&nbsp; &nbsp; &nbsp; Cookie在服务器及浏览器之间的通过文件头进行交换，尽可能减小Cookie体积，设置合理的过期时间，能够很好的提高效率。</span><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp;&nbsp;</span><strong><span style="line-height:1;">8、减少iframe数量</span></strong><br />
<span style="background-color:#F8F8F8;color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;">&nbsp; &nbsp; &nbsp; 需要更有效的利用 ifames。&nbsp;</span><br />
<span style="background-color:#F8F8F8;color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;">&nbsp; &nbsp; &nbsp; iframe 优点：有利于下载缓慢的广告等第三方内容，安全沙箱，并行下载脚本&nbsp;</span><br />
<span style="background-color:#F8F8F8;color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;">&nbsp; &nbsp; &nbsp; iframe 缺点：即使为空也会有较大资源消耗，会阻止页面的onload，非语义</span><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp;&nbsp;</span><strong><span style="line-height:1;">9、尽早的释放缓冲</span></strong><br />
<span style="background-color:#F8F8F8;color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;">&nbsp; &nbsp; &nbsp; 当用户进行页面请求时，服务器端需要花费200到500毫秒时间来拼合HTML，将写在head与body之间，释放缓冲，这样可以将文件头先发送出去，然后再发送文件内容，提高效率。</span><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp;&nbsp;</span><strong><span style="line-height:1;">10、删除重复脚本</span></strong><br />
<span style="background-color:#F8F8F8;color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;">&nbsp; &nbsp; &nbsp; 重复调用的代码浏览器并不会识别忽略，而是会再次运算一遍，这当然是大大的浪费。</span><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp;&nbsp;</span><strong><span style="line-height:1;">11、减小JS和CSS的体积</span></strong><br />
<span style="background-color:#F8F8F8;color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;">&nbsp; &nbsp; &nbsp; 写JS和CSS都是有技巧的，用最少的代码实现同样的功能，减少空白，增强逻辑性，用缩写方式等等，当然也有不少工具也能够帮你实现这一点。</span><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp;&nbsp;</span><strong><span style="line-height:1;">12、减少DNS查找</span></strong><br />
<span style="background-color:#F8F8F8;color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;">&nbsp; &nbsp; &nbsp; 减少网站从外部调用资源，网页加载效率会大大提高。</span><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp;&nbsp;</span><strong><span style="line-height:1;">13、将JS和CSS外链</span></strong><br />
<span style="background-color:#F8F8F8;color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;">&nbsp; &nbsp; &nbsp; 一些较为公用的JS和CSS，我们可以使用外链的形式，譬如我就是从Google外链来的Jquery文件，如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件，那么他在浏览我的网站的时候就不需要再进行下载了！</span><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp;&nbsp;</span><strong><span style="line-height:1;">14、避免CSS表达式</span></strong><br />
<span style="background-color:#F8F8F8;color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;">&nbsp; &nbsp; &nbsp; CSS表达式很可怕，这个只被IE支持的东西执行时候的运算量非常大，你移动一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个||| IE6去死去死！</span><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp;&nbsp;</span><strong><span style="line-height:1;">15、把CSS放顶部</span></strong><br />
<span style="background-color:#F8F8F8;color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;">&nbsp; &nbsp; &nbsp; 让浏览者能尽早的看到网站的完整样式。</span><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp;&nbsp;</span><strong><span style="line-height:1;">16、把JS放底部</span></strong><br />
<span style="background-color:#F8F8F8;color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;">&nbsp; &nbsp; &nbsp; 网站呈现完毕后再进行功能设置，当然这些JS要在你的加载过程中不影响内容表现。</span><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp;&nbsp;</span><strong><span style="line-height:1;">17、用GET方式进行AJAX请求</span></strong><br />
<span style="background-color:#F8F8F8;color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;">&nbsp; &nbsp; &nbsp; Get 方法和服务器只有一次交互（发送数据），而 Post 要两次（发送头部再发送数据）。</span><br />
<span style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;line-height:1;">&nbsp; &nbsp; &nbsp;&nbsp;</span><strong><span style="line-height:1;">18、减少DOM的访问次数</span></strong><br />
<p style="color:#1C1C1C;font-family:verdana, 宋体;font-size:13px;background-color:#F8F8F8;">
	<span style="line-height:1;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; JS访问DOM是很慢的，尽量不要用JS来设置页面布局。</span>
</p>