前端性能优化

一、基础优化：结构、行为、样式最好分开。
1、图片：大小（PS切图、工程化中的压缩），雪碧图（请求资源减少，资源大小的控制）；
2、HTML：碎片化管理，判断每一屏，结构（JS放底部、CSS放头部）；
3、JS：减少全局变量，避免全局污染，造成不必要的损耗；减少DOM操作，增强代码的可重用率（面向对象、组件化）；
4、cookie：设置合理的过期时间，减小大小（在我们进行页面cookie操作的时候，应该尽量保证cookie的数量以及相应的大小。cookie个数最好 < 20~30个；cookie大小最好 < 4K）；
5、http：减少http请求，包括JS、IMG、CSS、AJAX；
6、CDN：使用负载均衡策略，将负载分辨=别放在多个服务器上，减轻服务器压力；
7、工程化：压缩图片、JS、CSS文件，（文件大小压缩、防盗代码、稍微防范安全、提高效率）；
8、直出：降低首屏加载时间
9、兜底容灾：
（1）服务器的接口不稳定，直接挂了，前端展示出问题，甚至空白；
解决：重新请求（超过默认超时时间）、每一次请求缓存到本地，调用时直接访问本地数据、备用接口。
（2）用户安装了某个病毒插件或者网络原因打不开；
解决：监控，报警，数据及时备份

二、组件化开发
1、特点：高内聚低耦合，功能完整，代码独立不会与项目中的其他代码发生冲突。
2、优点：提高开发效率、方便重复使用、简化调试步骤、提升整个项目的可维护性、便于协同开发；
3、如何做到组件化：代码功能的分析抽离、代码段的独立性、功能本身的完善性、统一的接口规则。

三、MVC与MVVM的区别
1、MVC（Model/View/Controller），通信都是单向的。

 M---->V---->C---->M

2、MVVM(Model/viewModel/View/Model),双向绑定，完成页面展示与数据操作分离，即，前后端分离。

view------->viewModel-------->Model------>viewModle