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

解析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. VMware 虚拟化技术 创建虚拟机

    原文地址:https://www.linuxidc.com/Linux/2017-03/141972.htm 云最成熟的架构是IaaS(Infrastructure as a Service),其中用 ...

  2. centos 6.10 永久修改主机名

    1> 修改配置文件 vim /etc/sysconfig/network #HOSTNAME=localhost.localdomain HOSTNAME=tomcat   2> 修改ho ...

  3. js中标签字符串的拼接

    //1.用单双引号拼接 var valueDemo = "111"; var htmlStrs1 = '<option selected="selected&quo ...

  4. HDU1846 - Brave Game【巴什博弈】

    十年前读大学的时候,中国每年都要从国外引进一些电影大片,其中有一部电影就叫<勇敢者的游戏>(英文名称:Zathura),一直到现在,我依然对于电影中的部分电脑特技印象深刻.  今天,大家选 ...

  5. nlogn求逆序对&&陌上花开

    前置: nlogn逆序对: 前一个小时我还真的不会这个Orz 这里运用归并排序的思想. 对于一个序列,我们把它先分开,再合并成一个有序序列. 引自https://blog.csdn.net/qq_30 ...

  6. ftp服务器在linux中安装

    1.安装 执行 yum -y install vsftpd 2.检验是否安装vsftpd : rmp -qa | grep vsftpd      默认配置文件/ect/vsftpd/vsftpd.c ...

  7. 使用LeNet训练自己的手写图片数据

    一.前言 本文主要尝试将自己的数据集制作成lmdb格式,送进lenet作训练和测试,参考了http://blog.csdn.net/liuweizj12/article/details/5214974 ...

  8. 设置编码格式为utf8

    response.setCharacterEncoding("UTF-8"); 在Servlet2.3中是不行的,至少要2.4版本才可以,如果低于2.4版本,可以用如下办法: re ...

  9. HDU 5372 Segment Game

    /** 多校联合2015-muti7-1004 <a target=_blank href="http://acm.hdu.edu.cn/showproblem.php?pid=537 ...

  10. DAC0832、led、蜂鸣器

    52控制DAC0832芯片输出电流,让发光二极管D12由灭均匀变到最亮.再有亮变灭.在最亮和最灭的时候蜂鸣器发出报警声,完毕整个周期的时间是控制在5s左右. #include<reg52.h&g ...