Sharepoint Framework Web部件加载时间问题

Question

我在Web部件的加载时间(15秒(方面面临一些挑战。我从列表中提取数据，并将其绑定到ajax中的下拉控件，但由于涉及异步调用，它有一些等待时间。

我需要更好的表现来实现这一点。任何人都能提供真知灼见吗。

function getPackingSites()
{
var packagingSiteUrl = siteAbsUrl + "/_api/web/lists/GetByTitle('"+packingSiteList+"')/Items";
var packagingSiteOptions ="";
$.ajax({
url:packagingSiteUrl,
method: "Get",
async: false,
headers: {
"accept": "application/json;odata=verbose",
},
success: function (PackingSiteData) {
if (PackingSiteData.d.results.length > 0) {
for (var i = 0; i < PackingSiteData.d.results.length; i++) {
packagingSiteOptions += "<option value='"+PackingSiteData.d.results[i].ID+"'>"+PackingSiteData.d.results[i].Title+"</option>";
}
}
},
error: function (x, e) {
alert(e.message.tostring());
}
});
$("#PackingSiteDropdwn").html(packagingSiteOptions);
var tempLink = '<a id="newformSubmit" class="btn offset" href="'+siteAbsUrl+'/pages/Create.aspx?PackSiteID='+$("#PackingSiteDropdwn").val()+'&Source='+siteAbsUrl+'">Submit</a>';
$("#newformSubmitSpan").html(tempLink);
}
}

Answer 1

您正在使用同步调用来渲染Web部件，这将增加Web部件加载时间。

我建议你使用异步数据刷新，你可以很容易地使用react框架。

当Web部件第一次加载时，向用户显示提示信息，如"数据加载"，当异步调用数据返回时，显示实际数据。

return (      
<div className={ styles.fileViewCounter }>
default content
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>              
<table className="tree">
<thead>
<tr>
<th className={styles.THWidth}>Folder/File</th>
<th >Views</th>
<th >Viewers</th>
</tr>
</thead>                
{ this.state.FileViewResult
? <tbody dangerouslySetInnerHTML={{ __html: this.state.FileViewResult}}></tbody>
: <tr><td align={"center"} colSpan={3}>Data Loading...</td></tr>
}                
</table>          
</div>
</div>
</div>
</div>
)

您可以查看github示例或我的演示项目中的异步数据刷新。

Answer 2

从搜索中获取项目对您来说是一个选项吗？