javascript - Need advice on designing a system -

i'm trying design page make work fastest while trying avoid duplication.

basically, i'm going load 3 sets of user's contacts. business contacts, personal contacts, , special contacts, mixture of both business/personal. in essence i'd doing these 3 queries:

select stuff contacts userid = '$userid' , type = 'business'  select stuff contacts userid = '$userid' , type = 'personal'  select stuff contacts userid = '$userid' , isspecial = 1 

these contacts used javascript populate <div>s on page , used in searching contacts on page.

would make more sense load business , personal contacts, loop through them via javascript , use javascript build 3rd list of special contacts, isspecial set 1?

or better 3 sets seperately using mysql query , pass them on javascript 3 seperate sets go?

or should 1 set of contacts mysql long userid = '$currentuser' , sort them seperate lists via javascript when page loads? (i looping through contacts on page load anyway populate respective <div>s, perhaps sort them 3 seperate lists while i'm looping through them?)

or other approach best?

my concern here make fast possible user, while minimizing strain on database server.

imo it's better if use mysql contacts separately mysql comparatively faster. in case if javascript turned off in users browser, or if using mobile browser, you'll not able segregate contacts.

edit

as has pointed out, javascript minimum requisite site, best way use single go single query data , segregate using js.