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. 桥牌笔记 Skill Level 4 C7 小心将吃
			
    南主打5H. 看来问题不大,但要小心南的方块AK会阻塞桥路. 如果方块3-2分布,并且将牌也3-2分布,就很容易. 如果红桃4-1分布,那是死定了. 如果方块4-1分布,还有希望完成的! 为了防止东家 ...
    
			
    2. 
						
  2. [leetcode] Count Primes
			
    Count Primes Description: Count the number of prime numbers less than a non-negative number, n click ...
    
			
    3. 
						
  3. 部分博文目录索引（C语言+算法）
			
    今天将本博客的部分文章建立一个索引,方便大家进行阅读,当然每一类别中的文章都会持续的添加和更新(PS:博文主要使用C语言) 博客地址:http://www.cnblogs.com/archimedes ...
    
			
    4. 
						
  4. 用二进制大对象类型Blob实现图片入库与出库的操作
			
    package readclobDemo.bao; import java.io.FileInputStream; import java.io.FileNotFoundException; impo ...
    
			
    5. 
						
  5. iOS 自定义进度条
			
    自定义条形进度条(iOS) ViewController.m文件 #import "ViewController.h" @interface ViewController () @ ...
    
			
    6. 
						
  6. virtualbox 安装 虚拟机的时候报错不能创建新任务
			
    找到原因是因为自己的windows是破解的, 找到C:\Windows\system32\uxtheme.dll这个文件,我的破解的windows在这里自带了一个uxtheme.dll.backup的 ...
    
			
    7. 
						
  7. 在Windows8下安装SQL Server 2005无法启动服务
			
    因为尝鲜安装了Windows8,的确很不错,唯一的遗憾就是不支持Sql Server 2005的安装.找了很多办法,基本上都有缺陷.现在终于找到一种完全正常没有缺陷的办法了,和大家分享一下. 0.一定 ...
    
			
    8. 
						
  8. PHP笔试题（转载）
			
    整理了一份PHP高级工程师的笔试题,问题很全面.嗯,基本上这些题都答得不错,那么你应该可以胜任大部分互联网企业的PHP职位了.下面直接上题. 1. 基本知识点 HTTP协议中几个状态码的含义:503, ...
    
			
    9. 
						
  9. JQ插件
			
    什么是插件 插件(plugin)是JQuery的扩展(Extension),以JQuery的核心代码为基础,是一种遵循一定规范的应用程序接口编写出来的程序. 插件的引入 引入jquery.js文件 引 ...
    
			
    10. 
						
  10. Plus One
			
    Plus One https://leetcode.com/problems/plus-one/ Given a non-negative number represented as an array ...
    
			
    11.