浏览器的回流与重绘，延时函数，回调函数，本地存储localStorage，存储复杂类型，JSON

最新推荐文章于 2024-06-21 08:42:30 发布

爱凑热闹828

最新推荐文章于 2024-06-21 08:42:30 发布

阅读量469

点赞数 1

分类专栏： web前端文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_65692463/article/details/127677730

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

浏览器的回流与重绘

1. 浏览器是如何进行界面渲染的

解析（Parser）HTML，生成DOM树(DOM Tree)

同时解析（Parser） CSS，生成样式规则 (Style Rules)

根据DOM树和样式规则，生成渲染树(Render Tree)

进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）

进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制

display: 展示在页面上

<style>
    .box {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <button id="btn">改变大小</button>
  <script>
    // 回流/重排/布局
    // 当我们修改元素的几何信息 (位置和大小) 浏览器会重新在页面 渲染盒子 效率低下
    // 重绘（绘制）
    // 回流一定会引起 重绘
    // 重绘不一定引起 回流

    document.querySelector('#btn').addEventListener('click', function(){
      // document.querySelector('.box').style.width = '200px'
      document.querySelector('.box').style.backgroundColor = 'hotpink'
    })
  </script>
</body>

window

 <script>
    // 使用 var 声明的变量其实就是 相当于 给 window 对象添加属性
    // window 对象是js里面的顶级对象 可以省略不写
    var a = 10

    function aa() {
      alert('ok')
    }
    // console.log(a)
    // console.log(window.a)
    console.dir(window)
    // 访问window对象的aa的方法
    // window.aa()
    aa()
  </script>

延时函数

<body>
  <button id="start">开始</button>
  <button id="stop">停止</button>
  <script>
    // clearTimeout(延时函数的id)
    // 停止延时函数
    let id
    document.querySelector('#start').addEventListener('click', function(){
      id = setTimeout(function(){
        console.log('ok')
      },2000)
    })
    // 当点击 停止按钮时 停止延时函数
    document.querySelector('#stop').addEventListener('click', function(){
      // 停止延时函数
      clearTimeout(id)
    })
  </script>
</body>

延时函数的this

<body>
  <button id="start">开始</button>
  <script>
    // 需求：获取到 id=start dom 元素 注册点击事件
    // 2秒以后 将 按钮设置禁用效果
    const btn = document.querySelector('#start')
    btn.addEventListener('click', function () {
      // let that = this
      // setTimeout 属于是 window对象的方法 里面的this 默认是 window 对象 
      // setTimeout 使用 this 关键字 一定要慎用 
      setTimeout(function () {
        // console.log(this)
        btn.disabled = true
      }, 2000)
    })
  </script>

回调函数

<body>
  <button id="btn">你个老六</button>
  <script>
    function B(callback) {
      callback()
    }

    function A() {
      console.log('a')
    }
    // // 调用函数B时 传递的参数是一个函数 
    // // 回调函数：将一个函数作为参数 传递为另外一个函数 那么这个函数就称之为 回调函数
    // 高阶函数 
    B(A)
    // 对象里面的方法 就是函数 
    // setInterval(函数, 毫秒时间)
    setInterval(function () { }, 1000)
    const btn = document.querySelector('#btn')
    btn.addEventListener('click', function () { })
  </script>
</body>

本地存储localStorage

<body>
  <script>
    // 存储
    // localStorage.setItem('属性名', '属性值')
    localStorage.setItem('uname', '张三')
    localStorage.setItem('age', '18')

// 获取 localStorage 的数据
    // localStorage.getItem('属性名')
    console.log(localStorage.getItem('uname'))

// 将 uname 的数据 手动删除
    // localStorage.removeItem('属性名') 删除一个
    // localStorage.removeItem('uname')
    localStorage.clear() // 删除所有的 localStorage


  </script>
</body>

存储复杂类型

<script>
    // const arr = [10, 20]
    const arr = [
      { uname: 'zs' },
      { uname: 'ls' }
    ]

    // 
    //存： JSON.stringify(数组或者对象) 将 数组或者对象 转换成 JSON格式的字符串
    // alert(arr)
    // // console.log(typeof arr)
    // localStorage.setItem('data', arr)
    const str = JSON.stringify(arr)
    // // console.log(str)
    localStorage.setItem('data', str)

    // 取：JSON.parse(JSON格式的字符串)    将 JSON格式的字符串 转换为 JS对象
    // const data = localStorage.getItem('data')
    // console.log(JSON.parse(data))

    const data = JSON.parse(localStorage.getItem('data'))
    console.log(data)
  </script>

爱凑热闹828

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器的回流与重绘，延时函数，回调函数，本地存储localStorage，存储复杂类型，JSON

进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制。同时解析（Parser） CSS，生成样式规则 (Style Rules)解析（Parser）HTML，生成DOM树(DOM Tree)根据DOM树和样式规则，生成渲染树(Render Tree)display: 展示在页面上。
复制链接

扫一扫

专栏目录