前端性能优化35条规则 yahoo -All

Oct 04, 2015WEB点击

前端性能优化35条规则 yahoo -All
前端性能优化35条规则 yahoo -All
前端性能优化35条规则 yahoo -All

前端性能优化7个分类: 页面内容、 服务器、 Cookie、 CSS、 JavaScript、图片、 移动端

一、页面内容

01) 减少`HTPP`请求

02) 减少`DNS`查询

03) 避免重定向

04) 缓存`Ajax`请求

05) 延迟加载

06) 预加载

07) 减少`DOM`元素数量

08) 划分内容到不同域名

09) 尽量减少`iframe`的使用

10) 避免`404`错误

二、服务器

01) 使用`CDN`

02) 添加`Expires`或`Cache-Control`响应头

03) 启用`Gzip`

04) 配置`Etag`

05) 尽早输出`(flush)`缓冲

06) `Ajax`请求尽量使用`GET`方法

07) 避免图片`src`为空

01) 减少`Cookie`的大小

02) 静态资源使用无`Cookie`域名

四、CSS

01) 把样式表放在`<head>`中

02) 避免使用`CSS`表达式

03) 使用`<link>`替代`@import`

04) 避免使用`filter`

五、JavaScript

01) 把脚本防止页面底部

02) 使用外部`JavaScript`和`CSS`

03) 压缩`JavaScript`和`CSS`

04) 移除重复脚本

05) 减少`DOM`操作

06) 使用高效的事件处理

六、图片

01) 优化图片

02) 优化`CSS` `Sprite`

03) 不要在`HTML`中缩放图片

04) 使用体积小、可缓存的`favicon.ico`

七、移动端

01) 保证所有组件都小于`25K`

02) 打包内容分段文档

其他:

Yahoo Developer Network

一、页面内容

二、服务器

五、JavaScript

七、移动端