前言
首先来看看Network：
DOMContentLoaded：DOM渲染完成时间
Load：当前页面所有资源加载完成时间
关于瀑布流：
- Queueing：浏览器将资源放入队列的时间
- Stalled：因放入队列时间而发生的停滞时间
- DNS Lookup：DNS解析时间
- Initial connection：建立HTTP连接的时间
- SSL：浏览器与服务器建立安全性连接的时间
- TTFB：等待服务端返回数据的时间
- Content Download：浏览器下载资源的时间
前端性能优化的方法
1、页面内容
- 减少HTTP查询次数
- 减少DNS重定向
- 缓存Ajax请求
- 延迟加载
- 预加载
- 减少DOM元素数量
- 划分内容到不同域名
- 尽量减少iframe使用
- 避免404错误
2、服务器
- 使用CDN
- 添加Expires或Cache-Control响应头
- 启用Gzip
- 配置Etag
- 尽早输出缓冲
- Ajax请求使用GET方法
- 避免图片src为空
3、Cookie
- 减少Cookie大小
- 静态资源使用无Cookie域名
4、CSS
- 把样式表放在 < head >中
- 不要使用CSS表达式
- 使用< link >替代@import
- 不要使用filter
5、Javascript
- 把脚本放在页面底部
- 使用外部JS和CSS
- 压缩JS和CSS
- 移除重复脚本
- 减少DOM操作
- 使用高效的事件处理
6、图片
- 优化图片
- 优化CSS Sprite
- 不要在HTML中缩放图片
- 使用体积小、可缓存的favicon.ico
7、移动端
- 保持单个文件小于25KB
- 打包内容为分段multipart文档