今天被人说：页面加载太慢了……

落日映苍穹つ 2021-07-25 18:30 529阅读 0赞

这是我第一次遇到因为页面加载慢别人说的事……

先说一下项目：

1.  前后端不分离的项目，我开发都是用vs开发，页面扩展名都是.cshtml
2.  由于页面做的是增删改查，详情页面的内容很多，我选择了用vue
3.  引入vue.js和element js和css之后，详情的弹层部分通过iframe来展示

### 项目前后端不分离 ###

本地引入js css文件

### 使用vue ###

window.onresize = function () { 
        vm.tableHeight = document.documentElement.clientHeight - 240;
    }
    var vm = new Vue({ 
        el: "#supplierPool",
        data() { 
            return { 
                tableHeight: document.documentElement.clientHeight - 240,
                fileInput: false,
                title: "查看详情",
                dialogFormVisible: false,
                dialogPersonVisible: false,
                id: null,
                ……
        }
       }
    })

### 弹层部分 ###

这个地方的弹层，我开始用的layui，但是layui传递参数，如果是传递一个参数可以，传递多个的时候有点麻烦，主要是我不熟悉，不想用……

网上查了很多资料，最终决定用iframe标签去渲染，弹层的打开和关闭都用elementUI中的dialog组件。

使用iframe标签做弹层的时候，主要的一个问题就是传参，最终决定用的传参方式是用一个span标签中的自定义属性传参。

子页面的接收如下：

var id = $("#currentId", window.parent.document).data("id");
    var state = $("#currentId", window.parent.document).data("state");
    var isPool = $("#currentId", window.parent.document).data("pool");
    var flag = $("#currentId", window.parent.document).data("flag");

子页面关闭及调用父页面的方法如下：

parent.closeIframe();
     parent.refreshData();

这个地方的refreshData是父页面的一个方法，这个方法一定要挂在到window上，因为parent是window.parent的缩写版。

此时就遇到一个问题：如何将vue中的方法挂载到window上……

哎，真是一个坑接一个坑……

解决方法：

1.  在vue的methods方法中定义refreshData函数
2.  在mounted中写以下代码：

mounted() { 
        var me = this;
        window.closeIframe = me.closeDialog;//关闭弹层，如果用dialog，关闭最好还是在当前的页面
        window.refreshData = me.refreshData;//详情修改后更新列表，也是要触发列表页面的刷新方法
    }

### 页面加载慢 ###

在本地运行的时候，其实还好，但是发布到线上之后，巨慢，慢到10s左右才出来详情页面

在排查页面加载慢的过程中，用到了之前没有用过的东西，感觉自己的知识积累好少，换句话，潜力无穷……

#### 控制台的performance ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
用法是很简单的，如果你想看哪个页面的加载情况，就点击监听（黑点）或者紧挨着的刷新按钮，监听小点会变红色，然后你去触发页面的渲染，页面加载完成后，点击stop，就可以看到这段时间内容的加载情况了……

#### 接口调用时间的打印 ####

页面加载缓慢也可能是接口的问题，这一块怎么排查哪？  
有同事跟我说：在接口开始调用时，定义一个定时器，接口调通后，结束计时。这样就能看到时间了……

其实有个简单的方法：

1.  console.time(“命名”);
2.  console.timeEnd(“命名”);  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
    控制台的打印情况：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
    经过排查，接口调通的时间只有300ms左右，排除接口的问题；

会不会是数据处理的问题：我拿到后台返回的数据后，要进行转化才变成我想要的，这个也用上面的时间处理方式进行了打印，打印结果就是上图中的"chuli"：只有2ms左右，排除是我数据处理的问题。

由于用到的是vue，获取到数据后，就vue自行渲染了，还能是哪里的问题？？？

### 将script引入的文件变成异步 ###

vue本身就是异步的，所以渲染很快，但是我在当前页面body的上面引入了vue.js element-ui.js element-ui.css文件，有朋友建议让我把文件的引入改为异步，因为js是解释型语言，执行会从上到下依次进行。改为异步，可以不阻塞页面。

script文件改为异步的方式：加个async就可以了……

结果在页面加载的时候，如果vue.js文件加载的慢一点，就会出现下面的尴尬情况：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
问题：

1.  页面加载出现问题
2.  控制台报错:提示组件没有正确的注册，因为vue.js还没有加载完成的时候页面中的vue模板语法是不支持的，element中的组件也不支持渲染，因此想要去掉async，还是要同步执行才可以。

排除了上面的问题后，朋友跟我说单独打开这个页面挺快的，我说：怎么单独打开的…………？？？？？

### 线上的项目实现单独打开某个页面 ###

控制台中有个sources，然后在这个左侧的结构中找到对应的文件，然后右击“open in new tab”，既可以打开  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]  
打开之后发现，页面加载还可以，至少没有慢到10s，所以排除整个页面的问题。。。

最后把问题定位到iframe上，因为我详情页面的弹层是通过iframe标签进行渲染的，排除详情页面的各种问题后，只能把问题放在弹层出现的方式上。。

如果iframe标签加载过慢的话，可以考虑用a标签，或者layui中的layer.open…

我还没有来得及改给a标签的渲染方式，后端同事说页面加载变快了，，，，  
所以直到现在，我还不知道为什么页面变快了……

如果有大神知道，可以告诉我，，，谢谢！！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/4760cf24c9874c348d6b65fdfd3f83a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/41ae68bc4b2b4707a758376aa7350fc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/546f348f05184f37b553ac87ff11ae9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20210725/24352938ed5d4083aa1f1b38e893301d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20210725/6f4594e209504e908f53212294f7a02f.png