前端性能优化

链路优化

从url访问到整个页面呈现，整个链路优化的思路。

• 静态资源链路
• DNS时间：根据请求的域名查询到对应主机IP的时间
• TCP时间：路由到主机ip，并建立tcp连接的时间

优化建议

• 将html,img,font，css，js这些资源放到cdn上，没有cdn可以放到oss存储服务上，这些会采用分布式部署。
• 尽可能减少外联的css，js，可以在html头部加入dns-prefetch，减少dns解析时间

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//www.zhix.net">
<link rel="dns-prefetch" href="//api.share.zhix.net">
<link rel="dns-prefetch" href="//bdimg.share.zhix.net">

• 压缩css，js，img，font，尽可能减少体积，服务端开启gzip压缩
• 考虑combo请求，减少http请求量
• script加载会阻塞浏览器主线程，可以考虑defer以及async
• 开启静态资源缓存，减少资源下载，建议开启service worker缓存