之前查找资料了解了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加载和解析流程的更多相关文章

  1. HTML页面加载和解析流程详细介绍

    浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元 ...

  2. html页面加载和解析流程

    HTML页面加载和解析流程 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件: 浏览器开始载入html代码,发现<head>标签内有一 ...

  3. 从代码分析Android-Universal-Image-Loader的图片加载、显示流程

    从UNIVERSAL IMAGE LOADER. PART 3(四个DisplayImage重载方法详解)中,我们学习了Android-Universal-Image-Loader(以下简称UIL)中 ...

  4. 解剖Nginx·模块开发篇(4)模块开发中的命名规则和模块加载与运行流程

    1 命名规则 1.1 基本变量 基本变量有三个: ngx_module_t 类型的 ngx_http_foo_bar_module: ngx_command_t 类型的数组 ngx_http_foo_ ...

  5. HTML文档、javascript脚本的加载与解析

    1.onload事件 1.1 onload事件分类 a.文档加载完成事件(包括脚本.图片等资源都加载完),绑定方法:<body onload="doSomething()"& ...

  6. 图解classloader加载class的流程及自定义ClassLoader

    图解classloader加载class的流程及自定义ClassLoader 博客分类: JVM JavaJVM虚拟机EXTSUN /** *  转载请注明作者longdick    http://l ...

  7. Tomcat源码分析——SERVER.XML文件的加载与解析

    前言 作为Java程序员,对于Tomcat的server.xml想必都不陌生.本文基于Tomcat7.0的Java源码,对server.xml文件是如何加载和解析的进行分析. 加载 server.xm ...

  8. Bean Definition从加载、解析、处理、注册到BeanFactory的过程。

    为了弄清楚Bean是怎么来的,花费了大把功夫,现在要把Bean Definition的加载.解析.处理.注册到bean工厂的过程记下来.这只是bean definition 的加载.解析.处理.注册过 ...

  9. javascript的加载、解析、执行对浏览器渲染的影响

    javascript的加载方式,总得来说是在页面上使用script来声明,以及动态的加载这些方式,而动态的加载,在很多js库中都能够很好的去处 理,从而不至于阻塞其他资源的加载,并与其并行加载下来.这 ...

随机推荐

  1. 23. leetcode 169. Majority Element

    169. Majority Element Given an array of size n, find the majority element. The majority element is t ...

  2. 自定义Git之配置别名

    有没有经常敲错命令?比如git status?status这个单词真心不好记. 如果敲git st就表示git status那就简单多了,当然这种偷懒的办法我们是极力赞成的. 我们只需要敲一行命令,告 ...

  3. MySQL grant命令使用

    MySQL 赋予用户权限命令的简单格式可概括为: grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删除 数据库中所有表数据的权利. grant sele ...

  4. python进阶(6):多态,封装

    昨天说了面向对象三大特性的继承,今天来说多态和封装,很多其他程序员说python不支持多态没有多态,并不是python没有多态,而是python处处皆多态.今天的讲课重点会放在封装. 一.多态 1.多 ...

  5. C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码

    前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. .NET ...

  6. 链接样式L-O-H-A

    伪类可以链接起来使用,即不用在乎顺序 :link{color:blue;} :visited{color:purple;} :link:hover{color:red;} :visited:hover ...

  7. 在AWS中部署OpenShift平台

    OpenShift是RedHat出品的PAAS平台.OpenShift做为PAAS平台最大的特点是它是完全容器化的PAAS平台,底层封装了Docker和Kubernetes,上层暴露了对开发者友好的接 ...

  8. 数据库及SQL----常用知识点总结

    数据库也是计算机类笔试面试中不可避免会遇到的考点,尤其是银行和部分传统软件类公司.这里根据整理的资料,对数据库的相关知识也做个总结吧.希望学过数据库但长时间不用的同学根据这些知识能够回忆和重拾,没学过 ...

  9. 【Ubuntu 16】显示管理器lightdm

    lightdm是一个全新的轻量级的显示管理器,在Ubuntu16.04上面已经使用. 从图形界面进入到命令行界面 systemctl disable lightdm.service 从命令行进入到图形 ...

  10. Python量化投资知识总结贴

    Ricequant 量化社区的初衷让各位爱好量化的人士可以碰撞思维,在分享和争辩中学习到有用且实战的量化知识.有赖于各位在社区中贡献满满的干货以及有质量的讨论,从编程入门教学到技术指标再到多因子选股. ...