10.18.JS-json,异步加载js,js时间线触发reflow dom节点的删除添加、dom节点的宽高变化、位置变

json

JSON是一种传输数据的格式(以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json是用来传输的)
JSON.parse(); string -> json
JSON.stringify(); json -> string

重排、重绘

domTree + cssTree = renderTree
reflow 重排计算各元素的位置
- 触发reflow dom节点的删除添加、dom节点的宽高变化、位置变化、display(none->block)、offsetWidth/offsetHeight...
repaint 重绘把计算好的各元素绘制在浏览器上影响较小

异步加载js

js加载的缺点：加载工具方法没必要阻塞文档，过多js加载会影响页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。
有些工具方法需要按需加载，用到在加载，不用不加载。
JavaScript异步加载的三种方案
- 1. defer异步加载，但要等待dom文档全部解析完才会被执行。只有IE能用，也可以将代码写到内部。
- 1. async 异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script标签里
- 1. 执行时不阻塞页面：创建script, 插入到DOM中，加载完毕后callback
异步 -> asychronous; ajax -> asychronous javascript and xml

创建script, 插入页面

var script = document.createElement('script');
script.type = "text/javascript";
script.src = 'tools.js';
document.head.appendChild(script);

script标签加载完成后执行函数

var script = document.createElement('script');
script.type = "text/javascript";
script.src = 'tools.js';
script.onload = function(){
  test();
}
document.head.appendChild(script);

封装函数，创建script

function loadScript(url, callback) {
  var script = document.createElement('script');
  script.type = "text/javascript";
  // 先绑定事件，在加载js
  if (script.readyState) {
    script.onreadystatechange = function () { // IE
      if (script.readyState == "complete" || script.readyState == "loaded") {
        callback();
      }
    }
  } else {
    script.onload = function () { // Safari chrome firefox opera
      callback();
    }
  }
  script.src = url;
  document.head.appendChild(script);
}

script 函数

function loadScript(url, callback) {
  var script = document.createElement('script');
  script.type = "text/javascript";
  // 先绑定事件，在加载js
  if (script.readyState) {
    script.onreadystatechange = function () { // IE
      if (script.readyState == "complete" || script.readyState == "loaded") {
        tools[callback]();
      }
    }
  } else {
    script.onload = function () { // Safari chrome firefox opera
      tools[callback]();
    }
  }
  script.src = url;
  document.head.appendChild(script);
}
loadScript('tools.js',"test")
// tools.js
var tools = {
  test: function () {
    console.log('a');
  },
  demo: function () {
    console.log('demo');
  }
}

js时间线

创建Document对象，开始解析web页面。解析HTML元素和它们的文本内容后添加Element对象和Text节点到文档中，这个阶段document.readyState = 'loading'。
遇到link外部css，创建线程加载，并继续解析文档。
遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。
遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。
遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
当文档解析完成的，document.readyState = 'interactive'。
文档解析完成后，所有设置有defer的脚本会按照顺序执行。(与async的不同，但同样禁止使用document.write(),方法有消除文档流的作用)
document对象触发DOMContentLoaded事件，这也标志着程序执行从同步执行阶段，转化为事件驱动阶段
当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = 'complete',window对象触发load事件
从此，以异步响应方式处理用户输入、网络事件等。

window.onload 在页面资源加载完后才会执行，DOMContentLoaded会在解析完成后执行

console.log(document.readyState); // loading
window.onload = function () {
  console.log(document.readyState); // complete
}
document.onreadystatechange = function () {
  console.log(document.readyState); // interactive - complete
}
document.addEventListener("DOMContentLoaded", function () {
  console.log(document.readyState); // interactive
}, false)

BOM

定义：Browser Object Model，定义了操作浏览器的接口
BOM对象：Window,History,Navigator,Screen,Loction等
浏览器厂家对DOM兼容性极低
Window
Loction对象
- location.hash
- "#" 后是对浏览器操作的，对服务器无效，实际发出的请求也不包含"#"后面的部分
- "#"被算作历史记录

转义符号

\ : var str = "abc\"def"
多行字符串

var str = "\
abc\
def\
"

字符串换行符 \n : var str = "abcd\nedf";