首页 > 试题广场 >

白屏时间first paint和可交互时间dom ready

[单选题]
白屏时间first paint和可交互时间dom ready的关系是？ 
  • 先触发first paint ，后触发dom ready
  • 先触发dom ready，后触发first paint
  • 一起触发
  • 没关系
查看答案及解析
添加回答
齐冻冻头像 齐冻冻

页面的性能指标详解：

白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止

首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间

用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通常会在这时候绑定事件操作


总下载时间——页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间

参考链接：https://www.jianshu.com/p/9b0825cec3c9
发表于 2018-12-24 17:30:56 回复(2)
真意头像 真意
这道题感觉没有一点意义
发表于 2017-10-25 13:49:55 回复(3)
牛客687272号头像 牛客687272号
多玩手机还是有好处的，这不我选对了！
编辑于 2018-04-22 21:18:50 回复(0)
서봉Mike头像 서봉Mike
 firstPaint：白屏时间，也就是开始解析DOM耗时，用户在没有滚动时候看到的内容渲染完成并且可以交互的时间。
domReadyTime：用户可操作时间。

发表于 2017-08-09 10:12:59 回复(1)
勇敢牛牛不怕困难之我是未来大佬头像 勇敢牛牛不怕困难之我是未来大佬

真正的答案应该是【没有必然关系】。

为什么这么说呢？

这里其实有一个关键点需要把握，就是 HTML 是边下载 -> 解析 -> 渲染 一次性全部过程，还是一部分一部分的下载 -> 解析 -> 渲染？？

如果你打开 Chrome Performance 查看就会发现它其实是一段一段的，也就是对于短的页面，假设只有一行 html，它一定是先触发 【DOMContentLoad Event】，然后触发 【First Paint】

也就是先把 HTML 文本转为 DOM 树，然后渲染、绘制。

图片说明

但如果你随便打开一个大一些的网页，你就会发现，是先有 【First Paint】，然后再有 【DOMContentLoad Event】，原因也很简单，既先渲染了一部分，触发了【First Paint】，等全部 HTML 都转为了 DOM，再触发了 【DOMContentLoad Event】。

图片说明

发表于 2022-05-02 16:12:33 回复(0)
磨砺头像 磨砺
这道题，下意识选A，回头一想，“咦，这道题...莫不是有什么陷阱？”结果选了c，给我个教训，真没想的那么复杂。
发表于 2018-06-23 18:05:30 回复(2)
浅_笑头像 浅_笑
为什么我查到的是这样
发表于 2021-02-15 21:25:33 回复(1)
从此。海比天蓝头像 从此。海比天蓝
什么意思，没看懂。哪位大神来分析讲解下
发表于 2017-05-30 14:02:12 回复(3)
牛客604154633号头像 牛客604154633号
firstPaint：白屏时间，也就是开始解析DOM耗时，用户在没有滚动时候看到的内容渲染完成并且可以交互的时间。
domReadyTime：用户可操作时间。

发表于 2022-09-01 12:56:25 回复(0)
Tone6头像 Tone6
页面的性能指标详解： 白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止 首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间 用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通常会在这时候绑定事件操作 总下载时间——页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间
发表于 2022-07-19 21:19:16 回复(0)
jsword头像 jsword
这是JavaScript dom的考题，放在android里，第一眼看过，有点蒙
发表于 2018-03-14 03:45:05 回复(1)
刘彦祖头像 刘彦祖
发表于 2022-12-08 09:50:27 回复(0)
老6.头像 老6.
虽然不知道他说的这两个东西是什么，反正事件冒泡就对了
发表于 2022-06-23 11:28:13 回复(0)
牛客738524581号头像 牛客738524581号
b
发表于 2021-09-07 00:27:03 回复(0)
提交观点

问题信息

Javascript
上传者：牛100
难度：
14条回答 5632浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号