Skip to content

Instantly share code, notes, and snippets.

@darkthread

darkthread/false-sharing-demo.html

Created October 14, 2018 14:06
Show Gist options
  • Save darkthread/925841bcbbedf48d075ee6111c06fa28 to your computer and use it in GitHub Desktop.
Save darkthread/925841bcbbedf48d075ee6111c06fa28 to your computer and use it in GitHub Desktop.
Download ZIP
False Sharing 發生原因
Raw
false-sharing-demo.html
<html>
<head>
<style>
body {
width: 720px;
height: 480px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
td {
text-align: center;
}
table {
width: 100%;
min-height: 1rem;
}
fieldset td {
border: 1px solid gray;
}
fieldset.cache {
height: 135px;
}
.cache table {
height: 100px;
}
.cache table td {
height: 25px;
}
.core {
margin: 10px;
display: inline-block;
width: 80px;
height: 60px;
line-height: 60px;
color: white;
text-shadow: 1px 1px 1px black;
background-color: #666;
border: 1px solid #222;
text-align: center;
}
.data>div {
float: left;
margin-right: 2px;
border: 1px solid #333;
padding: 2px;
background-color: #ccc;
opacity: 0.99;
}
div.padding {
width: 100px;
}
.data:after {
content: "";
display: block;
clear: both;
}
.code {
font-weight: bolder;
color: orangered;
display: inline-block;
opacity: 0.99;
padding: 6px;
}
.highlight {
background-color: red !important;
color: yellow;
}
td.mask {
position: relative;
}
.mask .hint {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
opacity: 0;
background-color: yellow;
font-weight: bolder;
color: red;
}
.mask.miss .hint {
opacity: 0.7;
}
.move {
position: absolute;
z-index: 9999;
width: 25px;
height: 25px;
opacity: 0.8;
background-color: lightseagreen;
}
.msg {
height: 30px;
}
h2 {
color: #444;
}
.inv {
visibility: hidden;
}
</style>
</head>
<body>
<h2>False Sharing Demo</h2>
<table>
<tr>
<td colspan="2">
<fieldset>
<legend>Memory</legend>
<table>
<tr>
<td>
<span class="data m">
<div class="a">a:1</div>
<div class="b">b:1</div>
<div class="padding">...</div>
</span>
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td style="width: 48%">
<fieldset class="cache">
<legend>Core 1 Cache</legend>
<table>
<tr>
<td>Cache Line (64 bytes)</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td class="mask">
<span class="data c1 inv">
<div>a:1</div>
<div>b:1</div>
<div class="padding">...</div>
</span>
<span class="hide hint">Cache Miss</span>
</td>
</tr>
</table>
</fieldset>
</td>
<td style="width: 48%">
<fieldset class="cache">
<legend>Core 2 Cache</legend>
<table>
<tr>
<td>Cache Line (64 bytes)</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td class="mask">
<span class="data c2 inv">
<div>a:0</div>
<div>b:0</div>
<div class="padding">...</div>
</span>
<span class="hide hint">Cache Miss</span>
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td>
<div class="core">Core 1</div>
<div class="msg">
Execute: <span class="code c1"></span>
</div>
</td>
<td>
<div class="core">Core 2</div>
<div class="msg">
Execute: <span class="code c2"></span>
</div>
</td>
</tr>
</table>
<button onclick="start()">Play</button>
by
<a href="https://www.facebook.com/darkthread.net">
<span style="color:royalblue">https://www.facebook.com/darkthread.net</span>
</a>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var dfd = $.Deferred();
var chain = dfd.promise();
function showMoving(srcSel, dstSel) {
var srcPos = $(srcSel).offset();
var dstPos = $(dstSel).offset();
var icon = $("<div class='move'></div>");
icon.css({"top": srcPos.top + "px", "left": $(srcSel).children().last().offset().left });
icon.appendTo("body");
return icon.animate({ top: dstPos.top, left: $(dstSel).children().last().offset().left }, 2000).promise();
}
for (var i = 1; i <= 8; i++) {
chain = chain.then(() => {
//execute obj.a++
return $(".code.c1").text("obj.a++")
.addClass("highlight").delay(1000).promise();
});
chain = chain.then(() => {
$(".data.c1").parent().addClass("miss");
return showMoving(".data.m", ".data.c1");
});
chain = chain.then(()=> {
$(".miss").removeClass("miss");
$(".move").remove();
return $(".data.c1").html($(".data.m").html()).removeClass("inv").delay(1000).promise();
});
chain = chain.then(() => {
var a = $(".data.c1 .a");
a.text("a:" + (a.text().split(':')[1]*1 + 1));
return a.addClass("highlight").delay(1000).promise();
});
chain = chain.then(() => {
$(".data.m").html($(".data.c1").html());
$(".data.c1 .a").removeClass("highlight");
$(".code.c1").removeClass("highlight");
return $(".code.c1").text("").delay(3000).promise();
});
chain = chain.then(() => {
$(".data.m .highlight").removeClass("highlight");
//execute obj.b++
return $(".code.c2").text("obj.b++").addClass("highlight").delay(1000).promise();
});
chain = chain.then(() => {
$(".data.c2").parent().addClass("miss");
return showMoving(".data.m", ".data.c2");
});
chain = chain.then(()=> {
$(".miss").removeClass("miss");
$(".move").remove();
return $(".data.c2").html($(".data.m").html()).removeClass("inv").delay(1000).promise();
});
chain = chain.then(() => {
var b = $(".data.c2 .b");
b.text("b:" + (b.text().split(':')[1]*1 + 1));
return b.addClass("highlight").delay(1000).promise();
});
chain = chain.then(() => {
$(".data.m").html($(".data.c2").html());
$(".data.c2 .highlight").removeClass("highlight");
$(".code.c2").removeClass("highlight");
return $(".code.c2").text("").delay(1000).promise();
});
chain = chain.then(() => {
return $(".data.m .highlight").removeClass("highlight").delay(3000).promise();
});
}
function start() {
dfd.resolve();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment