加载所有html依赖文件：js，css与浏览器一样

Posted 2021-04-11

我有SPA申请。

主要目标是使用https://artillery.io测试应用程序的性能。

由于应用程序是SPA，我想模仿用户第一次在浏览器中打开应用程序时加载所有静态内容的场景。实际上在artillery场景中的第一次请求期间，我预计将加载所有资源，如html，js和css文件。

一种方法是硬编码在加载资源时执行的所有GET调用，但由于js文件支持版本控制，我需要在新版本发布后立即更改文件名。

在浏览器等测试场景中是否有任何行为方式？例如，当加载html页面时，还加载了所有依赖项？

答案

你可以尝试phantomjs

JS代码：

var timeoutMs = 25000;
var result = {};

var timerId = setTimeout(function() {
    console.log('pageError: timeout');
    page.close();
    phantom.exit();
}, timeoutMs);

var page = require('webpage').create(),
    system = require('system'),
    address, output, size;

page.settings.userAgent = 'Mozilla/5.0 TEST';
page.viewportSize = { width: 1280, height: 1024 };

page.customHeaders = {
    'Connection'     : 'keep-alive',
    'Accept'         : 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
    'Accept-Encoding': 'identity',
    'Accept-Language': 'ru-ru,ru;q=0.8,en-us;q=0.5,en;q=0.3'
};

address = system.args[1];

page.onLoadFinished = function(status) {
    result.loadMS = new Date().getTime() - startTime;
};

var startTime = new Date().getTime();
page.open(address, function (status) {    
    result.status = status;
    clearTimeout(timerId);
    console.log('<<<<RESULT>>>>');
    console.log(JSON.stringify(result));
    setTimeout(function(){
        phantom.exit();
    }, 0);
});

然后叫它：

phantomjs load.js https://artillery.io

结果：

{ “loadMS”：2216， “状态”： “成功”}