A partir de hoy, comenzaremos a actualizar el banco de preguntas básicas de la entrevista front-end y compartiremos diez preguntas clásicas de la entrevista front-end todos los días, bienvenidos a aprender juntos.
Tabla de contenido
1. ¿Qué es el cierre? Describa brevemente las características y escenarios de aplicación del cierre.
3. Describa brevemente la diferencia entre HTTPS y HTTP ¿Cómo garantizar la seguridad de HTTPS?
4. Respecto a let, const y var en JavaScript, ¿cuáles son sus alcances y características?
5. Describa brevemente su comprensión del marco MVVM.
7. ¿Cuál es el patrón de arquitectura MVC?
8. ¿Cómo implementar la carga diferida?
9. ¿Cómo se optimiza el rendimiento del sitio web?
10. ¿Cómo solucionar problemas de compatibilidad del navegador?
1. ¿Qué es el cierre? Describa brevemente las características y escenarios de aplicación del cierre .
Un cierre es una función anidada dentro de una función que puede acceder a variables en el alcance de otras funciones, incluso si estas variables todavía existen después de que finaliza la llamada a la función.
Características de los cierres:
1. Puede acceder a variables fuera de la función.
2. La función interna tiene el alcance de la función externa.
3. Puede acceder a parámetros y variables locales de funciones externas.
4. Después de que regrese la función externa, la función interna aún mantendrá el alcance de la función externa.
Escenarios de aplicación de cierres:
1. Encapsular bibliotecas de clases y ocultar detalles de implementación interna
2. Ejecución retrasada, como enlace de eventos y funciones de devolución de llamada.
3. Simular el alcance a nivel de bloque, como crear un temporizador en un bucle.
4. Se utiliza como función de ejecución inmediata (IIFE) para evitar que las variables contaminen el espacio de nombres global.
2. ¿Cuáles son las soluciones para la optimización del rendimiento del front-end? Enumere al menos tres soluciones y descríbalas en detalle.
Las soluciones para la optimización del rendimiento del front-end incluyen:
1. Reduzca las solicitudes de red: combine archivos JS y CSS, use CSS Sprites, Iconfont, WebFont y otros métodos para reducir las solicitudes de imágenes, comprima códigos JS, CSS, HTML, etc.
2. Reduzca el tiempo de carga de recursos: utilice servicios CDN, almacenamiento en caché del navegador, almacenamiento en caché del servidor, almacenamiento en caché HTTP, almacenamiento en caché LocalStorage y otras tecnologías.
3. Reduzca el redibujado y el reflujo de la página: reduzca las operaciones DOM, use animación CSS3 en lugar de animación JS, use atributos como transformación, opacidad, posición, desbordamiento, etc. en lugar de margen y relleno.
3. Describa brevemente la diferencia entre HTTPS y HTTP ¿Cómo garantizar la seguridad de HTTPS ?
HTTPS (Protocolo seguro de transferencia de hipertexto) es una versión mejorada del protocolo HTTP que cifra y transmite datos a través del protocolo SSL/TLS para garantizar una comunicación segura y confiable.
Las diferencias son las siguientes:
1. La comunicación HTTP utiliza transmisión de texto sin formato y tiene baja seguridad; HTTPS usa SSL/TLS para cifrar los datos para la transmisión y tiene alta seguridad.
2. HTTP usa el puerto 80 de forma predeterminada y HTTPS usa el puerto 443 de manera predeterminada.
3. HTTPS requiere el uso de certificados digitales, emitidos por organizaciones de CA, para garantizar la legitimidad de las identidades de ambas partes que se comunican.
Medidas para garantizar la seguridad HTTPS:
1. Durante el proceso de protocolo de enlace TLS, se utilizan algoritmos de cifrado asimétrico (RSA, DSA, ECC, etc.) para negociar claves y algoritmos de cifrado simétrico.
2. La verificación de la cadena de certificados garantiza la legitimidad de las identidades de ambas partes que se comunican.
3. Utilice algoritmos de cifrado rápidos, como AES (Estándar de cifrado avanzado), etc.
4. Gestión de la seguridad de las cookies, como prohibir la transmisión a través de http, utilizar atributos Secure, HttpOnly, etc.
5. Active la seguridad de transporte estricta HTTP (HSTS) para evitar ataques de intermediario y utilice la política de seguridad de contenido (CSP) para evitar ataques XSS y CSRF.
4. Para let , const y var en JavaScript , ¿cuáles son sus alcances y características ?
Características de let y const:
1. Solo es válido dentro de este alcance a nivel de bloque. No se puede acceder a las variables fuera del alcance a nivel de bloque.
2. No podrán realizarse declaraciones duplicadas en el mismo ámbito.
3. Una vez que se declara una variable declarada por const y se le asigna un valor, ya no se permite modificarla.
Características de var
1. Existe una promoción de variables, que se puede usar primero y luego declarar, y la declaración y la asignación se pueden escribir por separado. Usar typeof antes de la variable no informará un error.
2. La declaración avanzará a la parte superior del alcance global o alcance de la función.
3. Cuando se declara una variable en el ámbito global, se crea una propiedad del objeto global y se puede acceder a la variable a través del objeto global.
5. Describa brevemente su comprensión del marco MVVM .
MVVM es la abreviatura de Model-View-ViewModel, una idea de marco de front-end. En la arquitectura MVWM, Ver y
ViewModel es independiente entre sí y los dos utilizan tecnología de enlace de datos para lograr un enlace de datos bidireccional.
Ventajas del marco MVVM:
1. El enlace de datos bidireccional y la actualización automática de vistas reducen una gran cantidad de código de manipulación DOM manual.
2. La organización clara del código, el desarrollo modular y la separación de View y ViewModel facilitan el mantenimiento del código y el desarrollo colaborativo.
3. Las ricas bibliotecas oficiales y de terceros proporcionan una gran cantidad de componentes y funciones listos para usar.
Desventajas del marco MVVM:
1. El enlace de datos consumirá una cierta cantidad de memoria y rendimiento, especialmente para actualizaciones de datos a gran escala, el consumo de rendimiento es más obvio.
2. Necesita aprender algunas reglas gramaticales y de uso nuevas.
3. La personalización de los componentes es baja y debe personalizarse dentro del alcance proporcionado por el marco.
6. Dé un ejemplo de cierre.
function outerFunc(){
var name = 'Jack';
function innerFunc(){
console.log(name);
}
retun ineFunc;
}
var func = outerFunc();
func();//'Jack'
En este ejemplo, la función InnerFunc() tiene acceso a la variable de nombre exterior, por lo que es una función de cierre. La función exteriorFunc () devuelve la función interiorFunc () y asigna la función interiorFunc () a la variable func. Al llamar a func (), la función interiorFunc () puede acceder al nombre de la variable externa y generar Jack.
7. ¿Cuál es el patrón de arquitectura MVC?
El patrón arquitectónico MVC (Model View Controller) es una forma de dividir una aplicación en tres partes básicas:
1. Modelo, Vista y Controlador.
2. El modelo se utiliza para representar los datos centrales de la aplicación, la vista se utiliza para mostrar los datos y el controlador se utiliza para manejar la interacción del usuario.
3. El patrón MVC facilita el desarrollo y mantenimiento de aplicaciones, ayudando a los desarrolladores a gestionar mejor el código y centrarse en la lógica central de la aplicación.
8. ¿Cómo implementar la carga diferida ?
1. API de observador de intersecciones
2. Utilice marcadores de posición de imágenes
3. Utilice los atributos data-src y data-srcset
4. Utilice JavaScript para insertar elementos en los momentos adecuados, etc.
Entre ellos, la API Intersection Observer es un método proporcionado por los navegadores modernos para observar si un elemento está en la ventana gráfica y puede implementar funciones como la carga diferida de imágenes.
9. ¿Cómo se optimiza el rendimiento del sitio web?
La optimización del rendimiento del sitio web incluye métodos como reducir la cantidad de solicitudes, comprimir archivos y optimizar imágenes. Específicamente, puede usar la aceleración CDN, habilitar el almacenamiento en caché del navegador, usar algoritmos de compresión para comprimir archivos, etc.
10. ¿Cómo solucionar problemas de compatibilidad del navegador?
Puede utilizar CSS Hack, JavaScript Polyfill, propiedades CSS específicas de IE6-8 y otros métodos para resolver problemas de compatibilidad del navegador. También puede utilizar especificaciones CSS y detalles de JavaScript para evitar problemas de compatibilidad.