# 其他收集

**Repository Path**: djxu/other

## Basic Information

- **Project Name**: 其他收集
- **Description**: 其他
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2022-02-11
- **Last Updated**: 2022-02-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 其他收集
## 1、浏览器的事件机制
### 1.事件触发三阶段
* window 往事件触发处传播，遇到注册的捕获事件会触发
* 传播到事件触发处时触发注册的事件
* 从事件触发处往 window 传播，遇到注册的冒泡事件会触发
```
      let father = document.getElementsByClassName('father')[0];
    let child = document.getElementsByClassName('child')[0]
    father.addEventListener('click',(event)=>{
        console.log('father')
    },true)
    child.addEventListener('click',(event)=>{
        console.log('child')
    },true)
```
>addEventListener(name,function,status)
>name:'注册事件名称'，function：事件回调函数，status：false？冒泡：捕获

### 2.事件代理(event.target)
#### 优点
>* 节省内存
>* 不需要给子节点注销事件

## 2、跨域
>因为浏览器出于安全考虑，有同源策略。也就是说，如果协议、域名或者端口有一个不同就是跨域

>用来防止 CSRF 攻击的。CSRF 攻击是利用用户的登录态发起恶意请求,跨域也并不能完全阻止 CSRF。

### 解决方式
#### 1.JSONP
>利用script标签没有跨域限制的漏洞。通过 script标签指向一个需要访问的地址并提供一个回调函数来接收数据当需要通讯时
> 缺点：JSONP 使用简单且兼容性不错，但是只限于 get 请求。
```
function jsonp(url, jsonpCallback, success) {
  let script = document.createElement('script')
  script.src = url
  script.async = true
  script.type = 'text/javascript'
  window[jsonpCallback] = function(data) {
    success && success(data)
  }
  document.body.appendChild(script)
}
jsonp('http://xxx', 'callback', function(value) {
  console.log(value)
})
```
#### 2.CORS
>服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。
#### 3.document.domain
>该方式只能用于二级域名相同的情况下，比如 a.test.com 和 b.test.com 适用于该方式。

>只需要给页面添加 document.domain = 'test.com' 表示二级域名都相同就可以实现跨域

#### 4.postMessage
>这种方式通常用于获取嵌入页面中的第三方页面数据。一个页面发送消息，另一个页面判断来源并接收消息
```
// 发送消息端
window.parent.postMessage('message', 'http://test.com')
// 接收消息端
var mc = new MessageChannel()
mc.addEventListener('message', event => {
  var origin = event.origin || event.originalEvent.origin
  if (origin === 'http://test.com') {
    console.log('验证通过')
  }
})
```
<!-- ## 3、Service Worker
>
 -->
## 3、浏览器缓存机制

### 1.缓存位置(优先级查找)
* Service Worker
* Memory Cache
* Disk Cache
* Push Cache
* 网络请求（没有查找到缓存，请求服务器）

#### Service Worker
>Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的

>Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。

>当 Service Worker 没有命中缓存的时候，我们需要去调用 fetch 函数获取数据。也就是说，如果我们没有在 Service Worker 命中缓存的话，会根据缓存查找优先级去查找数据。但是不管我们是从 Memory Cache 中还是从网络请求中获取的数据，浏览器都会显示我们是从 Service Worker 中获取的内容。

```
// index.js
if (navigator.serviceWorker) {
  navigator.serviceWorker
    .register('sw.js')
    .then(function(registration) {
      console.log('service worker 注册成功')
    })
    .catch(function(err) {
      console.log('servcie worker 注册失败')
    })
}
// sw.js
// 监听 `install` 事件，回调中缓存所需文件
self.addEventListener('install', e => {
  e.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll(['./index.html', './index.js'])
    })
  )
})

// 拦截所有请求事件
// 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据
self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      if (response) {
        return response
      }
      console.log('fetch source')
    })
  )
})
```
#### Memory Cache(内存缓存)
>Memory Cache 也就是内存中的缓存，读取内存中的数据肯定比磁盘快。但是内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。 一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。
>对于大文件来说，大概率是不存储在内存中的，反之优先,当前系统内存使用率高的话，文件优先存储进硬盘

#### Disk Cache（硬盘缓存）
>比Memory Cache 胜在容量和存储时效性上。
>在所有浏览器缓存中，Disk Cache 覆盖面基本是最大的。它会根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据

#### Push Cache
>push Cache 是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。并且缓存时间也很短暂，只在会话（Session）中存在，一旦会话结束就被释放。

### 2.缓存策略
#### 强缓存
>强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control 。强缓存表示在缓存期间不需要请求，state code 为 200。
##### Expires
```
Expires: Wed, 22 Oct 2018 08:41:00 GMT
```
>Expires 是 HTTP/1 的产物，表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期，需要再次请求。并且 Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效。
##### Cache-control
```
Cache-control: max-age=30 //30 秒后过期
Cache-control: public //响应可以被客户端和代理服务器缓存
Cache-control: private //响应可以被客户端缓存
Cache-control: min-fresh=30 //30s后获取最新响应
Cache-Control: no-cache //每次请求最新数据
```
>Cache-Control 出现于 HTTP/1.1，优先级高于 Expires

#### 协商缓存
>如果缓存过期了，就需要发起请求验证资源是否有更新。协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag
>当浏览器发起请求验证资源时，如果资源没有做改变，那么服务端就会返回 304 状态码，并且更新浏览器缓存有效期。

##### Last-Modified,If-Modified-Since
>Last-Modified 表示本地文件最后修改日期，If-Modified-Since 会将 Last-Modified 的值发送给服务器，询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来，否则返回 304 状态码。

Last-Modified弊端
* 如果本地打开缓存文件，即使没有对文件进行修改，但还是会造成 Last-Modified 被修改，服务端不能命中缓存导致发送相同的资源
* 因为 Last-Modified 只能以秒计时，如果在不可感知的时间内修改完成文件，那么服务端会认为资源还是命中了，不会返回正确的资源
  
##### ETag,If-None-Match
>If-None-Match 会将当前 ETag 发送给服务器，询问该资源 ETag 是否变动，有变动的话就将新的资源发送回来。并且 ETag 优先级比 Last-Modified 高

### 3.缓存策略应用
#### 频繁变动的资源
>Cache-Control: no-cache 使浏览器每次都请求服务器，然后配合 ETag 或者 Last-Modified 来验证资源是否有效。这样的做法虽然不能节省请求数量，但是能显著减少响应数据大小。
#### 代码文件(除了 HTML)
>HTML 文件一般不缓存或者缓存时间很短
>现在都会使用webpack工具来打包代码，那么我们就可以对文件名进行哈希处理，只有当代码修改后才会生成新的文件名。基于此，我们就可以给代码文件设置缓存有效期一年 Cache-Control: max-age=31536000，这样只有当 HTML 文件中引入的文件名发生了改变才会去下载最新的代码文件，否则就一直使用缓存。