Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验
　　简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：
　　1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；DOCTYPE文档说明：<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。每一个HTML文档里都添加一个<!DOCTYPE> 声明，这样浏览器才能获知文档类型， 并且在HTML5中一定书写为<!doctype html>，并且向下兼容。
　　2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件；
　　3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
　　4. 浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
　　5. 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
　　6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
　　7. 浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它；
　　8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<div> （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
　　9. 终于等到了</html>的到来，浏览器泪流满面……
　　10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下<link>标签的CSS路径；
　　11. 浏览器召集了在座的各位<div><span><ul><li>们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请
　　求了新的CSS文件，重新渲染页面。

浏览器解析html的过程是：接受网络数据-》将二进制码变成字符-》将字符变为unicode code points.-》tokenizer -》tree constructor -》DOM ready -》Window ready. 
前端编程，主要理解的是tree constructor -> dom ready -> window ready的流程。因为在tree constructor的过程中，可能会有动态输出，比如 document.createElement('script').
动态输出的部分是怎么被解析的呢？动态的script ready和DOM ready和window ready有什么关系,通过以下代码，可以清楚看出浏览器对HTML的加载过程与事件的触发时间。
01 <!-- 








02
此文件用来测试browser解析HTML的时间顺序














03
1, script to load jQuery.js. -- <script> in <head>














04
2, script to load dojo.js. -- loadDojo function.














05
3, DOMContentLoaded event.














06
4, window load event.














07
5, dojo.js script load event.














08
在代码中嵌入了大量的log来探索dojo和jquery是否被定义。














09
 














10
使用方法: 有6中组合方式














11
<script> for jQuery.js 可以使用async属性或者不使用async.














12
    乘以














13
loadDojo方法可以放在Place 1, Place 2或者Place 3处。默认情况放在了Place 3处。














14
一个地方使用时，另外两个地方必须屏蔽。














15
-->








 
												


											
html的解析的更多相关文章
	

    
						
  1. 【原】Android热更新开源项目Tinker源码解析系列之三：so热更新
		
    本系列将从以下三个方面对Tinker进行源码解析: Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Android热更新开源项目Tinker源码解析系列之二:资源文件热更新 A ...
    
		
    2. 
						
  2. .NET Core中的认证管理解析
		
    .NET Core中的认证管理解析 0x00 问题来源 在新建.NET Core的Web项目时选择“使用个人用户账户”就可以创建一个带有用户和权限管理的项目,已经准备好了用户注册.登录等很多页面,也可 ...
    
		
    3. 
						
  3. Html Agility Pack 解析Html
		
    Hello 好久不见 哈哈,今天给大家分享一个解析Html的类库 Html Agility Pack.这个适用于想获取某网页里面的部分内容.今天就拿我的Csdn的博客列表来举例. 打开页面  用Fir ...
    
		
    4. 
						
  4. 【原】Android热更新开源项目Tinker源码解析系列之一：Dex热更新
		
    [原]Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Tinker是微信的第一个开源项目,主要用于安卓应用bug的热修复和功能的迭代. Tinker github地址:http ...
    
		
    5. 
						
  5. 【原】Android热更新开源项目Tinker源码解析系列之二:资源文件热更新
		
    上一篇文章介绍了Dex文件的热更新流程,本文将会分析Tinker中对资源文件的热更新流程. 同Dex,资源文件的热更新同样包括三个部分:资源补丁生成,资源补丁合成及资源补丁加载. 本系列将从以下三个方 ...
    
		
    6. 
						
  6. 多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例
		
    前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面 ...
    
		
    7. 
						
  7. Asp.Net WebApi核心对象解析（下篇）
		
    在接着写Asp.Net WebApi核心对象解析(下篇)之前,还是一如既往的扯扯淡,元旦刚过,整个人还是处于晕的状态,一大早就来处理系统BUG,简直是坑爹(好在没让我元旦赶过来该BUG),队友挖的坑, ...
    
		
    8. 
						
  8. 【知识必备】内存泄漏全解析，从此拒绝ANR，让OOM远离你的身边，跟内存泄漏say byebye
		
    一.写在前面 对于C++来说,内存泄漏就是new出来的对象没有delete,俗称野指针:而对于java来说,就是new出来的Object放在Heap上无法被GC回收:而这里就把我之前的一篇内存泄漏的总 ...
    
		
    9. 
						
  9. SQL Server 数据加密功能解析
		
    SQL Server 数据加密功能解析 转载自: 腾云阁 https://www.qcloud.com/community/article/194 数据加密是数据库被破解.物理介质被盗.备份被窃取的最 ...
    
		
    10. 
						
  10. .NetCore中的日志（1）日志组件解析
		
    .NetCore中的日志(1)日志组件解析 0x00 问题的产生 日志记录功能在开发中很常用,可以记录程序运行的细节,也可以记录用户的行为.在之前开发时我一般都是用自己写的小工具来记录日志,输出目标包 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 深入理解Activity -动手写实例来感受Activity的启动模式
			
    介绍 上篇提到了Activity的任务,任务栈,以及启动模式.对这些概念有了了解以后,自己写一下例子来感受一下,就当作复习和加深印象了.如果对概念不熟悉的可以参考:深入理解Activity-任务,回退 ...
    
			
    2. 
						
  2. JAVA基础学习day22--IO流四-对象序列化、管道流、RandomAccessFile、DataStream、ByteArrayStream、转换流的字符编码
			
    一.对象序列化 1.1.对象序列化 被操作的对象需要实现Serializable接口 1.2.对象序列化流ObjectOutputStream与ObjectInputStream ObjectInpu ...
    
			
    3. 
						
  3. JSON取值前判断
			
    public static void main(String[] args)throws Exception{ String jsonStr1="{\"access_token\& ...
    
			
    4. 
						
  4. Effective Java 48 Avoid float and double if exact answers are required
			
    Reason The float and double types are particularly ill-suited for monetary calculations because it i ...
    
			
    5. 
						
  5. 【PHP】$_POST, $HTTP_RAW_POST_DATA, and php://input
			
    1.HTML <form> enctype Attribute application/x-www-form-urlencoded  传送之前所有的字符都会被encoded,(spaces ...
    
			
    6. 
						
  6. VISUAL STUDIO 调试
			
    调试术语 Visual Studio调试之断点基础篇 Visual Studio调试之断点进阶篇 不能设置断点的检查步骤 Visual Studio调试之断点技巧篇 Visual Studio调试之断 ...
    
			
    7. 
						
  7. spinner下拉列表
			
    xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:l ...
    
			
    8. 
						
  8. sass+compass+bootstrap三剑合璧高效开发记录
			
    1. 先搭建环境,下载node.js,rubyinstaller,安装, 安装rubyinstaller时,要选上include system path,这样就会自动将node.js执行添加到wind ...
    
			
    9. 
						
  9. 01_传说中的车(Fabled Rooks UVa 11134 贪心问题)
			
    问题来源:刘汝佳<算法竞赛入门经典--训练指南> P81: 问题描述:你的任务是在n*n(1<=n<=5000)的棋盘上放n辆车,使得任意两辆车不相互攻击,且第i辆车在一个给定 ...
    
			
    10. 
						
  10. Window I/O 完成端口 （Windows I/O Completion Port (IOCP)）
			
    相关对象 IO EndPoint, 所有支持重叠IO(overlapped IO)的设备,比如文件,Winsock,管道等. IOCP, IO完成端口内核对象,可以使用API CreateIoComp ...
    
			
    11.