本人web前端菜鸟一枚,第一次在这里发博客梳理知识,知识都是从各地方查阅引用以及自己的理解得来,有什么错误的地方欢迎指正。

DOM文档通常加载的步骤:

1.解析HTML结构。

2.加载外部脚本和样式表文件

3.解析并执行脚本代码。

4.DOM树构建完成。//DOMContentLoaded

5.加载图片等外部资源。

6.页面加载完毕。//load

顺序是这样,但很多时候几个步骤是同时发生的。

在这里梳理一下完整流程下的各种细节:

由于浏览器采用至上而下的方式解析,所以会先解析html,直到遇到外部样式和外部脚本。这时会阻塞浏览器的

解析,外部样式和外部脚本(在没有async、defer属性下)会并行加载,但是外部样式会阻塞外部脚本的执行。

  即:html解析->外部样式、脚本加载->外部样式执行->外部脚本执行->html继续解析

情况一:如果是动态脚本(即内联脚本)则不受样式影响,在解析到它时会执行。

情况二:外部样式后续外部脚本含有async属性(IE下为defer),外部样式不会阻塞该脚本的加载与执行

在外部样式执行完毕后,css附着于DOM,创建了一个渲染树(渲染树是一些被渲染对象的集)。每个渲染对象都

包含了与之对应的计算过样式的DOM对象,对于每个渲染元素来说,位置都经过计算,所以这里被叫做“布局”。然

后将“布局”显示在浏览器窗口,称之为“绘制”。

接着脚本的执行完毕后,DOM树构建完成。这时,可以触发DOMContentLoaded事件。

DOMContentLoaded事件的触发条件是:在所有的DOM全部加载完毕并且js加载执行后触发。

  情况一:如果脚本是动态加载,则不会影响DOMContentLoaded时间的触发

  浏览器会等css加载完成后再加载图片,因为不确定图片的样式会如何。

要点一:CSS样式表会阻塞图片的加载,如果想让图片尽快加载,就不要给图片使用样式,比如宽高采用标签属性即可。

要点二:脚本不会阻塞图片的加载

最后页面加载完成,页面load

关于浏览器解析html全过程详解的更多相关文章

  1. 浏览器解析html全过程详解

    前端文摘:深入解析浏览器的幕后工作原理 关于浏览器解析html全过程详解 输入URL到浏览器接收返回的数据的整个过程 TCP报文格式详解 IP报文格式详解 Linux IO模式及 select.pol ...

  2. 谷歌地图地理解析和反解析geocode.geocoder详解

    地址解析就是将地址(如:贵州省贵阳市)转换为地理坐标(如经度:106.71,纬度:26.57)的过程. 地理反解析和上面的过程相反是将地理坐标(如纬度:26.57,经度:106.71)转换为地址(中国 ...

  3. XML解析之SAX详解

    XML解析之SAX详解 本文属于作者原创 http://www.cnblogs.com/ldnh/ XML解析的五个步骤 1.打开文档 (void)parserDidStartDocument:(NS ...

  4. CAS (5) —— Nginx代理模式下浏览器访问CAS服务器配置详解

    CAS (5) -- Nginx代理模式下浏览器访问CAS服务器配置详解 tomcat版本: tomcat-8.0.29 jdk版本: jdk1.8.0_65 nginx版本: nginx-1.9.8 ...

  5. 谷歌地图地理解析和反解析geocode.geocoder详解(转)

    谷歌地图地理解析和反解析geocode.geocoder详解 谷歌Geocoder服务 实例代码 地址解析就是将地址(如:贵州省贵阳市)转换为地理坐标(如经度:106.71,纬度:26.57)的过程. ...

  6. 转载]OK6410之tftp下载内核,nfs挂载文件系统全过程详解[转]

    原文地址:OK6410之tftp下载内核,nfs挂载文件系统全过程详解[转]作者:千山我独行 由于工作的平台也是嵌入式,差不多的平台,所以一直就没有把自己买过来的ok6410板子好好玩玩.以前一直都是 ...

  7. 输入一个url全过程详解

    1. 用户在浏览器中输入url,浏览器接收到url. 2.浏览器接收到这个url之后,会根据这个url会先查看缓存,如果有缓存且没有过期的话直接提供给客户端,完成页面渲染. 3.否则浏览器就会通过DN ...

  8. 10.Spark Streaming源码分析:Receiver数据接收全过程详解

    原创文章,转载请注明:转载自 听风居士博客(http://www.cnblogs.com/zhouyf/)   在上一篇中介绍了Receiver的整体架构和设计原理,本篇内容主要介绍Receiver在 ...

  9. DNS解析全过程详解

    1.Chrome浏览器 会首先搜索浏览器自身的DNS缓存(缓存时间比较短,大概只有1分钟,且只能容纳1000条缓存),看自身的缓存中是否有www.linux178.com 对应的条目,而且没有过期,如 ...

随机推荐

  1. maven编译常见错误解决方法整理

    程序包com.sun.xml.internal.ws.spi不存在 当maven项目里面有用到JDK内部的一些类,接口(如:com.sun.xml.internal.ws.spi.ProviderIm ...

  2. Linux离线安装Ruby详解

    很多时候我们会发现,真实的生成环境很多都没有外网,只有内网环境,这个时候我们又需要安装Ruby,则不能提供yum命令进行在线安装了,这个时候我们就需要下载安装包进行离线安装.本文主要简单介绍如果离线安 ...

  3. bash远程代码执行漏洞

    博客园新闻:http://news.cnblogs.com/n/504506/(如果以下有说错的地方请不吝指出,谢谢~) 详情可围观上面的链接.因为我们的服务器都是私有网环境,即使要修复也得等到下次安 ...

  4. Spring实现IoC的多种方式

    目录 一.使用XML配置的方式实现IOC 二.使用Spring注解配置IOC 三.自动装配 四.零配置实现IOC 五.示例下载 控制反转IoC(Inversion of Control),是一种设计思 ...

  5. 虚函数&多态

    对于经常被问到的虚函数和多态的问题,发现百度百科回答得十分详细,所以自己在百度百科上的解释进行总结 一.虚函数 (1)虚函数简介:在某基类中声明为virtual并在一个或者多个派生类中被重新定义的成员 ...

  6. 面向对象15.3String类-常见功能-获取-2

    public class String_APImethod {/* * 1.4获取字符串中的一部分字符串,也叫字符串 * String substring(int beginIndex, int en ...

  7. iOS实现Android中Gone的功能

    实现隐藏view但不占位置的需求是很常见的(Android里的view.GONE),可iOS里并没有这玩意,只有hidden.于是自己写了一个一般情况下用的category,特殊情况就得看情况做了.其 ...

  8. NOIP模拟:切蛋糕(数学欧拉函数)

    题目描述  BG 有一块细长的蛋糕,长度为 n. 有一些人要来 BG 家里吃蛋糕, BG 把蛋糕切成了若干块(整数长度),然后分给这些人. 为了公平,每个人得到的蛋糕长度和必须相等,且必须是连续的一段 ...

  9. 如何在Shell中快速切换目录

    1.回到上一次进入的路经cd -2.回到Homecd ~3.自动补齐实例,cd /usr/src/redhat,可以用cd /u[TAB]s[TAB]r[TAB]4.!$ 表示上一个命令的最后一个参数 ...

  10. linux下查看jdk路径

    jdk安装后 centos中: 执行 rpm -ql java-1.7.0-openjdk-devel | grep '/bin/javac' 命令确定, 执行后会输出一个路径,除去路径末尾的 &qu ...