html加载和解析流程
之前查找资料了解了html的整个渲染过程,对于理解页面加载帮助还是蛮大的,下面我用visio把它画成流程图,便于直观理解

好吧,居然要150字才能发布............
浏览器渲染过程
浏览器渲染分为四步
1、首先获取html,然后获取dom树
2、构建render树
3、布局render树
4、绘制render树
浏览器工作过程
1、输入网址
2、浏览器查找域名IP地址
3、浏览器给Web服务器发送一个Http请求
4、网站服务的永久重定向响应
5、浏览器跟踪重定向地址,重新发送一个获取请求
6、服务器处理请求,返回响应
7、服务器返回一个html响应
8、浏览器开始显示html内容
9、浏览器发送请求以获取嵌入HTML中的对象,浏览器显示HTML时,他会注意到需要获取其他地址内容的标签。这时,浏览器会发送一个请求来重新获取这些文件,这些文件就包括css/js/图片等资源。这些和HTML读取类似,所以浏览器都会在DNS中查找这些域名并发送请求获取资源响应
渲染的时候,浏览器会解析这三个东西
1、HTML/SVG/XHTML,解析这三种文件会产生一个DOMTree
2、CSS,解析CSS会产生CSS规则树
3、JavaScript脚本,主要通过DOM API和CSSDOM API来操作DOM Tree和CSS Rule Tree
注意:为了更好的体验,渲染引擎会尽可能早地将内容呈现到屏幕上,并不会等到所有HTML都解析完成之后再去构建和布局render树,一边渲染内容一边下载资源。不明白的可以再翻上去看下流程图。
html加载和解析流程的更多相关文章
- HTML页面加载和解析流程详细介绍
浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元 ...
- html页面加载和解析流程
HTML页面加载和解析流程 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件: 浏览器开始载入html代码,发现<head>标签内有一 ...
- 从代码分析Android-Universal-Image-Loader的图片加载、显示流程
从UNIVERSAL IMAGE LOADER. PART 3(四个DisplayImage重载方法详解)中,我们学习了Android-Universal-Image-Loader(以下简称UIL)中 ...
- 解剖Nginx·模块开发篇(4)模块开发中的命名规则和模块加载与运行流程
1 命名规则 1.1 基本变量 基本变量有三个: ngx_module_t 类型的 ngx_http_foo_bar_module: ngx_command_t 类型的数组 ngx_http_foo_ ...
- HTML文档、javascript脚本的加载与解析
1.onload事件 1.1 onload事件分类 a.文档加载完成事件(包括脚本.图片等资源都加载完),绑定方法:<body onload="doSomething()"& ...
- 图解classloader加载class的流程及自定义ClassLoader
图解classloader加载class的流程及自定义ClassLoader 博客分类: JVM JavaJVM虚拟机EXTSUN /** * 转载请注明作者longdick http://l ...
- Tomcat源码分析——SERVER.XML文件的加载与解析
前言 作为Java程序员,对于Tomcat的server.xml想必都不陌生.本文基于Tomcat7.0的Java源码,对server.xml文件是如何加载和解析的进行分析. 加载 server.xm ...
- Bean Definition从加载、解析、处理、注册到BeanFactory的过程。
为了弄清楚Bean是怎么来的,花费了大把功夫,现在要把Bean Definition的加载.解析.处理.注册到bean工厂的过程记下来.这只是bean definition 的加载.解析.处理.注册过 ...
- javascript的加载、解析、执行对浏览器渲染的影响
javascript的加载方式,总得来说是在页面上使用script来声明,以及动态的加载这些方式,而动态的加载,在很多js库中都能够很好的去处 理,从而不至于阻塞其他资源的加载,并与其并行加载下来.这 ...
随机推荐
- This Adroid SDK r…
有时候开启eclipse时会出现如下提示框: This Adroid SDK requires Android Developer
- 关于个人编辑器sublime text3使用指南
用过了好多编辑器,前些年用的zend studio,phpstorm近两年转为nodepad++(因为写的语言种类比较多了,shell,python,php,前端等),相对于nodepad++, s ...
- Log4Net .NET log处理
1.NuGet 安装Log4Net. 2.新建一个Common的project,并且添加一个LogWriter的类: public class LogWriter { //Error log publ ...
- rpmrebuild备份glibc
任务: 备份已安装的glibc为RPM包,还原. 准备: 下载rpmrebuild 上传至服务器 链接: https://pan.baidu.com/s/1pKNGnur 密码: wgy9 操作: 1 ...
- hadoop搭建在Ubuntu16.04上
一.环境 Ubuntu16.04.Hadoop2.7.3.java8 系统安装完成后建议先更新一下 apt源 1.复制原文件备份 sudo cp /etc/apt/source.list /etc/a ...
- 设计模式-前摄器模式(Proactor)
本周要进行boost asio库的学习,在学习之前发现最好需要先了解一下前摄器模式,这样对asio库的理解很有帮助,故写下此文 我之前写的随笔XShell的模拟实现中的链接方式可以说是同步的(服务器阻 ...
- 从源码理解Spring原理,并用代码实现简易Spring框架
前言(本文为原创,转载请注明出处) 个人之前对于框架的学习,就停留在配置,使用阶段.说实话过段时间就会忘得荡然无存.也不知道框架的运行逻辑,就是知道添加个注解,就可以用了. 由于实习,时间比较多,也感 ...
- 剑指OFFER——正则表达式匹配
请实现一个函数用来匹配包括'.'和'*'的正则表达式.模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(包含0次). 在本题中,匹配是指字符串的所有字符匹配整个模式.例如,字 ...
- .NET Core 2.0 开源Office组件 NPOI
前言 去年 12 月,我移植了大家所熟知 NPOI 到 .NET Core 版本,这里是当时发的博客,当时得到了很多同学的支持,社区反应也很好,在这里非常感谢当时推荐的朋友们. 去年的那个版本是针对于 ...
- Git的commit your changes or stash them before you can merge
今天用git pull来更新代码,遇到了下面的问题: error: Your local changes to the following files would be overwritten by ...