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. 读书笔记2013第10本：《学得少却考得好Learn More Study Less》
			
    <学得少却考得好Learn More Study Less>这本书最早是从褪墨网站上看到的,crowncheng翻译了全文.这本书介绍了不少学习方法,非常适合在校的学生,原文的作者Scot ...
    
			
    2. 
						
  2. Effective Java 33 Use EnumMap instead of ordinal indexing
			
    Wrong practice: Putting sets into an array indexed by the type's ordinal /** * Added demo for the &q ...
    
			
    3. 
						
  3. 学习HTML5必读之《HTML5设计原理》
			
    引子:很久前看过的一遍受益匪浅的文章,今天再次转过来,希望对学习HTML5的朋友有所帮助. 今天我想跟大家谈一谈HTML5的设计.主要分两个方面:一方面,当然了,就是HTML5.我可以站在这儿只讲HT ...
    
			
    4. 
						
  4. 关于Redis中的数据类型
			
    一. Redis常用数据类型 Redis最为常用的数据类型主要有以下: String Hash List Set Sorted set 一张图说明问题的本质 图一: 图二: 代码: /* Object ...
    
			
    5. 
						
  5. python 练习多级菜单思路
			
    只写了一个zj的三级菜单,后面的功能没写 #-*- coding :utf-8 -*- print """ 你可以输入省份然后根据市县输入 ""&qu ...
    
			
    6. 
						
  6. centos下yum搭建安装linux+apache+mysql+php环境
			
    一.脚本YUM源安装: 1.yum install wget                                                     #安装下载工具wget 2.wge ...
    
			
    7. 
						
  7. 简单谈谈RAID
			
    RAID是“Redundant Array of Independent Disk”的缩写,翻译过来叫做独立磁盘的冗余阵列,其实就是磁盘的存储.访问.备份技术.在谈RAID之前,先简单学习一下存储器的 ...
    
			
    8. 
						
  8. linux 截图利器-scrot
			
    一.前言 linux下截图工具有很多,scrot无疑是众多工具中的一个亮点,下面记录下其安装配置过程 二.使用环境 操作系统: centos 6.2 三.依赖 scrot依赖 giblib, gibl ...
    
			
    9. 
						
  9. CCDH证书
			
    4月份有些冲动,想报名考个CCDH证书,一直没有找到合适的付款方式,因为自己没有外币信用卡, 后来受到朋友的帮助,22号付了款,26号就去考了试,不是很满意,如果少冲动一下,多看两天书, 效果会更好.
    
			
    10. 
						
  10. hadoop debug script
			
    A Hadoop job may consist of many map tasks and reduce tasks. Therefore, debugging a Hadoop job is of ...
    
			
    11.