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

解析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. jquery的语法

    $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $(".test").hide() - 隐藏所有 class=&q ...

  2. Asp.net Core 源码-UrlExtensions

    using Microsoft.AspNetCore.Http; namespace SportsStore.Infrastructure { public static class UrlExten ...

  3. mac安装win10后触摸板没有右键功能键的添加技巧

    一些mac用户也会在自己的笔记本电脑上安装windows10系统. 但最近有部分用户发现,安装上win10正式版后,发现无论点击触摸板哪个位置,都只有左键,根本无法右键的问题, 针对此问题,现笔者分享 ...

  4. BZOJ 1305: [CQOI2009]dance跳舞 网络最大流_二分答案_建模

    Description 一次舞会有n个男孩和n个女孩.每首曲子开始时,所有男孩和女孩恰好配成n对跳交谊舞.每个男孩都不会和同一个女孩跳两首(或更多)舞曲.有一些男孩女孩相互喜欢,而其他相互不喜欢(不会 ...

  5. Project Euler 28 Number spiral diagonals

    题意:给出一个 1001 × 1001 的矩阵,寻找每一圈四个顶点,并求出所有顶点的和 思路:只需要找到右上顶点数字的规律,然后每一圈四个顶点构成了一个等差数列,求个和即可 /************ ...

  6. 训练1-L

    n个人一起排队接水,第i个人需要ai的时间来接水. 1 <= n <= 1000 1 <= a,i<= 1000 同时只能有一个人接水,正在接水的人和没有接水的人都需要等待. ...

  7. maven的依赖冲突时的原则

    1.如图: 假设上图中的项目B引入了一个junit.jar架包是3.0的版本 项目D引入了一个junit.jar架包是4.0的版本,那么项目X引用的将会是4.0的版本 2.pom.xml排到最前面的架 ...

  8. Problem 3

    Problem 3 # Problem_3.py """ The prime factors of 13195 are 5, 7, 13 and 29. What is ...

  9. 原生js，时间日期简单应用。

    一.数码时钟,滚动切换时间. <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  10. Sereja and Bottles-水题有点坑爹

    CodeForces - 315A Sereja and Bottles Time Limit: 2000MS   Memory Limit: 262144KB   64bit IO Format:  ...