当访问一个网站的时候需要加载html，一个完整的html结构包含：dom树、文档、图片和媒体资源、样式css资源和脚本js资源。然后我们提出一个疑问
浏览器是如何加载（渲染）html的？
先看下面的html代码在渲染的时候弹出的是什么？并且注意图片是什么时候出来的？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script>
var box1 = document.getElementById('box')
alert("第一次alert：" + box1)
window.onload = function(){
var box2 = document.getElementById('box')
alert("第二次alert：" + box2)
}
</script>
</head>
<body>
<div id="box">
<h1>测试代码</h1>
<img src="img/logo.png" alt="">
</div>
<script>
var box3 = document.getElementById('box')
alert("第三次alert：" + box3)
document.addEventListener('DOMContentLoaded', function(){
var box4 = document.getElementById('box')
alert("第四次alert：" + box4)
}, false)
</script>
</body>
</html>
// 弹出的顺序为
第一次alert：null
第三次alert：[object HTMLDivElement]
第四次alert：[object HTMLDivElement]
第二次alert：[object HTMLDivElement]
在第一次打开浏览器的时候，如果你注意的话，首先会弹出1、3，之后出现图片和弹出4，最后弹出2。如果你对浏览器的渲染不了解的话，看到这样的结果你也许会很纳闷，下面我就带大家来看看上面我们提到的三个问题。
浏览器是如何加载（渲染）html的？
浏览器在加载html的时候是自上而下渲染的，具体的步骤如下：
(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//js:DOMContentLoaded; jq:ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//js:onload; jq:load
弹出1、3可以看出来来是自上而下的，第一次弹出的是null说明DOM还没渲染完成，找不到对应的标签。第三次能正常弹出是DOM对象，说明DOM树已经加载完可以找到对应的标签。第二次和第四次是添加了一些事件，在DOM渲染的过程触发对应的事件执行。从弹出的内容和先后顺序可以看出 DOMContentLoaded 是在DOM结构加载完毕触发的。之后出现了图片，最后弹出第二个，说明 onload 是页面资源（包括图像、脚本文件、CSS 文件等）加载完毕才弹出的。通过这样一个小例子彻底的掌握了浏览器加载html的全过程。jquery 中的ready和load的的实现也是通过封装 DOMContentLoaded和onload 来实现的他做了一层兼容处理。
事件DOMContentLoaded和load的区别：
①DOMContentLoaded 是在DOM结构加载完毕触发的；
②load 是页面资源（包括图像、脚本文件、CSS 文件等）加载完毕才弹出的
.
相关推荐
浏览器渲染过程及优化策略 浏览器渲染过程是一个复杂的过程，它涉及到多个进程和线程的协作。为了确保浏览器的稳定性和安全性，浏览器采取了多进程模型。每个进程都有其自己的内存空间，每个线程都是进程的一部分，...
这个过程大致可以分为四个阶段：构建DOM（文档对象模型）和CSSOM（CSS对象模型）、结合DOM和CSSOM形成渲染树、布局渲染树（计算几何结构）和在屏幕上绘制渲染树。文档强调这些阶段并不是严格按照顺序来的，引擎会...
### 浏览器工作原理浅析 #### 一、引言 ...此外，深入了解渲染引擎的运作机制有助于开发更高效、更兼容的前端应用程序。随着技术的不断进步，浏览器将继续发展和完善，为用户提供更加流畅的网络体验。
本文将深入探讨浏览器的基本原理，从用户输入URL到最终页面展示的整个过程。通过了解浏览器如何处理网页请求、解析HTML、构建DOM树以及渲染页面等内容，可以帮助前端开发者更好地优化网站性能。 #### 二、渲染引擎 ...
本文旨在深入剖析浏览器的工作机制，帮助读者更好地理解从输入URL到网页完整展示这一过程背后的复杂逻辑和技术细节。 #### 二、浏览器概述 浏览器是一种能够向服务器发送请求并展示网络资源的软件工具。它能处理...
本篇文章将深入探讨浏览器的各个组件及其功能，以便更好地理解从输入URL到页面显示的整个过程。 首先，浏览器的主要功能是获取并呈现Web资源，这些资源通常以HTML、CSS、JavaScript和其他格式存在。用户通过地址栏...
本文主要探讨了浏览器渲染页面的原理，特别是关键渲染路径以及CSS和JavaScript如何影响这个过程。 关键渲染路径是浏览器呈现网页时必须执行的一系列步骤，其目标是尽快显示与用户当前操作直接相关的页面内容。这个...
从用户输入URL到浏览器渲染出页面的整个流程中，浏览器需要完成多个步骤的工作。具体来说： 1. 解析地址并发送HTTP请求获取页面数据。 2. 解析返回的HTTP响应内容，区分内容类型。 3. 通过渲染引擎进行内容解析和...
本文将详细解析浏览器渲染的过程，并探讨如何进行性能优化。 首先，当用户在浏览器中输入URL并按下回车键时，浏览器会通过HTTP协议向服务器发送请求。服务器响应后，浏览器接收到的是HTML文档，这是网页的基础结构...
### 浏览器的工作原理：...通过深入了解浏览器的内部工作原理，开发者可以更好地理解网页的加载过程，从而优化网页性能，提升用户体验。无论是WebKit还是Gecko，它们都在不断进步，以满足日益复杂和多样化的网络需求。
浏览器渲染HTML的过程是构建Web页面可视化的关键步骤，它涉及到一系列复杂的操作，确保页面按照预期显示。以下是详细解释： 1. **用户输入网址**：用户在浏览器地址栏输入HTML页面的URL，首次访问时，浏览器向...
本文将深入探讨浏览器的主要组件和工作流程，以帮助前端开发者更好地理解从输入URL到页面展示的整个过程。 首先，浏览器的核心功能是接收用户输入的URI，向服务器发起请求，获取资源并显示在窗口中。资源通常以HTML...
其中，渲染性能是浏览器性能优化的关键部分，本文将详细介绍浏览器渲染性能优化的相关知识点。 Render Tree 和 DOM 树 浏览器在渲染网页时，首先会构建一个 DOM 树，即 Document Object Model，DOM 树是一种树形...
4. **渲染页面**：根据DOM树及CSS规则，浏览器渲染出最终的可视化页面。 5. **执行脚本**：如果页面包含JavaScript脚本，则会在适当的时候执行这些脚本来动态修改页面内容。 #### 三、主流浏览器介绍 ##### 2.1 IE...
这篇博文将深入探讨新式网络浏览器的工作原理，揭示其幕后的技术细节。 首先，我们要理解浏览器的核心组成部分：用户界面（UI）后台、浏览器引擎、渲染引擎、网络模块、JavaScript引擎、数据存储等。 1. **用户...
渲染流程就是浏览器展示页面的流程，在这个流程里，浏览器通过获取到服务端返回的HTML、CSS和JS等静态资源进行处理并展示出页面，这里经过的流程按时间线分的话有：构建DOM树、样式计算、布局阶段、分层、绘制、分块...
浏览器渲染页面的过程是网页开发中至关重要的一环，它涉及到用户从输入URL到看到完整页面的整个体验。下面我们将深入探讨这个过程的各个阶段，并提供一些优化页面性能的策略。 首先，浏览器接收到HTML文件后开始...