我的回答

1. 骨架屏
2. 图片懒加载
3. 路由懒加载
4. cnd
5. 组件异步加载

参考回答

首页加载优化(减少白屏时间):

• CDN分发: 通过在多台服务器部署相同的副本，当用户访问时，服务器根据用户跟哪台服务器地理距离小或者哪台服务器此时的压力小，来决定哪台服务器去响应这个请求
• 后端在业务层的缓存: 数据库查询缓存是可以设置缓存的，这个对处于高频率的请求是很有用。值得注意的是，接口也是可以设置缓存的，比如获取一定时间内不会变的资源，设置缓存会很有用
• 静态文件缓存方案: 现在流行的方式是文件hash+强缓存的一个方案。比如hash+cache control:max-age=1年
• 前端的资源动态加载:
  • 1. 路由动态加载，是最常用的方法，以页面为单位，进行动态加载。
  • 1. 组件动态加载，对于不在当前视窗的组件，先不加载
  • 1. 图片懒加载，越来越多的浏览器支持原生的懒加载，通过给img标签加上 loading=”lazy”来开启懒加载模式
• 利用好async和defer这两个属性: 如果是独立功能的js文件，可以加入async属性。如果是优先级低并且没有依赖的js，我们可以加入defer属性。
• 渲染的优先级: 浏览器有一套资源的加载优先级策略。也可以通过js来自己控制请求的顺序和渲染的顺序。一般我们不需要这么细粒度的控制，而且控制的代码也不好写。
• 前端做一些接口缓存:前端也可以做接口缓存，缓存的位置有两个，一个是内存，即保存给变量，另一个是localStorage。比如用户的签到日历(展示用户是否签到)，我们可以缓存这样的接口到localStorage，有效期是当天。或者有个列表页面，我们总是缓存上次的列表内容到本地，下次加载时，我们先从本地读取缓存，并同时发起请求到服务器获取最新列表
• 页面使用骨架屏: 在首屏加载完成之前，通过渲染一些简单元素进行占位。骨架屏虽然不能提高首屏加载速度，但可以减少用户在首屏等待的急躁心情
• 引入http2.0： http2对比http1.1，最主要的提升是运输性能，特别在接口小而多的时候
• 利用好http压缩:使用http压缩的效果会非常明显