2020-07-29 重温 HTML 文档的加载顺序

2020-07-29 本文已影响0人追寻1989

Html（超文本编辑语言）、Css（层叠样式表）、JavaScript 脚本语言这三样内容在浏览器端相互配合、相辅相成，形成了比较成熟的前端页面。

<html>
    <head>
        <!--
            头部中包含的标记是页面的标题、序言、说明等内容，
            它本身不作为内容来显示，但影响网页显示的效果
        -->
    </head>
    <body>
        <!--
            显示实际内容
        -->     
    </body>
</html>

HTML 加载顺序

window.onload：等待页面中的所有内容加载完毕之后才会执行。

$(document).ready()：页面中所有 DOM 结构绘制完毕之后就能够执行。 `window.onload 与$ (document).ready() / $(function(){})相当于下载 body 内最靠后的<script>代码段`

下载的顺序是从上向下，渲染的顺序也是从上到下，下载和渲染是同步执行。HTML 需要等<head>中所有的 JS 文件和 CSS 文件加载完成后才会开始绘制。

用户输入网址，浏览器向服务器发出请求，服务器返回 Html 文件。==》<html>
浏览器开始载入 HTML 代码，进入==》<head>，发现标签内有一个 <link> 标签引用外部的 CSS 文件；浏览器又发出 CSS 文件请求，服务器返回这个 CSS 文件。页面获取 CSS 文件后开始渲染页面。

引入外联样式表，属于并行加载。CSS 在加载时 DOM 还在继续加载构建。

外联样式表：<head> 标签中，使用 <link> 标签的 href 属性来引用的层叠样式表(css文件)

内联样式表：<head> 标签中，使用 <style> 标签通过选择器 + 样式文件编写的。

内部样式表：在标签中的 <style> 属性中添加的 css 样式声明。
上述三种样式表，页面显示的效果的影响程度越来越高。
其中，还包含了许多选择器。
【 ID 选择器指定的样式】 > 【类选择器指定的样式】 > 【元素类型选择器指定的样式】

浏览器继续载入 HTML 中 <body> 部分的代码。
浏览器解析到<img>或者<video>标签引用了一张图片或者一个视频时，会向服务器并行请求图片或者视频。继续渲染后面的代码。

当服务器返回图片文件或者视频文件的时候，浏览器会重新渲染这部分代码。

浏览器发现 <script> 标签，便会暂停解析，将控制权交给 JavaScript 引擎（JavaScript 解释器）。

当引用了 JavaScript 的时候，浏览器发送一个JavaScript request ，就会一直等待该request 的返回。因为浏览器需要一个稳定的 DOM 树结构，而 JavaScript 中的代码可能直接改变了 DOM 树的结构，甚至直接使用 location.href 进行跳转，所以浏览器为了防止出现 JavaScript 改变 DOM 树的情况，会阻塞其他的下载和渲染。

如果 <script> 标签引用了外部脚本，就下载该脚本（下载执行该脚本），否则就直接执行，执行完毕后将控制权交给浏览器渲染引擎。
如果JavaScript 中执行了<div>(style.display=“nonde”)，执行结束后浏览器渲染会先渲染这部分内容。

直到解析到 </html>，解析完成。

当 <body> 中的代码全部执行完毕，并且整个页面的 css 样式加载完毕后， css 会重新渲染整个页面的 html 元素。

各个步骤的加载渲染时间，可以通过浏览器的插件进行追踪。例如：Chrome还提供一种很棒的事件跟踪工具，叫做 speed tracer。

总结：加载 html 文档，从上向下解析，<head> 中的 link 是并行加载的，加载完成后开始 <body> 中的渲染，避免闪屏情况的出现，<script> 同步进行加载和解析，出现阻塞加载的情况。
浏览器加载一个 html 页面，并行进行解析（生成 DOM 树）和渲染。

defer、async 并行加载 JavaScript

JavaScript 阻塞其他资源的加载的原因是：浏览器为了防止 JavaScript 修改 DOM 树，需要重新构建DOM树的情况出现。

外联的JavaScript 如果含有 defer=“defer” 属性，将会并行加载js，到页面全部加载完成后才会执行，会按顺序执行。
对于内置而不是连接外部脚本的script标签，以及动态生成的script标签，defer属性不起作用。
外联的JavaScript 如果含有 async=“true” 属性，将不会依赖于任何 js 和 css 的执行，此 js下载完成后立刻执行，不保证按照书写的顺序执行。　
async属性可以保证脚本下载的同时，浏览器继续渲染。需要注意的是，一旦采用这个属性，就无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本。另外，使用async属性的脚本文件中，不应该使用document.write方法。
一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。

上一篇下一篇

猜你喜欢

热点阅读