Hello,

I have php page that takes approx. 30 seconds to load!

This page returns paginating data, 25 row per page.

I am using correct query like "SELECT field1, field2... FROM table1 where..."

My page has scripts tag like: <script>js_function</script>

Now I have 25 rows per page, each row has 2 scripts like: <script>js_function</script>, so total = 50 script tag.

Now functions inside the tags are accessing the mysql database and fetching data from there using the AJAX.

Each row has 50 html elements like buttons, text fields, drop down list that contains elements loaded from DB, <divs>..

So having 25 rows, means to load 25*50 = 1250 element per page!! Does that slow down the page?

I tried the stored procedure in MYSQL, but did not improve any second!

The page DOES NOT contain any photos, even no long text, just 3 columns for NAME, MOBILE and DEPARTMENT and user can change the name, mobile or department.

I have other pages that are loaded in 3 seconds only! But they do not have that much of html elements!

Actually scripts should be integrated inside the PHP code, I can't take them outside.

I am using "Echo" of the script inside the PHP code, like: echo "<script>js_function</script>";

Please advise how can I make the page fast as 5 seconds? Without caching the page on the client??

Thanks.

Recommended Answers

All 21 Replies

Now functions inside the tags are accessing the mysql database and fetching data from there using the AJAX.

Without seeing the code it's difficult to advise you, but when I saw this I cringed. This is probably what is slowing the page down.

If possible, try to grab the values from the database in one XML transfer before you start displaying the page. The typical response time I get from an xmlHTTPRequest is 1/2 second so .5 seconds * 50 requests = 25 seconds, but if you could grab all 50 in one request, you might be able to get it to your target of 5 seconds.

commented: yep +8
Member Avatar for diafol

I agree, make ONE call, just update a div. If you need to update multiple areas of the page, use XML or json. jQuery deals well with these.

If you're paginating, why not send via url (reload)? Is using Ajax in this instance essential?

Thanks guys for your inputs, actually I removed all AJAX Request in the page to try, I just have 50 <script> tag per the page that do normal function when loading the page (remove button and fill the combo box with departments, sometimes one department per each row).

Let us say we have 40 to 50 <script> tags are loaded when opening the page, so do you think that each <script> will take 0.5 second? I think so actually because I have another page that has only 10 <script> tags ONLY and it takes exactly 5 seconds to load!!! What do you think?

What do you suggest in this case?

Thanks a lott!

Member Avatar for diafol

I don't understand why you have 50 calls, I call should suffice? If you post your code, it would help.

I don't understand why you have 50 calls, I call should suffice? If you post your code, it would help.

Because each row has 3 columnns, two of them needed action like "if the field has got name, then remove the button by script, also, if the other field has got departments, then a combo box will appear with departments"

Example of Code:

//PHP:
while($row = mysql_fetch_array($result){// while will be repeated 25 times


//to be repeated 25 times (the number of rows)
<script>ShowDepartments($account_id);</script> //row1
<script>ShowNumber($account_id);</script> //row1
.
.
.
.
.
.
} // while loop

So the two lines above, will be repeated in every row, to assign values and remove controls like button in case they return 1.

I think it's clear now :)

Thanks.

In the words of Fred Z. Randall: "It reminds me of a French Canadian tennis racket... stuck to the back of a Venus snow-goon... bubbling out of my sister's Brazilian donkey - I don't think I can make myself any clearer!"
;)

I have a sneaking suspicion that you're using javascript for things PHP could be doing. I'd still like to see actual code if it doesn't violate the US Patriot Act. At least the PHP code of the while loop, and if they aren't too big the JS functions ShowDepartment and ShowNumber

In the words of Fred Z. Randall: "It reminds me of a French Canadian tennis racket... stuck to the back of a Venus snow-goon... bubbling out of my sister's Brazilian donkey - I don't think I can make myself any clearer!"
;)

What solution you provided to my problem???

I edited my quote while you were posting a reply, so you may not have noticed.

Could you post the PHP while loop code and the JS functions ShowDepartment and ShowNumber? Depending on how dynamic the page has to be I think moving some of the code to PHP from Javascript will help the load time.

In the while, nothing new, I am only extracting 3 values into rows like:

while(.....){

$account_id = $row;
}

in the script function, each function has 3 or 4 lines, like

function(index){

document.getElementById(index).value = xxx;
document.getElementById(index-1).innerHTML = yyy'
.
.
}

The code is very simple and I think that the <script> Tab inside the PHP makes 0.5 second, what do you think guys?

Member Avatar for diafol

Are you using js to provide a button?

you could do this as a longhand:

while(...){
  echo "<td>...</td>";
  if(... == 1){
    echo "<td><button id=\"mybutton{$row['id']}\" onclick = \"removeMe({$row['id']})\"> Remove Me </button></td>";
  }else{
    echo "<td> </td>";
  }
}

However, there are far more efficient ways of doing it using the DOM and event handlers - but you'd know this being a js scripter.

Member Avatar for diafol

Are you using js to provide a button?

you could do this as a longhand:

