How to improve jQuery performance with appending icons? - javascript

I am building a spreadsheet editor with jQuery and I am encountering performance issues with big tables.
The table holds many data sets and when clicked on one, icons are added to the first cell of the other sets. The code looks like this:
$('.click_icon').remove();
for (var i = 0; i < datasets.length; i++) {
var first_cell = $('td.content[dataset="' + datasets[i].id + '"]').filter(':first');
if (in_group(datasets[i].id)) {
first_cell.append('<i class="icon-remove click_icon remove_group" style="float:right"></i>');
} else {
first_cell.append('<i class="icon-magnet click_icon add_group" style="float:right"></i>');
}
with 500+ datasets this takes about 5 seconds. in_group() is just a small function which checks if the set is in a group with the selected data set.
I was wondering if creating the icons prior to the click and using show() hide() would be faster? Any other ideas?
I am using Chromium on Ubuntu. (Version 28.0.1500.52 Ubuntu 12.04)

Build the table in memory and only change the DOM once :
$('.click_icon').remove();
var table = $('table');
var clone = table.clone(true);
for (var i = 0; i < datasets.length; i++) {
var _class = in_group(datasets[i].id) ?
'icon-remove click_icon remove_group' :
'icon-magnet click_icon add_group',
elem = $('<i />', {'class': _class, style:'float:right'});
$('td.content[dataset="' + datasets[i].id + '"]', clone).filter(':first')
.append(elem);
}
table.replaceWith(clone);
This is a general example, you may have to adjust this to make it work properly with your markup.
I'd normally use plain JS for performance, and documentFragments, but I think jQuery uses fragments internally when doing it this way.

In my experience, appending element by string is worst for performance than creating element by DOM.
So try anything like this:
if (in_group(datasets[i].id)) {
var i = document.createElement('i');
i.className = 'icon-remove click_icon remove_group';
i.style.float = 'right';
first_cell.appendChild(i);
}

If you expect the users to click, I think creating the icons prior to the click is a good idea.
Instead of show/hide which toggles the display property, you could use the visibility property. When the visibility changes from hidden to visible, the browser doesn't need to recalculate the layout.

Related

Add sap.ui.commons.CheckBox onto a sap.m.page

I'm new to SAPUI5 and want to make a page, with contains several CheckBoxes, based on SAPUI5. At this moment I have following code to create the CheckBoxes:
function chosevalues(){
re_items = [];
var items = [];
var text = ["1070","1071","1072","1073","1074","1075","1076"];
for (var i = 0; i < text.length; i++) {
alert("in for with i= " + i);
var box = new sap.ui.commons.CheckBox({
text : text[i],
tooltip : 'Value checkbox',
checked : false,
change : function() {
if(oCB.getChecked()){
alert(this.getText());
re_items.push(this.getText());
}else{
alert('NO');
}
}
});
items.push(box);
}
page4.addContent(items);
app.to("page4");
}
Now I place the array on the page-content, but the text and the boxes are very small.
I tried with a sap.ui.table.Table and also with a sap.m.List. Nothing worked.
It should be like this: SAPUI5 Explored - CheckBox
But I found no way to include the mvc-view in my javascript code.
On the one hand I can programm with javascript to create the CheckBoxes like the example, and on the other hand I can try to include the mvc-view.
The Problem is, that I have no idea for both.
in SAPUI5 there are 2 major libraries - sap.ui.commons (for desktop only) and sap.m (for both desktop and mobile).
You have to decide which library suits most to your needs and go for it.
What you were trying to achieve (large check boxes) is possible only when using sap.m library.
Here is a small examle code based on your function:
var text = ["1070","1071","1072","1073","1074","1075","1076"];
var oVBox = new sap.m.VBox();
for (var i = 0; i < text.length; i++) {
oVBox.addItem(new sap.m.CheckBox({text:text[i]}));
}
And here is a demonstration: LINK

Javascript - Dynamic Expand/Collapse All

I have a jQuery Tree Report that I am trying to create 'expand/collapse all' buttons for.
The following two pieces of code are fired when the corresponding buttons are pressed and work great:
for (i = 1; i < 100; i++) {
var el = $('#dtt_2597807651112537_table tbody tr')[i - 1];
// store current level
var level = Number($(el).attr('dtt_level'));
// change icon
$(el).find('span.dtt_icon').removeClass('dtt_collapsed_span');
$(el).find('span.dtt_icon').addClass('dtt_expanded_span');
while ($($(el).next()).attr('dtt_level') != null) {
var el = $(el).next();
if ($(el).attr('dtt_level') == (level + 1)) {
// change display
el.removeClass('dtt_collapsed_tr');
el.addClass('dtt_expanded_tr');
} else if ($(el).attr('dtt_level') == level) {
break;
}
}
}
for (i = 1; i < 100; i++) {
// get related table row
var el = $('#dtt_2597807651112537_table tbody tr')[i - 1];
// store current level
var level = Number($(el).attr('dtt_level'));
// change icon
$(el).find('span.dtt_icon').addClass('dtt_collapsed_span');
$(el).find('span.dtt_icon').removeClass('dtt_expanded_span');
while ($($(el).next()).attr('dtt_level') != null) {
var el = $(el).next();
if ($(el).attr('dtt_level') > level) {
// change display
el.addClass('dtt_collapsed_tr');
el.removeClass('dtt_expanded_tr');
// change icon
$(el).find('span.dtt_icon').addClass('dtt_collapsed_span');
$(el).find('span.dtt_icon').removeClass('dtt_expanded_span');
} else if ($(el).attr('dtt_level') == level) {
break;
}
}
};
However, I was wondering if anyone had a nice way to:
1) Get the number of rows that need to be looped through - I just put 100 as a large number to prove my code worked and I don't want to just increase this to an even larger number.
2) Get the class name from the page source - The large number in "dtt_2597807651112537_table" is a report ID generated by the application. This is static for now but I want to eliminate any problems if it changes.
Thanks.
This is all wrong. Well, it's working against how jQuery works, in any case.
jQuery's credo is:
Select elements
Do stuff to them
Drop your loops. You don't need them.
For example. To toggle the icon on all span.dtt_icon in your document, do
var collapsed = true;
$("#dtt_2597807651112537_table span.dtt_icon") // select elements
.toggleClass('dtt_collapsed_span', collapsed) // do stuff to them
.toggleClass('dtt_expanded_span', !collapsed);
or, as a function that can both collapse and expand:
function toggleTree(tree, collapsed) {
$(tree).find("span.dtt_icon")
.toggleClass('dtt_collapsed_span', collapsed)
.toggleClass('dtt_expanded_span', !collapsed);
}
To collapse only the currently expanded ones...
$("#dtt_2597807651112537_table span.dtt_icon.dtt_expanded_span")
.toggleClass('dtt_collapsed_span', true)
.toggleClass('dtt_expanded_span', false);
and so on.
You can boil down your entire code into a few lines that way, and you don't need to write a single loop: Use smart element selection (via jQuery selectors and any of jQuerys find, filter and traversal functions) to single out the elements you want to manipulate and then manipulate them all at once in a single step.
To your second question. There are many ways, pick one:
use known page structure to determine the right table (e.g. $("div.main > table:first") or something to that effect)
use known table contents to determine the right table (e.g. $("table:has(span.dtt_icon)"))
use the table's other classes ($("table.treeReport") maybe?) or for example the table's ID with and a "starts-with" selector ($("table[id^=dtt_]")).
Again it's all about selecting your elements smartly. A dive into the jQuery API documentation, in this case the part about selectors, is recommended.

