Tabela trava o navegador com grande quantidade de itens a ser renderizados em tela

[MACGYVER_BEST]

Boa tarde!
Estou fazendo uma consulta no banco de dados e ela retorna 16 mil itens em média, mas a tabela que é montada no back-end e apresentada em tela, causa um travamento no navegador até depois de um certo tempo voltar quase ao normal. Gostaria de saber se criar a paginação resolveria esse problema ou tem que fazer alguma outra coisa para que quando haja uma grande quantidade de dados possa apresentar sem travar.

Estou utilizando PHP

obrigado

[Frank K Hosaka]

Eu resolvi o problema apresentando apenas 15 itens no máximo. Não há porque despejar todo o banco de dados na tela do navegador, ninguém vai ver nem sequer os 5.

<?php
include("menu.php");
function fsql($campo,$pessoa) {$fsql="select * from tbpessoa where pessoa>='$pessoa' $campo order by pessoa limit 15";return $fsql;};

// rotina para nova pessoa
if (isset($_POST['novo'])) {
	if (isset($_POST['novoback'])) {
		$pessoa=$_POST['pessoa'];
		$cnpj=$_POST['cnpj'];
		$end=$_POST['end'];
		$tel=$_POST['tel'];
		$nota=$_POST['nota'];
		$query = $mysqli->query("insert into tbpessoa (pessoa,cnpj,end,tel,nota) values ('$pessoa','$cnpj','$end','$tel','$nota')");
		header("location:pessoa.php"); }
	echo "<table><tr><th><th></tr>"
	. "<form method='post'>"
	. "<tr><td><td><font color=blue>Cadastrar Nova Pessoa</tr>"
	. "<tr><td>Nome<td><input name='pessoa' autocomplete='off' size='45'></tr>"
	. "<tr><td>CNPJ<td><input name='cnpj' autocomplete='off'></tr>"
	. "<tr><td>Endereço<td><input name='end' autocomplete='off'></tr>"
	. "<tr><td>Telefone<td><input name='tel' autocomplete='off'></tr>"
	. "<tr><td>Nota<td><input name='nota' autocomplete='off'></tr>"
	. "<tr><td><td><input type='submit' value='Confirmar'></tr>"
	. "<input type='hidden' name='novoback'><input type='hidden' name='novo'>"
	. "</form></table>"; 
	exit;}

//rotina para definir pessoa na tbsupervariavel
if (isset($_POST['codp'])) { 
	$codp = $_POST['codp'];
	$mysqli=new mysqli("localhost","root","","diario");
	$query=$mysqli->query("select pessoa from tbpessoa where codp=$codp");
	$pessoa = $query->fetch_assoc()['pessoa'];
	$query=$mysqli->query("update tbsupervariavel set codp=$codp, pessoa='$pessoa'"); 
	$query=$mysqli->query("select * from tbsupervariavel");
	$row = $query->fetch_assoc();
	$end = $row['end'];
	$ped = $row['ped'];
	if ($end=="orcamento.php") {
		$query=$mysqli->query("update tbpedido set codp = $codp where ped=$ped"); }
	if ($end=="pagar.php") {
		$query=$mysqli->query("select docto from tbsupervariavel");
		$docto = $query->fetch_assoc()['docto'];
		$query=$mysqli->query("update tbcontacorrente set codp=$codp where docto=$docto");}
	echo "<script>location.replace('$end')</script>";}
	
//rotina para atualizar cadastro
if (isset($_POST['detalhe'])) {
	if (isset($_POST['detalhe'])) {
	if (isset($_POST['detalheback'])) { 
		$mysqli=new mysqli("localhost","root","","diario");
		$codp=$_POST['codp'];
		$pessoa=$_POST['pessoa'];
		$cnpj=$_POST['cnpj'];
		$end=$_POST['end'];
		$tel=$_POST['tel'];
		$nota=$_POST['nota'];
		if (empty($pessoa)){;} else {
			$query = $mysqli->query("update tbpessoa set pessoa = '$pessoa' where codp = '$codp'");}
		if (empty($cnpj)) {;} else {
			$query = $mysqli->query("update tbpessoa set cnpj = '$cnpj' where codp = '$codp'");}
		if (empty($tel)) {;} else {
			$query = $mysqli->query("update tbpessoa set tel = '$tel' where codp = '$codp'");}
		if (empty($end)) {;} else {
			$query = $mysqli->query("update tbpessoa set end = '$end' where codp = '$codp'");}
		if (empty($nota)) {;} else {
			$query = $mysqli->query("update tbpessoa set nota = '$nota' where codp = '$codp'");}
		$query=$mysqli->query("select end from tbsupervariavel");
		$end=$query->fetch_assoc()['end'];
		echo "<script>location.replace('pessoa.php');</script>";}
	$mysqli=new mysqli("localhost","root","","diario");
	$codp = $_POST['detalhe'];
	$query = $mysqli->query("update tbsupervariavel set codp = $codp");
	$sql = "select * from tbpessoa where codp = $codp";
	$query = $mysqli->query($sql);
	$p = $query->fetch_assoc();
	echo "<form method='post'>";
	echo "<table><tr><th><th></tr>";
	echo "<tr><td>Código da Pessoa<td><b>".$p['codp']."</tr>";
	echo "<input type='hidden' name='codp' value='".$p['codp']."'>";
	echo "<tr><td align=right>Nome<td><b>".$p['pessoa']."</tr>";
	echo "<tr><td><td><input name='pessoa' autocomplete='off' size=50></tr>";
	echo "<tr><td align=right>CNPJ<td><b>".$p['cnpj']."</tr>";
	echo "<td><td><input name='cnpj' autocomplete='off'></tr>";
	echo "<tr><td align=right>Endereço<td><b>".$p['end']."</tr>";
	echo "<tr><td><td><input name='end' autocomplete='off' size=50></tr>";
	echo "<tr><td align=right>Telefone<td><b>".$p['tel']."</tr>";
	echo "<tr><td><td><input name='tel' autocomplete='off' size=50></tr>";
	echo "<tr><td align=right>Nota<td><b>".$p['nota']."</tr>";
	echo "<tr><td><td><input name='nota' autocomplete='off' size=50></tr>";
	echo "<tr height=20px><td><br></tr>";
	echo "<tr><td><td><input type='submit' value='Confirmar'>";
	echo "<input type='hidden' name='detalheback'>";
	echo "<input type='hidden' name='detalhe'></tr>";
	echo "<tr height=40px><td><br></tr>";
	echo "<tr><td><td><form method='post'><input type='submit' name='novo' value='Novo Fornecedor'></form></tr>";
	echo "</table></form>";
	exit;}}

