Postingan lainnya

Avoid document.write() di Lighthouse

ada yg bisa tolong bantu buat mengedit javascript yg saya pakai di template xml?

<script type='text/javascript'>/*<![CDATA[*/var relnum=0;
var relmaxposts=5;
var numchars=135;
var morelink=" ";
var reljudul=new Array();
var relurls=new Array();
var relcuplikan=new Array();
var relgambar=new Array();
function saringtags(suchas,panjang)
	{
	var cuplik=suchas.split("<");
	for(var i=0;
	i<cuplik.length;
	i++)
		{
		if(cuplik[i].indexOf(">")!=-1)
			{
			cuplik[i]=cuplik[i].substring(cuplik[i].indexOf(">")+1,cuplik[i].length)
		}
	}
	cuplik=cuplik.join("");
	cuplik=cuplik.substring(0,panjang-1);
	return cuplik
}
function relpostimgthum(json)
	{
	for(var i=0;
	i<json.feed.entry.length;
	i++)
		{
		var entry=json.feed.entry[i];
		reljudul[relnum]=entry.title.$t;
		postcontent="";
		if("content"in entry)
			{
			postcontent=entry.content.$t
		}
		else if("summary"in entry)
			{
			postcontent=entry.summary.$t
		}
		relcuplikan[relnum]=saringtags(postcontent,numchars);
		if("media$thumbnail"in entry)
			{
			postimg=entry.media$thumbnail.url
		}
		else
			{
			postimg="https://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/d/noimagethumb.gif"
		}
		relgambar[relnum]=postimg;
		for(var k=0;
		k<entry.link.length;
		k++)
			{
			if(entry.link[k].rel=='alternate')
				{
				relurls[relnum]=entry.link[k].href;
				break
			}
		}
		relnum++
	}
}
function contains(a,e)
	{
	for(var j=0;
	j<a.length;
	j++)if(a[j]==e)return true;
	return false
}
function relatpost()
	{
	var tmp=new Array(0);
	var tmp2=new Array(0);
	var tmp3=new Array(0);
	var tmp4=new Array(0);
	for(var i=0;
	i<relurls.length;
	i++)
		{
		if(!contains(tmp,relurls[i]))
			{
			tmp.length+=1;
			tmp[tmp.length-1]=relurls[i];
			tmp2.length+=1;
			tmp2[tmp2.length-1]=reljudul[i];
			tmp3.length+=1;
			tmp3[tmp3.length-1]=relcuplikan[i];
			tmp4.length+=1;
			tmp4[tmp4.length-1]=relgambar[i]
		}
	}
	reljudul=tmp2;
	relurls=tmp;
	relcuplikan=tmp3;
	relgambar=tmp4;
	for(var i=0;
	i<reljudul.length;
	i++)
		{
		var informasi=Math.floor((reljudul.length-1)*Math.random());
		var tempJudul=reljudul[i];
		var tempUrls=relurls[i];
		var tempCuplikan=relcuplikan[i];
		var tempGambar=relgambar[i];
		reljudul[i]=reljudul[informasi];
		relurls[i]=relurls[informasi];
		relcuplikan[i]=relcuplikan[informasi];
		relgambar[i]=relgambar[informasi];
		reljudul[informasi]=tempJudul;
		relurls[informasi]=tempUrls;
		relcuplikan[informasi]=tempCuplikan;
		relgambar[informasi]=tempGambar
	}
	var rangkumanPosts=0;
	var r=Math.floor((reljudul.length-1)*Math.random());
	var rini=r;
	var relhasil;
	var dirURL=document.URL;
	while(rangkumanPosts<relmaxposts)
		{
		if(relurls[r]!=dirURL)
			{
			relhasil="<li class='news-title clearfix'>";
			relhasil+="<a href='"+relurls[r]+"' ><img src='"+relgambar[r]+"' alt='"+reljudul[r]+"'/></a>";
			relhasil+="<a href='"+relurls[r]+"' alt='"+reljudul[r]+"'>"+reljudul[r]+"</a>";
			relhasil+="<span class='news-text'>"+relcuplikan[r]+" ... <a href='"+relurls[r]+"' aria-label='"+reljudul[r]+"' target='_top'>"+morelink+"</a><span class='news-text'>";
			relhasil+="</li>";
			document.write(relhasil);
			rangkumanPosts++;
			if(rangkumanPosts==relmaxposts)
				{
				break
			}
		}
		if(r<reljudul.length-1)
			{
			r++
		}
		else
			{
			r=0
		}
		if(r==rini)
			{
			break
		}
	}
}
/*]]>*/</script>

Itu sebagian potongan dari script bawaan di template saya, di lighthouse kode ini

document.write(relhasil); bikin blog saya ga lulus lighthiuse ..kira2 pengganti document.write apa ya?

Avoid document.write()
For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds. Learn more.

Thanks

document.write(relhasil);

javascript

@wartab_google

3 Kontribusi 0 Poin

