- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在 Internet Explorer 中加载速度非常慢,在 Microsoft Edge 中加载速度稍慢。
基本上,页面会卡住 20 秒,同时执行 js 代码。该代码引入一个 5mb 的 xml 文件并将内容显示为表中的 tr。这带来了数以千计的职位发布。
在 Chrome 中一切正常,几乎是即时的,但是 Microsoft 浏览器的运行速度非常慢。
有什么想法吗?
代码很长,所以在 js fiddle 中 - https://jsfiddle.net/t3h4zqt5/
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results==null){
return null;
}
else{
return results[1] || 0;
}
}
$.fn.extend({
xml_parser : function(el) {
//Construct and display preloader
$('<div id="preload_xml" />').html('<img src="/wp-content/themes/Divi-Child/images/ajax-loader.gif" alt="loading data" /><h3>Setting up the Job List...</h3>').prependTo($('body'));
el.hide();
var e = el;
//Get XML Data
$.ajax({
type: 'GET',
url: 'externalxmlfile',
dataType: 'xml',
success: function(data) {
//Remove preloader HTML & show data
$('#preload_xml').remove();
el.show();
var entries = $(data).find('job'),
xmlArr = [],
xmlArrCity = [];
var xml_zip_array =
entries.each(function() {
//Atrributes from XML nodes
var xml_headline = $(this).find('headline').text(),
xml_city = $(this).find('city').text(),
xml_application = $(this).find('application').text(),
xml_bodycopy = $(this).find('bodycopy').text(),
xml_zip = $(this).find('zip').text(),
xml_benefits = $(this).find('benefits').text(),
xml_qualifications = $(this).find('qualifications').text(),
xml_state = $(this).find('state').text(),
xml_subhead = $(this).find('subhead').text();
var xml_drivertype = $(this).find('drivertypeID').text();
switch(xml_drivertype){
case "19":
xml_drivertype = "Lease Purchase";
break;
case "20":
xml_drivertype = "Company Driver Team";
break;
case "21":
xml_drivertype = "Student";
break;
case "63":
xml_drivertype = "Dedicated Driver";
break;
case "64":
xml_drivertype = "OTR";
break;
case "65":
xml_drivertype = "Regional Drivers";
break;
case "66":
xml_drivertype = "Owner Operator";
break;
default:
xml_drivertype = "Undefined ID";
};
xmlArrCity.push(xml_city);
// Add matched items to an array
xmlArr += '<tr data-filtercriteria="'+ xml_drivertype +'">';
xmlArr += '<td class="clickableTd">'+ xml_headline +'</td>';
xmlArr += '<td class="clickableTd">'+ xml_drivertype +'</td>';
xmlArr += '<td class="clickableTd">'+ xml_city +'</td>';
xmlArr += '<td class="clickableTd stateTd">'+ xml_state +'</td>';
xmlArr += '<td class="popupButton">+</td><td class="popup"><div class="popupContainer"><div class="popupExit">X</div><div class="headline">'+ xml_headline +'</div><div class="popupBodyContainer"><div class="subhead">'+ xml_subhead +'</div><div class="bodycopy">'+ xml_bodycopy +'</div><div class="benefits">Benefits:</br>'+ xml_benefits +'</div><div class="qualifications">Qualifications:</br>'+ xml_qualifications +'</div><div class="application"><a href="'+ xml_application +'" target="_blank">Apply now</a></div></div></div></td>';
xmlArr += '<td class="zipTd">'+ xml_zip +'</td>';
xmlArr += '</tr>';
}); // end each loop
$(xmlArr).appendTo(el.find('table > tbody'));
//Add sort and zebra stripe to table
window.setTimeout(function(){ el.find('table').tablesorter({sortList:[[0,0],[0,0]], widgets: ['zebra']});}, 120);
el.find('table').hide().slideDown('200');
//Filter results functionality
var nav_link = $('#xml_nav li a');
nav_link.click( function() {
var tr = el.find('tbody > tr'),
attr_class = $(this).attr('class');
tr.show(); //Show all rows
tr.removeClass('stripe');
$('table > tbody > tr:visible:odd').addClass('stripe');
});
var zipFinal;
var zipFinal2;
var columnFilters = [{}, {}, {}, {}, {}, {}, {}]; // add as many as you have columns
var zipColumnNo = 6;
var stateColumnNo = 3;
var cityColumnNo = 2;
var driverColumnNo = 1;
var cityLength = 0;
// toggle first-column filter:
var fresh = 0;
function applyFilter(filter) {
$('tr').each(function() {
$(this).toggle( // show when no TD has mismatching content
!$(this).find('td').filter(function(idx) {
// return true when content does not match the filter on this column
return filter[idx] && Object.keys(filter[idx]).length &&
!filter[idx].hasOwnProperty($(this).text()) && !filter[cityColumnNo].hasOwnProperty($(this).text().toString().substring(0, cityLength).toLowerCase());
}).length
);
});
};
$('body').on('click', '#zipButton', function() {
if($('#zipid2').val() == "") {
$('tr').show();
columnFilters[zipColumnNo] = {};
applyFilter(columnFilters);
if ($("tbody tr:visible").length === 0) {
$(".resetFilter").addClass('resetFilterVisible')
}
else {
$(".resetFilter").removeClass('resetFilterVisible')
}
}
else {
var apiUrlZip = $('#zipid2').val();
var apiUrlMiles = $('#zipMiles').val();
var apiUrl = "http://api.truckingfeeds.com/ziplist.aspx?key=ced2929f-3621-496f-89aa-1f64fc721b06&zip="+apiUrlZip+"&miles="+apiUrlMiles;
$.ajax({
async: false,
url: apiUrl,
success: function(response){
zipFinal = response;
zipFinal2 = zipFinal.split(',').map(Number);
}});
var newFilter = {};
// turn zipFinal2[] into object with values as properties for faster lookup
zipFinal2.forEach(function(zip) {
newFilter[zip] = 1;
});
columnFilters[zipColumnNo] = newFilter;
applyFilter(columnFilters);
$("#xml_wrapper .tableContainer").css("display", "block");
if ($("tbody tr:visible").length === 0) {
$(".resetFilter").addClass('resetFilterVisible')
}
else {
$(".resetFilter").removeClass('resetFilterVisible')
}
$('#statesUS').val("ALL").change();
$('#jobCity').val("").change();
}});
$("#jobCity").on('keyup change', function() {
if($(this).val() == "") {
$('tr').show();
columnFilters[cityColumnNo] = {};
applyFilter(columnFilters);
if ($("tbody tr:visible").length === 0) {
$(".resetFilter").addClass('resetFilterVisible')
}
else {
$(".resetFilter").removeClass('resetFilterVisible')
}
}
else {
columnFilters[cityColumnNo] = {}; // no filter
cityLength = $(this).val().length;
columnFilters[cityColumnNo][$(this).val().toLowerCase()] = 1;
applyFilter(columnFilters);
$("#xml_wrapper .tableContainer").css("display", "block");
if ($("tbody tr:visible").length === 0) {
$(".resetFilter").addClass('resetFilterVisible')
}
else {
$(".resetFilter").removeClass('resetFilterVisible')
}
}
});
$('#driverTypes').change(function () {
columnFilters[driverColumnNo] = {}; // no filter
if (this.selectedIndex) {
// filter second column on text in selected option
columnFilters[driverColumnNo][$(this.options[this.selectedIndex]).text()] = 1;
}
applyFilter(columnFilters);
$("#xml_wrapper .tableContainer").css("display", "block");
if ($("tbody tr:visible").length === 0) {
$(".resetFilter").addClass('resetFilterVisible')
}
else {
$(".resetFilter").removeClass('resetFilterVisible')
}
});
$('#statesUS').change(function () {
columnFilters[stateColumnNo] = {}; // no filter
if (this.selectedIndex) {
// filter second column on text in selected option
columnFilters[stateColumnNo][$(this.options[this.selectedIndex]).text()] = 1;
}
applyFilter(columnFilters);
$("#xml_wrapper .tableContainer").css("display", "block");
if ($("tbody tr:visible").length === 0) {
$(".resetFilter").addClass('resetFilterVisible')
}
else {
$(".resetFilter").removeClass('resetFilterVisible')
}
});
$('body').on('click', '.resetFilterButton', function() {
$('#zipid2').val("").change();
$('#zipMiles').val($("#zipMiles option:first").val()).change();
$("#xml_wrapper .tableContainer").css("display", "none");
$('#jobCity').val("").change();
$('#driverTypes').val($("#driverTypes option:first").val()).change();
$('#statesUS').val($("#statesUS option:first").val()).change();
$('tr').show();
columnFilters[zipColumnNo] = {};
applyFilter(columnFilters);
$(".resetFilter").removeClass('resetFilterVisible');
});
关于您的信息,这里是页面 http://usxjobs.johngroupinteractive.com/job-search
谢谢
最佳答案
您的代码格式不正确/缩进(在上面的示例中以及在 JSFiddle 中)因此有点难以理解......但总的来说我很惊讶它在 Chrome 和 Firefox 中的速度与它声称的一样快.
简而言之,您的代码是 thrashing the DOM .
首先,您的代码循环遍历一个 5MB 的文件以构建一个 DOM 结构——至少您在这里一次性执行此操作:
$(xmlArr).appendTo(el.find('table > tbody'));
但是随后您对该 DOM 进行了一系列样式调整和其他操作。这些操作中的每一个都要求浏览器将 CSS(和/或其他东西)应用于您刚刚渲染的大量 DOM。 Chrome 和 Firefox(Edge 也是......实际上任何“现代”浏览器)都可以相对较好地处理这些事情,但旧版本的 IE 则不能。
为了加快速度,我的建议是在将巨大的表格呈现给 DOM 之前应用任何 CSS 类、过滤器和其他调整。这样您就可以避免要求浏览器多次循环(大概)数以千计的 DOM 元素。
这里也可能有其他因素导致性能问题。我只是指出更明显的问题。
关于Javascript 代码在 Chrome 中加载不到 2 秒,在 Firefox 中加载不到 4 秒,但在 IE 11 中需要 20 秒,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35326403/
我尝试理解[c代码 -> 汇编]代码 void node::Check( data & _data1, vector& _data2) { -> push ebp -> mov ebp,esp ->
我需要在当前表单(代码)的上下文中运行文本文件中的代码。其中一项要求是让代码创建新控件并将其添加到当前窗体。 例如,在Form1.cs中: using System.Windows.Forms; ..
我有此 C++ 代码并将其转换为 C# (.net Framework 4) 代码。有没有人给我一些关于 malloc、free 和 sprintf 方法的提示? int monate = ee; d
我的网络服务器代码有问题 #include #include #include #include #include #include #include int
给定以下 html 代码,将列表中的第三个元素(即“美丽”一词)以斜体显示的 CSS 代码是什么?当然,我可以给这个元素一个 id 或一个 class,但 html 代码必须保持不变。谢谢
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 7 年前。
我试图制作一个宏来避免重复代码和注释。 我试过这个: #define GrowOnPage(any Page, any Component) Component.Width := Page.Surfa
我正在尝试将我的旧 C++ 代码“翻译”成头条新闻所暗示的 C# 代码。问题是我是 C# 中的新手,并不是所有的东西都像 C++ 中那样。在 C++ 中这些解决方案运行良好,但在 C# 中只是不能。我
在 Windows 10 上工作,R 语言的格式化程序似乎没有在 Visual Studio Code 中完成它的工作。我试过R support for Visual Studio Code和 R-T
我正在处理一些报告(计数),我必须获取不同参数的计数。非常简单但乏味。 一个参数的示例查询: qCountsEmployee = ( "select count(*) from %s wher
最近几天我尝试从 d00m 调试网络错误。我开始用尽想法/线索,我希望其他 SO 用户拥有可能有用的宝贵经验。我希望能够提供所有相关信息,但我个人无法控制服务器环境。 整个事情始于用户注意到我们应用程
我有一个 app.js 文件,其中包含如下 dojo amd 模式代码: require(["dojo/dom", ..], function(dom){ dom.byId('someId').i
我对“-gencode”语句中的“code=sm_X”选项有点困惑。 一个例子:NVCC 编译器选项有什么作用 -gencode arch=compute_13,code=sm_13 嵌入库中? 只有
我为我的表格使用 X-editable 框架。 但是我有一些问题。 $(document).ready(function() { $('.access').editable({
我一直在通过本教程学习 flask/python http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-wo
我想将 Vim 和 EMACS 用于 CNC、G 代码和 M 代码。 Vim 或 EMACS 是否有任何语法或模式来处理这种类型的代码? 最佳答案 一些快速搜索使我找到了 this vim 和 thi
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 想改进这个问题?更新问题,使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve this
这个问题在这里已经有了答案: Enabling markdown highlighting in Vim (5 个回答) 6年前关闭。 当我在 Vim 中编辑包含 Markdown 代码的 READM
我正在 Swift3 iOS 中开发视频应用程序。基本上我必须将视频 Assets 和音频与淡入淡出效果合并为一个并将其保存到 iPhone 画廊。为此,我使用以下方法: private func d
pipeline { agent any stages { stage('Build') { steps { e
我是一名优秀的程序员,十分优秀!