while(...){
  echo "<td>...</td>";
  if(... == 1){
    echo "<td><button id=\"mybutton{$row['id']}\" onclick = \"removeMe({$row['id']})\"> Remove Me </button></td>";
  }else{
    echo "<td> </td>";
  }
}

However, there are far more efficient ways of doing it using the DOM and event handlers - but you'd know this being a js scripter.

Are you using js to provide a button?

you could do this as a longhand:

while(...){
  echo "<td>...</td>";
  if(... == 1){
    echo "<td><button id=\"mybutton{$row['id']}\" onclick = \"removeMe({$row['id']})\"> Remove Me </button></td>";
  }else{
    echo "<td> </td>";
  }
}

However, there are far more efficient ways of doing it using the DOM and event handlers - but you'd know this being a js scripter.

Thanks but what's the advantage of longhand? I am not doing javascript call depending on user action (onclick), I do add and remove the buttons when loading. for example, some accounts have departments and others do not have, so the account which has department will not add button for it, but will add in the row just the list of department, but the account that does not have department, will have button to add department.

you got me? So I have to use the <script> tag to load either buttons or lists (combo box lists).

Member Avatar for diafol

> So I have to use the <script> tag to load either buttons or lists (combo box lists).

No you don't.

You get the info from the DB and get php to attach whatever form control you want, be it a button or a combobox.

> So I have to use the <script> tag to load either buttons or lists (combo box lists).

No you don't.

You get the info from the DB and get php to attach whatever form control you want, be it a button or a combobox.

Thanks for reply, but I am not getting you. If I want to show button on my PHP page depending on database result when loading the page as below:

while ($row = mysql_fetch_array($result)){

if ($row)
echo "<script>ShowDepartmentList</script>"; // here will show a drop down list contains the department name
else
echo "No Departments"

}// while loop

How can I show departments on loading the page? I have to communicate with javascript to get me the result of department in a list in case there is any.

Please let give an example. Thank you.

Member Avatar for diafol
while ($row = mysql_fetch_array($result)){
 if ($row['department']){
  echo "<select id=\"depts\" name=\"depts\"...(the options)...</select>"; // here will show a drop down list contains the department name
 }else{
  echo "No Departments"
 }
}

As I don't know how the dropdown is created, this may be an alternative.

while ($row = mysql_fetch_array($result)){
 if ($row['department']){
  echo "<select id=\"depts\" name=\"depts\"...(the options)...</select>"; // here will show a drop down list contains the department name
 }else{
  echo "No Departments"
 }
}

As I don't know how the dropdown is created, this may be an alternative.

Thanks for reply. But if I want to remove button that has +4 counter position, I need to use the <script> to go to javascript and do operation from javascript to buttons, text areas, etc..

I think you mean to make the display of the button none or block without the using the <script> like:

if ($row){
echo "<select id=\"depts\" name=\"depts\"...(the options)...</select>"; // here will show a drop down list contains the department name

$show = 'none'
echo "<input type='button' style = 'display:$show'>";

}else{
echo "No Departments"
}


I am using now:

if ($row){
echo "<select id=\"depts\" name=\"depts\"...(the options)...</select>"; // here will show a drop down list contains the department name

echo "<script>RemoveButton</script>"; // this function will make style=none for the button.
echo "<input type='button' style = ''>";

}else{
echo "No Departments"
}


Please can you confirm that this what you mean?

Member Avatar for diafol

Unfortunately, you have only included a small snippet of code, so I am still slightly in the dark as to what you're trying to achieve.

At the moment, I've got an inkling of the following:

A list of the following rows:

<ITEM_NAME_INPUT> [<SELECT LIST OF DEPTS> AND <CHANGE BUTTON>] OR [<REMOVE BUTTON>]

I think this is wrong though. If you could just give a similar type of idea, it would help.

Unfortunately, you have only included a small snippet of code, so I am still slightly in the dark as to what you're trying to achieve.

At the moment, I've got an inkling of the following:

A list of the following rows:

<ITEM_NAME_INPUT> [<SELECT LIST OF DEPTS> AND <CHANGE BUTTON>] OR [<REMOVE BUTTON>]

I think this is wrong though. If you could just give a similar type of idea, it would help.

Actually I removed the <script> tags totally and tested the page, same speed. As I learnt that having html elements (50 element) per each row (text fields, buttons and drop down list), that was the main reason that makes the page slow, not the using of the <script> tag as it's very fast and did not affect the performance. in my page, I have in total rows approximately 1000 HTML element. So how can I make loading them faster? Any idea guys?

Thanks a lot for the participation.

Member Avatar for diafol

Does every row have to have loads of editable controls?
This seems extreme. Why not have some edit button that turns your row into editable form fields?

This is just one example: http://www.appelsiini.net/projects/jeditable

Does every row have to have loads of editable controls?
This seems extreme. Why not have some edit button that turns your row into editable form fields?

This is just one example: http://www.appelsiini.net/projects/jeditable

Thanks for your reply, each row has 3 text fields., so total = 75 text fields.

Member Avatar for diafol

75 text fields should be reasonably quick. Using php to create them (via a loop) should be a snip.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.