专业为您提供资阳网站建设、资阳网站制作、资阳网站推广、网站优化等解决方案。

VIEWS

技术知识VIEWS

VIEWS

加速网页响应时间适用于IIS和各类系统

   来源:http://www.napianyun.com   作者:那片云网络   发布于:2014-12-28 17:24   浏览:

在这篇文章中,会介绍加速网页响应时间和iis响应时间,你会看到4种为你的网页加速的简单而有效的技术的相关讨论。
1. 使用CSS精灵减少HTTP请求
CSS Sprites 可能是自从Tesla发明了电流以后最cool的事情。呃,我的意思是爱迪生。
嗯,不大,但是非常紧凑。
CSS sprites 可以通过合并你的css背景图片,减少页面向服务的HTTP请求,轻松的降低页面的加载时间。
许多教程只是教你如何使用CSS精灵制作导航,我要说的是使用它制作整个网站的用户界面。
首先,让我们快速浏览一下YouTube,看一看他们是如何使用CSS Sprites的(如图 6)。 你不能在这里看到YouTube的CSS Sprite:
master-vfl87445.png

 

图 6: YouTube的 “主要的” CSS Sprite.
这是怎么做到的,使用CSS,YouTube设定了一个将这张图片作为背景(如上图)的类, 然后其他元素只需要通过css的背景位置属性background-position设定相应的类来使用这些图片。
让我们来试试,我们打算使用YouTube图片来制作一个实例。
在以下示例中,我们使YouTube标志显示在屏幕上。使用相同的使用相同的sprite类与相同的图标,制作一个简单的翻转图标。

以下为引用的内容:
<style>
.sprite {
  background:url();
}

#logo {
  width:100px;
  height:45px;
  background-position:0 0;
}
</style>

<div id="logo" class="sprite"> </div>

现在我们所作的是通过单一的HTTP请求满足所有的静态网站需求。这样可以大大降低网页加载时间。
当你使用sprites制作悬停翻转效果时图片更替看起来间隔时间非常短。不同于翻转状态时加载文件,留下大量的空白直到该文件完全被加载。

以下为引用的内容:
<style>
.sprite {
  background:url();
}
#logo {
  width:100px;
  height:45px;
  background-position:0 0;
}

#button {
  background-position:0 -355px;
  padding:5px 8px;
}

#button:hover{
  background-position:-25px -355px;
}

</style>

<div id="logo" class="sprite"> </div>

<a href="#" id="button" class="sprite"></a>

2. 先加载CSS最后加载JavaScript
某些站点,你根本无法避开所有的扰乱了你的功能的HTTP请求。
在这方面,以下几个建议:
在body上的《head》标签里加载CSS
在《/body》标签闭合前加载JavaScript 。
会发生什事情呢?网页在用户的机器上加载显示,因此他们的眼睛就开始扫描所提供的内同,这个时候JavaScript正好迎头赶上在后台进行加载。 i
提示:如果您不想移动JavaScript标记,你认为它会搞糟网站的方式工作,我建议使用 defer 属性。用法如下:
<script defer='defer'>
3. 使用子域名并发下载
并行下载,当你增加文件下载。如果你有打开网页在页脚的状态栏,你会发现加载其他网站的时候,会同时对static.domain.com和c1.domain.com进行请求。
这是一个非常棒的优化负载性能的方法。虽然只是简单的食用子域名,内容在同一个服务器上,但是浏览器是当作独立的服务器进行对待。
进行这样的设定:
在服务器上创建3个子域名
把图片放在在每个子域名的一个文件夹内
在新建的子域名中替换网站图片的位置路径
现在使用JavaScript文件,不会超过两个并发。
4. Adding an Expires Header
一些网站非常丰富,即使使用上述的技术后,性能似乎还可以增加更多。
一个用户访问你的网站,产生一些必要的页面,图片,脚本等HTT请求。
当你使用了Expires Header,你可以在用户的本地机器对这些元素进行缓存,不仅提高了他们的访问速度,也节省了你的带宽。 Expires header可以在所有的图片,脚本与css上使用。
只需要在你的网站根目录.htaccess文件中加入一行代码就可以轻松做到。(假如你没有,可以用文本编辑器创建一个,存为.htaccess,然后上传到根目录中。)
下面的.htaccess.为ico, .pfd, .flv (Flash类型文件), .jpg, .png等设置了2010到期的遥远的期限。
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|CSS|swf)$">
  Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>
请注意:如果设定过于遥远的expires header,你更新文件需要重新命名(version it) 否则使用缓存的用户将无法看到更新。
例如,如果你拥有一个avaScript文件需要更新, 使用版本号码然后更新所有的旧版本文件 (即. javascriptfile-1.0.js, javascriptfile-1.1.js)

使用以上这些方法可以大幅度的加速网页响应时间和iis响应时间。


推荐阅读