如何建设一个高性能的网站

摘要：文章根据高性能网站建设指南，通过软件质量属性的六个一级指标，来讨论一个如何建立一个高性能的网站，主要强调了前端工程师的重要性以及前端建设对于一个的网站性能的重要性。

关键词：响应速率 请求 高性能 效率

在书中有几个令我印象深刻的数据，前端的问题可能消耗掉整体时间的80%，而HTML文档只占总相应时间的5%，我大二，大一时期也参加过某些算法类竞赛，在后端中不断的优化代码，节省的时间可能只是毫秒级别，而我在这本书中动不动就看到了以秒为单位的节省方法，这更加体现了前端对于建设一个高性能网站的重要性。那么如何通过提高前端效率来建设一个高性能的网站呢？

1.数量

这个数量指的是发送HTTP请求的数量。理想情况下，一个页面应该使用不多于一个脚本和样式表。因为每多出一个文件，都会额外的发出一次HTTP的请求，当然，这是理想情况，对于一个高性能的网站我们不仅要在意其性能，还要关注他的可维护性以及他的美观。那么我们应该如何在不改变页面的情况下，优化代码，升级页面呢？

1.图片地图和CSS Sprites

如果有五个需要请求的超链接，我们可以将这五个URL放在一张图片上，这样的话就将五个请求转变为了一个请求。虽然他们的原理基本一致，但是CSS Sprites是更好的选择，首先图片地图中的图片必须是连续的，而CSS Sprites并没有这个限制，另外还有一个优点就是CSS Sprites会将降低图片的下载量，也就是大小，因为他降低了图片自身的开销（颜色，格式信息等等）。

2.内联图片

通过使用data：URL模式可以在Web页面中包含图片但无需任何额外的请求，它可以使用在任何需要URL的地方，包括SCRIPT和A标签。

2. 大小

大小主要是HTTP发送请求的大小，根据页面加载请求主要通过下载HTML文件、CSS样式表、JavaScript脚本、图片、视频等资源文件的大小来确定。这些文件的大小会直接影响页面加载速度和性能表现，因此在优化网站性能时需要考虑减小这些文件的大小。采取压缩文件，延迟加载等策略，可以有效减小文件大小，提高页面加载速度，同时也能减少对网络带宽的消耗。通过优化文件大小，可以提升网站的用户体验和性能表现。

1.使用gzip进行文件压缩

gzip是目前最流行的压缩方式之一，相比于zip和deflate，他的压缩效果更好，压缩通常能将响应的数据量减少70%，这是根据Steve统计的数据得出的，但是压缩也会出现问题，就是当浏览器通过代理发送请求时，第一个请求来自于不支持gzip的浏览器，所以缓存为空，代理将请求发送到web服务器时，服务器的响应式未被压缩的。这就没有了压缩的响应被代理缓存起来发送给浏览器，如果反过来请求，则情况可能会更严重。解决的办法就是在web服务器的响应中添加vary头，可以告诉代理根据一个或多个请求头来改变缓存的响应。

2.将样式表放在顶部，脚本放在最后

相信我们都遇到过一个现象就是，在等待页面加载过程中，页面会先白屏然后突然把所有的东西都加载出来了，这就是因为把样式表放在了最后，导致样式是最后加载的，而白屏是对无样式内容闪烁的一种弥补，那么什么是无样式内容闪烁，当页面的内容加载时，文字首先出现，然后是图片，最后又用样式重新描绘了文字和图片，具体效果可以看CSS Flash of Unstyled Content (stevesouders.com)。事实上，把样式表放在最后，加快了整个页面的响应，但从用户的角度来看，页面加载时间更长了，这就是逐步呈现的好处，用户希望尽快能看到页面，就像你在完成一个项目时，希望最快的看到收益，这个原理是一样的，当我们把样式表放在开头时，他会先下载样式表，尽管这不是页面所必须的，但是他能让用户感觉到页面更快的加载出来了，所以我们可以使用LINK标签将样式表放在文档HEAD中。

3.距离

相信我们都会有过这样的体验，当我们身处一个偏远地区的时候，我们的网络会比较差，我们身处电信，联通等的服务中心时，网络会变得快些。这就说明，当我们身处不同的地理位置时，网络请求响应的速度也不同，对于一个网页，当应用程序web服务器更近的时候，页面响应的就越快，另一方面秒如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。那么如何缩短响应的距离呢？

使用内容发布网络

内容发布网络时一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。根据我的理解，使用CDN就相当于为整个服务器笼罩了一层大的网络架构，当用户请求网页时，不用请求这个服务器的中心，而是通过访问这个架构距离你最近的边缘，这样的话，就缩短了访问的距离。他除了能缩短响应时间之外，还有其他的优势，比如备份，扩展存储能力和进行缓存，缓和web流量峰值压力，提供高可用性和可靠性、减轻源服务器负载、防止DDoS攻击等功能。当然，他也有缺点就是：你的响应时间可能会受到其他网站影响，尤其是在共享CDN服务的情况下，当某个网站流量过大或发生故障时，可能会影响到其他使用该CDN的网站的性能。总的来说，使用CDN是提高网站性能和用户体验的有效方法，尤其对于全球范围的网站或服务来说，可以显著减少网络延迟，提高访问速度

4.缓存

我们是否有过这样的感觉，当你第一次访问一个网站和多次访问一个网站时，网站的加载速度是不一样的，这是因为当我们第一次访问的时候，加载了更多的http请求，就如同规则一那样，在理想情况下，我们不使用任何图片，任何脚本，任何样式的时候，他的加载速度是最快的。但这样不现实，于是，利用缓存就可以缩短响应时间。

1.添加Expries头

缓存是有限的，就像页面淘汰一样，当我们一个月不访问，或是访问多个网站，我们第一次被访问的网站的缓存就会被删除，所以，利用Expires头就是为了我们的缓存能更长久的存在，Expires的弊端就是需要与我们的系统时间保持高度一致，因为他是以日期的形式存储的，于是就有了另一个Cache-Control max-age这个头，可以通过设置时间来保证我们缓存的存在时间，通过这两个请求头的组合，就可以大大增加我们的缓存，在一定程度上会缩短我们的响应时间。

2.使Ajax可缓存

Ajax是一种在不重新加载整个页面的情况下，通过异步请求与服务器交换数据的技术。然而，如果Ajax请求的响应不能被缓存，就会导致每次请求都需要从服务器获取数据，增加了网络传输时间和服务器负担，影响了网站的加载速度和响应时间。通过使Ajax请求可缓存，可以有效地利用浏览器和代理服务器的缓存机制，将Ajax请求的响应结果缓存起来。当下次相同的Ajax请求发起时，可以直接从缓存中获取响应数据，而无需再次向服务器请求，从而减少网络传输时间和提高响应速度。

本文探讨了前端工程师在建设高性能网站中的关键角色以及优化前端效率对网站性能的重要性。主要从数量、大小、距离和缓存四个方面对高性能网站的建设提供了方法。是在看完《高性能网站建设指南》后，对其的一些总结与分类，本文涉及的方法是主要的方面，涉及到软件质量属性中的性能，可靠性，可用性，功能性等，文章中缺少的相关佐证的实例，可以去看《高性能网站建设指南》对应的部分，作者Steve都给出了相关的实例以及数据，希望本文可以对读者关于前端网站建设有所帮助。