• 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)

  • 相关阅读:
    vue生命周期
    vue input 循环渲染问题
    Node express post 大小设置
    webpack 好文章
    知识点的总结
    jsplumb 使用总结
    理解es6 中 arrow function的this
    分块编码(Transfer-Encoding: chunked)
    CGI的工作原理
    JS数组循环的性能和效率分析(for、while、forEach、map、for of)
  • 原文地址:https://www.cnblogs.com/freesfu/p/10245520.html
Copyright © 2020-2023  润新知