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