前后端分离，这种开发方式大大提升了前后端项目的可维护性与开发效率，让前后端工程师关注于自己的主业。然而在带来便利的同时，也带来了一些弊端，比如首屏渲染时间(FCP)因为首屏需要请求更多内容，比原来多了更多HTTP的往返时间(RTT)，这造成了白屏，如果白屏时间过长，用户体验会大打折扣，如果用户网速差，则FCP会更长。
为了优化首屏渲染时间这个指标，减少白屏时间，前端仔们想了很多办法：
-
加速或减少HTTP请求损耗：使用CDN加载公用库，使用强缓存和协商缓存，使用域名收敛，小图片使用Base64代替，使用Get请求代替Post请求，设置
Access-Control-Max-Age减少预检请求，页面内跳转其他域名或请求其他域名的资源时使用浏览器prefetch预解析等； -
延迟加载：非重要的库、非首屏图片延迟加载，SPA的组件懒加载等；
-
减少请求内容的体积：开启服务器Gzip压缩，JS、CSS文件压缩合并，减少cookies大小，SSR直接输出渲染后的HTML等；
-
浏览器渲染原理：优化关键渲染路径，尽可能减少阻塞渲染的JS、CSS；
-
优化用户等待体验：白屏使用加载进度条、菊花图、骨架屏代替等；
网友评论