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}