这是我参与「第五届青训营」伴学笔记创作活动的第7天

DOM

DOM是树型数据结构

对象属性： property和attribute形式都可以修改节点的属性，但attribute的改变会体现在html结构上

property部分属性会渲染，如 align、title、className、style
attribute则会全部渲染
节点.get/setAttribute(属性名,属性值)

优化DOM操作性能：

缓存DOM查询
将频繁操作变为一次性操作

常用BOM操作： （浏览器对象模型）

navigator.userAgent：是什么浏览器
screen.height/width
location.xxx：url里的各个参数

事件冒泡： 当一个节点接收到事件时，会把事件传给自己的父级，一直传到 window

事件委托/代理：使用冒泡机制，通过监听一个父节点，来给不同的子节点绑定事件，减少监听的绑定，提升加载速度
- 比如在无限下拉的图片列表，监听每个图片的点击
阻止某个节点冒泡：event.stopPropagation()
阻止事件默认行为（如a标签跳转）：event.preventDefault()

存储

cookie： 由服务器生成并保存在浏览器（ 客户端 ）中，下次再请求的时候，浏览器就把cookie发送给服务器，这样服务器就可以确认前后是不是同一个请求来源了（即本地缓存）

为key=value的形式，通过分号分隔；修改时，若存在同一个key则会覆盖，否则追加
不可跨域名，每个网站的Cookie只能够被对应的网站使用
最多存4K数据，每次http请求都会带上cookie

session：保存在 服务端 。是服务器用来区别不同客户端的身份标识，客户端在每次发送请求的时候都会带上这个身份标识。服务器把用户信息临时存在session中，用户离开后销毁，用于维持会话状态

客户端第一次请求，服务端会在响应的时候向客户端发送一个cookie，下次请求时，客户端会自动带上这个cookie，服务端会根据这个cookie从服务端的session中取出登录状态和用户信息返回客户端或者用来用户认证，session本质上是客户端的一块数据可以存储在服务器中，所以说session登录验证方案基于cookie实现
就像开一张会员卡，卡里的磁条是cookie，每次刷卡对应一个session，刷完卡session就销毁了，会员卡到期cookie就销毁了

sessionStorage：用于存储会话数据，保存在 客户端 ，会话结束（浏览器关闭）数据清空

最多存5M

localStorage： localStorage 是一个保存于客户端的哈希表，可以用来保存本地的一些数据。并且不会因为刷新而释放，所以可以使用 localStorage 来实现变量的持久化存储

最多存5M

Ajax

⼀种在无需重新加载整个网页的情况下，能够更新部分网页的技术。核心是XMLHttpRequest

常用api/库有fetch、axios（需安装）

手写ajax

const ajax = (url)=>{
  return new Promise((resolve, reject)=>{
    let xhr = XMLHttpRequest()
    xhr.onreadystatechange = ()=>{
      // readystate改变时触发，4为响应就绪
      if(xhr.readyState === 4){
        if(xhr.status === 200){
          resolve(JSON.parse(xhr.responseText))
        }else if(xhr.status === 404){
          reject(new Error('404'))
        }
      }
    }
    xhr.open('GET', url, true) // 是否异步
    xhr.send() // important
  })
}


ajax('./test.json')
  .then(data => console.log(data))
  .catch(err=>console.log(err.message))

跨域（同源策略）

ajax 请求时，浏览器要求当前网页和 server必须同源（安全）

同源： 协议、域名、端口，三者必须全部一致
- HTTP 页面可以请求 HTTPS 的静态资源（因为混合内容） ，而HTTPS 页面无法请求 HTTP 的静态资源，因为 HTTP 协议不安全
  - 混合内容：如果HTTPS页面包括由普通明文HTTP连接加密的内容，那么连接只是被部分加密，非加密的内容可以被中间人修改
浏览器可以发送和接收跨域请求，只是不响应
加载图片、css样式、js脚本可以跨域
- <img>、<link>、<script>标签
大多数的 web 储存解决方案（cookie、localStorage、sessionStorage、IndexedDB）均遵守同源策略

跨域方式

jsonp：通过script标签获取回调函数并最终获得数据（因为script标签可以跨域）

一种非正式传输协议，解决ajax请求受同源策略影响、不允许进行跨域请求的问题。返回的是一个函数的调用，callback参数作为函数名，json数据作为参数
jsonp是为了绕开浏览器对ajax同源策略的限制，目的是获取来自不同源服务器端的json数据，因此使用了没有同源限制的script标签来获得json数据。但是仅通过script标签获得json数据也没啥用，因为我们的代码没法从script标签中获取到这些json数据。所以服务端对需要返回的json数据进行处理，使其变成一个执行函数的指令，函数的名字就是自行定义的回调函数，而函数的接收的参数就是需要返回的json数据，那这样一来就可以在我们自己的代码中获得这些json数据并进行进一步操作了。
简单来说就是后端返回一个方法名，前端调用这个方法名，而这个方法名已在前端定义

/*后端代码*/
abc({
  {name:'xxx'}
    })
/*前端代码*/
<script>
  window.abc = function(data){
    console.log(data)
  }
</script>
/*调用*/
<script src="http://localhost:8000/jsonp.js?username=xxx&callback=abc"/>

CORS：服务器可以设置http header来实现跨域（比如允许某些域名跨域）

使用代理

WEB相关 | 青训营笔记

DOM

存储

Ajax

手写ajax

跨域（同源策略）

跨域方式