个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
31
4
article说 CSS 是渲染阻塞，所以 js 将在构建 CSSOM 后进行评估(也就是在开发工具中重新计算样式)
但是，在 Chrome 开发工具中。看来js是在CSSOM之前评估的，这是为什么？我误会了吗？
如果你想看我的例子 => here
调用树
事件簿
<html>
<head>
<style>
h1 {color:red;}
p>p {color:blue;}
p>p>p {color:blue;}
p>p>p>p {color:blue;}
p>p>p>p>p {color:blue;}
p>p>p>p>p>p {color:blue;}
p>p>p>p>p>p>p {color:blue;}
p>p>P>p>p>p>p>p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
<script>
var span = document.getElementsByTagName('span')[0];
span.textContent = 'interactive'; // change DOM text content
span.style.display = 'inline'; // change CSSOM property
// create a new element, style it, and append it to the DOM
var loadTime = document.createElement('div');
loadTime.textContent = 'You loaded this page on: ' + new Date();
loadTime.style.color = 'blue';
document.body.appendChild(loadTime);
var cnt=0
while(cnt++ <=9999999){}
</script>
</body>
</html>
最佳答案
文章作者关注domContentLoaded事件或在页面准备好呈现给用户的那一刻，不再有白屏。当蓝色垂直线出现在时间线很重要。这是了解页面对用户可用的速度的重要事件。在内容出现之前，用户必须盯着白屏多长时间？
由于单页应用程序的出现，几乎所有内容只有在主脚本加载后才可用。这就是为什么如此多的顶级 Web 应用程序首先使用服务器端呈现的页面，然后 javascript 控制单页应用程序。他们甚至使用代码拆分来加载当前页面所需的内容。
本文深入探讨了包含外部 CSS 和 js 文件的效果。这些文件的加载和解析如何插入domContentLoaded事件，这意味着将白屏更改为内容会出现更多延迟，即使内容 (HTML) 已经被解析并准备好呈现。
性能事件日志确实显示了正在发生的事情的详细信息，但是如果您进一步向下滚动，您可以找到 Event:readystatechange和 Event:pageshow ，表示内容呈现给用户的时间戳。这些事件在脚本和样式计算之后。 <script>线 block domContentLoaded事件，直到他可以完成他的事情。
这就是为什么建议使用 async属性到脚本标签，这样它就不会阻塞白屏。想象一下，如果我们添加到网页的所有外部脚本也阻止了页面呈现。延迟对用户来说将变得如此明显，以至于他/她可能决定离开。
希望这能解释您的查询。
关于javascript - 为什么在重新计算 chrome 开发工具中的样式之前评估过 js ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67554818/
31
4
0
目前，由于生成变量的评估，我的Makefile遇到了问题。我降低了复杂性，仅保留了导致问题的基本要素。 读取Makefile时， $(LIST)被评估为文件列表。 在步骤1中，其中一个文件被删除。 在
为什么这 eval 没有调用alert("Summer") ？ eval('(caption="Summer";alert(caption))'); 和《夏天》里的台词有关系吗？ 最佳答案 Uncau
我正在努力让以下工作正常进行。最初似乎可以工作，但不知何故它停止工作了 var setCommonAttr = "1_row1_common"; var val = document.getEleme
eval('({"suc":true})') 以上错误，应该是: eval('{"suc":true}') 为什么？ 最佳答案 当尝试评估时，解释器会看到大括号并认为它是一个 block 开头。将其括
我的页面 A 发出了 ajax 调用并引入了片段 B。该片段被添加到 DOM 中，并且该片段中的所有脚本都经过了评估。在该代码片段中，我有 2 个脚本标签: function doOptions()
这里是javascript代码: var test = { "h" : function (a) {return a;}, "say" : "hello" }; 第一次运行: test
我正在查看一些工作代码，并遇到了这一行: eval("\$element = \"$element\";"); 我真的很困惑为什么任何 PHP 开发人员都会写这一行。除了给自己设置一个变量之外，这还有
谁能帮我解决以下问题: 我有这样的代码: if(cond1 && cond2 && .. && cond10) 这里，cond1 是昂贵的操作，其输出是 boolean 值。 现在我的问题是，当 co
**摘要：**华为AppCube应用魔方顺利通过信通院评估，被认证为具备 “低代码开发平台通用能力”的企业服务平台。 本文分享自华为云社区《华为AppCube通过中国信通院“低代码开发平台通用能力要求
我正在尝试通过 PHP 从图像的 EXIF 数据中获取焦距。 这是我目前得到的代码: $exif = exif_read_data("$photo"); $length10 = $exif['Foca
我想使用id =“key”将一个类添加到元素中，但是为什么不起作用？我是js的初学者:这是代码: audio.classList.add('yellow'); 这是错误: null is not an
这是我的 XML: QueWay Password Recovery 现在我想用 php 用 xpath 选择文本“QueWay”。到目前为止我所拥有的一切都很好: $xml =
使用下面的代码，即使我输入的数字大于 18，我也会得到这个结果。 运行:你今年多大？ 21你还没有达到成年年龄!构建成功(总时间:3 秒) 我是java新手，正在尝试自学，有人可以帮忙吗？ impor
我正在阅读 http://www.cran.r-project.org/doc/manuals/R-lang.pdf手册第 4.3 章，我就是不明白。也许有人可以给我一个快速的解释，为什么 R 的行为
在这个实现中，每次都会评估 hand 并返回另一个列表吗？ foreach (Card card in hand.Cards) { } 我们应该用下面的实现替换上面的实现吗？ var cards =
我正在制作 LINQ lambda 表达式: Expression> add = (x, y) => x + y; 但现在我将如何评估它，比如说找到 2+3？ 最佳答案 这应该适合你: var su
我正在制作一个语言解释器，我已经到了需要评估 if 语句的地步。起初我认为这很简单，我能够让我的解释器评估简单的 if 条件，10 == 10 但是当我试图让它评估更复杂的条件时， 10 == 10
我正在尝试以下代码，该代码向 RDD 中的每一行添加一个数字，并使用 PySpark 返回 RDD 列表。 from pyspark.context import SparkContext file
在阅读了很多关于 Lisp eval-when 运算符的文档后，我仍然无法理解它的用途，我知道使用这个运算符我可以控制表达式的计算时间，但我做不到找出任何可能适用的示例？ 最好的问候，utxee. 最
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，
我是一名优秀的程序员,十分优秀！