31个网站性能优化技巧你都了解多少？

温馨提示：手机扫码可阅读当前文章!
文章简介：网站性能优化是一个复杂而庞大的主题，需要掌握众多技巧。通过优化网页性能，可以提高用户体验，并让网站更加高效。网站性能优化涵盖了很多方面，包括缓存、使用CDN、重构和资源优化等。这些优化策略可以逐步实施，渐进地改善网站性能。作为一名Web开发...

网站性能优化是一个复杂而庞大的主题，需要掌握众多技巧。通过优化网页性能，可以提高用户体验，并让网站更加高效。网站性能优化涵盖了很多方面，包括缓存、使用CDN、重构和资源优化等。这些优化策略可以逐步实施，渐进地改善网站性能。

作为一名Web开发人员，我们应该把本文作为参考，并时刻牢记在实验前后测量性能的重要性。通过实践和持续的优化，我们可以不断提升网站的速度和用户体验。

正如古人所言：“春风得意马蹄疾，一日看尽长安花。”只有不断追求优化，我们才能通过缓存技术减少服务器的负载，通过使用CDN加速静态资源的传输，通过重构代码提升性能，通过优化资源减少页面加载时间。

每一步都是重要的，每一步都能让用户的体验更上一层楼。优化是一场持久的跋涉，但只有通过不断的修炼，我们才能突破自我，打破性能的壁垒。

愿我们始终怀揣着追求卓越的心，对网站性能优化保持热情。让我们的网站犹如春风，散发着无尽的魅力和优雅。

下面是网站性能优化提升的30个方法策略：

1、静态资源使用CDN存储

用户与你的网站服务器的接近程度会影响响应时间的长短。将静态资源放在内容分发网络（Content Delivery Network，CDN）中可以加快访问速度。

2、尽量减少HTTP请求次数

合并js、css文件以及将图片进行sprite处理，可以减少HTTP请求次数。

3、CSS、JS放置正确位置

将css文件放在head中，以保证在用户看到页面时样式能够正确显示。将js文件放在body最底部，以防止加载js代码阻塞页面。

4、优化算法

在js处理中使用优化的查找和排序算法，尽量减少嵌套循环的使用。

5、静态资源压缩

在发布前将图片、CSS和JS文件压缩，以减小文件大小。

6、静态资源使用多个域名

对于图片、CSS和JS文件，可以使用多个域名来并行加载。

7、预加载

在某些功能还未展现时，在空闲时间预先加载相关图片或JS代码。

8、DOM操作优化

使用JavaScript访问DOM元素比较慢，因此可以使用缓存已经访问过的元素，并在线下更新完节点后再将其添加到文档树中。另外，避免使用JavaScript修改页面布局。

9、使用事件代理

使用事件代理可以减少页面中附加的事件句柄，并减少事件触发的频率。

10、延迟加载内容

使用图片懒加载、数据懒加载和功能懒加载等方式，可以延迟加载页面内容，提高页面加载速度。

11、使用离线缓存

将常用的变动较少的静态资源存储到localstorage中，第二次访问时直接使用本地缓存，加快访问速度。

12、减少DNS查找次数

减少主机名的数量可以减少页面中并行下载的数量，从而减少DNS查找的次数，节省响应时间。

13、根据域名划分页面内容

将页面内容划分成若干部分，可以最大限度地实现并行下载。例如，将HTML内容和动态内容放在一个域名下，而将图片、脚本和CSS文件分别存放在不同的域名中。

这些策略可以帮助您优化网站的性能，提高用户的体验。然而，需要根据具体情况选择合适的策略，并对优化的效果进行测量和评估。还要持续学习和探索，以保持对最新优化技术的了解，并将它们应用到实际开发中。通过不断努力和实践，您可以成为一名优秀的web开发人员，为用户提供更好的网站体验。

14、可缓存的AJAX

在一些情况下ajax可使用缓存减少网络开销。

让我们来看一个例子：

一个Web2.0的Email客户端会使用Ajax来自动完成对用户地址薄的下载。如果用户在上次使用过Email web应用程序后没有对地址薄作任何的修改，而且Ajax响应通过Expire或者Cacke-Control头来实现缓存，那么就可以直接从上一次的缓存中读取地址薄了。必须告知浏览器是使用缓存中的地址薄还是发送一个新的请求。这可以通过为读取地址薄的Ajax URL增加一个含有上次编辑时间的时间戳来实现，

