前端性能优化的重要性
跟踪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