目录
1.首页优化(白屏)
单页面应用的html是靠JS生成,因为首屏需要加载很大的JS文件,所以当网速差的时候会产生一定程度的白屏
办法:
- 优化webpack减少模块打包体积,code-split按需加载
- 服务端渲染,在服务端事先拼装好首页所需的html
- 缓存一定要使用,但是请注意合理使用
- 代码压缩,服务端压缩,浏览器端解压缩
- 首页加loading或骨架屏(仅仅是优化体验)
- 路由懒加载、图片压缩、UI库按需引入
2.Js如何实现函数缓存
闭包、柯里化、高阶函数
3.Js实现缓存
sessionStorage、localStorage、Cookie
4.vuex单向数据流
5.单向数据流与双向数据流的区别
单向数据流:所有状态的改变可记录、可跟踪,源头易追溯;所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性;一旦数据变化,就去更新页面(data-页面),但是没有(页面-data);如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到原有的数据中。
优点
1、所有状态的改变可记录、可跟踪,源头易追溯。
2、所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性。
3、一旦数据变化,就去更新页面(data-页面),但是没有(页面-data)
4、如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到原有的数据中。
缺点
1、HTML代码渲染完成,无法改变,有新数据,就需把旧HTML代码去掉,整合新数据和模板重新渲染。
2、代码量上升,数据流转过程变长,出现很多类似的样板代码。
3、同时由于对应状态独立管理的严格要求(单一的全局store),在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用),会显得啰嗦及繁琐。
双向数据流:无论数据改变,或是用户操作,都能带来互相的变动,自动更新。
优点
1、用户在视图上的修改会自动同步到数据模型中去,数据模型中值的变化也会立刻同步到视图中去。
2、无需进行和单向数据绑定的那些相关操作。
3、在表单交互较多的场景下,会简化大量业务无关的代码。
缺点
1、无法追踪局部状态的变化。
2、“暗箱操作”,增加了出错时debug的难度。
3、由于组件数据变化来源入口变得可能不止一个,数据流转方向易紊乱,若在缺乏“管制”手段,血崩。
————————————————
版权声明:本文为CSDN博主「火腿肠烧烤大赛冠军」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/s2422617864/article/details/122026524