浏览器渲染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秒来加载,那么浏览器渲染 ...
随机推荐
- JS棋盘
有一个棋盘,有64个方格,在第一个方格里面放1粒芝麻重量是0.00001kg, 第二个里面放2粒,第三个里面放4,棋盘上放的所有芝麻的重量 <!DOCTYPE html> <html ...
- jq操作table追加td
示例 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 如何分页爬取数据--beautisoup
'''本次爬取讲历史网站'''#!usr/bin/env python#-*- coding:utf-8 _*-"""@author:Hurrican@file: 分页爬 ...
- element合并单元格方法及遇到问题的解决办法
效果如图: 代码如下 <!-- 查看选课 --> <template> <div> <el-table :data="listData" ...
- OPENGL学习【一】VS2008开发OPENGL程序开发环境搭建
1.VS2008工具自行在网上下载安装,现只提供VS2008开发工具中配置OPENGL环境的详细步骤.开发包及编译工具会在下方一并放出链接. 2.打开CMake的工具,主要的配置信息如下,按照数字顺序 ...
- 通过js 实现 向页面插入js代码并生效，和页面postMessage通讯
此文章针对已经搭建好jenkins和会使用iconfont图标库而写. 主要目标就是在不通过更改html文件,完成页面交互图标信息,因为美工最多可以上传代码并且自动发布,并不会在Html中加入我 ...
- webpack学习笔记(4)--webpack.config.js
devtool参数 这个参数控制是否生成,以及如何生成source map,已经在官网的doc说明总结了. 下表总结了各个参数和使用的情况 devtool 构建速度 重新构建速度 生产环境 品质(qu ...
- 【LibreOJ 6279】 数列分块入门 3 （分块）
传送门 code: //By Menteur_Hxy #include<cstdio> #include<iostream> #include<algorithm> ...
- 用于检测进程的shell脚本
用于检测进程的shell脚本 2010-07-07 10:38:08| 分类: Centos |字号 订阅 脚本一: #!/bin/sh program=XXXX #进程名 sn=`ps - ...
- jQuery练习总结(一)
第一个jQuery程序: 注意:使用jQuery时候定义单击事件使用的方法是click(function(){处理单击事件产生时所要执行的代码}) , 而JavaScript定义的单击事件则是 xx. ...