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. SharePoint List来做项目管理
			
    其实这是一个常见的问题,已经不仅仅只是一次用SharePoint List来做项目管理了. 核心 1. SharePoint List Lookup自己来实现项目的父子关系 2. 权限控制,直接控制在 ...
    
			
    2. 
						
  2. ubuntu下安装程序的三种方法
			
    引言 在ubuntu当中,安装应用程序我所知道的有三种方法,分别是apt-get,dpkg安装deb和make install安装源码包三种.下面针对每一种方法各举例来说明. apt-get方法 使用 ...
    
			
    3. 
						
  3. C++类模板
			
    在上篇文章(C++函数模板)中,主要介绍了C++中函数模板,与函数相似,类也可以被一种或多种类型参数化.容器类就是一个具有这种特性的典型的例子, 本文地址:http://www.cnblogs.com ...
    
			
    4. 
						
  4. Struts2(十三)国际化-internationalization
			
    一.国际化是什么--I18N 即internationalization 首字母i-结束字母n之间有18个字母 特征:在程序不做修改的情况下,可以根据不同的语言环境显示相应内容 二.Java内置国际化 ...
    
			
    5. 
						
  5. float类型转对象 对象转float类型（一）
			
    //float类型转化为对象CGFloat fValue = 1.f;NSNumber *objNo = [NSNumber numberWithFloat:fValue];数值.BOOL型都可以转成 ...
    
			
    6. 
						
  6. C#  零散知识   扩展方法   类型约束
			
    今天看到这么一段代码,我看下面调用了NotifyPropertyChanged定义了两个参数,但是调用的时候只写了一个参数.后来查了下,原来这个是扩展方法的用法, 就是说给T扩展了一个方法Notify ...
    
			
    7. 
						
  7. UVa 106 - Fermat vs Pythagoras（数论题目）
			
    题目来源:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=3&pa ...
    
			
    8. 
						
  8. 关于Block Formatting Context－－BFC和IE的hasLayout
			
    转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式 ...
    
			
    9. 
						
  9. [Weblogic]startWebLogic.cmd配置JAVA_OPTIONS无效的解决思路与方案
			
    事情背景: 由于某个项目原因,需要在2个域的startWebLogic.cmd文件加入如下设置 set JAVA_OPTIONS=%JAVA_OPTIONS% -javaagent:"pat ...
    
			
    10. 
						
  10. GDI学习之俄罗斯方块续
			
    当前方块对象 #region 定义砖块int[i,j,y,x] Tricks:i为那块砖,j为状态,y为列,x为行 private int[, , ,] Tricks = {{ { {,,,}, {, ...
    
			
    11.