江苏龙网

  1. 主页 > 生活百科 > >

前端开发干货：让 iframe 焕发新生开发( 三 )

前端

  • 组件式的使用方式无需注册，更无需路由适配，在组件内使用，跟随组件装载、卸载
  • 应用级别的 keep-alive子应用开启保活模式后，应用发生切换时整个子应用的状态可以保存下来不丢失，结合预执行模式可以获得类似ssr的打开体验
  • 纯净无污染
    • 无界利用iframe和ShadowRoot来搭建天然的js隔离沙箱和css隔离沙箱
    • 利用iframe的history和主应用的history在同一个top-level browsing context来搭建天然的路由同步机制
    • 副作用局限在沙箱内部，子应用切换无需任何清理工作，没有额外的切换成本
  • 性能和体积兼具
    • 子应用执行性能和原生一致，子应用实例instance运行在iframe的window上下文中，避免with(proxyWindow){code}这样指定代码执行上下文导致的性能下降，但是多了实例化iframe的一次性的开销，可以通过proloadApp提前实例化
    • 包体积只有11kb，非常轻量，借助iframe和ShadowRoot来实现沙箱，极大的减小了代码量
  • 开箱即用不管是样式的兼容、路由的处理、弹窗的处理、热更新的加载，子应用完成接入即可开箱即用无需额外处理，应用接入成本也极低
    • 相应的也有所不足：
    • 内存占用较高，为了降低子应用的白屏时间，将未激活子应用的shadowRoot和iframe常驻内存并且保活模式下每张页面都需要独占一个wujie实例，内存开销较大
    • 兼容性一般，目前用到了浏览器的shadowRoot和proxy能力，并且没有做降级方案
    • iframe劫持document到shadowRoot时，某些第三方库可能无法兼容导致穿透

    【前端开发干货：让 iframe 焕发新生开发】


    推荐阅读


    上一篇：一文掌握SQL基础

    下一篇：c#读写SQLite数据库文件例子