Web性能优化笔记

性能优化这个问题小公司要求不高，大公司不需要教，因为有工具保证。

62a28dad9fdf63ffc9588e9c20dcd6ec.png

回答这题的思路要从另一道面试题：从敲回车开始到页面展现这个过程发生了什么 入手。以下是主要过程以及相对的解决措施：

1. DNS查询消耗时间 ——》减少DNS请求数，即减少域名
2. 建立TCP连接（涉及三次握手）比较耗时 ——》尽量合并同一后缀名文件（如.css\.js）
3. SSL加密（必要步骤）也耗费时间
4. 发起请求耗时相对较少
5. 等待渲染时间较长
6. 下载资源时间较少

验证：使用开发者工具查看性能

66dcc113fb7565b0359eb6dfc40ebbcb.png

网页性能优化的目的是什么？

1. 减少服务器压力
2. 增强用户体验(主要讲这个,如何减少加载时间)

HTML层面优化

1. 发请求优化：cookie
   原因：每一次发起请求都需要带上cookie，用cookie传值不好
2. 下载速度依赖用户带宽，提高速度方法是：把CSS内容放在HTML里（参照Google/baidu），浏览器会先读取标签里的内容，所以将CSS放在标签里从而实现优先读取。

多个连接优化

问题：一个1M的JS文件，如何下载比较快？

1. 整个文件一个JS
2. 拆分成两个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前，否则会增加浏览器渲染时间

代码层面优优化——页面加载优化

1. 懒加载

• 所见即所下
• 好处：节省CDN费用，降低服务器压力

2. 预加载

• 先下载用户将要看到的
• 好处：增加用户体验
• 缺点：多花钱

3. 把页面不同内容实现动态加载，将第一屏做到最小
   • 实现思路：当页面下载完成，再请求下一个页面的数据

额外

• 新版的HTTP连接可以复用，不需要做同域名连接优化（不再需要合并文件）
• 最好的下载优化是增加缓存，入口文件做最小化。