例如，&t=11900241612等。如果地址薄在上次下载后没有被编辑过，时间戳就不变，则从浏览器的缓存中加载从而减少了一次HTTP请求过程。如果用户修改过地址薄，时间戳就会用来确定新的URL和缓存响应并不匹配，浏览器就会重要请求更新地址薄。 即使你的Ajxa响应是动态生成的，哪怕它只适用于一个用户，那么它也应该被缓存起来。这样做可以使你的Web2.0应用程序更加快捷。

15、减少DOM元素数量

一个复杂的页面意味着需要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢。因此，尽量减少页面中的DOM元素数量是十分重要的。可以通过以下方法来实现减少DOM元素数量：

- 使用语义化的标签：在页面布局中，尽量使用语义化的标签，而不是仅仅因为布局需要而引入额外的元素。这样可以减少页面中的冗余元素。

- 使用合适的布局工具：例如YUI CSS utilities中的grids.css可以帮助实现整体布局，font.css和reset.css可以帮助移除浏览器默认格式。使用这些工具可以减少需要编写的冗余代码。

- 移除不必要的内容：页面中存在可以精简的部分，不需要移除全部内容，只需替换元素标签即可。

- 避免使用表格布局：表格布局会引入大量DOM元素，如果不是必要的情况下应避免使用。

通过计算DOM元素数量，可以评估当前页面的复杂程度。可以使用工具如Firebug的控制台输入`document.getElementsByTagName('*').length`来获取当前DOM元素数量。需要根据具体页面的情况来判断什么样的数量算是过多。例如，Yahoo!主页虽然内容非常多，但只使用了700个元素。

16、使iframe的数量最小

了解iframe的工作原理，可以更有效地使用它。iframe元素可以在父文档中插入一个新的HTML文档。使用iframe需要注意以下几点：

优点：

- 解决加载缓慢的第三方内容（如图标和广告）的加载问题。

- 使用安全沙箱，可以隔离iframe内外的内容。

- 并行加载脚本，提高效率。

缺点：

- 即时内容为空，加载也需要时间。

- 会阻止页面加载。

- 缺乏语义。

因此，在使用iframe时需要权衡利弊，避免滥用。

17、减少404页面错误

使用HTTP请求获取一个没有用处的响应（如404页面错误）是没有必要的，它只会影响用户体验并浪费服务器资源。一些站点会将404错误响应页面改善为更友好的页面，但也会浪费服务器资源。尤其需要注意的是，如果404错误发生在引用外部JavaScript时，会破坏并行加载并可能导致浏览器将404响应内容当作JavaScript代码执行。

因此，需要做以下措施来减少404页面错误：

- 确保页面内链接的正确性，避免指向不存在的资源。

- 链接的资源在服务器上存在时，应返回正确的响应而非404页面错误。

18、为文件头指定Expires或Cache-Control

设置文件头的Expires值为"Never expire"（永不过期）可以使静态内容具有缓存性，避免不必要的HTTP请求。对于动态内容，使用适当的Cache-Control文件头可以帮助浏览器进行有条件的请求。

在现代网页设计中，页面越来越丰富，包含了更多的脚本、样式表、图片和Flash等。首次访问页面时，会产生多个HTTP请求，但通过使用Expires文件头将这些内容设为具有缓存性，可以避免接下来的页面访问中不必要的HTTP请求。

Expires文件头通常用于图像文件，但也可应用于所有内容，包括脚本、样式表和Flash等。例如，可以使用较长时间的Expires文件头，告诉浏览器这个响应直到2020年4月15日才过期。如果使用Apache服务器，可以使用ExpiresDefault设置相对当前日期的过期时间。注意，使用Expires文件头时需要将文件名随内容的改变而改变，以防止客户端缓存过期内容。

使用Expires文件头的改进效果依赖于用户已经访问过网站的次数。对于首次访问的用户并不会起作用，因为浏览器缓存为空。此方法对于提高网站性能的效果取决于页面内容的点击频率，即缓存是否已经预加载了页面中的全部内容。根据我们的测量，有75～85%的页面浏览量中存在预缓存。通过使用Expires文件头，可以增加浏览器缓存中内容的数量，并在用户的后续请求中再次使用这些内容，而无需发送额外请求。

19、Gzip压缩文件内容

开启Gzip可以让服务器压缩文件内容，从而减少传输的大小。这样做可以降低页面的加载时间，提高性能。通过服务器端的Gzip压缩，可以减少50%以上的传输量。

20、尽早刷新输出缓冲

