json,异步加载,回调函数

json文件格式

json文件格式传送的是对象
但是服务器接收以及发送的都是文本,Linux系统中飞的都是文本。。
json文件中的对象属性名都要双引号包裹起来,以区别一般js文件中的对象
后台接受到的是json的字符串形式

  • 一般使用JSON.stringify(jsonObj)方法,将json对象转换为字符串
  • JSON.parse(jsonStr) 转换为对象

浏览器页面的加载

randerTree绘制完 = 展示的效果
DOMTree的解析依据深度优先原则(纵向)
生成DOMTree的过程是一个HTML文件的解析过程,解析完毕,并不是加载(全部资源)完毕
异步过程,加载和解析
DOMTree + CSSTree = randerTree
randerTree形成以后才开始浏览器才会开始渲染页面

  • reflow 页面的重排(重构)
    • dom节点的增删改查,dom节点的宽高,位置,dispaly: noneoffsetWidth/offsetLeft 都会造成浏览器的页面重排(reflow)
    • 当然疑惑为什么查看一个元素的可视大小都会造成浏览器的reflow,这是因为浏览器会重新渲染以获得这个实时只读属性
  • repaint 重绘
    与重排(reflow)相比,只是改变(重新渲染)页面的一小部分,性能损耗不大,比如改变元素背景色这样的

异步加载js

js异步加载的三种方法:

  • defer="defer"
    属性名和属性值相等的,可以只写值。可以写在内部<script>标签内部
    该js文件会异步加载,等到整个DOMTree解析完成才(页面加载完成之前)开始依次执行,也就是DOMContentloaded,但是实际上他发生在webNavigation.onDOMContentLoaded事件之前~~~~
  • aysnc = "aysnc"
    异步加载不阻塞,但是只要js文件加载完就执行(也就是说js文件的执行顺序是不定的),aysnc只能加载外部脚本,不能把js写在script标签里面

  • 使用document.creatElement()创建一个script标签,为他添加src属性,浏览器会加载URL中的js文件,不过好像在浏览器中是查不到这个的加载的(灯塔模式)。
    然后把创建的这个节点对象添加到页面里面去就可以执行js脚本了

能加载的资源都有一个onload事件,但是IE的script对象上面没有onload事件(单单就是这个script没有这个事件)
但是script标签有readyState(属性)这个状态码,该状态码共有三个状态loading(加载)interactive(活动) complete(完成)
readyState值的改变触发script.onreadystatechange事件

满足一定条件才执行的函数,叫做回调函数(callback)

原文地址:https://www.cnblogs.com/freesfu/p/10245520.html