Función anti-vibración, función de aceleración, almacenamiento local del navegador, mecanismo de almacenamiento en caché (¡¡¡enfoque de la entrevista !!!)

Función antirrebote (antirrebote)

Concepto: Retrasar la acción a ejecutar, si se vuelve a activar durante el período de retraso, cancelar la acción iniciada anteriormente y reiniciar el cronometraje.

Ejemplo: la computadora entra en suspensión después de una pantalla negra sin operación durante un minuto, y el mouse se mueve una vez en los 40 para reiniciar el conteo.

Implementación: temporizador

Aplicación: al buscar, espere a que el usuario ingrese todo el contenido antes de iniciar la consulta

<script>
        let inputNode = document.getElementById("user_input")
        let id
        inputNode.addEventListener('keyup',function(){
    
    
            if(id){
    
    
                clearTimeout(id);
            }
            let value = inputNode.value
            id = setTimeout(() => {
    
    
                sendAjax(value)
            }, 200);  //时间为0.2s~0.3s之间
        })
        
        function sendAjax(data){
    
    
            // console.log('发送了一次ajax请求，内容为'+ data)
            console.log(`发送了一次Ajax请求，内容为${
      
      data}`)
        }
    </script>

Función de estrangulamiento (acelerador)

Concepto: establezca un tiempo específico, de modo que la función se ejecute solo una vez en un tiempo específico, no se ejecute con frecuencia

Ejemplo: en un juego de armas, las balas no se conectarán en una línea si se mantiene presionado el mouse sin soltarlo. (Supere rápidamente su propia frecuencia)

Implementación: temporizador, identificación

Requisito: cuando la rueda del mouse se esté desplazando, imprima una vez cada dos segundos

<script>
        let canlog = true
        document.body.onscroll = function(){
    
    
            if(canlog){
    
    
                    console.log(1)
                    canlog = false
                    setTimeout(() => {
    
    
                        canlog = true
                    }, 2000)
                }
        }
    </script>

Almacenamiento local del navegador

Cookie SessionStorage LocalStorage Estos tres pueden usarse para almacenar datos en el lado del navegador, y todos son pares clave-valor del tipo de cadena.

sesión
sessionStorage: el contenedor utilizado por el navegador para almacenar datos. (Interfaz)
Almacenamiento de sesiones de sesión, una forma de almacenar datos en el lado del servidor. (extremo posterior)

Almacenamiento web

Para el término colectivo de SessionStorage y LocalStorage, el tamaño del contenido es generalmente de 5 a 10 MB

El navegador implementa el mecanismo de almacenamiento local a través de las propiedades Window.SessionStorage y Window.LocalStorage.

API relacionada:
1. xxxxxStorage.setItem ('clave', 'valor');
este método acepta un nombre de clave y un valor como parámetros, y agregará el par clave-valor al almacenamiento. Si el nombre de clave existe, actualice su valor correspondiente .

var data = xxxxxStorage.getItem ('persona');
Este método acepta un nombre de clave como parámetro y devuelve el valor correspondiente al nombre de clave.
xxxxxStorage.removeItem ('clave');
Este método acepta un nombre de clave como parámetro y elimina el nombre de clave del almacenamiento.
xxxxxStorage.clear ()
llamar a este método borrará todas las claves en el almacenamiento

Nota: El contenido almacenado en SessionStorage desaparecerá cuando se cierre la ventana del navegador.
El contenido almacenado en LocalStorage debe borrarse manualmente antes de que desaparezca.

<body>
    <button id="btn1">保存数据</button>
    <button id="btn2">读取数据</button>
    <button id="btn3">删除数据</button>
    <button id="btn4">清空数据</button>
<script>
    let btn1 = document.getElementById('btn1')
    let btn2 = document.getElementById('btn2')
    let btn3 = document.getElementById('btn3')
    let btn4 = document.getElementById('btn4')

    let person = {name:'kebo',age:18}
    //保存
    btn1.onclick = ()=>{
        sessionStorage.setItem('demo',JSON.stringify(person))
    }
    //读取
    btn2.onclick = ()=>{
        console.log(JSON.parse(sessionStorage.getItem('demo')))
    }
    //删除
    btn3.onclick = ()=>{
        sessionStorage.removeItem('demo')
    }
    //清空
    btn4.onclick = ()=>{
        sessionStorage.clear()
    }
</script>
</body>

Sincronización de datos / comunicación entre pestañas del navegador (enfoque de entrevista)

evento de almacenamiento:

Se activa cuando cambia el objeto de almacenamiento (es decir, cuando se crea / actualiza / elimina un elemento de datos, Storage.clear () solo se activará una vez)
Los cambios que ocurran dentro de la misma página no funcionarán

