Web网页性能优化
性能的影响因子
- 延迟
- 带宽
- 静态资源
- DNS解析
- TCP握手时间
- SSL握手时间
性能测试工具
- Page Speed Insights
- Chrome User Experience Report
- Google Search Console Speed Report
Fireperf
性能改进方法论
Cache 缓存机制
Cache-Control HTTP Header
- max-age
- max-fresh
A new request is made for a previously requested resource:
- First, check local cache and previous response
- If cache expires, send GET with
IF-none-mathc: <ETag> - If response is 304 Not Modified, then refresh the max-age of that cache.
E-Tag机制传递验证令牌：服务器说没过期，那就不必再次下载完整的资源，因而节约带宽和时间。
E-Tag is the hash of Inode, Modification time and size of a resource file on the server.
强缓存与协商缓存
- 浏览器首先根据 cached response header
expires&cache-control字段判断是否过期，若否则直接用，假装返回个200状态的response 【强缓存】Cache-Control结合max-age和缓存的header字段Date判断Expires失效的绝对时间
- 若过期了，看看是否有
ETag字段，若有则发送带有If-None-Match的请求。再看是否有Last-Modified字段，请求头带If-Modified-Since。【协商】根据response的状态是200还是304判断从response还是缓存读取资源。
加载时机
- Lazy loading 进入屏幕范围才加载，节省流量。
- Preload 告诉浏览器优先加载阻塞首屏时间的关键 资源
- Prefetch 用户可能用到的资源 （下一个页面）
资源文件压缩
- Broti
- HTTP2.0 头文件压缩
- Minification 牺牲代码可读性
- 移除昂贵的library 自己用更短的scripts替代
DNS优化
- 第三方domain的总数量
CDN
压缩传输时间。
