我试图了解如何呈现DOM,以及从网络请求/加载资源.但是,在阅读互联网上发现的资源时,会使用DOM解析/加载/呈现/就绪术语,而我似乎无法掌握这些"事件"的顺序.
当从网络请求脚本,css或img文件时,它是仅停止渲染dom还是停止解析它？Dom加载与Dom渲染相同吗？和DomContentLoaded事件相当于jQuery.ready()？
有人可以解释一下这些术语是否是同义词以及它们发生的顺序是什么？
Sco*_*cus 14
当您打开浏览器时window,该窗口需要document加载到该窗口中以供用户查看和交互.但是,用户可以远离它document(同时仍保持相同的window打开状态)并加载另一个document.当然,用户也可以关闭浏览器窗口.因此,你可以说,window并且document有一个生命周期.
在window与document通过对象的API您可以访问的,您可以通过挂接应该键时调用的函数涉足这些对象的生命周期events中的这些对象的生命周期.
该window对象位于浏览器对象模型的顶部 - 它始终存在(document如果没有window将其加载,则无法使用),这意味着它是浏览器的全局对象.您可以随时在任何JavaScript代码中与它交谈.
当您发出文档请求(即HTTP或HTTPS请求)并将资源返回给客户端时,它会返回HTTP或HTTPS响应 - 这是数据有效负载(text,html,css)的位置,JavaScript,JSON,XML等)生活.
假设您已经请求.html页面.当浏览器开始接收该有效载荷时,它开始读取HTML并构造document由代码形成的对象的"内存中"表示.此表示称为文档对象模型或DOM.
读取/处理HTML的行为称为" 解析 ",当浏览器完成此操作时,DOM结构现在已完成.生命周期中的关键时刻触发文档对象的DOMContentLoaded事件,这表示有足够的信息可以完全形成document交互.此事件与jQuery的document.ready事件同义.
但是,在继续之前,我们需要备份一下......当浏览器正在解析HTML时,它还会将内容" 呈现 "到屏幕上,这意味着文档中的空间是为元素及其内容分配的.显示内容.在所有解析完成后,渲染引擎在解析引擎工作的同时工作,仅落后一步 - 如果解析引擎解析表行,例如,渲染引擎将会渲染它.但是,当涉及图像之类的东西时,虽然图像元素可能已被解析,但实际图像文件可能尚未完成下载到客户端.这就是为什么你有时可能最初看到一个没有图像的页面然后随着图像开始出现,页面上的其他内容必须转移以为图像腾出空间 - 浏览器知道将会有一个图像,但它不一定知道该图像需要多少空间才能到达.
后台文档下载所需的CSS文件,JS文件,图像和其他资源,但大多数浏览器/操作系统限制了多少HTTP请求可以同时工作.我知道对于Windows,Windows注册表有一个IE设置,当时有10个请求限制,所以如果一个页面有11个图像,前10个将同时下载,但第11个将不得不等待.这是建议最好将多个CSS文件合并到一个文件中并使用图像精灵而不是单独的图像 - 以减少页面必须进行的HTTP请求总量的原因之一.
当document已完成下载所需的所有外部资源(CSS文件,JavaScript文件,图像文件等)时,window将收到其" 加载 "事件,这表示不仅已构建DOM结构,而且所有资源可供使用.当您的代码需要与外部资源的内容进行交互时,这是一个事件 - 它必须等待内容在消费之前到达.
既然document已经完全加载了window,任何事情都可能发生.用户可以单击事物,按键提供输入,滚动等.所有这些操作都会触发事件,并且可以在适当的时间点击其中的任何一个或全部以启动自定义代码.
当window要求浏览器加载不同的浏览器时document,会触发表示文档生命结束的beforeunload事件,例如窗口的事件以及最终的unload事件.
这仍然是整个过程的简化,但我认为它应该能够很好地概述文档在其生命周期中的加载,解析和呈现方式.
| 归档时间： |
|
| 查看次数： |
3148 次 |
| 最近记录： |