Javascript CSS上的JS操作及其对页面呈现的影响_Javascript_Html_Css

Javascript CSS上的JS操作及其对页面呈现的影响

javascript html css

Javascript CSS上的JS操作及其对页面呈现的影响,javascript,html,css,Javascript,Html,Css,我从许多来源了解到，在页面加载后应用CSS可能会导致“闪烁”效果，这意味着页面将重新呈现CSS 例如： <head></head> <body> <link rel="stylesheet"... /> </body> 加载页面后，第二个示例是否将被迫重新呈现css？我想了解displayblock是如何应用于div的如果在标记中的DOM元素之后应用，最终可能会出现“闪烁”效果。这是因为当浏览器加载CSS文件（发出网络请求）时，DO

我从许多来源了解到，在页面加载后应用CSS可能会导致“闪烁”效果，这意味着页面将重新呈现CSS
例如：

<head></head> <body> <link rel="stylesheet"... /> </body>
加载页面后，第二个示例是否将被迫重新呈现css？我想了解
displayblock
是如何应用于
div
的
如果在标记中的DOM元素之后应用
，最终可能会出现“闪烁”效果。这是因为当浏览器加载CSS文件（发出网络请求）时，DOM已经显示在视口中（尚未应用任何样式）
在第二种情况下，在头部添加
，浏览器在视口中呈现DOM之前下载CSS文件。此时，JavaScript将class属性更改为DOM，并且没有闪烁（因为所有CSS都已加载）
当您使用与其视觉表示相关的属性更改DOM时，浏览器将执行“绘制”，这意味着视口的某个区域将部分或完全重新渲染

一篇关于浏览器和应用程序的有趣文章。如果您正在使用，也很有意思。
有点离题，可能有点古怪，但当点击此答案中的任何文本时，整个段落会淡入淡出。-编辑：在答案被接受或编辑后修复。谢谢你，我只是在谷歌搜索和试图理解为什么它在乞讨中“闪烁”（在第一个例子中）时想到了同样的事情。所以它实际上会自己重新呈现吗？但在第二个示例中，它将只重新呈现div（以及它包含的内容）？OMG！感谢“绘画与表演”链接。。。我甚至无法想象它在滚动时会重新绘制。有点令人震惊：）@greenh在第二个示例中，通常会执行部分绘制（渲染）。部分或全部绘制，取决于正在编辑的特性。
<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>

.displaynone {display:none;} .displayblock {display:block;}