//rotina para listar e procurar pessoas
if (isset($_POST['pessoa'])) {
	$pessoa=$_POST['pessoa'];
	$campo=$_POST['campo'];
	$busca=$_POST['busca'];
	$escolhido=$_POST['escolhido'];
	$escolha=$_POST['escolha'];
	goto inicio;}
if (isset($_POST['busca1'])) {
	$busca=$_POST['busca1']; 
	$tamanho=strlen($busca);
	for ($i=1;$i<=5;$i++) {
		if (substr($busca,$tamanho-5,5)=="false"){$busca=substr($busca,0,$tamanho-5);$tamanho=$tamanho-5;} else {
			$busca=substr($busca,0,$tamanho-4);$tamanho=$tamanho-4;$escolha=$i;} }
	$pessoa="";
	$compl="like '%$busca%'";
	switch($escolha) {
		case 5: $campo="and pessoa $compl";$escolhido="Pessoa";goto inicio;
		case 4: $campo="and cnpj $compl";$escolhido="CNPJ";goto inicio;
		case 3: $campo="and end $compl";$escolhido="Endereço";goto inicio;
		case 2: $campo="and tel $compl";$escolhido="Telefone";goto inicio;
		case 1: $campo="and nota $compl";$escolhido="Nota";goto inicio;}}
$escolha=5;
$campo="";
$pessoa="";
$escolhido="Telefone";
$busca="";
inicio:
$sql=fsql($campo,$pessoa);
$mysqli=new mysqli("localhost","root","","diario");
$query=$mysqli->query($sql);
$reg=mysqli_num_rows($query);
echo "<table><tr><th>Busca<th align=left>";
echo '<input id=busca1 onchange=inpg.value=value+rpessoa.checked+rcnpj.checked+rend.checked+rtel.checked+rnota.checked;inpg.name="busca1";frmg.submit()>';
echo "<script>busca1.focus()</script>";
echo "<tr><td><td align=left><input type=radio name=op id=rpessoa>Nome <input type=radio name=op id=rcnpj>CNPJ ";
echo "<input type=radio name=op id=rend>End <input type=radio name=op id=rtel>Tel <input type=radio name=op id=rnota>Nota";
$busca2=$busca;if ($busca=="") {$busca2="Nenhum";}
echo "<tr><td><td><script>busca1.placeholder='$busca2'</script>";
switch($escolha) {
		case 5: echo "<script>rpessoa.checked=true</script>";goto prossiga;
		case 4: echo "<script>rcnpj.checked=true</script>";goto prossiga;
		case 3: echo "<script>rend.checked=true</script>";goto prossiga;
		case 2: echo "<script>rtel.checked=true</script>";goto prossiga;
		case 1: echo "<script>rnota.checked=true</script>";goto prossiga;}
prossiga:
while ($row=$query->fetch_assoc()) {
	$codp=$row['codp'];
	$pessoa=$row['pessoa'];
	$json=json_encode($row);
	$codp2="<a onclick=pessoa($codp)>$codp</a>";
	$pessoa2="<a onclick='campo($json)'>$pessoa</a>";
	echo "<tr><td align=right>$codp2<td>$pessoa2";}
if ($reg==0) {echo "<br><br>Nenhuma pessoa econtrada com o critério $busca no campo $escolhido";}
if ($reg==15) {
	echo "<tr><td><td><form method=post>";
	echo '<input type=hidden name=campo value="'.$campo.'">';
	echo "<input type=hidden name=busca value='$busca'>";
	echo "<input type=hidden name=escolhido value='$escolhido'>";
	echo "<input type=hidden name=pessoa value='$pessoa'>";
	echo "<input type=hidden name=escolha value='$escolha'>";
	echo "<input type=submit value=Continuar></form></table>";}