はじめに

ACCESS Advent Calendar 2019 の25日目最終日です。

初めまして、今年一番ハマったソシャゲはドラクエウォークの @naohikowatanabeです。

HTML 的要素の表示非表示の基本

一般的には HTML 的に要素の表示非表示を行う際、以下のように言われます。
・要素の非表示は display:none か visibility:hidden で実現出来る
・visibility:hidden は「見えない＋要素自体は存在する」
・display:none は「見えない＋要素自体無し」
・visibility:hidden の方が要素の削除が無いので高速

本記事ではどの程度速度に差があるのか、を見ていきます。
＃組込ブラウザのお仕事をやっているとお客さんからこの質問が非常に多い。。
＃なのでまとめてしまう。

測定

display:none と visibility:hidden の違いの HTML をベースに、
「display:none による表示非表示100万回」
「visibility:hidden による表示非表示100万回」
を行うようにコードを変更し、測定します。

html

<!doctype html><htmllang="ja"><head><metacharset="UTF-8"><title>difference between visibility hidden and display none</title><linkrel="stylesheet"href="css/style.css"><script>constloop_count=1000000;functionvisibilityhidden(){consttwo=document.getElementById("two");conststartTime=Date.now();for(i=0;i<loop_count;i++){two.style.visibility="hidden";two.style.visibility="visible";}constendTime=Date.now();console.log("visibility:hidden "+(endTime-startTime)+" [msec]");}functiondisplaynone(){constthree=document.getElementById("three");conststartTime=Date.now();for(i=0;i<loop_count;i++){three.style.display="none";three.style.display="inline";}constendTime=Date.now();console.log("display:none "+(endTime-startTime)+" [msec]");}</script></head><body><divid="one"class="box"></div><divid="two"class="box"><h3>Visibility:hidden</h3>エレメント描画されず。けど、表示エリアは「残る」。背景色で塗りつぶした感じ。
    </div><divid="three"class="box"><h3>display:none</h3>エレメントが表示エリアから消える。DOMとして存在はするけど描画されない。
    </div><divid="four"class="box"></div><buttononclick="visibilityhidden()">visibility:hidden * 100万回</button><buttononclick="displaynone()">display:none * 100万回</button></body></html>

CSS

オリジナルから変えてません。

@charset"UTF-8";.box{width:150px;height:150px;margin:10px;border-radius:10px;/* CSS3草案 */-webkit-border-radius:10px;/* Safari,Google Chrome用 */-moz-border-radius:10px;/* Firefox用 */float:left;padding:20px;}#one{background:#000;}#two{/*visibility:hidden;*/background:#9eccb3;}#three{background:#f47d44;/*display:none;*/}#four{background:#000;clear:right;}