Diperbarui 3 tahun yang lalu

3 Jawaban:

<div>error relpostingthum : javascript-nya tidak lengkap. posting diatas untuk menunjukkan agar memodifikasi saja. yang ada tetap ada. function relpostingthum di perlukan oleh function relatpost (lihat code-nya)<br><br>error relatpost hapus yang di comment; tampaknya itu masih aktif. Jadi seperti ini saja</div><pre><ul id='relpost_img_sum'> <script defer='defer' type='text/javascript'>relatpost('relpost_img_sum');</script> </ul></pre><div><br>----------------------------------------------------------<br><br>Ganti signature function-nya biar lebih flexible</div><pre>function relatpost(targetElement) { // tambah variable var targetEl = document.getElementById(targetElement); var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); var tmp4 = new Array(0); for (var i = 0; i < relurls.length; i++) { if (!contains(tmp, relurls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relurls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = reljudul[i]; tmp3.length += 1; tmp3[tmp3.length - 1] = relcuplikan[i]; tmp4.length += 1; tmp4[tmp4.length - 1] = relgambar[i] } } reljudul = tmp2; relurls = tmp; relcuplikan = tmp3; relgambar = tmp4; for (var i = 0; i < reljudul.length; i++) { var informasi = Math.floor((reljudul.length - 1) * Math.random()); var tempJudul = reljudul[i]; var tempUrls = relurls[i]; var tempCuplikan = relcuplikan[i]; var tempGambar = relgambar[i]; reljudul[i] = reljudul[informasi]; relurls[i] = relurls[informasi]; relcuplikan[i] = relcuplikan[informasi]; relgambar[i] = relgambar[informasi]; reljudul[informasi] = tempJudul; relurls[informasi] = tempUrls; relcuplikan[informasi] = tempCuplikan; relgambar[informasi] = tempGambar } var rangkumanPosts = 0; var r = Math.floor((reljudul.length - 1) * Math.random()); var rini = r; var relhasil; var dirURL = document.URL; while (rangkumanPosts < relmaxposts) { if (relurls[r] != dirURL) { relhasil = "<li class='news-title clearfix'>"; relhasil += "<a href='" + relurls[r] + "' ><img src='" + relgambar[r] + "' alt='" + reljudul[r] + "'/></a>"; relhasil += "<a href='" + relurls[r] + "' alt='" + reljudul[r] + "'>" + reljudul[r] + "</a>"; relhasil += "<span class='news-text'>" + relcuplikan[r] + " ... <a href='" + relurls[r] + "' aria-label='" + reljudul[r] + "' target='_top'>" + morelink + "</a><span class='news-text'>"; relhasil += "</li>"; //document.write(relhasil); rangkumanPosts++; if (rangkumanPosts == relmaxposts) { break } } if (r < reljudul.length - 1) { r++ } else { r = 0 } if (r == rini) { break } } // inject string-html targetEl.innerHTML = relhasil; }</pre><div><br>modifikasi yang di-html-nya agar sesuai dengan perubahan function.</div><pre><ul id='relpost_img_sum'>  <script defer='defer' type='text/javascript'>relatpost('relpost_img_sum');</script> </ul></pre><div><br>----------------------------------------------------------<br><br>Karena di-code tidak diketahui akan di element mana hasil string-html itu.<br>maka asumsi-nya di-body-element.<br><br>kira-kira seperti ini.<br><br></div><pre>//document.write(relhasil); document.body.innerHTML += relhasil;</pre><div><br>----------------------------------------------------------<br>kalau melihat sekilas code-nya. <br>sepertinya ini untuk meng-inject markup(string-html) ke dalam document html.<br>Ini bisa dilakukan pakai <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML">innerHtml</a> atau meng-update DOM-nya (dengan menggunakan <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement">createElement</a>). <br>Kebetulan code diatas pakai string-html jadi persammaan-nya lebih ke <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML">innerHTML</a> .<br>Lebih detailnya bisa baca <a href="https://www.sitepoint.com/insert-in-place-without-documentwrite/">Insert in place without document.write</a></div>

@soeleman

120 Kontribusi 147 Poin

Dipost 3 tahun yang lalu

Tanggapan

kodenya udah saya update...kira2 yg diganti sebelah mananya ya gan? dan gimana? ane udah buka link referensinya tapi malah pusing

@wartab_google

update jawaban.

@soeleman

<div>kayaknya disini gan HTML nya </div><pre>      <div id='related_posts' style='margin-top:5px'><br>        <h3>Related Articles :</h3><br><br>        <b:loop values='data:post.labels' var='label'><br>          <script expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=999999&quot;' type='text/javascript'/><br>        </b:loop><br>        <ul id='relpost_img_sum'><br>          <script defer='defer' type='text/javascript'>relatpost();</script><br>        </ul><br>      </div><br>      </div><br>      </b:if></pre>

@wartab_google

3 Kontribusi 0 Poin

Dipost 3 tahun yang lalu

Tanggapan

response pada jawaban diatas

@soeleman

<div>Hasil akhirnya jadi gini bukan gan? </div><pre> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style> #related_posts h3{color: #fff;font-size: 12px;background: #1A7C62;padding: 3px 10px;margin: 0 0 5px;} #relpost_img_sum{margin:0;padding:0;line-height:16px;font-size: 11px;} #relpost_img_sum:hover{background:0} #relpost_img_sum ul{list-style-type:none;margin:0;padding:0} #relpost_img_sum li{min-height: 74px;border-bottom: 1px solid #F4F3F3;list-style: none;margin: 0 0 5px;padding: 5px;} #relpost_img_sum .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size: 14px;} #relpost_img_sum .news-text{display:block;text-align:justify;font-weight:normal;text-transform:none;color:#333;font-size: 13px;} #relpost_img_sum img{float:left;margin-right:7px;border:solid 1px #ddd;width:72px;height:72px;background:#fff} </style> <script type='text/javascript'>/<![CDATA[function relatpost(targetElement) { // tambah variable var targetEl = document.getElementById(targetElement); var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); var tmp4 = new Array(0); for (var i = 0; i < relurls.length; i++) { if (!contains(tmp, relurls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relurls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = reljudul[i]; tmp3.length += 1; tmp3[tmp3.length - 1] = relcuplikan[i]; tmp4.length += 1; tmp4[tmp4.length - 1] = relgambar[i] } } reljudul = tmp2; relurls = tmp; relcuplikan = tmp3; relgambar = tmp4; for (var i = 0; i < reljudul.length; i++) { var informasi = Math.floor((reljudul.length - 1) * Math.random()); var tempJudul = reljudul[i]; var tempUrls = relurls[i]; var tempCuplikan = relcuplikan[i]; var tempGambar = relgambar[i]; reljudul[i] = reljudul[informasi]; relurls[i] = relurls[informasi]; relcuplikan[i] = relcuplikan[informasi]; relgambar[i] = relgambar[informasi]; reljudul[informasi] = tempJudul; relurls[informasi] = tempUrls; relcuplikan[informasi] = tempCuplikan; relgambar[informasi] = tempGambar } var rangkumanPosts = 0; var r = Math.floor((reljudul.length - 1) * Math.random()); var rini = r; var relhasil; var dirURL = document.URL; while (rangkumanPosts < relmaxposts) { if (relurls[r] != dirURL) { relhasil = "<li class='news-title clearfix'>"; relhasil += "<a href='" + relurls[r] + "' ><img src='" + relgambar[r] + "' alt='" + reljudul[r] + "'/></a>"; relhasil += "<a href='" + relurls[r] + "' alt='" + reljudul[r] + "'>" + reljudul[r] + "</a>"; relhasil += "<span class='news-text'>" + relcuplikan[r] + " ... <a href='" + relurls[r] + "' aria-label='" + reljudul[r] + "' target='_top'>" + morelink + "</a><span class='news-text'>"; relhasil += "</li>"; //document.write(relhasil); rangkumanPosts++; if (rangkumanPosts == relmaxposts) { break } } if (r < reljudul.length - 1) { r++ } else { r = 0 } if (r == rini) { break } } // inject string-html targetEl.innerHTML = relhasil; } /]]>/</script> </b:if> </pre><div>Htmlnya<br><br></div><pre> <div id='related_posts' style='margin-top:5px'> <h3>Related Articles :</h3>

    &amp;lt;b:loop values=&#039;data:post.labels&#039; var=&#039;label&#039;&amp;gt;
      &amp;lt;script expr:src=&#039;&amp;amp;quot;/feeds/posts/summary/-/&amp;amp;quot; + data:label.name + &amp;amp;quot;?alt=json-in-script&amp;amp;amp;callback=relpostimgthum&amp;amp;amp;max-results=999999&amp;amp;quot;&#039; type=&#039;text/javascript&#039;/&amp;gt;
    &amp;lt;/b:loop&amp;gt;

<ul id='relpost_img_sum'>  <script defer='defer' type='text/javascript'>relatpost('relpost_img_sum');</script> </ul> </div> </div> </b:if></pre><div>Chrome errornya seperti ini<br><figure data-trix-attachment="{"contentType":"image/jpeg","filename":"chrome.jpg","filesize":48400,"height":174,"url":"https://i.ibb.co/Sv7y5tx/chrome.jpg","width":997}" data-trix-content-type="image/jpeg" data-trix-attributes="{"presentation":"gallery"}" class="attachment attachment--preview attachment--jpg"><img src="https://i.ibb.co/Sv7y5tx/chrome.jpg" width="997" height="174"><figcaption class="attachment__caption"><span class="attachment__name">chrome.jpg</span></figcaption></figure></div>

@wartab_google

3 Kontribusi 0 Poin

Dipost 3 tahun yang lalu

Tanggapan

response di jawaban atas.

@soeleman