浏览器渲染HTML页面步骤
渲染步骤：浏览器渲染页面时，表示网站资源已经请求成功（要了解查看：浏览器向服务器请求资源过程）
解析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页面步骤的更多相关文章
- 【菜鸟笔记】记一次django无法正常在ie和edge浏览器渲染html页面
如图所示,django无法渲染html显示成下载文件了 一步一步的从render ==>HttpResponse ==>HttpResponseBase 找到 即django文件夹下的ht ...
- 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...
- nodejs（8） 使用ejs渲染动态页面
使用ejs渲染动态页面 步骤: 安装 ejs 模板引擎npm i ejs -S 使用 app.set() 配置默认的模板引擎 app.set('view engine', 'ejs') 使用 app. ...
- 多进程浏览器、多线程页面渲染与js的单线程
线程与进程 说到单线程,就得从操作系统进程开始说起.在早期的操作系统中并没有线程的概念,进程是能拥有资源和独立运行的最小单位,也是程序执行的最小单位.任务调度采用的是时间片轮转的抢占式调度方式,而进程 ...
- 浅谈浏览器解析 URL+DNS 域名解析+TCP 三次握手与四次挥手+浏览器渲染页面
(1)浏览器解析 URL 为了能让我们的知识层面看起来更有深度,我们应该考虑下面两个问题了: 从浏览器输入 URL 到渲染成功的过程中,究竟发生了什么? 浏览器渲染过程中,发生了什么,是不是也有重绘与 ...
- 160826、浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘
一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...
- 浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘。
一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DOM树 ...
- 浏览器渲染页面的时候，不同的script块之间的关系
浏览器渲染页面时,当读到script元素的时候,浏览器中的js引擎会分多个script代码块来读取,不同的script代码出错互不影响,但是由于script中的变量作用域是全局,所以前面代码块声明的变 ...
- 网页性能优化：防止JavaScript、CSS阻塞浏览器渲染页面
网页中引用的外部文件: JavaScritp.CSS 等常常会阻塞浏览器渲染页面.假设在 <head> 中引用的某个 JavaScript 文件由于各种不给力需要2秒来加载,那么浏览器渲染 ...
随机推荐
- php libevent扩展的简单用例
php libevent扩展具有很强大的功能.以下摘自百度百科: Libevent 是一个用C语言编写的.轻量级的开源高性能网络库,主要有以下几个亮点:事件驱动( event-driven),高性能; ...
- Selenium+Python+jenkins搭建web自动化测测试框架
python-3.6.2 chrome 59.0.3071.115 chromedriver 2.9 安装python https://www.python.org/downloads/ (Wind ...
- 22 链表中倒数第k个节点（第3章 高质量的代码-代码的鲁棒性）
题目描述: 输入一个链表,输出该链表中倒数第k个结点. 尾节点是倒数第一个节点 测试用例: 功能测试(第k个节点在中间.是头节点.是尾节点) 特殊输入测试(链表头节点是nullptr指针.链表的头 ...
- Btrfs 文件系统
btrfs文件系统简介 btrfs文件系统:技术预览版(Centos7) Btrfs(B-tree.Butter FS.Better FS),GPL授权,Orale2007提出是想用来取代Ext文 ...
- react 简单在页面中输出一段文字
之前用脚手架创建了一个react项目,将react自带的src文件夹删除后创建一个空的src文件夹 在src文件夹中创建一个index.jsx文件作为JS入口文件并创建一个hello组件 现在我们进入 ...
- CF55C. Pie or die
/* CF55C. Pie or die http://codeforces.com/problemset/problem/55/C 博弈论 乱搞 获胜条件是存在一个棋子到边界的值小于5 */ #in ...
- BP网络中的反向传播
本文的主要参考:How the backpropagation algorithm works 下面是BP网络的参数结构示意图 首先定义第l层网络第j个神经元的输出(activation) 为了表示简 ...
- muduo总结
总结说的有的过大,算是对自己学习的一个总结.兴许会不断补充. 模型总结 muduo是基于非堵塞的IO和事件驱动的网络库. muduo的总体结构时one loop per thread+threadpo ...
- 近200篇机器学习&深度学习资料分享
编者按:本文收集了百来篇关于机器学习和深度学习的资料,含各种文档,视频,源码等.并且原文也会不定期的更新.望看到文章的朋友能够学到很多其它. <Brief History of Machine ...
- HDU 1171 Big Event in HDU（多重背包）
Big Event in HDU Problem Description Nowadays, we all know that Computer College is the biggest depa ...