我从许多来源了解到，在 页面加载后应用CSS 会导致＆＃34;闪烁＆＃34; effect - 表示页面将重新渲染CSS。
例如：
<head></head>
<body>
<link rel="stylesheet"... />
</body>
然而，在页面加载后我无法找到任何使用JS（ 非内联 ）的来源以及它是如何反映出来的通过重新渲染它自己。
例如：
HTML：
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
<div id="divid" class="displaynone"></div>
<script>
function showit(){
document.getElementById("divid").className += " displayblock";}
window.onload = showit;
</script>
</body>
CSS：
.displaynone {display:none;}
.displayblock {display:block;}
第二个示例是否会在页面加载后被强制重新呈现css？我想了解displayblock实际上如何应用于div的深层次内容。
答案 0 :(得分：1)
如果您在标记中的DOM元素之后应用<link rel="stylesheet"... />，则最终会出现“闪烁”效果。这是因为当浏览器加载CSS文件（发出网络请求）时，DOM已经显示在ViewPort中（尚未应用任何样式）。
在您添加<link rel="stylesheet"... />的第二种情况下，浏览器会在ViewPort上呈现DOM之前下载您的CSS文件。此时，您的JavaScript更改类属性为DOM，并且您没有闪烁（因为所有CSS已经加载）。
当您使用与其可视化表示相关的属性更改DOM时，浏览器会执行“绘制”，这意味着ViewPort的某个区域会被部分或完全重新渲染。
有关浏览器painting and performance和rendering path的有趣文章。如果您使用Chrome Dev Tools，也会感兴趣。