优化实现方案#
- 减少http请求和冗余数据
- 组件，路由懒加载
- 配置nginx优化
- 优化wepack打包机制
- 使用CDN
- 预渲染
- ssr
- 图片转base64
- 后台分布式部署，负载均衡
首页加载优化(减少白屏时间)#
cdn分发:通过在多台服务器部署相同的副本，当用户访问时，服务器根据用户跟哪台服务器地理距离小或者哪台服务器此时的压力小，来决定哪台服务器去响应这个请求。后端在业务层的缓存:数据库查询缓存是可以设置缓存的，这个对于处于高频率的请求很有用。值得注意的是，接口也是可以设置缓存的，比如获取一定时间内不会 变的资源，设置缓存会很有用。静态文件缓存方案;这个最常看到。现在流行的方式是文件hash+强缓存的一个方案。比如hash+ cache control: max -age=1年。前端的资源动态加载:- 路由动态加载，最常用的做法，以页面为单位，进行动态加载。
- 组件动态加载(offScreen Component), 对于不在当前视窗的组件，先不加载。
- 图片懒加载(offScreen Image), 同上。值得庆幸的是，越来越多的浏览器支持原生的懒加载，通过给img标签加上loading= "lazy"来开启懒加载模式。
利用好async和defer这两个属性:如果是独立功能的js文件，可以加入async属性。如果是优先级低且没有依赖的js，我们可以加入defer属性。渲染的优先级:浏览器有-套资源的加载优先级策略。也可以通过js来自己控制请求的顺序和渲染的顺序。-般我们不需要这么细粒度的控制，而且控制的代码也很不好写。前端做一些接口缓存: 前端也可以做接口缓存，缓存的位置有两个，一个是内存，即保存给变量，另一个是localStorage 。比如用户的签到日历(展示用户是否签到)， 我们可以缓存这样的接口到localStorage ，有效期是当天。或者有个列表页，我们总是缓存上次的列表内容到本地，下次加载时， 我们先从本地读取缓存，并同时发起请求到服务器获取最新列表。页面使用骨架屏:意思是在首屏加载完成之前，通过渲染-些简单元素 进行占位。骨架屏虽然不能提高首屏加载速度，但可以减少用户在首屏等待的急躁情绪。这点很有效，在很多成熟的网站都有大量应用。使用ssr渲染:服务器性能一般都很好，那么可以先在服务器先把vdom计算完成后，再输出给前端，这样可以节约的时间为:计算量/(服务器计算速度.客户端计算速度)。第二个是服务器可以把首屏的ajax请求在服务端阶段就完成，这样可以省去和客户端通过tcp传输的时间。引入http2.0: http2.0 对比http1.1 ，最主要的提升是传输性能，特别是在接口小而多的时候。选择先进的图片格式:使用JPEG 2000 ，JPEG XR，and WebP 的图片 格式来代替现有的jpeg 和png，当页面图片较多时，这点作用非常明显。把部分大容量的图片从BaseLine JPEG 切换成Progressive JPEG (理 解这两者的差别)也能缩小体积。利用好http压缩;使用http压缩的效果非常明显。