[关闭]
@EncyKe 2016-01-02T13:09:24.000000Z 字数 1059 阅读 2240

前端优化:Yahoo军规

前端



一、尽量减少HTTP请求

原理:文本、图片、JS、CSS都会产生HTTP请求;
方法:合并图片、JS、CSS。

二、使用CDN (内容分发网络)

原理:在离客户近处放置一台副本服务器,使客户能够以最近的距离、最快的速度获取内容;
方法:架设副本服务器。

三、添加Expire/Cache-Control头

原理:expire的http头定义资源在本地缓存的过期时间值;catch-control头部
操作流程和expire相似,提供更多选项和处理方式。

四、使用Gzip压缩

原理:压缩后传输,在服务器端配置,能提升文件传输速度;
方法:先压缩文件,再传输至服务器端再压缩。

五、将CSS置于页面前面

原理:提高渲染性能,避免页面空白或者重绘。

六、将JS置于页面后面

原理:根据DOM加载顺序,可以先呈现内容。

七、避免使用CSS表达式

原理:占用资源,影响浏览器性能和用户体验。

八、将JS和CSS作为外置文件引用

原理:提高复用性、可维护性,减小页面体积。

九、减少DNS查询

原理:DNS查询:访问网址(转换为IP),时间至少20 ms;浏览器缓存:IE (30 ms)、FF (60 s)、Chrome (60 s),缓存长可减少DNS重复查找、节省时间,缓存短可及时检测服务器的变化、保证正确性;
方法:单域或多域。

十、压缩CSS和JS

十一、避免重定向

原理:301(永久重定向,被移动到另外位置,使搜索引擎智能);302(临时重定向,页面被找到,但不在原始位置先到旧地址,再到新地址,搜索引擎不友好);重定向将重新请求下载资源,增加了http请求,必须避免。

十二、移除重复的脚本

原理:可以减少文件的大小,另外,就是可以避免出现未知的问题。

十三、配置实体标签 (ETag)

原理:浏览器端与服务器端比较ETag,若相同,说明未作更改,服务器返回304,即令浏览器不用请求、使用用自己的缓存,减少服务器响应。

十四、使用Ajax缓存

原理:POST每次都执行、不被缓存,GET同一域不重复执行,可以被缓存。
POST和GET区别

附:参考

慕课:Yahoo军规
YSlow基于Chrome插件

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注