Solo se harán efectivos los cambios que ocurran en otras páginas bajo el mismo nombre de dominio. (La página modificada no activará el evento, la página compartida con ella activará el evento)
clave: el valor de clave modificado o eliminado, si se llama a clear (), es nulo
newValue: el valor recién establecido, si es clear () se llama, es nulo
oldValue: llame al valor antes del cambio, si llama a clear (), será nulo
url: la url del documento que activó el cambio de script
storageArea: el objeto de almacenamiento actual
Uso:
window.addEventListener (' almacenamiento ', función (evento) { / / Escriba la lógica empresarial específica aquí })

数据同步1
<input type="text" id="input">
    <script>
        let input = document.getElementById('input')
        input.onblur = function(){
      
      
            localStorage.setItem('data',input.value)
        }
    </script>

数据同步2
<input type="text" id="input2">
   <script>
        //得知道它啥时候存进去了
        let input2 = document.getElementById('input2')
        window.addEventListener('storage',function(event){
      
      
            input2.value = event.newValue
           // input2.value = localStorage.getItem('data') 也可以写，但是将data写死了
        })
    </script>

### Soporte de almacenamiento del navegador
http://dev-test.nemikor.com/web-storage/support-test/

Mecanismo de almacenamiento en caché del navegador

Entendiendo el caché

Definición de caché: El navegador almacena los datos solicitados previamente por el usuario en el disco local.Cuando el visitante necesita cambiar los datos nuevamente, no es necesario enviar la solicitud nuevamente, y los datos se obtienen directamente del navegador local.
Los beneficios del almacenamiento en caché:
1. Reducir el número de solicitudes
2. Ahorre ancho de banda y evite desperdiciar recursos de red innecesarios
3. Reducir la presión sobre el servidor
4. Mejore la velocidad de carga de las páginas web del navegador y mejore la experiencia del usuario

Clasificación de caché

1. Caché fuerte

(1) No se envía ninguna solicitud al servidor y los datos se obtienen directamente del almacenamiento local

(2) El código de estado del recurso solicitado es 200 ok (de memoria / caché de disco) caché (búfer de alta velocidad de la computadora)

2. Caché de negociación

(1) Envíe una solicitud al servidor y el servidor juzgará si llega a la caché de negociación de acuerdo con el recurso en el encabezado de la solicitud.

(2) Si acierta, devuelve un código de estado 304 para notificar al navegador que lea el recurso de la caché, es decir, la negociación es exitosa

(3) Negociación fallida: el servidor devuelve la página de inicio requerida y otras cosas

3. Los puntos comunes del almacenamiento en caché sólido y el almacenamiento en caché de negociación:

Leer recursos del navegador

4. Diferencias:

La caché fuerte no envía solicitudes al servidor

Negocie la caché para enviar una solicitud al servidor y decida si usar la caché de acuerdo con la información devuelta por el servidor.

Caché fuerte

Solicitud: encabezado de solicitud + datos transportados en el encabezado de solicitud de solicitud

Respuesta: encabezado de respuesta + datos de encabezado de respuesta para usted

Parámetros de encabezado en caché fuerte

Solicitud: encabezado de solicitud + datos transportados en el encabezado de solicitud de solicitud

Respuesta: encabezado de respuesta + datos de encabezado de respuesta para usted

expira: (Encabezado de respuesta, tiempo de expiración del caché fuerte)
1. Esta es la especificación en el momento de http1.0; su valor es una cadena de tiempo de formato GMT de tiempo absoluto, por ejemplo Mon, 10 Jun 2015 21:31:12 GMT, si el tiempo de envío de la solicitud es antes de que expire, entonces el caché local siempre es válido, de lo contrario enviará el solicitud al servidor para obtener recursos
  
  Por ejemplo: por ejemplo, si expira el 15 de noviembre de 2020, la página web se almacena en caché fuertemente en 2020.11.1, y la caché no será fuerte el 16 de noviembre de 2020.
control de caché: max-age = número (fecha de producción de la caché fuerte)
1. Esta es la información del encabezado que aparece en http1.1. Se juzga principalmente por el valor de edad máxima de este campo. Es un valor relativo; se calcula el tiempo de la primera solicitud del recurso y el período de validez establecido por Cache-Control . Tiempo de vencimiento del recurso, y luego compare este tiempo de vencimiento con el tiempo de solicitud actual. Si el tiempo de solicitud es anterior al tiempo de vencimiento, puede llegar a la caché, de lo contrario no funcionará;
  
  Segundo (s) como unidad, cuando expira y existe un conflicto de control de caché, use el control de caché
