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. 其他图片和webP之间相互转换
			
    WebP 是谷歌研发出来的一种图片数据格式,它是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8.根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45%  ...
    
			
    2. 
						
  2. mac svn client 设置
			
    经过谷歌和百度N次后,终于搞定SVN的升级,Intellij Idea和Xcode5.1都可以正常使用. 步骤: 1. 下载Subverion的Max安装版.(推荐.使用其他brew和port都试过, ...
    
			
    3. 
						
  3. Python基础（2）--对象类型
			
    Python使用对象模型来存储数据.构造任何类型的值都是一个对象 所有的Python对象都拥有三个特性:身份.类型.值 身份: 每一个对象都有一个唯一的身份来标志自己,任何对象的身份可以使用内建函数i ...
    
			
    4. 
						
  4. Java 参数传递都是值传递
			
    Java 参数传递都是值传递,验证代码如下 public class ParamTransferTest { public static void swap(int a, int b) { int t ...
    
			
    5. 
						
  5. android network develop(1)----doing network background
			
    Develop network with HttpURLConnection & HttpClient. HttpURLConnection  is lightweight with Http ...
    
			
    6. 
						
  6. 大家一起和snailren学java-(六)复用类
			
    “失恋了,唉,还没开始就结束了……唉……继续看java” 今天又是周末,我们来看看java的复用机制是什么情况.大家知道,代码复用非常实用,这项特性是java的一个重要的部分.那java用什么来实现的 ...
    
			
    7. 
						
  7. Log4net配置文件一般配置
			
    配置文件一般配置 <?xml version="1.0"?> <configuration> <configSections> <sect ...
    
			
    8. 
						
  8. sql2008备份集中的数据库备份与现有的xxx数据库不同解决方法
			
    原文链接:http://wncbl.cn/posts/1993c22/ 问题描述 今天在配置一个 ASP 站点时,导入以前的数据库备份文件,提示:sql2008备份集中的数据库备份与现有的xxx数据库 ...
    
			
    9. 
						
  9. OOD原则汇总
			
    头五项原则是关于类设计的,它们是: ◆ SRP,单一职责原则,一个类应该有且只有一个改变的理由. ◆ OCP,开放封闭原则,你应该能够不用修改原有类就能扩展一个类的行为. ◆ LSP,Liskov替换 ...
    
			
    10. 
						
  10. hive的常用命令
			
    #从hive中直接进入hdfs的daas/bstl/term/userinfo目录下 hive> !hadoop fs -ls /daas/bstl/term/userinfo; 查看hive表 ...
    
			
    11.