HTML加载过程

gaomysion 发布于2019-08-02 10:25 / 1356人阅读

摘要：如果我们为外部添加或属性，那么它的下载就不会阻塞其他内容的加载关于与属性的区别，请参考我的另一篇文章高级程序设计读书笔记在中使用

在地址栏输入url，返回html后，浏览器开始顺序加载并渲染DOM

Body标签

当浏览器遇到body标签才算真正开始加载并渲染DOM，此时会有以下几种情况：

DOM元素

浏览器遇到dom元素时，正常顺序加载，边加载边渲染

内联CSS

当遇到内联CSS时，浏览器继续加载，但渲染被阻塞，此时会生成新的CSS Rule Tree，生成后重新渲染界面

外联CSS

当遇到外联CSS（link标签），浏览器启一个线程加载css文件，DOM继续加载但渲染被阻塞

内联Javascript

当遇到内联Javascript，浏览器开始执行这段脚本，DOM的加载和渲染同时被阻塞（由于JavaScript有可能会更改DOM Tree和Render Tree，因此同时被阻塞）

外联Javascript

当遇到外联Javascript，浏览器开始下载这段脚本，下载成功后执行它，这整个过程DOM的加载和渲染同时被阻塞

Example

用一个例子解释一下



  Hello
  
  
  World

在js文件下载的过程中，js后面的元素没有被加载，也没有呈现在界面上，说明js文件的下载阻塞了DOM的解析并渲染



  Hello
  
  
  World

在css文件仍在下载的过程中，已经可以打印出两个，可以看出css文件的加载阻塞了DOM渲染但没有阻塞DOM加载

defer 与 async

如果我们执行以下代码，首先加载外部Javascript文件，然后加载DOM其他内容：



  
  Hello World

如我们所料，文件没有下载并执行完毕，Hello World是不会打印出来的。

如果我们为外部Javascript添加defer或async属性，那么它的下载就不会阻塞DOM其他内容的加载：



  
  Hello World

关于defer与async属性的区别，请参考我的另一篇文章：
Javascript高级程序设计读书笔记——在HTML中使用Javascript

云服务器 GPU云服务器类加载过程页面加载过程 Java类加载过程 html链接过程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52338.html

浏览器解析渲染HTML文档的过程

摘要：浏览器的预解析可以减缓渲染被阻塞的情况，例如文档解析过程中预加载器发现了标签，会对文件进行加载并放在浏览器缓存中，这样当解析器遇到这个标记时，由于预加载器已经将文件加载下来了，所以会被立即执行，不需要等待从网络抓取资源，减缓了对渲染的阻塞。参考资料浏览器的工作原理浏览器加载网页时的过程是什么？ HTML渲染过程详解浏览器的工作原理一、浏览器的高层结构浏览器的主要组件为：...

warkiz 2019-08-23 16:22 评论0 收藏0
浏览器解析渲染HTML文档的过程

摘要：浏览器的预解析可以减缓渲染被阻塞的情况，例如文档解析过程中预加载器发现了标签，会对文件进行加载并放在浏览器缓存中，这样当解析器遇到这个标记时，由于预加载器已经将文件加载下来了，所以会被立即执行，不需要等待从网络抓取资源，减缓了对渲染的阻塞。参考资料浏览器的工作原理浏览器加载网页时的过程是什么？ HTML渲染过程详解浏览器的工作原理一、浏览器的高层结构浏览器的主要组件为：...

davidac 2019-08-02 16:09 评论0 收藏0
浏览器解析渲染HTML文档的过程

摘要：浏览器的预解析可以减缓渲染被阻塞的情况，例如文档解析过程中预加载器发现了标签，会对文件进行加载并放在浏览器缓存中，这样当解析器遇到这个标记时，由于预加载器已经将文件加载下来了，所以会被立即执行，不需要等待从网络抓取资源，减缓了对渲染的阻塞。参考资料浏览器的工作原理浏览器加载网页时的过程是什么？ HTML渲染过程详解浏览器的工作原理一、浏览器的高层结构浏览器的主要组件为：...

CoyPan 2019-08-30 15:43 评论0 收藏0
文档的加载

摘要：完成文档和所有子资源已完成加载。在中可以使用事件来检测文档是否加载完毕在更早的版本中可以通过每隔一段时间执行一次来检测这一状态，因为这条代码在加载完毕之前执行时会抛出错误。 Document.readyState Document.readyState 属性描述了文档的加载状态。当readyState的值变化时，document对象上的readystatechange事件将被触发。 r...

beita 2019-08-21 17:36 评论0 收藏0
HTML加载过程

摘要：如果我们为外部添加或属性，那么它的下载就不会阻塞其他内容的加载关于与属性的区别，请参考我的另一篇文章高级程序设计读书笔记在中使用 showImg(https://segmentfault.com/img/remote/1460000014810622); 在地址栏输入url，返回html后，浏览器开始顺序加载并渲染DOM Body标签当浏览器遇到body标签才算真正开始加载并渲染DO...

honmaple 2019-08-22 17:07 评论0 收藏0