web小结

DOM操作部分

DOM的数据结构是一种树

attribute和property的区别

节点的property

const pList document.querySelectorAll('p')
const p = pList[0]
console.log(p.style.width) //获取样式
p.style.width = '100px' //修改样式
console.log(p.className) //获取class
p.className = 'p1' //修改class

节点的attribute

const pList document.querySelectorAll('p')
const p = pList[0]
p.getAttribute('data-name')
p.setAttribute('data-name','p1')
p.getAttribute('style')
p.setAttribute('style','font-size:50px;')

区别

property:修改对象属性，不会体现到html结构中（推荐，不会重新渲染DOM）
attribute:修改html属性，会改变html结构。

DOM性能

1.DOM操作非常昂贵，应该避免频繁操作DOM

2.对DOM查询做缓存

3.将频繁操作改为一次性操作

//不缓存DOM查询结果
for(let i=0;i 缺点：1.存储大小，最大4KB.
 2.http请求时需要发送到服务端，增加请求数据量
 3.只能用document.cookie = ’‘来修改，太过简陋
 
 
localstorage 和sessionstorage
 
 
1.H5新增，专门为了存储而设计，最大可存5M
 2.api简单易用：getItem,setItem
 3.不会随着http请求发送出去。
 
 
区别
 
 
localstorage数据会永远存储，除非代码或者手动删除
 sessionstorage数据只存储在当前会话，浏览器关闭则清空
 一般用localstorage会更多一些
 
 
性能优化之防抖与节流
 
 
防抖debounce
 
 
监听一个input输入框的keyup,但是不能一松开键盘就触发事件，因为可能会频繁调用接口，应该松开若干毫秒后不再按下，才开始调用接口
 
 
const input1 = document.getElementById('input')
var timer = null
input1.addEventListener('keyup',function(){
  //假如输入123，首先输入1的时候，time是null，触发定时器，
  // 500毫秒之后打印，但是在500毫秒之内再次输入了2，触发keyup，此时time！=null
  // 就清空了原来应该打印1的定时器，重新执行一个新的定时器打印12，关键在于清空原来的定时器
  if(timer){   
    clearTimeout(timer)
  }
  timer = setTimeout(() => {
    console.log(input1.value)
    timer = null
  }, 500);
})
// 封装一个方法
function debounce(fn,delay = 500){
  // timer在闭包中
  let timer =null
  return function(){
    if(timer){   
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn()
      // fn.apply(this,arguments) 用这种更完美
      timer = null
    }, delay);
  }
}
input1.addEventListener('keyup',debounce(()=>{
  console.log(input1.value)
},1000))
 
 
节流throttle
 
 
拖拽一个元素时，要随时拿到该元素被拖拽的位置，直接用drag事件，则会频繁触发，很容易导致卡顿。 节流:无论拖拽速度多快，都会每隔100ms触发一次
 
 
const div1 = document.getElementById('div1')
var timer = null
div1.addEventListener('drag',function(e){
  //存在timer则说明前一次还没执行完，必须前一次执行完，才能执行下一次操作，确保规定时间只执行一次，
  // 和防抖的区别在于，防抖是清空原来执行新的，节流是执行原来的，正好相反
  if(timer){ 
    return
  }
  timer = setTimeout(() => {
    console.log(e.offsetX,e.offsetY)
    timer = null
  }, 500);
  
})

// 封装一个方法
function throttle(fn,delay = 500){
  // timer在闭包中
  let timer =null
  return function(){
    if(timer){   
      return
    }
    timer = setTimeout(() => {
      console.log(this) //this是div1,箭头函数承接上文，就是return的方法
      fn.apply(this,arguments) //只是为了绑定事件的参数,fn.apply({},arguments)也可以起到效果
      timer = null
    }, delay);
  }
}
div1.addEventListener('drag',throttle((e)=>{
  console.log(this) //this是window 箭头函数承接上文，就是window
  console.log(e.offsetX,e.offsetY)
},1000))
div1.addEventListener('drag',throttle(function(e){
  console.log(this) //this是div
  console.log(e.offsetX,e.offsetY)
},1000))
 
 
WEB安全
 
 
XSS跨站请求攻击
 
 
XSRF跨站请求伪造
 
 
1.XSS跨站请求攻击
 
 

  
123

  

 
 
往网页中恶意插入代码，获取用户信息，这样很轻松就获取到了用户的cookie信息，这是很不安全的。
 
 
预防
 
 
替换特殊字符，如< 变为< >变成>