当用户请求一个页面时，后台会花费一定的时间来组织HTML文件。在这段时间内，浏览器处于空闲状态，等待数据的返回。利用PHP的flush()方法，可以先将编译好的部分HTML响应文件发送给浏览器，让它可以下载文件中的内容（如脚本等），同时后台继续处理剩余的HTML页面。这种方法在后台繁忙或前台相对空闲时效果更为明显。

21、简单请求使用GET方式

在使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送真正的数据。因此，在发送简单请求时，使用GET方法更为适合。GET只需要发送一个TCP包，除非请求中携带了大量的cookie。值得一提的是，在HTTP规范中，GET意味着“获取”数据，所以在仅需要获取数据而不是存储数据时，使用GET更符合语义。相反地，当需要发送并在服务器端保存数据时，使用POST方法更为合适。

22、避免使用CSS表达式（Expression）

CSS表达式是一种强大（但危险）的方法，可以动态设置CSS属性。从Internet Explorer5开始，CSS表达式得到了支持。举个例子，使用CSS表达式可以每隔一个小时切换一次背景颜色：background-color: expression((new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″)。通过JavaScript表达式计算，可以根据结果设置CSS属性的值。

然而，CSS表达式的计算频率比想象中要高。它不仅在页面显示和缩放时计算，而且在页面滚动甚至移动鼠标时都需要重新计算一次。给CSS表达式添加一个计数器可以追踪计算频率。只需随意移动鼠标，计算次数就能轻松达到上万次。

为了减少CSS表达式的计算次数，可以使用一次性的表达式，将结果赋值给指定的样式属性，并用该属性替代CSS表达式。如果样式属性必须在页面周期内动态改变，可以使用事件处理程序代替CSS表达式。如果确实需要使用CSS表达式，请记住它们会被计算成千上万次，并可能对页面性能产生影响。

23、使用外部JavaScript和CSS

很多性能规则都涉及如何处理外部文件。但在采取这些措施之前，我们可能会问一个更基本的问题：是将JavaScript和CSS放在外部文件中还是内嵌在页面中？实际上，将它们放在外部文件中可以提高页面速度，因为浏览器可以对JavaScript和CSS文件进行缓存，而内嵌在HTML文档中的JavaScript和CSS则需要在每次请求中重新下载。这虽然减少了HTTP请求次数，却增加了HTML文档的大小。因此，将JavaScript和CSS作为外部文件引用，能够减少HTML文档的大小，同时提高性能。

关键问题是，外部JavaScript和CSS文件的缓存频率与HTML文档的请求次数有关。虽然这方面有一定难度，但还是有一些指标可以用来衡量。如果用户在一个会话中浏览您网站的多个页面，并且这些页面中重复使用相同的脚本和样式表，那么缓存外部文件就会带来更大的好处。然而，对于许多网站来说，很难建立这些指标。对于这些网站来说，最好的方法就是将JavaScript和CSS作为外部文件引用。

唯一适合使用内嵌代码的例外是网站的主页，如Yahoo!主页和My Yahoo!主页。主页在一个会话中的浏览量较少（可能只有一次），因此将JavaScript和CSS内嵌可以加快响应时间。对于浏览量较大的首页，可以通过一种技术来平衡内嵌代码带来的减少HTTP请求次数和通过外部文件进行缓存所带来的好处。即在首页中内嵌JavaScript和CSS，但在页面下载完成后动态下载外部文件，在子页面中使用这些文件时，它们已经缓存到浏览器中了。

24、用link代替@import

之前的最佳实践中提到，为了有序加载呈现，应将CSS放置在顶部。在IE中，可以使用页面底部的@import和使用<link>标签的效果是一样的，因此最好不要使用@import。使用<link>标签可以更好地控制CSS的加载和渲染顺序，提高页面性能。

25、避免使用滤镜

IE独有的AlphaImageLoader属性用于修复7.0以下版本中PNG图片的半透明效果。然而，滤镜的问题在于加载图片时会暂停内容呈现并冻结浏览器。它会对每个元素（不仅仅是图片）进行计算，增加了内存开销，因此存在多个方面的问题。为了完全避免使用AlphaImageLoader，可以使用PNG8格式作为替代，在IE中可以很好地工作。如果确实需要使用AlphaImageLoader，请使用下划线_filter以使其对IE7以上版本的用户无效。

26、剔除重复脚本

在同一个页面中重复引用JavaScript文件会影响页面性能。虽然这种情况并不常见，但对于调查的美国前10大网站中，有两个存在重复引用脚本的情况。这种奇怪现象发生的主要原因有两点：团队规模和脚本数量。如果确实存在这种情况，重复引用脚本会导致不必要的HTTP请求和无用的JavaScript运算，降低了网站的性能。在Internet Explorer中，重复引用脚本会产生不必要的HTTP请求，而在Firefox中则不会。在Internet Explorer中，如果一个未缓存的脚本被引用两次，它将在页面加载过程中产生两个HTTP请求。即使脚本可以缓存，当用户重新加载页面时也会产生额外的HTTP请求。除了增加额外的HTTP请求外，多次运算脚本也会浪费时间。无论脚本是否可缓存，Internet Explorer和Firefox都存在重复运算JavaScript的问题。避免偶尔出现多次引用同一脚本的方法是在模板中使用脚本管理模块引用脚本。在HTML页面中，最常用的方法是使用<script>标签引用脚本。在PHP中，可以使用一个名为insertScript的方法来替代：

为了防止多次重复引用脚本，这个方法中还应该使用其他机制来处理脚本，例如检查所属目录和为脚本文件名添加版本号以用于Expires文件头等。

27、减小Cookie体积

HTTP cookie可以用于多种用途，如权限验证和个性化身份等。通过HTTP文件头，在web服务器和浏览器之间交流关于cookie的信息。因此，保持cookie尽可能小以减少对用户响应时间的影响非常重要。关于这方面更多的信息，可以参考Tenni Theurer和Patty Chi的文章“When the Cookie Crumbles”。这项研究主要涵盖以下几点：

- 去除不必要的cookie。

- 使cookie的体积尽量小，以减少对用户响应时间的影响。

- 注意在合适级别的域名上设置cookie，以保证子域名不受影响。

- 设置合理的过期时间，早一点设置过期时间并避免过早清除cookie，都可以改善用户的响应时间。

28、对于静态资源使用无cookie域名

当浏览器在请求中同时发送cookie和请求静态图片时，服务器对这些cookie不会做任何处理。因此，这些传输只是因为某些负面因素而产生的额外开销。因此，对于静态内容的请求应该是无cookie的请求。可以创建一个子域名来存放所有静态内容。例如，如果您的域名是www.example.org，可以在static.example.org上存放静态内容。但是，如果您设置了域名example.org上的cookie，而不是在www.example.org上设置，那么所有对static.example.org的请求都将携带cookie。在这种情况下，您可以购买一个新域名来存放静态内容，并确保该域名无cookie。例如，Yahoo!使用的是ymig.com，YouTube使用的是ytimg.com，Amazon使用的是images-amazon.com等等。

29、不要在HTML中缩放图像

在HTML中不要使用比实际需要大的图片然后再通过设置长宽来缩放。正如古人云：“行云流水皆有时，美景佳图需适宜”。如果需要展示一个100×100像素的图片，就应该使用一张实际尺寸为100×100像素的图片，而不是将一个500×500像素的图片缩小使用。这样可以减少页面加载时不必要的数据传输和浏览器对图像的缩放计算。

30、favicon.ico要小而且可缓存

favicon.ico是一个位于服务器根目录下的图标文件。它经常会被浏览器请求，即使你可能认为它没什么用处。因此，最好不要返回404 Not Found响应，保证favicon.ico存在。同时，为了减少其带来的负面影响，我们要注意以下几点：

- 使favicon.ico文件尽可能地小，最好小于1KB。

- 在适当的时机为其设置Expires文件头，保持可缓存性。可以将Expires文件头设置为未来几个月。

- 在更换favicon.ico时，应该避免重命名文件，以免影响缓存。可以通过检查当前favicon.ico的上次编辑时间来判断是否需要更换。

31、跳转的正确使用

在页面中添加跳转会导致页面中的所有元素都无法显示，因为在加载HTML文件之前，浏览器不会下载任何文件（如图像、Flash等）。跳转功能有时被开发者忽视，但实际上会浪费响应时间。

另一种需要注意的跳转情况是连接新旧网站。这种情况下，根据用户不同类型（如浏览器类型、用户账号类型）来进行跳转，往往会影响用户体验。作为替代方法，可以使用Alias和mod_rewrite来实现同一台服务器上的两个网站之间的切换。如果跳转是因为域名不同，可以通过Alias或mod_rewrite来实现跳转，而不是使用跳转功能。

古人云：“时光如梭，画面流转。遵循自然法则，可使网络之旅更为畅快”。避免在HTML中缩放图像，保持favicon.ico小且可缓存，正确使用跳转功能，能够提升网页加载速度和用户体验。