Efficient way of changing background color of an element in CSS3 or HTML5

I need to change each item's color in a list after a reorder or removing one item, now I am using jquery's css method like below
$('li').css('background-color', color);
It works, but terribly slow, and sometimes the page will render the color incorrectly, even on Chrome, which is supposed to be fast. The list doesn't have many items, below 10, usually 5 - 7. So this performance is not acceptable. So I want to know if there is a better, faster way in CSS3, or HTML5. If not, if there is an walkaround or some kind of jquery solution?
The code for refreshing list items' color is as below. The index can be decided by a function and the color can decide color by it. The major issue I think is that changing background color trigger reflow or maybe rerendering.
function refreshListItemColor(liElements, colorGetter, indexGetter) {
colorGetter = colorGetter || (function (color) {
return color;
});
indexGetter = indexGetter || (function (liElement, index) {
return index;
});
liElements.each(function (index, liElement) {
index = indexGetter(liElement, index);
var data = ko.dataFor(liElement);
var indexColor = colorForIndex(index);
indexColor = colorGetter(indexColor, data);
if (indexColor !== $(liElement).css('background-color')) {
$(liElement).css('background-color', indexColor);
}
});
}
Update: using element.style['background-color'] won't do. The issue still remains. Another possible explanation for the lagging is that every list item itself has about 10 child elements, making change list item's color particularly expensive.
Update2: I'll try to ask a related question: is there a way to change the color of the background of the parent node without triggering a rerender of children elements?
Update3: I tried to add delay for each color change operation, like below
var delay = 100, step = 100;
liElements.each(function (index, liElement) {
index = indexGetter(liElement, index);
var data = ko.dataFor(liElement);
var indexColor = colorForIndex(index);
indexColor = colorGetter(indexColor, data);
if (indexColor !== $(liElement).css('background-color')) {
setTimeout(function () {
liElement.style['background-color'] = indexColor;
}, delay);
delay += step;
}
});
It seems can alleviate this issue a lot. I guess this will not solve the problem, but will reduce the impact to an acceptable level.
Could you use attribute selectors in your stylesheet?
[data-row="1"][data-col="3"]{
background-color: blue;
}
I noticed that If you want to select a whole row or column you have to use !important
[data-col="3"]{
background-color: blue !important;
}
(edit)Adding styles dynamically
Create a empty style tag with a div
<style type="text/css" id="dynamicstyle"></style>
and just append to it like any other tag
$("#dynamicstyle").append('[data-row="0"]{background-color:red !important;}');
for your case you can check whenever an element is added and add a row style since in theory the user could pile up all of the elements.
$(function () {
var maxRows = 0;
$("ul").bind("DOMSubtreeModified", updateStyleSheet);
function updateStyleSheet() {
var childCount = $("ul").children().length;
if (maxRows < childCount) {
maxRows = childCount;
var newRule = [
'[data-row="',
maxRows,
'"]{background-color:', ((maxRows % 2) ? "red" : "blue"),
' !important;}'].join('')
$("#dynamicstyle").append(newRule);
}
}
});
http://jsfiddle.net/PgAJT/126/
FizzBuzz rows http://jsfiddle.net/PgAJT/127/
Remove your "if", which may force browser to redraw/recompile/reflow latest CSS value.
if (indexColor !== $(liElement).css('background-color')) {
Yes, read are slow and as they will block write-combine.
Presumably, the colour is determined by the position of the element in the list.
Use nth-child or nth-of-type selectors in your stylesheet.
Hi i have just tried wat u need just check it..
http://jsbin.com/awUWAMeN/7/edit
function change()
{
var colors = ['green', 'red', 'purple'];
alert(colors)
$('.sd-list li').each(function(i) {
var index = $(this).index();
$(this).css('background-color', colors[index]);
});
}
I've created a simple test with 10 list items, each with 12 children and setting the background colour for every item each time Gridster's draggable.stop event fires. The change is pretty much instantaneous in IE11 and Chrome.
To me, this suggests it isn't the CSS rendering that's slow, but maybe the calculations determining which colours are for which elements.
This is the JavaScript I was using:
var colors = ['#000', '#001', '#002', '#003', '#004', '#005', '#006', '#007', '#008', '#009', '#00a', '#00b'];
$('.gridster ul').gridster({
widget_margins: [10, 10],
widget_base_dimensions: [120, 120],
draggable: {
stop: function (e, ui, $widget) {
refreshListItemColor();
}
}
});
function refreshListItemColor() {
var sortedElements = [];
$('ul > li:not(.preview-holder').each(function () {
sortedElements.push([this, this.getAttribute('data-col'), this.getAttribute('data-row')]);
});
sortedElements.sort(function (a, b) {
return a[1] - b[1] || a[2] - b[2];
});
for (var i = sortedElements.length - 1; i >= 0; i--) {
sortedElements[i][0].style.backgroundColor = colors[i];
}
}
How are you determining which colours to set on each list item?
I've find it fast to create a class with the css attributes you want and then add that class to the dom element you want the css attribute applied to. CSS rules appear without refresh.
css:
.bg-green{
background:green;
}
js:
$("#someDomId").toggleClass('bg-green','add');
A cool way of dealing with lists is to index the id of each list element as you create/alter it:
Create list:
for (i=0;i=m;i++){
var listElement = "<li id='"+i+">Some Content</div>";
$('ul').append(listElement);
}
Then instead of iterating through a dom element (which is expensive) you can run another for loop and alter each list element by selecting it's id.
for (i=0;i=m;i++){
$("#"+i).toggleClass('bg-green','add');
}

Convert jQuery script to standalone javascript

Is it possible for this jQuery code to run as a standalone javascript? This is the only javascript I'd like to use in my project so I'd prefer not to load the entire jquery library just for this 1k script.
//chris coyier's little dropdown select-->
$(document).ready(function() {
//build dropdown
$("<select />").appendTo("nav.primary");
// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Go to..."
}).appendTo("nav select");
// Populate dropdowns with the first menu items
$("div#brdmenu ul li a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("nav.primary select");
});
//make responsive dropdown menu actually work
$("nav.primary select").change(function() {
window.location = $(this).find("option:selected").val();
});
});
I've tried to find previous answers but most questions are for converting to jquery and not vice-versa :)
It is obviously possible to do those things in straight javascript, but there is no way (that I am aware of) to automatically do that conversion. You will have to go through line by line and do the conversion yourself.
Here is something similar to market's answer. I'm assuming you want to get all the links in UL elements inside the brdmenu element. If you only want the first link on the LI elements, just adjust the loop that gets them.
Also, this is not a good idea. Using select elements for links went out of fashion a long time ago, users much prefer real links. Also, when navigating the options using cursor keys in IE, a change event is dispatched every time a different option is selected so users will only get to select the next option before being whisked away to that location. Much better to add a "Go" button that they press after selecting a location.
The main change is to use an ID to get the nav.primary element, which I assume is a single element that you should be getting by ID already.
function doStuff() {
function getText(el) {
return el.textContent || el.innerText;
}
var div, link, links, uls;
// Use an ID to get the nav.primary element
var navPrimary = document.getElementById('navPrimary');
// Create select element and add listener
var sel = document.createElement('select');
sel.onchange = function() {
if (this.selectedIndex > 0) { // -1 for none selected, 0 is default
window.location = this.value;
}
};
// Create default option and append to select
sel.options[0] = new Option('Go to...','');
sel.options[0].setAttribute('selected','');
// Create options for the links inside #brdmenu
div = document.getElementById('brdmenu');
uls = div.getElementsByTagName('ul');
for (var i=0, iLen=uls.length; i<iLen; i++) {
links = uls[i].getElementsByTagName('a');
for (var j=0, jLen=links.length; j<jLen; j++) {
link = links[j];
sel.appendChild(new Option(getText(link), link.href));
}
}
// Add select to page if found navPrimary element
if (navPrimary) {
navPrimary.appendChild(sel);
}
}
window.onload = doStuff;
It's only 28 lines of actual code, which is only 10 more than the original, doesn't require any supporting library and should work in any browser in use (and most that aren't).
Have a go with this.
The one thing I'm leaving out is $(document).ready, but there are a number of solutions for that available on stackoverflow. It's a surprisingly large amount of code!
But the other functionality:
// build the dropdown
var selectElement = document.createElement('select');
var primary = document.getElementsByClassName('primary')[0];
// create a default option and append it.
var opt = document.createElement('option');
var defaultOpt = opt.cloneNode(false);
defaultOpt.selected = true;
defaultOpt.value = "";
defaultOpt.text = "Go to...";
selectElement.appendChild(defaultOpt);
// populate the dropdown
var brdmenuUl = document.getElementById('brdmenu').getElementsByTagName('ul')[0];
var listItems = brdmenuUl.getElementsByTagName('li');
for(var i=0; i<listItems.length; i++){
var li = listItems[i];
var a = li.getElementsByTagName('a')[0];
var newOpt = opt.cloneNode(false);
newOpt.value = a.href;
newOpt.text = a.innerHTML;
selectElement.appendChild(newOpt);
}
// now listen for changes
if(selectElement.addEventListener){
selectElement.addEventListener('change', selectJump, false);
}
else if(selectElement.attachEvent){
selectElement.attachEvent('change', selectJump);
}
function selectJump(evt){
window.location = evt.value;
}
primary.appendChild(selectElement);​
some notes!
We're not looking specifically for nav.primary, we're just finding the first occurrence of something with class .primary. For best performance, you should add an ID to that element and use getElementById instead.
Similarly with the lists in #brdmenu, we look for the first UL, and the first A inside each LI. This isn't exactly what the jQuery does, if you are going to need to iterate more than one UL inside #brdmenu you can use another for loop.
I think that should all work though, there's a fiddle here

Attaching change() even listeners to select/dropdown dynamically

I'm creating 3 dropdowns/select boxes on the fly and insert them in the DOM through .innerHTML.
I don't know the ID's of the dropdowns until I created them in Javascript.
To know which dropdowns have been created, I create an array where I store the ID's of the dropdowns I have created.
for(var i=0; i<course.books.length; i++)
{
output+="<label for='book_"+course.books[i].id+"'>"+ course.books[i].name +"</label>";
output+="<select id='variant"+course.books[i].id+"' name='book_"+course.books[i].id+"'>";
output+="<option value='-'>-- Select one --</option>";
for(var j=0; j<course.books[i].options.length; j++)
{
output+="<option value='"+course.books[i].options[j].id+"'>"+course.books[i].options[j].name+"</option>";
}
output+="</select>";
}
Now I have an array with 3 id's like:
dropdown1
dropdown2
dropdown3
What I want to accomplish with Javascript (without using jQuery or another framework) is to loop over these 3 dropdowns and attach a change event listener to them.
When a user changes the selection in one of these dropdown, I want to call a function called updatePrice for example.
I'm a bit stuck on the dynamic adding of event listeners here.
Now you have added your code its straight forward and you can ignore my verbose answer !!!
output+="<select id='variant"+course.books[i].id+"' name='book_"+course.books[i].id+"'>";
could become :
output+="<select onchange="updatePrice(this)" id='variant"+course.books[i].id+"' name='book_"+course.books[i].id+"'>";
This will call the updatePrice function, passing the select list that changed
However
IMO its far better (from a performance point of view for a start) to create elements in the DOM using the DOM.
var newSelect = document.createElement("select");
newSelect.id = "selectlistid"; //add some attributes
newSelect.onchange = somethingChanged; // call the somethingChanged function when a change is made
newSelect[newSelect.length] = new Option("One", "1", false, false); // add new option
document.getElementById('myDiv').appendChild(newSelect); // myDiv is the container to hold the select list
Working example here -> http://jsfiddle.net/MStgq/2/
You got the array already? Then you can do this:
function updatePrice()
{
alert(this.id + " - " + this.selectedIndex);
}
var list = ["dropdown1", "dropdown2"];
for(var i=0;i<list.length;i++)
{
document.getElementById(list[i]).onchange = updatePrice;
}
Fiddle: http://jsfiddle.net/QkLMT/3/
That won't work across browsers.
You'll want something like
for(var i = 0; i < list.length; i++)
{
$("#"+list[i]).change(updatePrice);
}
in jquery.

Categories