1. 页面渲染过程

• 域名解析（浏览器缓存 -> 系统缓存 -> 路由器缓存……）
• 与服务器建立连接（三次握手）
• 发起HTTP请求（get、post等）
• 服务器处理请求
• 服务器返回http响应
• 浏览器显示html页面：解析html构建DOM树=>构建渲染树=>布局渲染树=>绘制渲染树
• 请求html中的资源（如图片、音频、视频、CSS 、JS 等等）
• 浏览器发送异步请求

2. 优化方案

1. 减少域名解析时间，通过dns预解析
2. 减少服务器响应时间
   • 通过减小cookie体积
   • 开启http2.0
3. 减小页面资源体积（js、css、图片等）
   • 路由懒加载
   • 组件和资源的懒加载()=>import
   • js、css、图片等资源压缩
   • nginx gzip
   • 业务代码和第三方库代码分离
   • ui库，按需加载
   • 图片：雪碧图、webp、base64、懒加载、gzip、cdn
4. 并行请求资源
   • preload预加载资源，不阻塞当前页面渲染
   • 页面资源域名发散
5. 预加载资源，使用link标签的rel属性设置prefetch在空闲时预获取将来会用到的资源
6. 减少首屏展示内容
   • 尽可能减少首屏元素数量，首屏外资源使用懒加载
   • 用异步加载和本地缓存加载数据，