答题思路：按照从输入 url 到加载页面的顺序思考，寻找可以优化的点
量化web性能的工具：chrome 检查工具，Audits 选项
DNS 查询
减少 DNS 查询，可以把资源放在一个域名下
使用 CDN (content distribute network, 内容分发网络)加速
- 本质是一种缓存，将数据缓存在离用户最近的地方，使得用户以最快速度获取数据。
建立 TCP 链接
http 请求头加 keep-alive 进行连接复用，减少 TCP 连接次数
HTTP 1.0 默认非 Keep-Alive 模式，每个请求/应答客户和服务器都要新建一个连接，完成之后立即断开连接；用 Keep-Alive 模式（连接重用）时，HTTP 请求头中添加一个字段 Connection: Keep-Alive，服务器也会在响应头中添加一个同样的字段来使用 Keep-Alive。Keep-Alive 功能使客户端到服务器端的连接持续有效，出现后继请求时，能避免了重新建立连接。
HTTP 1.1 默认启用 Keep-Alive ,除非在请求头或响应头中指明要关闭：Connection: Close
HTTP 2.0 多路复用
- 多路复用（MultiPlexing），即连接共享，即每一个 request 都是是用作连接共享机制的。一个 request 对应一个 id ，这样一个连接上可以有多个 request，每个连接的 request 可以随机的混杂在一起，接收方可以根据 request 的 id 将 request 再归属到各自不同的服务端请求里面。
发送HTTP请求
减少http请求，合理设置http缓存
- 合并 CSS , 合并 JavaScript , 合并图片等.将浏览器一次需要的这些文件合并成一个, 那么就只需要一次请求了.
- 使用 http 头中的 cache-control 和 expiress 属性可以设定浏览器强缓存
减小cookie
- cookie 包含在每次请求和响应中, 太大的 cookie 回严重影响数据传输
接收响应
压缩 html , css , js 等文件
通过设置协商缓存，接收响应 304 ,使用缓存资源
服务端采用 Gzip 压缩，客户端接收压缩资源再解压
页面优化
CSS放在顶部<head>中
- 文件逐行解析，遇到标签构建 dom ，但不渲染，只有 CSS 全部下载，解析完毕才开始渲染 dom
JS放在<body>底部，或者使用异步脚本或延迟脚本（不会阻塞 DOM 渲染）
- 加载 JS 会立即执行，会阻塞 dom 渲染，并且 js 放在底部可以拿到之前的节点
懒加载
- 减少首屏加载时间，减少无效资源的加载
- 将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在 data-src 属性中， 当页面滚动的时候需要去监听 scroll 事件，在 scroll 事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为 data-src 的值，这样就可以实现延迟加载。
预加载
- 提前加载需要的资源，比如浏览第一页内容时，提前加载第二页的页面资源