JSON，加载时间线

JSON

JSON是一种数据传输格式（以对象为样本，用于传输或克隆）

JSON.parse() json-> object
JSON.stringify() json-> string

加载时间线

css,html,js

先形成DOM树
1深度行程，当一条枝干走到头再创建另一条枝干
2 当有src的元素先把元素挂在到树上然后继续解析，解析同时下载
3 DOM树加载完形成css树
css 树
1 根据css结构形成和dom树类似的一个树，跟dom节点对应
2 深度优先
randerTree 渲染树
将dom树和css树结合，行程
reflow：重构
增删改查dom结构，改动randerTree影响效率
display :none --> block
offsetWidth offsetLeft
repaint 重绘
基于randerTree发生改变，比如改背景颜色对效率影响比较小

加载js

js 为单线程加载如果要异步加载比如方法库

defer
<script src="…js" defer= “defer”> </script>
会等页面全部解析完成之后执行
只有ie能用
当不用src时，可以在标签内写代码
aysnc
<script src="…js" aysnc= “aysnc”> </script>
w3c标准加载完立即异步执行
只能引入外部文件
创建script

var script = document.createElement('script');
script.type = "text/javascript";
script.src = "tools.js"; // src赋值会立即开启一个线程下载脚本
document.head.appendChild(script);
script.onload = function(){
	console.log("a");
}
// ie没有onload事件，只有状态码
// script.reasState = "loaded"; // 表示加载完成
script.onreadystatechange = function () {
	if (script.readState === "complate" || script.readyState === "loaded") {
	test();
	}
} // ie的方法

封装一个异步加载的函数

    function loadScript(url, callback) {
      var script = document.createElement('script');
      if (script.readyState) {
        script.onreadystatechange = function () {
          if (script.readyState == "complate" || script.readyState == "loaded") {
            callback()
          }
        }
      } else {
        script.onload = function () {
          callback()
        }
      }
      script.src = url// src赋值会立即开启一个线程下载脚本
      document.head.appendChild(script)
    }
loadScript("demo.js",function(){test()}) // 使用立即执行函数执行

js加载时间线概述
1 创建Document对象，开始解析web页面，解析HTML元素和内容后添加Element对象和text节点到这个文档中，这个阶段Document.readyState = “loading”
2 遇到link外部css，创建线程加载，并继续解析文档
3 遇到script外部js，并且没有设置async,defer 浏览器加载，并阻塞，等待js加载并执行完脚本，然后继续解析
4遇到script外部js，并且设置有async,defer，浏览器创建线程加载，并继续解析文档。
对于async属性的脚本，脚本加载完成后立即执行(一部禁止使用Document.write())
5 遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
6当文档解析完称 document.readyState = “interactive”
7文档解析完成后，所有设置有defer的脚本会按照顺序执行（异步加载的脚本按照出生顺序执行）
8document对象出发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
9 当所有async的脚本加载完成并执行后，img等加载完成后，document.readyState = ‘complate’ widow出发onload事件
10 页面开始处理用户操作，进行运转

// 当dom解析完就执行
document.onreadystatechange = function () {
	 console.log(document.readyState);
	
}

document.addEventListener("DOMContentLoaded",function(){
	console.log("a")
},false);
// 根据上面两个 
 document.addEventListener("DOMContentLoaded",function(){},false}

JSON

加载时间线

加载js

猜你喜欢