帮助加速网页响应时间的，简单而有效的技术

在本文中，您将看到5个简单有效的技术讨论，以帮助您加快网页响应时间。1.在决定出了什么问题之前，使用Yslow概述和测量网站的加载时间，知道网站的加载时间是第一步。它还能让你知道你是否需要加速网站的更改。在我们开始之前，如果您还没有安装YSlow，请安装它。他是MozilaFirefox的第一个扩展。让我们浏览Sixrevisions网站，我们都用同样的例子来测试(只需要在新标签或浏览器窗口中打开)。插件栏在浏览器右下角(如图1所示)。当网页完成加载时，你会看到它。”YSlow”和数字。数字代表浏览器加载网站所需的时间(以秒计)。我们希望这个数字能尽可能低。图1：在大多数情况下，YSlow图标和显示网页加载时间的里程表导致网页加载时间长的一组或一组原因如下：1、太多的HTTP请求2、JavaScript文件3非压缩(或未缩小)、我们将讨论Noexpirationheadersfor静态图片文件。浏览一些网站是为了fimilarize自己网站加载时间的表现。看看Google，facebook，还有一些你喜欢的博客和网站。您会注意到，网站使用的图片越多，响应js网页的时间就越长。除了测量其网页加载速度外，YSlow还为您提供了一些深入的了解，比如您可以做些什么来提高您的网站性能，以及网站负载性能的不足。下图为“性能”标签(如图2所示)。但是如果你点击它，它会分级显示影响加载时间和整体性能的每个领域的细节。图2：在这一领域，最主观的选择是使用CDN(内容分发网络).CDN对大型网站非常有效。他们所做的是跨越各个地区的服务器传播网站内容。物理服务器越接近用户加载网站，页面就越快。因此，CDN的使用本质上是将内容从服务器分发到最接近的访问页面用户。图3：使用字母进行性能标签（A，B，C，D，F）表示等级和当前等级(1-100)。等级领域：让我们贯穿每个等级因素，以下是每个等级领域的简短秒速，以及如何解决这些问题，以实现最佳性能。减少HTTP请求：当网页从服务器中获取文件时，就会产生HTTP请求。范围包括脚本、CSS文件、图片、asynchroneous客户端/服务端请求(Ajax等变更技术)。这是提高性能的关键，但只需要一些体力就可以轻松解决。例如，尽可能合并脚本，CSS，还有图像，在用户机器上缓存文件往往很有帮助。添加期头：80%的页面加载时间与下载脚本、图片和CSS有关。在大多数情况下，这些元素不会在用户的机器中改变，你可以通过.在用户本地机器中添加代码缓存htaccess(我们将在文章后面讨论如何操作)。Gzip组件：Gziping或压缩JS文件、图片、HTML文档、CSS文档等。用户可以下载较小的文件版本，以提高网页的加载速度。这可以减少服务器的消耗，但解压部件也可能导致页面响应减慢，这取决于用户的浏览器。将CSS放在顶部：将CSS文件放在网站的顶部，网站可以尽可能同时加载图像和文字等其他部件。把JS放在底部：把CSS放在文档的头部，只需关闭以避免使用CSS表达式：我从未使用过CSS表达式（称为动态特性），这只是增加编程概念（如控制/有条件结构）的CSS特性，到IE8，三叉戟布局引擎（用于IE）不再提供支持。在某种程度上，我会根据不同的条件使用PHP脚本加载不同的CSS风格规则，如随机数、一天或浏览器。外部调用JS和CSS：将JS和CSS文件放入外部文件中，浏览器缓存它们的页面加载速度比每次调用都快。减少DNS搜索：只要用户在浏览器地址栏中输入域名，浏览器总是执行DNS搜索IP地址，网站的入口位置越多，必要的DNS搜索就越多。尽量保持较低水平，平均每60-100毫秒进行一次DNS查询。缩小JS：与一般的gzip压缩不同，缩小js文档是为了消除不必要的空间，减少文件的总尺寸，较小的页面可以获得更快的加载速度，您可以使用JSMIN来缩小Javascript.避免重定向：无论是服务器端头重定向、js重定向还是HTML元素重定向。您的网站将加载空白页面的头，然后加载新页面。用户花费越来越多的时间来获得所需的页面，所以他们应该不惜一切代价避免这种情况。删除重复脚本：浏览器加载相同的脚本会增加页面的加载时间，这是一个非常简单的数学问题，更多的文件等于更多的加载时间。仔细检查你的网站，确保你没有调用两三次jquery或其他脚本。图4：部件标签。零件标签(如图4所示)可以洞察增加网站加载速度的效果。在这里，您可以看到当前文档加载所需的时间，如果这些文件被压缩，响应时间，以及它们缓存在用户的机器中，以及缓存何时过期。这是对网站性能和速度优化的一个很好的评估。最后，统计数据标签(如图4所示)显示了所有HTTP请求、下载文件和缓存文件。Emptycache显示了浏览器需要下载的呈现页面的文件。另一方面，PrimedCache显示了用户浏览器缓存中存在的文件列表，从而节省了浏览器无需再次下载文件的请求。图5：Statstab.2.使用CSS精灵减少HTTP请求CSSPrites可以通过合并您的CSS背景图片来减少页面对服务的HTTP请求，轻松减少页面的加载时间。许多教程只是教你如何使用CSS精灵来制作导航，我想说的是使用它来制作整个网站的用户界面。首先，让我们快速浏览YouTube，看看他们是如何使用CSSprites的(如图6所示)的。你不能在这里看到YouTube的CSSpritete：master-vfl87445.png图6：YouTube的“主要”CSSSprite.这是怎么做到的，使用CSS，YouTube设置了一个类别，以此图片为背景(如上图所示)，然后其他元素只需要通过css的背景位置属性background-position设置相应的类来使用这些图片。让我们试试。我们计划用YouTube图片制作一个例子。让我们试试。我们计划用YouTube图片制作一个例子。在下面的例子中，我们在屏幕上显示YouTube标志。使用相同的sprite类别和相同的图标制作简单的翻转图标。 我们现在所做的就是通过单一的HTTP请求来满足所有静态网站的需求。这样可以大大降低网页加载时间。当您使用sprites制作悬停翻转效果时，图片更换的间隔时间似乎很短。加载文件不同于翻转状态，直到文件完全加载才留下大量空白。  3.先加载CSS，再加载JavaScript的某些站点，你无法避免所有扰乱你功能的HTTP请求。在这方面，在body上加载CSS，在标签关闭前加载JavaScriptt.会发生什么？网页加载显示在用户的机器上，所以他们的眼睛开始扫描提供的内容。这时，JavaScript正好赶上后台加载。提示：如果您不想移动JavaScript标志，您认为它会使网站的工作方式混乱，我建议使用defer属性。当您添加文件下载时，使用子域名并发下载并行下载。如果您在页脚的状态栏中打开网页，您会发现在加载其他网站时，您会同时对static进行访问.domain.com和c1.domain.com请求。这是优化负载性能的一种很好的方法。虽然它只是一个简单的子域名，内容在同一个服务器上，但浏览器被视为一个独立的服务器。进行这样的设置：1、在服务器上创建3个子域名2、在每个子域名的文件夹中放置图片3、JavaScript文件用于替换新建子域名中网站图片的位置路径，不超过两个并发。5.Addinganexpiresheader的一些网站非常丰富，即使使用了上述技术，性能似乎也能增加更多。用户访问您的网站，生成HTT请求，如必要的页面、图片、脚本等。当你使用Expiresheader时，你可以在用户的本地机器中缓存这些元素，这不仅提高了他们的访问速度，而且节省了你的带宽。Expiresheader可用于所有图片、脚本和css。只需在你的网站根目录中.在htaccess文件中添加一行代码很容易。(如果没有，可以用文本编辑器创建一个，存为.htaccess，然后上传到根目录。）下面的.htaccess.为ico，.pfd，.flv(Flash类型文件)，.jpg，.png等设定了2010年到期的遥远期限。