关于浏览器解析html全过程详解
本人web前端菜鸟一枚,第一次在这里发博客梳理知识,知识都是从各地方查阅引用以及自己的理解得来,有什么错误的地方欢迎指正。
DOM文档通常加载的步骤:
1.解析HTML结构。
2.加载外部脚本和样式表文件
3.解析并执行脚本代码。
4.DOM树构建完成。//DOMContentLoaded
5.加载图片等外部资源。
6.页面加载完毕。//load
顺序是这样,但很多时候几个步骤是同时发生的。
在这里梳理一下完整流程下的各种细节:
由于浏览器采用至上而下的方式解析,所以会先解析html,直到遇到外部样式和外部脚本。这时会阻塞浏览器的
解析,外部样式和外部脚本(在没有async、defer属性下)会并行加载,但是外部样式会阻塞外部脚本的执行。
情况一:如果是动态脚本(即内联脚本)则不受样式影响,在解析到它时会执行。
情况二:外部样式后续外部脚本含有async属性(IE下为defer),外部样式不会阻塞该脚本的加载与执行
在外部样式执行完毕后,css附着于DOM,创建了一个渲染树(渲染树是一些被渲染对象的集)。每个渲染对象都
包含了与之对应的计算过样式的DOM对象,对于每个渲染元素来说,位置都经过计算,所以这里被叫做“布局”。然
后将“布局”显示在浏览器窗口,称之为“绘制”。
接着脚本的执行完毕后,DOM树构建完成。这时,可以触发DOMContentLoaded事件。
DOMContentLoaded事件的触发条件是:在所有的DOM全部加载完毕并且js加载执行后触发。
情况一:如果脚本是动态加载,则不会影响DOMContentLoaded时间的触发
浏览器会等css加载完成后再加载图片,因为不确定图片的样式会如何。
要点一:CSS样式表会阻塞图片的加载,如果想让图片尽快加载,就不要给图片使用样式,比如宽高采用标签属性即可。
要点二:脚本不会阻塞图片的加载
最后页面加载完成,页面load
关于浏览器解析html全过程详解的更多相关文章
- 浏览器解析html全过程详解
前端文摘:深入解析浏览器的幕后工作原理 关于浏览器解析html全过程详解 输入URL到浏览器接收返回的数据的整个过程 TCP报文格式详解 IP报文格式详解 Linux IO模式及 select.pol ...
- 谷歌地图地理解析和反解析geocode.geocoder详解
地址解析就是将地址(如:贵州省贵阳市)转换为地理坐标(如经度:106.71,纬度:26.57)的过程. 地理反解析和上面的过程相反是将地理坐标(如纬度:26.57,经度:106.71)转换为地址(中国 ...
- XML解析之SAX详解
XML解析之SAX详解 本文属于作者原创 http://www.cnblogs.com/ldnh/ XML解析的五个步骤 1.打开文档 (void)parserDidStartDocument:(NS ...
- CAS (5) —— Nginx代理模式下浏览器访问CAS服务器配置详解
CAS (5) -- Nginx代理模式下浏览器访问CAS服务器配置详解 tomcat版本: tomcat-8.0.29 jdk版本: jdk1.8.0_65 nginx版本: nginx-1.9.8 ...
- 谷歌地图地理解析和反解析geocode.geocoder详解(转)
谷歌地图地理解析和反解析geocode.geocoder详解 谷歌Geocoder服务 实例代码 地址解析就是将地址(如:贵州省贵阳市)转换为地理坐标(如经度:106.71,纬度:26.57)的过程. ...
- 转载]OK6410之tftp下载内核,nfs挂载文件系统全过程详解[转]
原文地址:OK6410之tftp下载内核,nfs挂载文件系统全过程详解[转]作者:千山我独行 由于工作的平台也是嵌入式,差不多的平台,所以一直就没有把自己买过来的ok6410板子好好玩玩.以前一直都是 ...
- 输入一个url全过程详解
1. 用户在浏览器中输入url,浏览器接收到url. 2.浏览器接收到这个url之后,会根据这个url会先查看缓存,如果有缓存且没有过期的话直接提供给客户端,完成页面渲染. 3.否则浏览器就会通过DN ...
- 10.Spark Streaming源码分析:Receiver数据接收全过程详解
原创文章,转载请注明:转载自 听风居士博客(http://www.cnblogs.com/zhouyf/) 在上一篇中介绍了Receiver的整体架构和设计原理,本篇内容主要介绍Receiver在 ...
- DNS解析全过程详解
1.Chrome浏览器 会首先搜索浏览器自身的DNS缓存(缓存时间比较短,大概只有1分钟,且只能容纳1000条缓存),看自身的缓存中是否有www.linux178.com 对应的条目,而且没有过期,如 ...
随机推荐
- maven编译常见错误解决方法整理
程序包com.sun.xml.internal.ws.spi不存在 当maven项目里面有用到JDK内部的一些类,接口(如:com.sun.xml.internal.ws.spi.ProviderIm ...
- Linux离线安装Ruby详解
很多时候我们会发现,真实的生成环境很多都没有外网,只有内网环境,这个时候我们又需要安装Ruby,则不能提供yum命令进行在线安装了,这个时候我们就需要下载安装包进行离线安装.本文主要简单介绍如果离线安 ...
- bash远程代码执行漏洞
博客园新闻:http://news.cnblogs.com/n/504506/(如果以下有说错的地方请不吝指出,谢谢~) 详情可围观上面的链接.因为我们的服务器都是私有网环境,即使要修复也得等到下次安 ...
- Spring实现IoC的多种方式
目录 一.使用XML配置的方式实现IOC 二.使用Spring注解配置IOC 三.自动装配 四.零配置实现IOC 五.示例下载 控制反转IoC(Inversion of Control),是一种设计思 ...
- 虚函数&多态
对于经常被问到的虚函数和多态的问题,发现百度百科回答得十分详细,所以自己在百度百科上的解释进行总结 一.虚函数 (1)虚函数简介:在某基类中声明为virtual并在一个或者多个派生类中被重新定义的成员 ...
- 面向对象15.3String类-常见功能-获取-2
public class String_APImethod {/* * 1.4获取字符串中的一部分字符串,也叫字符串 * String substring(int beginIndex, int en ...
- iOS实现Android中Gone的功能
实现隐藏view但不占位置的需求是很常见的(Android里的view.GONE),可iOS里并没有这玩意,只有hidden.于是自己写了一个一般情况下用的category,特殊情况就得看情况做了.其 ...
- NOIP模拟:切蛋糕(数学欧拉函数)
题目描述 BG 有一块细长的蛋糕,长度为 n. 有一些人要来 BG 家里吃蛋糕, BG 把蛋糕切成了若干块(整数长度),然后分给这些人. 为了公平,每个人得到的蛋糕长度和必须相等,且必须是连续的一段 ...
- 如何在Shell中快速切换目录
1.回到上一次进入的路经cd -2.回到Homecd ~3.自动补齐实例,cd /usr/src/redhat,可以用cd /u[TAB]s[TAB]r[TAB]4.!$ 表示上一个命令的最后一个参数 ...
- linux下查看jdk路径
jdk安装后 centos中: 执行 rpm -ql java-1.7.0-openjdk-devel | grep '/bin/javac' 命令确定, 执行后会输出一个路径,除去路径末尾的 &qu ...