1 | Conceptos básicos de front-end 11
• apretón de manos de tres vías tcp , resumen de una oración 12
• La diferencia entre TCP y UDP12
• Implementación y aplicación de WebSocket12
• Modo de solicitud HTTP , modo HEAD 13
• ¿ Cómo realizar la descarga directa después de visitar la url de una imagen ? 14
• Charla sobre calidad web (accesibilidad) 14
• ¿ Varios métodos de objeto de atributo de lista de materiales muy prácticos ?
• Hable sobre HTML5 drag api 15
• Suplemento 400 y 401 , código de estado 403 15
• La razón por la que fetch envía 2 solicitudes 16
• La diferencia entre Cookie , almacenamiento de sesión y almacenamiento local 16
• Charla sobre trabajadores web 17
• Comprensión de etiquetas semánticas HTML17
• ¿ Qué son los marcos flotantes ? ¿Cuales son las desventajas? 17
• ¿ Cuál es el papel de Doctype ?¿Cómo distinguir entre modo estricto y modo mixto? ¿Cuál es su significado? 17
• Cómo previenen las cookies los ataques XSS18 _
• La diferencia entre cookie y sesión 18
• Resume RESTFUL 18 en una oración
• Charla sobre la vista y el diseño de la terminal móvil 18
• Hay un retraso de 300 ms al hacer clic en ios , ¿por qué y cómo solucionarlo? 18
• añadirEventListener parámetro 19
• cookie s sessionStorage localStorage diferencia 19
• diferencia de sesión de cookies 19
• Introducción a conocer el código de estado 19 devuelto por http
• encabezado de solicitud común http 21
• Almacenamiento en caché fuerte , cuándo negociar qué caché usar 25
• La diferencia entre GET y POST26
• Cómo dibujar un triángulo 27
• Códigos de estado 304 y 200 27
• Hable sobre el almacenamiento en caché del navegador 28
• Introduzca una URL en la barra de direcciones y ¿ qué sucede cuando se muestra la página? 28
• La diferencia entre cookie y sesión , la diferencia entre almacenamiento local y almacenamiento de sesiones 29
• Características de HTTP2.030
• ¿ Cuáles son los valores de cache-control l 30
• Cuando el navegador genera la página , ¿cuáles dos árboles generará? 30
• Ataque a la red y prevención de c srf y xss 30
• Cómo ver el rendimiento del sitio31
• Introducción al protocolo HTTP (características) 31
• Ingrese la URL de la página para cargar y mostrar completado ¿Qué sucedió? 31
• Cuénteme sobre su comprensión de las cookies y la sesión , ¿ cuáles son las limitaciones de las cookies ? 31
• ¿ Describir los ataques XSS y CRSF ? método de defensa? 32
• ¿ Conoces el 304 , cuándo usar el 304? 32
• Qué encabezados de solicitud específicos están relacionados con el almacenamiento en caché 32
• La diferencia entre cookie y sesión 33
• Qué campos de la cookie se pueden configurar33
• ¿ Cuáles son los métodos de codificación de las cookies ? 34
• Todo el proceso desde la URL de entrada del navegador hasta la representación de la página 34
• ¿ Se utilizan mucho HTML5 y CSS3 ? ¿ Conoces sus nuevas propiedades? ¿Lo has usado en un proyecto?
• Métodos de solicitud comunes HTTP 35
• La diferencia entre obtener y publicar 35
• Hable sobre el código de estado 302 , 301 , 304 35
• optimización del rendimiento web35
• Mecanismo de almacenamiento en caché del navegador36
• La diferencia entre publicar y obtener 36
• Charla sobre el modelo de caja CSS 36
• dibujar una línea de 0.5px 38
• La diferencia entre las etiquetas de enlace y las etiquetas de importación 38
• La diferencia entre transición y animación 38
• BFC (contexto de formato a nivel de bloque , utilizado para borrar flotantes , evitar márgenes superpuestos , etc. ) 39
• Método de centrado vertical 40
• Diferencias entre animación JS y animación CSS 3 41
• Hablar sobre elementos de bloque y fila42
• Puntos suspensivos de texto para elementos de varias líneas 42
• Problema de superposición de márgenes de doble cara (colapso de márgenes) 42
• comparación de propiedades de posición 4 3
• nuevas características de css3 44
• Qué son los selectores de CSS y su prioridad44
• ¿ Me puede decir el método para limpiar el flotador 44
• Cómo hacer desaparecer un elemento , hablar de 45
• Presentamos la caja modelo 45
• atributos relacionados con la posición 45
• Cómo lograr la animación CSS 46
• ¿ Cómo realizar el centrado de cuadros en un determinado contenedor? 46
• Cómo lograr el centrado vertical de los elementos 46
• Manejo de desbordamiento en CSS3 47
• elementos flotantes , ¿qué es la pantalla 47
• Cómo ocultar un elemento en una página 47
• Hay un ancho 300 , alto 300 , cómo lograr el centrado vertical y horizontal en la pantalla 48
• pantalla : ¿Cuál es la diferencia entre la tabla t y su propia tabla 49
• Cuáles son los valores del atributo posición y sus diferencias 49
• método de posicionamiento del índice z 49
• ¿ Qué sucede si desea cambiar el color de fuente de un elemento DOM sin operar en él mismo? 49
• ¿ Ha aprendido alguna vez acerca de las nuevas propiedades de CSS ? 49
• ¿ Cuál es la propiedad css más utilizada ? 50
• La diferencia entre la altura de la línea y la altura 50
• Al configurar el color de fondo de un elemento , ¿qué áreas llenará el color de fondo? 50
• ¿ Conoce la prioridad de los selectores de atributo y los selectores de pseudoclase? 50
• Usa css para lograr el efecto de una rotación de monedas 50
• CSS dibujar cubo , triángulo 52
• El principio de desbordamiento 54
• Método de flotación clara 54
• Sintaxis y usos básicos de box-sizing 54
• ¿ Cuáles son las formas de hacer desaparecer elementos? 55
¿Dónde se coloca esta parte superior en relación con el elemento principal? 55
• La diferencia entre display:none y visibilty: hidden56
• Disposición relativa y disposición absoluta , posición: relativa y obsoluta. 56
• La diferencia entre block , inline y inline-block . 57
• Selectores comunes de css 57
• regla de posicionamiento relativo 58
• ¿ Qué es el preprocesador css 59?
• Malentendido de la longitud del parámetro de solicitud de obtención 59
• Complemente la diferencia entre las solicitudes get y post en el almacenamiento en caché 59
• Charla sobre la creación y herencia de clases 60
• Cómo resolver el infierno de devolución de llamada asincrónica 62
• Hable sobre el flujo de eventos en el front-end 62
• Cómo hacer que el evento burbujee primero y luego capture 62
• Charla sobre delegación de eventos 63
• Hable sobre la carga diferida y la precarga de imágenes 63
• La diferencia entre mou seover y mouseenter 63
• ¿ Qué hace el nuevo operador de JS 63
• Cambiar la función de señalar de este puntero dentro de la función ( la diferencia entre enlazar , aplicar y llamar ) 63
• Varias posiciones de JS , como clientHeight, scrollHeight, offsetHeight y
¿Cuál es la diferencia entre scrollTop, offsetTop y clientTop? 64
• Implementación de la función de arrastrar y soltar de JS 64
• Método de carga de JS de forma asíncrona 64
• Ajax resuelve el problema de almacenamiento en caché del navegador 65
• Regulación y estabilización JS 65
• Mecanismo de recolección de basura en JS65
• Cómo entender la modularidad de front-end 67
• Charla sobre CommonJS , AMD y CMD 67
• Implementación simple de clonación profunda de objetos68
• Implementar una función única , los parámetros de función entrantes solo se ejecutan una vez 68
• Encapsule ajax nativo en la promesa 68
• JS escucha los cambios en las propiedades del objeto 69
• Cómo implementar una variable privada , a la que se puede acceder mediante el método getName , pero no directamente 69
• La diferencia entre == y === , y Object.is 70
• La diferencia entre setTimeout , setInterval y requestAnimationFrame 70
• Realizar un diseño de dos columnas de igual altura , hablar de ideas 71
• Implemente una función de vinculación usted mismo 71
• Usar setTimeout para implementar setInterval 71
• ¿ Cómo controla JS la carga de una imagen a la vez y luego carga la siguiente imagen después de cargar 72
• Secuencia de ejecución del código 73
• Cómo lograr el efecto del sueño (es5 o es6 ) 73
• Simple cumplimiento de una promesa 74
• ¿ Qué es Function._proto_(getPrototypeOf)? 75
• Realice una clonación profunda de todos los objetos en JS (objeto envolvente , objeto de fecha , objeto normal ) .
• Implementación simple del módulo de Eventos de Node 77
• este punto en la función de flecha Ejemplo 78
• Métodos comunes de matrices 79
• Deduplicación de matrices 79
• Para qué sirven los cierres 79
• Aplicación práctica de event proxy en fase 80
• Eliminar los espacios iniciales y finales de la cadena 80
• Optimización del rendimiento 80
• Hablemos de cierres en JS 80
• ¿ Puede hablar sobre las características de lenguaje de JS 81 ?
• Cómo juzgar una matriz (casi se cae al pozo cuando se trata de typeof ) 81
• Cuando habla de typeof, ¿puede agregar una restricción para cumplir con la condición de juicio 81?
• JS implementa dominios cruzados 81
• Tipos de datos básicos de JS 82
• La implementación específica de JS copia profunda de un elemento 82
• Dije antes que ES6set puede deduplicar arreglos ¿ Hay algún método para deduplicar arreglos ?
• Reorganizar y redibujar , hablar sobre 82
• Permutación completa de JS83
• El principio de dominio cruzado 83
• La comparación de valores de diferentes tipos de datos, cómo convertir y cuáles son las reglas 83
• nulo == indefinido por qué 84 _
• ¿ Qué tipo de este punto a 84
• Principio de enlace bidireccional de AngularJS 85
• Escribir una copia profunda 85
• RequestAnimationFrame se menciona en el currículum , ¿ cómo se usa ?86
Al choque, di el motivo (3-5) y la solución (3-5) .......................... .... .. 86
• Escribir código que cumpla las siguientes condiciones: (1) Hero("37er"); el resultado de la ejecución es ¡Hola! Esto es 37er (2 ) Hero("37er").kill(1).recover(30); la ejecución el resultado es ¡Hola! Esto es 37er Mata 1 error Recupera 30 sangres (3 ) Hero("37er").sleep(10).kill(2) el resultado de ejecución es ¡Hola! Esto es 37er // Espera 10 segundos y mata 2 errores / / Tenga en cuenta que son errores
(El mensaje después de la doble barra es un mensaje de solicitud, que no necesita imprimirse) 87
• Qué es la carga bajo demanda 88
• Varias formas de implementar la herencia en JS , 88
• Escribe una función que imprima 1 en el primer segundo y 2 en el segundo 89
• Introduzca brevemente el símbolo 90
• ¿ Qué es el detector de eventos 90?
• Introducir la promesa y cómo implementarla en la parte inferior 91
• Hablar sobre las diferencias entre C++, Java y JavaScript 92
• ¿ Qué es el cierre de js ? ¿Cuál es el efecto , escriba un patrón singleton con cierre 96
• Uso de promise+Generator +Async 96
• Delegación de eventos y principio de burbujeo . 100
• Escriba una función que pueda convertir nombres de guiones bajos en nombres de mayúsculas y minúsculas 101
• La diferencia entre copia clara y oscura y su implementación 101
• La diferencia entre startwith e indexof de cadena en JS 102
• Método de cadena JS al número 103
Ámbito de clase (función ejecutada inmediatamente ), ES6 103
• Características de las funciones de flecha ES6 103
• Secuencia de ejecución de setTimeout y Promise 103
• Por lo general, cómo depurar JS 105
什么的缩写， JS 的作用域类型， undefined==null 返回的结果是什么，
undefined与null的区别在哪，写一个函数判断变量类型105
• setTimeout(fn,100);100 毫秒是如何权衡的 106
• 写一个 newBind 函数，完成 bind 的功能。 107
• 怎么获得对象上的属性：比如说通过 Object.key（） 107
• ¿ Cómo redactar una herencia? 108
• Dado el siguiente código, ¿cuál es el resultado? ¿razón? para(var i=0;i<5;i++)
{ establecer tiempo de espera (función () { console.log (i); }, 1000); } consola.log(i)
• Dados dos constructores A y B , ¿ cómo darse cuenta de que A hereda B ? 110
• Preguntar si el índice 110 se puede imprimir normalmente
• Si ya tiene tres promesas , A , B y C , y desea ejecutarlas en serie , ¿cómo debe escribirlas? 110
• ¿ Conoces el 111 público y privado ?
• La relación entre promesa y await/async 111
• Se bloquea el proceso de carga de JS , la solución . 112
• La diferencia entre el tipo de objeto JS , el tipo de objeto básico y el tipo de objeto de referencia 112
• ¿ Cómo implementar un cálculo de cuántas semanas hay en un año? 112
• Herencia Orientada a Objetos 113
• Objetos de referencia tipo común 114
• Matriz de dictado para deduplicar 115
• La diferencia entre llamar y aplicar 116
• Características comunes de es6 116
• ¿ Cuál es la diferencia entre la función de flecha y la función 116 ?
• El principio del nuevo operador 116
• vincular, solicitar , llamar al 117
• La diferencia entre vincular y aplicar 117
• Deduplicación de arreglos 117
• cumplimiento de promesa 118 _
• copia profunda de la asignación 119
• Decir promesa , qué hacer sin promesa 120
• La diferencia entre la función de flecha y la función 120
• Las funciones de flecha toman argumentos 121
2.1 | Programación del servidor 122
• Dominio cruzado (jsonp , ajax) 122
• Cómo implementar dominios cruzados 122
• ¿ Qué es dom , según tu comprensión? 123
• ¿ Qué es la API sobre dom 12 3
¿Hay alguna forma de ejecutar una determinada orden a la vez? Cómo lidiar con ajax cross-domain 124
• ¿ Cómo implementar una solicitud ajax ? ¿Qué debo hacer si quiero emitir dos ajax secuenciales ?
• ¿ Cuáles son las ventajas y desventajas de Fetch y Ajax ? 127
2.3 | Desarrollo web móvil 127
• diseño flexible y sus ventajas y desventajas 129
• Diseño Rem y sus pros y contras 130
• El terminal móvil se adapta al problema de 1px 132
• Experiencia relevante en la optimización del rendimiento de terminales móviles 134
• La diferencia entre los proyectos toB y toC 134
• Figura 2X Figura 3X Adaptación 135
• La imagen está borrosa en algunos dispositivos con Android 136
• El teclado de diseño de posicionamiento fijo bloquea el contenido del cuadro de entrada 136
• Problema de retraso de 30 0 ms de clic y problema de penetración de clic 136
• La sombra interna predeterminada del cuadro de entrada debajo del teléfono y el ipad es 137
• Evite acercar y alejar páginas 137
• La diferencia entre px , em , rem , % , vw , vh , vm 138
• Adaptación terminal móvil - análisis dpr 138
• Área de clic de extensión móvil 138
• Cuando la barra de desplazamiento se mueve hacia arriba y hacia abajo, se congela y se ralentiza 138
• Mantenga presionada la página durante mucho tiempo y retroceda 138
• Aparece una máscara gris translúcida cuando se tocan elementos en ios y android 139
• el procesamiento compatible activo es una pseudoclase : activo no válido 139
• procesamiento compatible con la máscara webkit 139
• Pantalla de inicio de transición 140
• error de esquinas redondeadas 140
3.1 | Ingeniería de front-end 141
• ¿ Cuál es el principio de Babel ? 141
• ¿ Cómo escribir un complemento de babel ? 141
• ¿ Cómo es su flujo de trabajo de git ? 145
• ¿ Cuál es la diferencia entre rebasar e y fusionar ? 150
• ¿ Cuál es la diferencia entre git reset , git revert y git checkout ? 151
• La diferencia entre webpack y gulp (la diferencia entre modularización y flujo ) 153
• ¿ Alguna vez has usado Vu e ? Hable acerca de su comprensión de Vue 153
• Hable sobre las ventajas y desventajas de Vue 153
• ¿ En qué se diferencia Vue de React ? ¿Cuáles son los escenarios de uso? 154
• ¿ Qué es el DOM virtual ? 154
• Describa cuál es el ciclo de vida de vue ? 154
• ¿ Cómo monitorea vue los eventos del teclado? 157
• ¿ Cómo monitorea en profundidad los cambios en los objetos ? 158
• ¿ Cuál es la diferencia entre delete y Vu e.delete para eliminar una matriz ? 158
• ¿ Cuál es la diferencia entre un reloj y una propiedad calculada ? 158
• Principio de enlace bidireccional de Vue 159
• ¿ Qué es el modelo v ? ¿Cuál es la función? 159
• ¿ Qué es axios ? cómo usarlo ¿Cómo resolver el problema de los dominios cruzados ? 159
• Hable sobre la diferencia entre Vue React y gularjs jquery 160
• ¿ Por qué usar Proxy API en lugar de defineProperty API en Vue3.0 ? 160
• ¿ Qué optimizaciones compiló Vue 3.0 ? 16 0
• ¿ Cómo se volvió más rápido Vue3.0 ? (capa inferior , código fuente) 163
• ¿ Cómo debe hacer vue la administración de permisos? ¿ Qué sucede si los permisos se controlan a nivel de botón ? 164
• ¿ Cuál es la diferencia entre vue solicitando datos en los ciclos de vida creados y montados ?
• Hable acerca de su comprensión de proxy 164
• La diferencia entre angular Js y React 165
• ¿ Cuáles son las desventajas de red ux 165 ?
• ¿ División de los componentes de React en componentes comerciales y componentes técnicos ? 165
• Función de ciclo de vida de React 165
• ¿ Qué función periódica es la optimización del rendimiento de React ? 166
• ¿ Por qué virtual dom mejora el rendimiento ?
• Solución de optimización del rendimiento de React 167
• Una breve introducción al pensamiento de flujo 167
• ¿ Qué andamios usaste para el proyecto React ? Mern Yeoman 168
• ¿ Qué problema resuelve React ? 168
• ¿ Comprendes shouldComponentUpdate ? 168
• ¿ Cuáles son las ventajas de usar React ? 169
• 类组件(Class component)和函数式组件(Functional component)之间有
• (组件的)状态(state)和属性(props)之间有何不同？ 170
• 应该在 React 组件的何处发起 Ajax 请求？ 170
• 何为高阶组件(higher order component)？ 170
• 使用箭头函数(arrow functions)的优点是什么？ 170
• Además de enlazar esto en el constructor , ¿hay alguna otra forma? 171
• ¿ Cómo prevenir el renderizado de componentes ? 171
• Al renderizar una lista , ¿ cuál es la clave? ¿ Cuál es el propósito de configurar la clave ? 171
• Formas de comunicación entre componentes en Angular 172
• Ocho componentes de Angualr y una breve descripción 172
• Funciones comunes de enlace de ciclo de vida en Angular 173
1 | Conceptos básicos de front-end
• Habla sobre http y https
Respuesta de referencia :
El cifrado HTTPS SSL se implementa en la capa de transporte .
(1) Conceptos básicos de http y https
http: Protocolo de transferencia de hipertexto , el protocolo de red más utilizado en Internet, es un estándar de solicitud y respuesta (TCP ) de cliente y servidor, utilizado para transmitir hipertexto desde servidores WWW a navegadores locales , lo que puede hacer que los navegadores sean más eficientes y reducir la red. transferencias _
https: Es un canal HTTP con el objetivo de la seguridad . En pocas palabras, es una versión segura de HTTP , es decir, se agrega una capa SSL debajo de HTTP . La base de seguridad de HTTPS es SSL , por lo que el contenido detallado de cifrado requiere SSL .
La función principal del protocolo https es establecer un canal de seguridad de la información para asegurar la transmisión de la matriz y garantizar la autenticidad del sitio web .
(2) ¿Cuál es la diferencia entre http y https ?
Los datos transmitidos por http no están encriptados , es decir, en texto sin formato . Netscape ha configurado el protocolo SSL para encriptar los datos transmitidos por el protocolo http . En pocas palabras , el protocolo https está construido por los protocolos http ssly , que es más seguro que el protocolo http .
Las principales diferencias son las siguientes :
El protocolo Https requiere un certificado ca , que cuesta mucho .
Http es un protocolo de transferencia de hipertexto , la información se transmite en texto sin formato y https es un protocolo seguro de transferencia encriptado SSL .
Los diferentes métodos de conexión tienen diferentes puertos . En términos generales , el puerto del protocolo http es 80 y el puerto de https es 44 3
La conexión http es muy simple y sin estado ; el protocolo HTTPS es un protocolo de red construido por el protocolo SSL+HTTP que puede realizar transmisiones cifradas y autenticación de identidad , y es más seguro que el protocolo http .
(3) Principio de funcionamiento del protocolo https
Cuando el cliente utiliza HTTPS para comunicarse con el servidor web , existen los siguientes pasos , como se muestra en la figura .
Si el cliente utiliza la URL https para acceder al servidor , se requiere que el servidor web establezca un enlace SSL .
Después de que el servidor web reciba la solicitud del cliente , devolverá o transmitirá el certificado del sitio web (el certificado contiene la clave pública ) al cliente .
El cliente y el servidor web comienzan a negociar el nivel de seguridad de la conexión SSL , es decir, el nivel de encriptación .
El navegador del cliente establece la clave de sesión a través del nivel de seguridad acordado por ambas partes , y luego encripta la clave de sesión con la clave pública del sitio web y la transmite al sitio web .
El servidor web descifra la clave de sesión con su propia clave privada .
El servidor web encripta la comunicación con el cliente a través de la clave de sesión .
(4) Ventajas del protocolo https
Use el protocolo HTTPS para autenticar usuarios y servidores para garantizar que los datos se envíen al cliente y al servidor correctos ;
El protocolo HTTPS es un protocolo de red construido por el protocolo SSL+HTTP que puede realizar transmisiones cifradas y autenticación de identidad . Es más seguro que el protocolo HTTP y puede evitar que los datos sean robados o modificados durante la transmisión y garantizar la integridad de los datos . HTTPS es la solución más segura bajo la arquitectura actual Aunque no es absolutamente seguro , aumenta considerablemente el costo de los ataques de intermediarios .
Google ajustó el algoritmo de su motor de búsqueda en agosto de 2014 , afirmando que "los sitios cifrados con HTTPS ocuparán un lugar más alto en los resultados de búsqueda que los sitios HTTP equivalentes " .
(5) Desventajas del protocolo https
La fase de protocolo de enlace https requiere mucho tiempo , lo que aumentará el tiempo de carga de la página en un 50 % y aumentará el consumo de energía en un 10 %~20 % .
La memoria caché https no es tan eficiente como http , lo que aumentará la sobrecarga de datos .
Los certificados SSL también cuestan dinero , y los certificados más potentes cuestan más .
El certificado SSL debe estar vinculado a una IP y varios nombres de dominio no pueden vincularse a la misma IP Los recursos de IPv4 no pueden admitir este tipo de consumo .
• apretón de manos de tres vías tcp , resumen de una oración
Tanto el cliente como el servidor deben esperar hasta que puedan enviar y recibir , por lo que se requiere un protocolo de enlace de tres vías .
Apretón de manos simplificado de tres vías :
<img width="487" alt="2018-07-10 3 42 11 " src= "https://user-images.githubusercontent.com/17233651/42496289-1c6d668a-8458-11e8-98b3- 65db50f64d48.png " >
A partir de la imagen, el protocolo de enlace de tres vías se puede simplificar como : C inicia una solicitud para conectarse a S para confirmación , y también inicia una conexión a C para confirmación. Veamos la función de cada protocolo de enlace : el primer protocolo de enlace : S puede solo confirme que puede aceptar el segmento enviado por C No.
El segundo apretón de manos : C puede confirmar que S ha recibido el segmento enviado por sí mismo , y puede confirmar que puede aceptar el segmento enviado por S. El tercer apretón de manos : S puede confirmar que C ha recibido el segmento enviado por él mismo
• La diferencia entre TCP y UDP
(1 ) TCP está orientado a la conexión y UDP no tiene conexión, es decir, no es necesario establecer un enlace antes de enviar los datos .
(2 ) TCP brinda un servicio confiable . Es decir , los datos transmitidos a través de la conexión TCP están libres de errores , no se pierden , no se repiten y llegan en orden; UDP hace todo lo posible para entregar , es decir, no garantiza una entrega confiable . Y debido a que tcp es confiable , está orientado a la conexión y no perderá datos, es adecuado para el intercambio de grandes cantidades de datos .
(3 ) TCP está orientado a bytes , UDP está orientado a paquetes y la congestión de la red no reducirá la tasa de envío (por lo que habrá pérdida de paquetes , para aplicaciones en tiempo real como telefonía IP y videoconferencia, etc. ).
( 4 ) TCP solo puede ser 1 a 1 , UDP admite 1 a 1, 1 a muchos .
(5 ) El encabezado de TCP tiene 20 bytes como máximo , mientras que UDP tiene solo 8 bytes .
(6 ) TCP es una transmisión confiable orientada a la conexión , mientras que UDP no es confiable .
Respuesta de referencia :
(1) ¿ Qué es WebSocket ?
WebSocket es un protocolo en HTML5 que admite conexiones persistentes.El protocolo http no admite conexiones persistentes . Tanto Http1.0 como HTTP1.1 no admiten enlaces persistentes.Keep - alive en HTTP1.1 combina varias solicitudes http en una
(2) ¿ Qué tipo de protocolo es WebSocket y cuáles son sus ventajas ?
El ciclo de vida de HTTP está definido por Solicitud , es decir, Solicitud es una Respuesta , por lo que en el protocolo Http1.0 , esta solicitud Http ha terminado . Se ha mejorado en Http1.1 , sí hay conexión : Keep-alive , es decir , en una conexión Http se pueden enviar múltiples Solicitudes y se pueden recibir múltiples Respuestas . Pero hay que recordar que una Petición en Http sólo puede corresponder a una Respuesta , y esta Respuesta es pasiva y no puede ser iniciada activamente .
WebSocket se basa en el protocolo Http , o se toma prestado del protocolo Http para completar parte del protocolo de enlace , que es lo mismo que Http en la fase de . Veamos la implementación de un protocolo de protocolo de enlace websocket , básicamente dos atributos , actualización , conexión .
La solicitud básica es la siguiente :
OBTENER / chat HTTP/1.1
Host : server.example.com
Actualizar : websocket
Conexión: Actualizar
S ec-WebSocket-Clave: x3JJHMbDL1EzLkh9GBhXDw==
Se c-WebSocket-Protocol: chat, superchat
Sec- WebSocket-Versión: 13
Origen : dominio de ejemplo
Se añaden los siguientes dos atributos :
| 1 2 |
Actualizar : webSocket Conexión : Actualizar |
Dile al servidor que envíe websocket
| 1 2 3 |
S ec-WebSocket-Clave: x 3 JJHMbDL 1 EzLkh 9 GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSo cket-Versión: 13 |
• Método de solicitud HTTP , método HEAD
head : similar a una solicitud de obtención , excepto que no hay contenido específico en la respuesta devuelta y el usuario obtiene el encabezado
opciones : permite al cliente ver el rendimiento del servidor , como los métodos de solicitud admitidos por el servidor, etc.
• ¿ Cómo realizar la descarga directa después de visitar la url de una imagen ?
En el encabezado de retorno de la solicitud , el parámetro importante para el análisis del navegador es el encabezado http de retorno en el documento API de OSS , que determina el comportamiento de descarga del usuario .
En caso de descarga :
1. x-oss -tipo de objeto: Normal
2. x -oss-request-id: 598D5ED34 F29D01FE2925F41
3. clase de almacenamiento x-oss : estándar
• Charla sobre calidad web (accesibilidad )
Un sitio web usable (accesible ) es aquel que puede ser utilizado por personas con discapacidades . Las personas con discapacidad se refieren a aquellos usuarios con discapacidades o condiciones médicas .
Usa el atributo alt :
<img src="persona.jpg" alt="esta es una persona"/>
A veces, los navegadores no pueden mostrar imágenes . Las razones específicas son :
El usuario desactivó la visualización de imágenes
El navegador es un mini-navegador que no admite visualización de gráficos
El navegador es un navegador de voz (para personas ciegas y con baja visión )
Si usa el atributo alt , el navegador puede al menos mostrar o leer una descripción de la imagen .
• ¿ Varios métodos de objeto de atributo BOM muy prácticos?
¿Qué es Bom? Bom es el objeto del navegador . ¿Cuáles son los atributos Bom comúnmente utilizados ?
( 1) objeto de ubicación
location.href - devuelve o establece la URL del documento actual
location.search : devuelve la cadena de consulta que forma parte de la URL . ejemplo
Si ocurre un error en el sistema , devolver el contenido después de (?) ?id=5&n ame=dreamdu
location.hash -- devuelve el contenido después de la URL # , si no hay # , devuelve un valor vacío location.host -- devuelve la parte del nombre de dominio en la URL , como www.dreamdu.com location.hostname -- devuelve la parte principal parte del nombre de dominio en la URL , por ejemplo, dreamdu.com
location.pathname : devuelve la parte de la URL después del nombre de dominio . ejemplo
Si ocurre un error en el sistema, devuelve /xhtml/
localizar ion.port - devuelve la parte del puerto de la URL . ejemplo
Por ejemplo, http://www.dreamdu.com:8080/xhtml/ devuelve 8080
localizar.protocolo : devuelve la parte del protocolo de la URL . ejemplo
Por ejemplo, http://www.dreamdu.com:8080/xhtml/ devuelve el contenido http:
location.assign -- establecer la URL del documento actual
location.replace() --Establezca la URL del documento actual y elimine esta URL de la lista de direcciones del objeto de historial location.replace (url);
location.reload() -- recargar la página actual
(2 ) objeto de historial
history.go() --Hacia adelante o hacia atrás el número especificado de páginas history.go(num);
history.back () -- Retrocede una página
history.forward() -- avanzar una página
(3) Objeto navegador
navigator.userAgent : devuelve una representación de cadena del encabezado del agente de usuario (es decir, una cadena que incluye información de la versión del navegador, etc. )
navigator.cookieEnabled : devuelve si el navegador admite (habilita) las cookies
• Hable acerca de la API de arrastre de HTML5
dragstart : El cuerpo principal del evento es el elemento arrastrado y soltado , que se activa cuando el elemento arrastrado y soltado comienza a arrastrarse y soltarse .
darg : el cuerpo del evento es el elemento arrastrado y soltado , que se activa cuando el elemento arrastrado y soltado se está arrastrando y soltando .
dragenter : El cuerpo del evento es el elemento de destino , que se activa cuando el elemento arrastrado ingresa a un elemento .
arrastre : el cuerpo del evento es el elemento de destino , que se activa cuando se arrastra y se mueve dentro de un elemento .
dragleave : el cuerpo del evento es el elemento de destino y se activa cuando el elemento arrastrado sale del elemento de destino .
soltar : el cuerpo del evento es el elemento de destino , que se activa cuando el elemento de destino acepta por completo el elemento arrastrado y soltado .
dragend : el cuerpo del evento es el elemento que se está arrastrando y soltando , que se activa cuando finaliza toda la operación de arrastrar y soltar
• Hable acerca de h ttp2.0
En primer lugar , permítanme agregar la diferencia entre http y https . En comparación con http, https es un protocolo http basado en el cifrado SSL .
Breve resumen : http2.0 se basa en la primera actualización posterior a http1.0 lanzada en 1999 .
Mejorar la velocidad de acceso (se puede usar para requerir menos tiempo para solicitar recursos y una velocidad de acceso más rápida , en comparación con http1.0 ) Permite la multiplexación : la multiplexación permite enviar varias solicitudes simultáneamente a través de una única información de respuesta de conexión HTTP/2 . Mejorado : en http1.1 , el cliente del navegador tiene una cierta cantidad de solicitudes (cantidad de conexiones ) para el mismo nombre de dominio al mismo tiempo , y si excede el límite, se bloqueará .
Trama binaria : HTTP2.0 dividirá toda la información de transmisión en información o tramas más pequeñas y las codificará en binario.
compresión de encabezado
• Suplemento 400 , 401 , 403 códigos de estado
Respuesta de referencia :
( 1 ) Código de estado 400 : solicitud no válida Causa : el nombre del campo y el tipo de campo de los datos enviados por el front-end no son coherentes con las entidades en el back-end convertidas en una cadena . Solución : compare el nombre del campo para mantener la coherencia y serialice el objeto obj a través de JSON.stringify
(2) código de estado 401 : la solicitud actual requiere autenticación de usuario
(3) Código de estado 403 : el servidor ha recibido la solicitud , pero se niega a ejecutarla
• La razón por la que fe tch envía 2 solicitudes
Cuando fetch envía una solicitud de publicación , siempre la envía dos veces . El primer código de estado es 204 , y la segunda vez, ¿tiene éxito ? La razón es muy simple , porque cuando usa la solicitud posterior de fetch , fetch envía una solicitud de Opciones por primera vez , preguntando si el servidor admite el encabezado de solicitud modificado , y si el servidor lo admite , luego envía la solicitud real en el segunda vez
• La diferencia entre Cookie , almacenamiento de sesión y almacenamiento local
Lo que tienen en común: todos se guardan en el lado del navegador y son del mismo origen
Cookie : los datos de las cookies siempre se transportan en la solicitud http de la misma fuente (incluso si no se requiere ) , es decir, la cookie se pasa de un lado a otro entre el navegador y el servidor . Sin embargo, sessionStorage y el almacenamiento local no enviarán datos automáticamente al servidor , sino que solo los guardarán localmente . Los datos de cookies también tienen el concepto de ruta (ruta ) , que puede limitar las cookies para que solo pertenezcan a una determinada ruta, y el tamaño de almacenamiento es muy pequeño, solo alrededor de 4K . (clave : se puede pasar de un lado a otro entre el navegador y el servidor , y la capacidad de almacenamiento es pequeña , solo alrededor de 4K )
sessionStorage : Sólo es válido hasta que se cierra la ventana del navegador actual , por lo que es naturalmente imposible mantenerlo de forma persistente .
localStorage : siempre válido , la ventana o el navegador se cierra y se guarda , por lo que se utiliza como datos persistentes ; la cookie solo es válida hasta el tiempo de caducidad de la cookie establecido , incluso si la ventana o el navegador están cerrados . (clave : en sí mismo es un proceso de sesión , desaparece después de cerrar el navegador , la sesión es una sesión , cuando la página es diferente, incluso si la misma página se abre dos veces , se considera como la misma sesión )
localStorage : localStorage se comparte entre todas las ventanas del mismo origen ; la cookie también se comparte entre todas las ventanas del mismo origen . (clave : las ventanas del mismo origen se compartirán y no se invalidarán , y siempre tendrán efecto independientemente de si la ventana o el navegador están cerrados ) Permítanme agregar la función de las cookies : para guardar el estado de inicio de sesión del usuario . Por ejemplo, almacene la identificación del usuario en una cookie , de modo que cuando el usuario visite la página la próxima vez, no necesite iniciar sesión nuevamente . Muchos foros y comunidades ahora brindan tales funciones . La cookie también puede establecer un tiempo de caducidad , y cuando expire el límite de tiempo , la cookie desaparecerá automáticamente . Por lo tanto , el sistema a menudo puede solicitar con
Cuánto tiempo permanece conectado el usuario : Las opciones comunes son un mes , tres meses , un año , etc.
Seguimiento del comportamiento del usuario . Por ejemplo, un sitio web de pronóstico del tiempo puede mostrar las condiciones meteorológicas locales según la región seleccionada por el usuario . Si es engorroso elegir la ubicación cada vez , será muy humanizado cuando se usen cookies . El sistema puede recordar la región visitada la última vez . Cuando se abra la página la próxima vez , mostrará automáticamente al último usuario Las condiciones climáticas en tu área Debido a que todo se hace en segundo plano , una página de este tipo es como si estuviera personalizada para un determinado usuario , y es muy conveniente usar la página personalizada . Si el sitio web proporciona la función de cambiar la máscara o cambiar el diseño , las cookies se pueden utilizar para registrar las opciones del usuario , tales como : color de fondo , resolución, etc. Cuando el usuario visite la próxima vez , aún se puede guardar el estilo de interfaz de la visita anterior .