关于web性能的思考与分享［05］雅虎 14 条军规—高性能网站建设指南

⭐️ 本文首发自 前端修罗场(点击即可加入)，一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。现在加入，即可参与打卡挑战，和一群人一起努力。挑战成功即可获取一次免费的模拟面试机会，进而评估知识点的掌握程度，获得更全面的学习指导意见，不走弯路，不吃亏！

---

1、尽可能减少http请求

当你打开网页的时候，你所看到的文字、图片、多媒体等，这一切内容都是你从服务器获取的，每一个内容（文件，如js\css\html\json\img…）的获取就是一个http请求。

解决方案： 图片合并、javascript合并、 css合并

2、使用CDN——内容分发网络

cdn:尽可能避免互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器，所构成的在现有互联网基础上的一层智能虚拟网络。cdn系统能够实时的根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息，将用户的请求重新导向离用户最近的服务器节点上。其目的是使用户就近取的所需内容，解决网络拥挤的状况，提高用户访问网站的响应速度。

即：在离你最近的地方，放置一台性能好的、链接顺畅的副本服务器，让你能够以最近的距离、最快的速度获取内容。

但是，cdn是需要money的，因为架设一台副本服务器就意味着要多设置一台服务器，服务器是要钱的，所以，cdn是通过money取的的。

3、添加Expire/Cache-Control头

如果apache开启expire模块，当浏览器发起资源请求的时候，Apache返回资源的同时，会返回一个名为expire的http头。

expire头的内容是一个时间值，值就是资源在本地的过期时间、存在本地。在本地缓存阶段，找到一个对应的资源值，当前时间还没超过资源的过期时间，就直接使用这一个资源，不会发送http请求。

cache-control:它是http协议中常用的头部之一，它是负责控制页面的缓存机制，如果该头部指示缓存，缓存的内容也会存在本地，操作流程和expire类似。不同的是，cache-control有更多的选项，并且也有更多的处理方式。

4、启用Gzip压缩

Gzip是将文件先放在服务器上进行压缩，然后再进行传输。服务器传输给浏览器之后，浏览器会对压缩过的文件重新进行解压缩并执行。实际应用中，我们提出将所有的内容都进行压缩，包括html、php、js、CSS、XML\json等。

如图：

5、将CSS放在页面最上面

理解“层叠”样式表：“层叠”以为着“覆盖”。后面的css能够覆盖前面的css,级别高的CSS能够覆盖级别低得CSS。

将CSS放在页面最上面，是为了避免页面在第一次加载的时候出现“空白“或是“闪烁”的问题。

6、将javascript放在页面最下面

如果在js中我们使用了一个死循环，并且我们的js放在标签中，那么js将一直执行而不会加载body标签的内容，这样就很可怕咯~

7、避免在CSS中使用Expressions

CSS Expressions是CSS表达式，是将CSS属性（可以是固有的属性、自定义属性）与js表达式联合起来使用，即在css属性后使用js表达式，这样css属性的值会等于js计算的结果。

CSS表达式计算频率很惊人！如，页面显示和缩放、页面滚动、移动鼠标的时候，都会重新计算一次。据测试，在页面中随意移动鼠标都能达到1W+的计算量。

8、将javascript和CSS文件作为外部文件引用

在做这条军规的时候，我们提倡“灵活应用”！切不可死背教条！

单独提取的好处：

提高js、CSS的复用性、减少页面体积、提高了js和css的可维护性。

单独提取的缺点：

文件多的情况下增加请求数，但是这一点可以通过缓存优化！

写在页面的情况：

• 只应用在一个页面；
• 一个不经常被访问到得页面；
• 脚本和样式很少的情况；

9、减少DNS查询

DNS的查询过程：请求一个域名，DNS服务器对该域名进行DNS域名解析，转换为ip地址，然后进行DNS查找，最后将查找到对应的域名返回给浏览器。这个过程大约20ms的时间。在20ms的过程中浏览器是得不到任何资源的，所以这一时间内浏览器是一片空白。

如图：

解决方案：

对DNS查询进行缓存。现在浏览器都有对DNS进行缓存，但是不同浏览器缓存时间不同。IE大约30分钟，火狐和chrome大约60s。当缓存时间长时，能够减少DNS的重复查找，节省时间；当缓存时间短时，浏览器会及时检测网站服务器的变化以保证正确性。所以，缓存时间的长短各有好处。

针对这一缓存时间长短问题，我们的解决方案可以根据我们资源是多域还是单域放置。

多域：可以把html、图片、脚本文件提取出来，放置在分别的域名下。 采用多域的时候，要思考采用几个域名合适，不是越多越好！

单域：将文件都放置在一个服务器上。

10、最小化javascript和CSS

减少js\css文件的体积。

方案：在正式上线前将文件用压缩器压缩文件。

11、避免重定向

重定向：原始请求被重新转向到了其他请求。例如，用户想访问页面A，却被指向访问页面B。

在http协议中用2中状态码来标识重定向：

301和302重定向状态码：

301：表示用户请求的页面（如a.com）被移动到了另外的位置(如b.com),用户端在收到反馈后会再发起一个请求去b.com,在这个页面中去下载所需要的资源。

302：表示用户请求的页面被找到了，但是不在原始位置！服务器会返回一个地址，用户端收到反馈后同样会发起另外一个请求去服务器返回的地址中下载资源。

综上所诉，301表示的是一个“永久重定向”，302表示的是一个“临时重定向”。

对于搜索引擎，会不定期的对网站内容进行“蜘蛛爬网”，为了完善搜索引擎的索引结构，让用户更精确的查找到需要的内容。

如果网站中使用了301重定向，搜索引擎在爬网的时候会分析并记录下新地址（b.com）而删除老地址(a.com),以后用户搜a.com就会直接跳转到b.com。

如果使用302重定向，搜索引擎会先找旧地址a.com，在跳转到新地址b.com。

可是，无论301 or 302重定向,都增加了浏览器的请求次数。

12、移除重复脚本

13、配置实体标签Etag

Etag包含在响应头部中，属于http协议。

它用特殊的字符串来标识某个请求资源的版本。

浏览器在向服务器请求资源的时候，服务器会进行比较，如果两边的Etag一致，这意味着该资源没有修改过。这时候服务器会返回一个304码，告诉浏览器可以使用本地缓存的版本。

14、使用AJax缓存

Ajax有2种请求方式：post和get。

post是每次都执行，不被缓存，而get在同一个地址的请求时不重复执行的。

先看下两者的比较：

如图：

实际工作中我们应该通过分析各自的工作方式，来具体设置什么时候使用ajax缓存。

15.Yslow分析插件

在火狐下比较好。会给出对应的优化建议。Yslow是基于firebug的，所以要先安装firebug，在安装Yslow,Yslow会显示在firebug面板上。

❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取一份【免费的优质学习资料】,一起学习，一起进步，不走弯路，不吃亏~