渲染步骤：浏览器渲染页面时，表示网站资源已经请求成功（要了解查看：浏览器向服务器请求资源过程）

解析HTML以构建dom树--->构建render树--->布局render树--->绘制render树
 1.浏览器会将HTML解析成一个DOM树，构建DOM树是一个深度遍历的过程，当前节点的所有子节点都构建好以后才会去构建当前节点的下一个兄弟节点；
 2.将CSS解析成CSS规则树；
 3.根据DOM树和CSS规则树来构造render树，render树不等于DOM树，像header和display：none；这种没有具体内容的东西就不在render树中；
 4.根据render树，浏览器可以计算出网页中有哪些节点，各节点的CSS以及从属关系，然后可以计算出每个节点在屏幕中的位置；
 5.遍历render树绘制页面中的各元素。
 注意：
页面发生重构的话，会重新加载DOM树，影响页面加载速度，会导致页面重构的原因如下：
           
1）页面初始化；
           
2）操作DOM时；
            3）某些元素的尺寸变了；
           
4）CSS的属性发生改变。


加载HTML页面步骤：

1.用户输入网址，浏览器向服务器发出请求，服务器返回HTML文件；
2.浏览器开始载入HTML代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；
3.浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
4.CSS文件获取到以后，浏览器继续载入HTML中＜body＞部分的代码；
5.浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求，此时浏览器不会等到图片下载完，而是继续加载后面的代码；
6.服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排版，因此浏览器需要回过头来重新渲染这部分代码；
7.浏览器发现了一个包含一行js代码的＜script＞标签，直接运行该脚本；
8.执行js过程中，发现代码中要隐藏某个元素（style.display='none'），这时浏览器不得不重新渲染这部分代码；
9.整个<html>＜/html＞文档暂时加载完成；
10.此时用户点了一下界面中的“换肤”按钮，js让浏览器换了一下＜link＞标签的CSS路径；
11.浏览器向服务器请求了新的CSS文件，重新加载页面，然后执行渲染过程。

浏览器向服务器请求资源过程：

浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。用户用URI（Uniform Resource Identifier统一资源标识符）来指定所请求资源的位置，通过DNS查询，将网址转换为IP地址，整个浏览器工作的流程：
1.输入网址;
2.浏览器查找域名的IP地址;
3.浏览器给web服务器发送一个HTTP请求 ;
4. 网站服务的永久重定向响应 ;
5. 浏览器跟踪重定向地址 现在，浏览器知道了要访问的正确地址，所以它会发送另一个获取请求;
6. 服务器“处理”请求，服务器接收到获取请求，然后处理并返回一个响应;
7. 服务器发回一个HTML响应 ;
8. 浏览器开始显示HTML ;
9.

浏览器发送请求，以获取嵌入在HTML中的对象,在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签,这时，浏览器会发送一个获取请求来重新获得这些文件,这些文件就包括CSS/JS/图片等资源，这些资源的地址都要经历一个和HTML读取类似的过程,所以浏览器会在DNS中查找这些域名，发送请求，重定向等。

浏览器渲染HTML页面步骤的更多相关文章

  1. 【菜鸟笔记】记一次django无法正常在ie和edge浏览器渲染html页面

    如图所示,django无法渲染html显示成下载文件了 一步一步的从render ==>HttpResponse ==>HttpResponseBase 找到 即django文件夹下的ht ...

  2. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

  3. nodejs（8） 使用ejs渲染动态页面

    使用ejs渲染动态页面 步骤: 安装 ejs 模板引擎npm i ejs -S 使用 app.set() 配置默认的模板引擎 app.set('view engine', 'ejs') 使用 app. ...

  4. 多进程浏览器、多线程页面渲染与js的单线程

    线程与进程 说到单线程,就得从操作系统进程开始说起.在早期的操作系统中并没有线程的概念,进程是能拥有资源和独立运行的最小单位,也是程序执行的最小单位.任务调度采用的是时间片轮转的抢占式调度方式,而进程 ...

  5. 浅谈浏览器解析 URL+DNS 域名解析+TCP 三次握手与四次挥手+浏览器渲染页面

    (1)浏览器解析 URL 为了能让我们的知识层面看起来更有深度,我们应该考虑下面两个问题了: 从浏览器输入 URL 到渲染成功的过程中,究竟发生了什么? 浏览器渲染过程中,发生了什么,是不是也有重绘与 ...

  6. 160826、浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘

    一.浏览器渲染页过程描述   1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...

  7. 浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘。

    一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DOM树 ...

  8. 浏览器渲染页面的时候，不同的script块之间的关系

    浏览器渲染页面时,当读到script元素的时候,浏览器中的js引擎会分多个script代码块来读取,不同的script代码出错互不影响,但是由于script中的变量作用域是全局,所以前面代码块声明的变 ...

  9. 网页性能优化：防止JavaScript、CSS阻塞浏览器渲染页面

    网页中引用的外部文件: JavaScritp.CSS 等常常会阻塞浏览器渲染页面.假设在 <head> 中引用的某个 JavaScript 文件由于各种不给力需要2秒来加载,那么浏览器渲染 ...

随机推荐

  1. 初级模拟电路：1-2 PN结与二极管

    回到目录 1.   掺杂半导体 上面我们分析了本征半导体的导电情况,但由于本征半导体的导电能力很低,没什么太大用处.所以,一般我们会对本征半导体材料进行掺杂,即使只添加了千分之一的杂质,也足以改变半导 ...

  2. Jmeter中使用CSV Data Set Config

    A

  3. java基础口述

    1:什么是变量?变量的定义格式?要使用变量需要注意什么? 在程序运行过程中,其值是可以在某个范围内发生改变的量. 变量其实就是内存中一小块区域. 由3部分组成: 1,数据类型: 限定变量的取值 2,变 ...

  4. 邓_ Mysql·笔记

    MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司.MySQL是最流行的关系型数据库管理系统,在WEB应用方面MySQL是最好的RDBMS(Relation ...

  5. SSH框架整合截图(二)

    客户拜访管理 1 什么是客户拜访 (1)客户:与公司有业务往来的 (2)用户:可以使用系统的人 2 用户和客户关系 (1)用户和客户之间是拜访的关系 (2)用户 和 客户 是 多对多关系 ** 一个用 ...

  6. 04springMVC数据类型转换

    数据类型转换简介 Spring Web MVC中的数据类型转换 内建的类型转换器 自定义类型转换器 1      数据类型转换简介 当从页面提交数据到后台Action的时候,通过请求发送的数据,通常都 ...

  7. plsql里面执行正常，java运行报ORA-01722: 无效数字

    贴代码: <select id="getInfo" parameterClass="java.util.HashMap" resultClass=&quo ...

  8. Android漫游记(6)---APP启动之旅（I）

    Android基于Linux2.6+内核,我们看一张图,以对Android系统的架构有个感性的认识. 我们从Kernel层简单说明: 1.Kernel层:基于Linux2.6+内核.同一时候做了一些嵌 ...

  9. oracle实现查询每个部门的员工工资排在前三的员工的基本信息具体举例

    --先删除原先存在的表: drop table emp; --创建表emp create table emp ( deptno number, ename varchar2(20), sal numb ...

  10. hdu 5410 CRB and His Birthday 01背包和全然背包

    #include<stdio.h> #include<string.h> #include<vector> #include<queue> #inclu ...