| 1 |
- <!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<title>当前网页加载时间</title>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css" />
<script type="text/javascript" src="../static/vendor/vue/vue.js"></script>
<script type="text/javascript" src="../static/vendor/require/require.js"></script>
</head>
<body>
<div class="wrapper" id="pageContainer">
<div class="panel panel-default" style="margin-bottom: 0px;">
<div class="panel-heading">
<h3 class="panel-title">
<a href="http://www.baidufe.com/fehelper/feedback.html" target="_blank" class="x-a-high">
<img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：页面性能检测</h3>
</div>
</div>
<div class="panel-body mod-json">
<div id="pageInfo" class="row">
被检测的页面：<span id="pageTitle">{{pageTitle}}</span><br>
页面完整地址：<span id="pageUrl">{{pageUrl}}</span>
</div>
<div id="pageLoadTime" class="row">
<h3>页面各阶段耗时统计：</h3>
<table class="table table-bordered table-striped table-condensed table-hover">
<thead>
<th >事件</th>
<th >单独耗时</th>
<th >累计耗时</th>
</thead>
<tbody>
<tr>
<td>DNS解析</td>
<td id="dns">{{dns}} ms</td>
<td id="dnsTotal">{{dnsTotal}} ms</td>
</tr>
<tr>
<td>建立连接</td>
<td id="connect">{{connect}} ms</td>
<td id="requestTotal">{{requestTotal}} ms</td>
</tr>
<tr>
<td>等待响应</td>
<td id="response">{{response}} ms</td>
<td id="responseTotal">{{responseTotal}} ms</td>
</tr>
<tr>
<td>接收响应</td>
<td id="responseEnd">{{responseEnd}} ms</td>
<td id="responseEndTotal">{{responseEndTotal}} ms</td>
</tr>
<tr>
<td>内容加载</td>
<td id="contentLoaded">{{contentLoaded}} ms</td>
<td id="contentLoadedTotal">{{contentLoadedTotal}} ms</td>
</tr>
<tr>
<td>页面渲染</td>
<td id="domComplete">{{domComplete}} ms</td>
<td id="domCompleteTotal">{{domCompleteTotal}} ms</td>
</tr>
<tr>
<td>总耗时</td>
<td colspan="2" id="loadTotal">{{loadTotal}} ms</td>
</tr>
</tbody>
</table>
</div>
<div id="pageHeaderInfo" class="row" v-show="headerInfo">
<h3>页面HTTP Header统计：</h3>
<table class="table table-bordered table-striped table-condensed table-hover">
<thead>
<th >网页信息</th>
<th >数据</th>
</thead>
<tbody>
<tr v-for="(value,key) in headerInfo">
<td>{{key}}</td>
<td>{{value || '-'}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
|
