ie页面性能优化（持续更新）

1、使用按需加载子组件的方式，引入子组件

   此方法针对页面具有优化，使其在页面效果上更加优秀，在chrome上体现效果不大，但是ie上具有很好的效果，比起之前不再呢么卡顿

  components: {
    engineeringCurve:() => import("./engineeringCurve"),
    drillingFluidCure:() => import("./drillingFluidCure"),
    designResources:() => import("./designResources"),
    constructionOverview:() => import("./constructionOverview"),
    timeStatistics:() => import("./timeStatistics"),
    constructionPeriod:() => import("./constructionPeriod"),
    drillingFluid:() => import("./drillingFluid"),
    wellheadDevice:() => import("./wellheadDevice"),
    wellboreTrajectory:() => import("./wellboreTrajectory"),
  },

上面这三种方式就比下面的更加好，因为这些组件都是子组件，在本页面并不是全部需要一次性渲染出来，所以按需加载的方式，对于页面的效率比较好。

import xxx from "./drillingLog";
import aaa from "./drillingLogNew";
import xxx from "./drillingLog";
import aaa from "./drillingLogNew";
import xxx from "./drillingLog";
import aaa from "./drillingLogNew";

2、keepAlive 和 v-show

<keep-alive> 
<component v-bind:is="currentTabComponent"></component> 
</keep-alive> 

 组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。

v-if 指令会根据表达式重建或销毁元素或组件以及它们所绑定的事件。v-show 指令只是简单地设置 css 属性。

因为 v-if 指令开销较大，所以更适合条件不经常改变的场景。而 v-show 指令适合条件频繁切换的场景。

综上所述，此条方法，虽然针对页面卡顿和效率做了优化，针对ie效率提升明显，但是也有其缺点，需要考虑场景和得失，综合考虑是否适合使用。

3、iframe或者页面本身显示空白，

可能是get请求的接口中带有中文参数，ie下解析乱码，虽然接口可能仍然没报错，但是没有结果，如下图：

所以需要统一编码才行。

乱码原因：浏览器在传递url的时候，会使用自己的编码格式对地址进行编码，如果浏览器所使用编码与服务器采用编码不一致，服务器接收到的参数就会出现乱码。在firefox，chrome下正常，ie下会出现乱码。

解决方法：使用js encodeURI 对地址进行统一编码，但是开发环境下ie浏览器和chrome都可以，而发布到现场，ie可以而chrome又不行了 ，所以还是需要依据浏览器来决定是否编码

4、ie不支持new File 创建文件对象

5、ie不支持某些element-ui组件 ：比如隐藏组件图片预览功能el-image-viewer，引入就会报错，甚至项目启动白屏也就是无法编译，这就是ie的坑逼之处，不兼容的第三方组件，直接不编译，但是也不报错、直接白屏，恶心！！！！！