《Yahoo军规》笔记

2016-02-27 本文已影响35人 8eeb5fce5842

慕课网 Yahoo军规学习笔记

054de337-3e29-46d9-9265-5ed0bde5444e.png

课程里只谈到14条

一、尽可能的减少 HTTP 请求数

HTTP请求：从客服端到服务器端的请求，包括消息首行中，对资源的请求方法资源的标识符及使用协议。
- 打开网页时，文字、图片等内容都是从服务器获取的，每一个内容的获取，就是一个HTTP请求。
所以要进行图片合并、JS合并、CSS合并，以减少请求。

二、使用CDN（内容分发网络）

CDN（内容分发网络）：即尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
在离你最近的地方，放一台性能好链接顺畅的副本服务器，让你能够以最近的距离，最快的速度获取内容。

65d892a8-8d8f-4418-a01a-b2a2296d7f32.png

三、添加Expire或Cache-Control报文头

a86db162-7a9e-4e4c-b2a1-5a55da8b7968.png

5770f2d5-aa0f-4735-b1bd-04a5f64e4002.png

四、启用Gzip压缩

所有的文件都应用Gzip压缩，目前的浏览器都可对其进行很好的解析。
- 如一个80kb的JS文件，进行Gzip压缩后只剩25kb，若在服务器端进行再次压缩，可变为15kb。

五、将css放在页面最上面

不放最前，页面可能会出现重绘和闪烁，影响性能和用户体验。

六、将script放在页面最下面

JS放页面前面，若JS错误，页面会有问题，会阻止其下页面内容的显示。而放最后，即使JS报错，但页面已经加载好了，只是部分功能失效而已。并且JS只是提供行为功能，属于次要内容，先加载会给用户带来网页速度慢的感觉。

七、避免在CSS中使用Expressions

CSS Expressions：即CSS表达式，CSS后面可以是一段JS表达式，CSS属性的值为该表达式计算的结果。
- CSS表达式的计算频率很多，不止只在页面显示和缩放时，在页面滚动或鼠标移动时也会计算。计算量太大，影响性能。

5489ab3c-c4d7-42de-a0b2-b0d0a8f258a4.png

八、把JS和CSS放到外部文件中

对比：

引入外部文件的好处：
- 提高了JS和CSS的复用性。
- 减少页面体积。
- 提高了JS和CSS的可维护性。
引入外部文件的缺点：
- 文件多时，增加请求数。不过可以通过缓存来优化。
写在页面内的好处：
- 减少页面请求。
- 提升页面渲染速度。

写在页面中的情况：

某个脚本或样式只应用于一个页面时。其他页面不会用到。
不经常访问的页面。
脚本和样式很少的时候。

九、减少DNS查询

DNS：将域名转换成IP地址或将IP地址转成域名的一个查找过程。

2bcfad22-5af8-4f0e-8921-3382164babb5.png

在DNS查询时间内，浏览器是得不到任何资源的，浏览器一片空白。若请求过多，对性能会有很大影响。
-可对该过程进行缓存，缓存之后可减少查找过程。目前的浏览器自身就带了这种缓存机制。
- IE缓存时间为30分钟，chrome和FF为60秒。
- 缓存时间长，就可减少DNS的重复操作。
- 缓存时间短，及时的检测网站服务器的变化，保证正确性。
可根据自身网站的需求来设置：
- 多域：图片脚本等，放在分别的域名下。（域名不是越多越好，适当即可）
- 单域：放在一个域名下。

ab153c66-1bbf-4ca4-8b98-c6ea2df99226.png

十、压缩 JavaScript 和 CSS

在正式上线项目前，将JS和CSS都进行压缩，使线上的版本是最轻量级的，可大幅提升网站性能。
- 去除不必要的空格、格式符、注释。
- 简写方法名、参数名。

十一、避免重定向

重定向：即用户的原始请求被重新转向到了其他请求。
- 如用户想访问的页面a，被重新指向了页面b。
HTTP的重定向状态码：
- 301 Moved Permanently： 永久重定向。用户请求的页面被移到了另外的位置。用户端收到该反馈后，会再发起一个请求去那个改变的位置。
- 302 Found： 临时重定向。用户请求的页面被找到了，但不在原始位置。服务器会发一个地址，用户端收到反馈后，会再发一个请求去服务器返回的地址中。
301和302，对用户无区别，因为都是要再请求一次。但对于搜索引擎，区别就大了。
- 若是301，搜索引擎会记录新地址，删除老地址。
- 若是302，搜索引擎不会智能分析，得找旧地址，再跳新地址。
无论301或302，都增加了服务器到客户端的往返次数。会增加HTTP请求。所以应避免使用重定向。

十二、移除重复的脚本

脚本的行为会累加。
增加请求次数。

十三、配置实体标签（ETag）

Entity Tag（实体标签）：包含在响应头部中。属于HTTP协议，受web服务支持。
- 功能：使用特殊字符串来标识某个请求资源版本。
当用户通过浏览器来向服务器请求资源时，服务器会进行比较。若浏览器的ETag和服务器的ETag一致，则意为着，该资源没有修改过。然后服务器会返回一个304码，告诉浏览器对比一致，可以使用本地缓存的版本。
因此ETag会帮助服务器减轻许多负担。

4296ce87-3ad7-418f-97f8-7c06a79057a3.png

十四、使 AJAX 缓存

Asynchronous JavaScript and XML（异步的JavaScript和XML）：
- 可使在不重新加载页面的情况下，使客户端与服务器进行交换数据，可使网站内容分批加载和局部更新。
Ajax请求的两种方法：
- POST：每次都需要抛给服务器进行处理。服务器每次都会返回一个状态码200。（不可以被缓存）
- GET：除非给指定了不同的地址；否则，同一地址的Ajax请求，不会重复在服务器执行，返回的状态码为304。（可以被缓存）
POST和GET的区别：

5367ab3c-95fb-47f6-bf93-3a16b6eb1b64.png

十五、Yslow工具

YAHOO开放的插件，专门用来进行网站性能分析的。基于浏览器的。FF下支持的最好（得先有firebug）。
- 它会对网站进行分析，并给出一些建议和一些规则。我们可按照这些规则和建议来一步一步地优化网站。
暂不支持 36.0 及以上的Firefox版本。