性能优化这个问题小公司要求不高，大公司不需要教，因为有工具保证。
62a28dad9fdf63ffc9588e9c20dcd6ec.png
回答这题的思路要从另一道面试题：从敲回车开始到页面展现这个过程发生了什么 入手。以下是主要过程以及相对的解决措施：
- DNS查询消耗时间 ——》减少DNS请求数，即减少域名
- 建立TCP连接（涉及三次握手）比较耗时 ——》尽量合并同一后缀名文件（如
.css\.js） - SSL加密（必要步骤）也耗费时间
- 发起请求耗时相对较少
- 等待渲染时间较长
- 下载资源时间较少
验证：使用开发者工具查看性能
66dcc113fb7565b0359eb6dfc40ebbcb.png
网页性能优化的目的是什么？
- 减少服务器压力
- 增强用户体验(主要讲这个,如何减少加载时间)
HTML层面优化
- 发请求优化：cookie
原因：每一次发起请求都需要带上cookie，用cookie传值不好 - 下载速度依赖用户带宽，提高速度方法是：把CSS内容放在HTML里（参照Google/baidu），浏览器会先读取标签里的内容，所以将CSS放在标签里从而实现优先读取。
多个连接优化
问题：一个1M的JS文件，如何下载比较快？
- 整个文件一个JS
- 拆分成两个500M的JS
3.拆分成4个250M的JS
理论上答案是3.这样可以并行下载4个文件，减少了带宽的占据，但是增加了3次TCP请求时间，在下载时间和TCP请求时间的取舍上，就要具体情况具体测试分析了。
如果是移动端就选择方案1，因为移动端对多文件下载不友好（针对终端优化）
如果选择第3种方案，那么引生出另一个问题：为什么不分得更多？
答：每个浏览器对并行下载有上限。每个域名限制最多同时进行N个下载线程。
关于使用CDN（分散在世界的中转服务器就叫CDN，它们每时每刻都在访问主服务器并将资源传输给用户，以降低下载时间）
大公司的方式
- CDN1 ：专门放图片
- CDN2：专门放CSS
- CDN3：专门放JS
这样虽然增加了CDN查询次数，但是可以下载更多的文件，绕过了浏览器限制
前端工程化问题：给每个资源文件加上版本号进行版本控制
Gzip压缩
为了节约下载时间，HTML在发布之前回打包成Gzip包，下载到本地后浏览器会帮你解压，虽然增加了解压时间，但是减少的时间会是解压时间10倍以上。
优化CSS和JS顺序
CSS放在JS前，否则会增加浏览器渲染时间
代码层面优优化——页面加载优化
- 懒加载
- 所见即所下
- 好处：节省CDN费用，降低服务器压力
- 预加载
- 先下载用户将要看到的
- 好处：增加用户体验
- 缺点：多花钱
- 把页面不同内容实现动态加载，将第一屏做到最小
- 实现思路：当页面下载完成，再请求下一个页面的数据
额外
- 新版的HTTP连接可以复用，不需要做同域名连接优化（不再需要合并文件）
- 最好的下载优化是增加缓存，入口文件做最小化。
