高性能web指南

前端性能优化的重要性

跟踪web页面性能

用户体验
只有10-20%用在了下载HTML文档上，其余80-90%时间花在了下载页面的所有组件上

HTTP概述

accept-encoding 压缩
get last-modified
expires keep-alive

减少HTTP请求

• 图片地图
• css sprites
• 内联图片 data:URL
• 合并脚本和样式表

使用内容发布网络

CDN 节省

添加Expires头

Cache-Control max-age
修订文件名

压缩组件

content-encoding:gzip

将样式表放在顶部

逐步呈现
白屏 将css放在底部
避免白屏 将css放在顶部
使用link将css放在header中

将脚本放在底部

脚本阻塞下载

避免css表达式

事件处理器

使用外部JS和CSS

组件重用

减少DNS查找

DNS缓存和TTL

精简JS

精简css

避免重定向

重定向妨碍显示

移除重复脚本

避免重复脚本

配置ETag

用还是不用

使Ajax可缓存

优化Ajax