2. Valores de control de caché de uso común:
```
1. no-cache: 不使用本地缓存，需要使用协商缓存。先与服务器确认返回的响应是否被更改，如果之前的响应中存在Etag，那么请求的额时候会与服务器端进行验证，如果资源为被更改则使用缓存。
2. no-store: 直接禁止游览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源。
3. public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器。
4. private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存。
5. <font color=red>注意：当cache-control与Expires共存的时候cache-control的优先级高</font>
```

Negociar parámetros de encabezado almacenados en caché

Importante: El servidor determina si el recurso de caché está disponible para negociación, por lo que el cliente y el servidor deben comunicarse a través de un identificador determinado, de modo que el servidor pueda determinar si el recurso solicitado se puede almacenar en caché y acceder a él.

Last-Modified / If-Modified-Since: Ambos valores son cadenas de tiempo en formato GMT
La caché de negociación devuelve la hora de la última modificación y la siguiente solicitud debe llevar esta hora en el pasado
1. El navegador solicita un recurso del servidor por primera vez. Cuando el servidor devuelve el recurso, agrega un encabezado Última modificación al encabezado del respondedor. Este encabezado representa la última hora de modificación del recurso en el servidor.
2. Cuando el navegador solicite este recurso del servidor nuevamente, agregue el encabezado de If-Modified-Since al encabezado de la solicitud. El valor de este encabezado es el valor de Last-Modified devuelto en la solicitud anterior.
3. Cuando el servidor recibe la solicitud de recurso nuevamente, juzga si el recurso ha cambiado de acuerdo con el If-Modified-Since pasado por el navegador y la última hora de modificación del recurso en el servidor. Si no hay cambios, devolverá 304 No modificado, pero el contenido del recurso no se devolverá; si hay un cambio, el contenido del recurso se devolverá normalmente. Cuando el servidor devuelve una respuesta 304 No modificado, el encabezado Última modificación no se agregará al encabezado de respuesta, porque como el recurso no ha cambiado, el Último modificado no cambiará. Este es el encabezado de respuesta cuando el servidor devuelve 304
4. Una vez que el navegador recibe la respuesta 304, cargará el recurso desde la caché
5. Si no se accede a la caché de negociación, cuando el navegador carga el recurso directamente desde el servidor, el encabezado Última modificación se actualizará cuando se vuelva a cargar. Cuando se realice la siguiente solicitud, If-Modified-Since habilitará la última modificación valor devuelto la última vez
6. leyenda:

Etag / If-None-Match
1. Estos dos valores son generados por la cadena de identificación única del servidor para cada recurso , siempre que haya recursos para cambiar, este valor cambiará
2. El proceso de juicio es similar a Last-Modified / If-Modified-Since

He Sheng Etag de última modificación existente
1. La aparición de Etag en HTTP1.1 es principalmente para resolver varios problemas que son más difíciles de resolver en Last-Modified
2. Algunos archivos pueden ser cambiados periódicamente, pero su contenido no cambia (solo la hora de modificación). En este momento, no queremos que el cliente piense que el archivo ha sido modificado y vuelva a OBTENER
3. Algunos archivos se modifican con mucha frecuencia, como la modificación en menos de un segundo (por ejemplo, N veces en 1 s), la granularidad que If-Modified-Since puede verificar es de nivel s, y esta modificación no se puede juzgar (o es dijo que los registros de UNIX MTIME solo pueden ser precisos al segundo);
4. Algunos servidores no pueden obtener con precisión la hora de la última modificación del archivo.

resumen:
- El uso de Etag puede controlar con mayor precisión el caché, porque Etag es un identificador único en el lado del servidor del recurso correspondiente generado automáticamente por el servidor o generado por el desarrollador.
- Last-Modified y ETag se pueden usar juntos. El servidor verificará la ETag primero. Si son consistentes, continuará comparando Last-Modified y finalmente decidirá si devolver 304.

[Error en la transferencia de la imagen del enlace externo. El sitio de origen puede tener un mecanismo de enlace anti-sanguijuela. Se recomienda guardar la imagen y subirla directamente (img-5wmoNlx9-1605323253709) (F: \ WEB \ WEB \ 009-git, svn, modularización, optimización \ 009-git, svn, modularización, optimización \ performance optimization_stu \ courseware & summary \ 07_caching diagram.png)]

[Error en la transferencia de la imagen del enlace externo. El sitio de origen puede tener un mecanismo de enlace anti-sanguijuela. Se recomienda guardar la imagen y subirla directamente (img-miEJWrAh-1605323253712) (F: \ WEB \ WEB \ 009-git, svn , modularización, optimización \ 009 -git, svn, modularización, optimización \ performance optimization_stu \ illustration \ 02_browser rendering process.png)]

Sitio de prueba de entrevistas CSS

1. Limpiar el flotador

2. Ocultar el elemento (método)

3. Santo Grial, doble

Precompilador 4.css menos stylas