前端性能优化的重要性

跟踪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