[ECMA你好你好]iFrame大乱炖

一般来讲, 我们现在涉及到 vue+webpack 架构的工程其实是比较多的. 这也是我们团队快速响应前端开发的一个通用技术架构, 实在是太方便了.

物极必反, 最近遇到一个糟心事儿, 还记如何在 webpack 中引入 jquery 么?

本篇文字与 jquery 毫无瓜葛. 只是想到类似于 jquery 这种需要以 provide plugin 方式引入, 以便其它基于全局变量实施挂载的 jq 插件能正常工作. 和本文将要说的坑麦穗两歧.

项目需要在某些页面里使用一个庞大的图形组件, 该组件对浏览器性能消耗极大, 这是背景. 项目前端框架是使用 vue 组织的, 这是背景二.

一开始我们按照传统思路, 将 cesium 直接封装为 vue 组件. 在 vue 组件中初始化 cesium viewer 实例, 并通过 vue 组件的特性向外导出 API.

<!-- 外部容器 Layout.vue -->
<template>
  <ceium-container @pickFeature="onPickFeature" />
</temolate>
<!-- 图形组件封装层 CeiumContainer.vue -->
<template>
  <div ref="cesiumContainer"></div>
</template>
<script>
  let viewer = null;
  function cesiumCreateViewer(dom) {
    viewer = new Cesium.Viewer(dom);
  }
  export default {
    data(){},
    methods: {
      loadCesiumViewer() {
        const { $refs: { cesiumContainer }} = true;
        cesiumCreateViewer(cesiumContainer);
      },
      emitPickFeatureEvent() {
        this.$emit('pickFeature', {});
      }
    }
  }
</script>

大体来说这么写应该还是算标准做法. 为了防止 Vue 对 cesium 所创建的 viewer 实例做无谓的监听, 甚至想到了把它放在 vue component 导出对象之外.

如此做来之后发现, 整个图形组件在网页中运行的性能十分低下. 哪怕仅仅通过vue 初始化组件, webgl 中帧渲染的速度明显减慢了很多. 不负责任的推测—-

使用 iFrame 嵌入图形组件并通过 postmessage 封装一切通讯