¡Resumen de las preguntas de la entrevista inicial!

---

Resumen de las preguntas de la entrevista inicial (incluidas respuestas súper detalladas): actualización continua

1.HTML

1. ¿Cuál es la diferencia entre xhtml y html?

• funcionalmente
  • Es principalmente XHTMLcompatible con los principales navegadores, teléfonos móviles PDAy los navegadores pueden compilar páginas web de forma rápida y correcta.
• hábitos de escritura
  • XHTMLLos elementos deben estar correctamente anidados, cerrados y distinguir entre mayúsculas y minúsculas, y el documento debe tener un elemento raíz.

2. ¿Cuáles son los elementos en línea? ¿Qué son los elementos a nivel de bloque? ¿Cuáles son los elementos vacíos (vacíos)? ¿Cuál es la diferencia entre elementos en línea y elementos a nivel de bloque?

Los elementos en línea incluyen: ab span img input select strong
Los elementos a nivel de bloque incluyen: div ul ol li dl dt dd h1 h2 h3 h4...p
Elementos vacíos: br, hr img input link meta
Los elementos en línea no pueden establecer ancho y alto, y no ocupe un solo
bloque. Se puede establecer el ancho y alto de los elementos de nivel, ocupando una sola línea.

3. Describe brevemente tu comprensión de la semántica HTML.

La semantización se refiere a la selección de etiquetas apropiadas (semántica del código) en función de la estructura del contenido (semántica del contenido).

Beneficios semánticos:

• 在没有CSS的情况下，页面也能呈现出很好的内容结构
• 语义化使代码更具可读性，便于团队开发和维护
• 语义化有利于用户体验（例如 title，label，alt属性的灵活运用）
• 语义化有利于SEO（和搜索引擎建立良好的沟通，有助于爬虫爬取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重）

4. 标签上 title 与 alt 属性的区别是什么？

alt 是给搜索引擎识别，在图像无法显示时的替代文本；
title 是关于元素的注释信息，主要是给用户解读。
当鼠标放到文字或是图片上时有 title 文字显示。（因为 IE 不标准）在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。
在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用。

5. iframe的优缺点？

优点：

• 解决加载缓慢的第三方内容如图标和广告等的加载问题
• Security sandbox
• 并行加载脚本

---

缺点：

• iframe会阻塞主页面的Onload事件
• 即时内容为空，加载也需要时间
• 没有语意
• 使用iframe作为子应用问题：1.没有路有记录 2.样式隔离严重

6. href 与 src？

• href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a
• src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe
• href与src的区别
  • 1、请求资源类型不同：href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片；
  • 2、作用结果不同： src用于替换当前元素；href用于在当前文档和引用资源之间建立联系
  • 3. Los métodos de análisis del navegador son diferentes: cuando el navegador analiza src, suspenderá la descarga y el procesamiento de otros recursos hasta que el recurso se cargue, compile y ejecute. Lo mismo ocurre con las imágenes y los marcos, de forma similar a aplicar el método puntiagudo. recurso al contenido actual. Es por eso que se recomienda colocar el script js en la parte inferior en lugar del encabezado.

7. ¿Qué es una mejora progresiva con una degradación elegante?

Mejora progresiva: cree páginas para navegadores de versión baja al principio, complete funciones básicas y luego realice efectos, interacciones y funciones adicionales para navegadores avanzados para lograr una mejor experiencia.

Degradación elegante: cree un sitio completamente funcional desde el principio, luego pruébelo y corríjalo en los navegadores. Por ejemplo, al principio, se creó una aplicación utilizando las funciones de CSS3 y luego se pirateó gradualmente para los principales navegadores para que se pudiera navegar normalmente en navegadores de versión baja.

8. ¿Cuántos métodos de solicitud HTTP se utilizan?

• GETmétodo
  • Enviar una solicitud para obtener un recurso en el servidor.
• POSTmétodo
  • URLEnviar datos o agregar datos nuevos al recurso especificado
• PUTmétodo
  • De manera similar al POSTmétodo, también envía datos al servidor. Sin embargo, existen diferencias entre ellos. PUTespecifica la ubicación del recurso en el servidor, POSTsin
• HEADmétodo
  • Solicite solo el encabezado de la página
• DELETEmétodo
  • Eliminar un recurso en el servidor
• OPTIONSmétodo
  • Se utiliza para obtener los URLmétodos actualmente admitidos. Si la solicitud tiene éxito, habrá un Allowencabezado que contendrá “GET,POST”información como esta
• TRACEmétodo
  • TRACEEl método se utiliza para activar un bucle de mensajes de solicitud remoto a nivel de aplicación.
• CONNECTmétodo
  • Convierta la conexión de solicitud en un TCP/IPcanal transparente

9. ¿Cuáles son los códigos de estado HTTP?

1. Respuesta temporal

100——El cliente debe continuar enviando solicitudes
101——El cliente requiere que el servidor convierta la versión del protocolo HTTP de acuerdo con la solicitud
2. Éxito

200: el servidor devuelve exitosamente la página web
201: solicita conocer la URL del nuevo archivo
202: aceptado y procesado, pero el procesamiento no se completa
203: la información devuelta es incierta o incompleta
204: se recibe la solicitud, pero el la información devuelta está vacía
205 - El servidor ha completado la solicitud, el agente de usuario debe restablecer el archivo actualmente explorado
206 - El servidor ha completado la solicitud GET de algunos usuarios
3. Redirección

300: el recurso solicitado se puede obtener en varios lugares
301: eliminar los datos de la solicitud
302: los datos de la solicitud se encontraron en otras direcciones
303: sugerir al cliente que visite otras URL o métodos de acceso
304: el cliente ha ejecutado GET, pero el archivo Sin cambios
305 - El recurso solicitado debe obtenerse de la dirección especificada por el servidor
306 - El código utilizado en la versión anterior de HTTP, que ya no se utiliza en la versión actual
307 - Afirma que el recurso solicitado se elimina temporalmente
4. Solicitud error

400: solicitud incorrecta, como error de sintaxis
401: error de autorización de la solicitud
402: mantener la respuesta del encabezado ChargeTo válida
403: solicitud no permitida
404: la página web solicitada no existe
405: el método definido por el usuario en el campo Línea de solicitud sí no existe Permitir
406: según el mensaje de aceptación enviado por el usuario, el recurso solicitado no es accesible
407: similar a 401, el usuario primero debe estar autorizado en el servidor proxy
408: el cliente no completó la solicitud dentro del tiempo especificado por el usuario
409: para el estado actual del recurso, la solicitud no se puede completar
410 - El recurso ya no está disponible en el servidor y no hay más referencias a la dirección
411 - El servidor rechazó la solicitud del contenido definido por el usuario- Atributo de longitud
412 - Uno o más campos de encabezado de solicitud son incorrectos en la solicitud actual
413 - El recurso solicitado es mayor que el tamaño permitido por el servidor
414 - La URL del recurso solicitado es más larga que la longitud permitida por el servidor
415 - El recurso solicitado no admite el formato del elemento solicitado
416 - La solicitud contiene el campo de encabezado de solicitud Rango, dentro del alcance del recurso solicitado actual No hay ningún valor de indicación de rango y la solicitud no contiene el campo de encabezado de solicitud If-Range 417——
El El servidor no cumple con el valor esperado especificado en el campo de encabezado Esperar de la solicitud. Si es un servidor proxy, es posible que el servidor del siguiente nivel no pueda satisfacer la solicitud. 5. Error del servidor 500—— El servidor genera un error
interno
. error
501: el servidor no admite la función solicitada
502: el servidor no está disponible temporalmente, a veces para evitar la sobrecarga del sistema
503: el servidor está agotado, sobrecargado o suspendido por mantenimiento
504: la puerta de enlace está sobrecargada, el servidor utiliza otra puerta de enlace o servicio para responder al usuario y el valor de configuración del tiempo de espera es más largo
505: el servidor no admite o se niega a admitir la versión HTTP especificada en el encabezado de la solicitud

10. ¿Cuál es la función de DOCTYPE (tipo de documento)?

DOCTYPE es una declaración de tipo de documento de un lenguaje de marcado universal estándar en HTML5. Su propósito es decirle al navegador (analizador) qué tipo de definición de tipo de documento (html o xhtml) debe usarse para analizar el documento. Los diferentes modos de representación afectarán la navegación Analizador de código CSS e incluso scripts JavaScript. Debe declararse en la primera línea del documento HTML.

Hay dos modos para que el navegador muestre la página:

• CSS1Compat: modo estándar (modo Strick), el modo predeterminado, el navegador utiliza el estándar W3C para analizar y representar la página. En el modo estándar, el navegador muestra las páginas con el estándar más alto que admite.
• BackCompat: modo extraño (modo mixto) (modo rápido), el navegador usa su propio modo extraño para analizar y representar la página. En el modo Quirks, las páginas se muestran de una manera más relajada y compatible con versiones anteriores.

11. ¿A qué SEO se debe prestar atención desde el principio?

• Título, descripción y palabras clave razonables: los motores de búsqueda reducen el peso de este elemento uno por uno, el valor del título solo puede enfatizar los puntos clave, las palabras clave importantes no deben aparecer más de 2 veces y deben colocarse al frente, títulos de páginas diferentes debe ser diferente; descripción Resuma ampliamente el contenido de la página, la longitud es apropiada, no acumule demasiadas palabras clave, la descripción de diferentes páginas es diferente; las palabras clave solo enumeran las palabras clave importantes
• Código HTML semántico, de acuerdo con la especificación W3C: el código semántico facilita a los motores de búsqueda la comprensión de las páginas web.
• Los códigos HTML para contenido importante se colocan primero: los motores de búsqueda rastrean HTML de arriba a abajo y algunos motores de búsqueda tienen restricciones en la duración del rastreo para garantizar que se rastree el contenido importante.
• No utilice la salida js para contenido importante: los rastreadores no ejecutarán js para obtener contenido
• Utilice menos iframes: los motores de búsqueda no rastrearán el contenido dentro de iframes
• Las imágenes no decorativas deben agregar alt.
• Mejorar la velocidad del sitio: la velocidad del sitio es un indicador importante de la clasificación en los motores de búsqueda.

12. ¿Cuál es la diferencia entre aplazar y async en la etiqueta del script?

注意： 如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

区别：

• 执行顺序：多个带async属性的标签，不能保证加载的顺序。多个带有defer属性的标签会按照加载顺序执行
• 脚本是否并行： async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的即文档加载与js加载同时进行。defer属性，js脚本需要等待文档所有元素解析完成后执行 ，DOMContentLoaded事件触发执行之前。

13.常用meta标签有哪些？

meta标签由name和content属性定义，用来描述网页文档的属性

常用的meta标签：

• charset：用来描述HTML文档的编码类型
• keywords:页面关键词
• description:页面描述
• refresh:页面重定向和刷新
• viewport:适配移动端，可以控制视口大小和比例
  • content参数详情：
    • width viewport:宽度(数值/device-width)
    • height viewport:高度(数值/device-height)
    • initial-scale：初始缩放比例
    • maximum-scale:最大缩放比例
    • minimum-scale:最小缩放比例
    • user-scalable：是否允许用户缩放(yes/no)

14.一次完整的HTTP事务是怎么一个过程?

• 浏览器的地址栏输入URL并按下回车。
• 浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
• DNS解析URL对应的IP。
• 根据IP建立TCP连接（三次握手）。
• HTTP发起请求。
• 服务器处理请求，浏览器接收HTTP响应。
• 渲染页面，构建DOM树。
• 关闭TCP连接（四次挥手）。

15.HTTP和HTTPS区别？

http:超文本传输协议，是一个客户端和服务器端请求和应答的标准(TCP),用于从www服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更高效，是网络传输减少

https：可以理解为http的安全版，在http下加入SSL层。https协议的主要作用是建立一个安全的信息通道，来确保数组的传输，确保网站的真实性。

区别：

• Https 协议需要 ca 证书，费用较高。
• http es el protocolo de transferencia de hipertexto y la información se transmite en texto sin formato, mientras que https es el protocolo de transferencia cifrado SSL seguro.
• 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 443.
• 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 transmisión cifrada y autenticación de identidad, y es más seguro que el protocolo http.

16. ¿Cómo implementa HTTPS el cifrado?

HTTPS requiere un protocolo de enlace entre el cliente (navegador) y el servidor (sitio web) antes de transmitir datos. Durante el protocolo de enlace, se establecerá la información de la contraseña para la transmisión de datos cifrados entre las dos partes. El protocolo TLS/SSL no es solo un protocolo para transmisión cifrada, sino también una obra de arte cuidadosamente diseñada por el artista. En TLS/SSL se utilizan cifrado asimétrico, cifrado simétrico y algoritmo HASH.

17. ¿Cuál es la función del atributo srcset de img? img carga diferentes imágenes

A menudo se utilizan diferentes imágenes en las páginas responsivas según la densidad de la pantalla. En este momento, se usa el atributo srcset de la etiqueta img, que se usa para establecer diferentes densidades de pantalla y las imágenes cargadas por img son diferentes.

18.¿Qué son los estándares WEB y los estándares W3C?

• Cierre de etiqueta, etiqueta en minúsculas, sin anidamiento aleatorio, uso de enlaces externos cssy jsseparación de comportamiento estructural

19. ¿Cómo utilizar el almacenamiento sin conexión de HTML5? ¿principio de funcionamiento?

El almacenamiento sin conexión se refiere a: cuando el usuario no está conectado a Internet, se puede acceder normalmente al sitio o la aplicación, y cuando el usuario está conectado a Internet, se actualiza el archivo de caché en la máquina del usuario.

Principio : El almacenamiento sin conexión de HTML5 se basa en un mecanismo de almacenamiento en caché de archivos .appcache recién creado (no una tecnología de almacenamiento). Los recursos se almacenan sin conexión a través de la lista de análisis de este archivo y estos recursos se almacenarán como cookies. Más tarde, cuando la red esté fuera de línea, el navegador mostrará la página a través de los datos almacenados fuera de línea.

Cómo utilizar :

• Cree un archivo de manifiesto con el mismo nombre que html y luego agregue el atributo de manifiesto al encabezado de la página.
• Escriba los recursos que deben almacenarse sin conexión en el archivo cache.manifest
  • CACHE : Indica la lista de recursos que deben almacenarse sin conexión. Dado que la página que contiene el archivo de manifiesto se almacenará automáticamente sin conexión, no es necesario enumerar la página en sí.
  • RED : Indica que solo se puede acceder a los recursos enumerados debajo cuando están en línea, no se almacenarán sin conexión, por lo que estos recursos no se pueden usar sin conexión. Sin embargo, si
    hay el mismo recurso en CACHE y RED, este recurso aún se almacenará sin conexión, lo que significa que CACHE tiene una prioridad más alta.
  • FALLBACK : Indica que si falla el acceso al primer recurso, entonces use el segundo recurso para reemplazarlo. Por ejemplo, el archivo anterior indica que si falla el acceso a cualquier recurso en el directorio raíz, vaya a visitar
    offline.html
• En el estado fuera de línea, opere window.applicationCache para realizar operaciones de caché fuera de línea.

20. ¿Cómo gestiona y carga el navegador los recursos de almacenamiento fuera de línea HTML5?

• Cuando está en línea, el navegador encuentra el atributo de manifiesto en el encabezado html y solicitará el archivo de manifiesto. Si es la primera vez que accede a la aplicación, el navegador descargará los recursos correspondientes de acuerdo con el contenido del archivo de manifiesto y lo almacenará. ellos sin conexión. Si se visitó la aplicación y el recurso se almacenó sin conexión, el navegador utilizará el recurso sin conexión para cargar la página y luego comparará el nuevo archivo de manifiesto con el archivo de manifiesto anterior y, si el archivo no ha cambiado, no haga nada, si el archivo cambia, los recursos del archivo se volverán a descargar y almacenarán sin conexión.
• Cuando está sin conexión, el navegador utiliza directamente los recursos almacenados sin conexión.

21. ¿Cuál es la función de la etiqueta?

La etiqueta define la relación entre los controles del formulario: cuando el usuario selecciona la etiqueta, el navegador se centrará automáticamente en el control de formulario relacionado con la etiqueta.

22. ¿Cuál es la diferencia entre Canvas y SVG?

Canvas : Canvas, que dibuja gráficos 2D a través de Javascript y los tiñe píxel a píxel. Cuando su posición cambie, se volverá a dibujar.

SVG : 矢量图形Scalable Ecor Grdhics) es un lenguaje para gráficos 2D basado en Extensible Markup Language XML. El hecho de que SVG esté basado en XML significa que todos los elementos en SG DOM están disponibles y se puede adjuntar un controlador de eventos Javascript a un elemento. En SVG, cada forma dibujada se considera un objeto. Los navegadores pueden reproducir gráficos automáticamente si las propiedades del objeto SVG cambian.

la diferencia:

• Cada elemento gráfico dibujado por svg es un nodo DOM independiente. SVG se basa en XML, lo que significa que todos los elementos en el DOM SVG están disponibles. Puede adjuntar un controlador de eventos Javascript a un elemento, que puede vincularse fácilmente a eventos o usarse para modificar. La salida del lienzo es un lienzo completo.
• Los gráficos generados por svg son gráficos vectoriales y los parámetros se pueden modificar más adelante para acercar y alejar libremente sin irregularidades. Y el lienzo genera un lienzo escalar, al igual que una imagen, al acercarlo se distorsionará o será irregular.

23. ¿Cuál es la función de la etiqueta en la cabeza y qué etiqueta es esencial?

La etiqueta se utiliza para definir el encabezado del documento, que es el contenedor de todos los elementos del encabezado. El metain puede hacer referencia a scripts, indicarle al navegador dónde encontrar hojas de estilo, proporcionar metainformación y más. Las siguientes etiquetas se pueden utilizar en la sección principal: ,,,

24. ¿En qué se diferencia el modo estricto del modo promiscuo?¿Qué significan?

Modo estricto : también conocido como modo estándar, significa que el navegador analiza el código de acuerdo con el estándar w3C;

Modo promiscuo : también conocido como modo extraño y modo de compatibilidad, significa que el navegador analiza el código a su manera. El modo promiscuo suele imitar el comportamiento de navegadores más antiguos para evitar que funcionen los sitios más antiguos;

distinguir:

• Si el documento contiene un DOCTYPE estricto, generalmente se representa en modo estricto (DTD estricto: modo estricto)
• 包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI
  (统一资源标识符，就是声明最后的地址) 会导致页面以混杂模式呈现 (有
  URI 的过渡 DTD --严格模式;没有 URI 的过渡 DTD --混杂模式)
• DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现 (DTD不存在或者格式不正确一一混杂模式);
• HTML5 没有 DTD，因此也就没有严格模式与混杂模式的区别，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。

25.浏览器乱码的原因是什么？如何解决？

产生乱码的原因：

• 网页源代码是 gbk 的编码，而内容中的中文字是 utf-8 编码的，这样浏览器打开即会出现 html 乱码，反之也会出现乱码:
• html 网页编码是 gbk ，而程序从数据库中调出呈现是 utf-8 编码的内容也会造成编码乱码;
• 浏览器不能自动检测网页编码，造成网页乱码,

解决办法：

• 使用软件编辑HTML网页内容;
• 如果网页设置编码是 gbk ，而数据库储存数据编码格式是 UTF-8 ，此时需要程序查询数据库数据显示数据前进程序转码:
• 如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。

26. 浏览器存储技术 ?

Cookie：是客户端与服务器进行会话使用的一个能够在浏览器本地存储的技术，能存放4kb数据，目的是辨别用户身份

LocalStorage ： 在HTML5中新增用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)

SessionStorage ： sessionStorage与localStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对就会被清空。

27.如何优化图像？图像格式的区别？

1.不用图片，尽量用css3代替。比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。

2、使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！

3.、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG；修饰图片通常更适合用无损压缩的PNG。

GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。

4、按照HTTP协议设置合理的缓存。

5、使用字体图标webfont、CSS Sprites等。

6、用CSS或JavaScript实现预加载。

7、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输

图片格式区别：

• gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。
• JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。
• PNG: PNG se puede subdividir en tres formatos: PNG8, PNG24, PNG32. El siguiente número representa el valor de color máximo que este formato PNG puede indexar y almacenar.
  En cuanto a la transparencia: PNG8 admite transparencia de índice y transparencia alfa; PNG24 no admite transparencia; y PNG32 agrega transparencia de canal alfa de 8 bits (orden 256) a PNG de 24 bits;

28. ¿Escribir tantos problemas de compatibilidad del navegador como sea posible? resolver

• El margen predeterminado y el relleno de las etiquetas en diferentes navegadores son diferentes
  • Al comienzo del archivo CSS, agregue *{margin: 0; padding: 0;} para establecer el margen y el relleno de todas las etiquetas en 0
• Después de que la etiqueta de atributo del bloque es flotante y hay un margen horizontal, IE6 muestra que el margen es mayor que la configuración
  • La visualización de elementos a nivel de bloque se puede configurar en línea
• Establezca una etiqueta de altura pequeña (generalmente menos de 10 px). En IE6, IE7, la altura real excederá la altura establecida, porque el navegador establece una altura mínima predeterminada para la etiqueta.
  • Establezca {overflow: oculto;} o establezca la altura de la línea para que sea menor que la altura que estableció.
• En algunos navegadores, las imágenes tienen un espaciado predeterminado (todas las etiquetas con atributos de texto tendrán márgenes, a menos que dos etiquetas estén conectadas entre sí sin separación);
  • Use float para el diseño de img, porque todas las etiquetas se convertirán en elementos a nivel de bloque después de configurar float, y los elementos a nivel de bloque estarán muy juntos cuando floten, sin márgenes
• Los navegadores inferiores a IE9 no pueden utilizar la opacidad;
• {opacidad: 0.5;filtro: alfa(opacidad = 50);filtro: progid:DXImageTransform.Microsoft.Alpha(estilo = 0, opacidad = 50);}。

29. ¿Cuáles son los atributos globales de HTML?

• class: establece el identificador de clase para el elemento
• data-*: Agrega un atributo personalizado al elemento
• draggable: establece si el elemento se puede arrastrar
• id: elemento id, único dentro del documento
• lang: idioma del contenido del elemento
• style: cssestilo en línea
• title: Información de consejos relacionados con el elemento.

30. ¿Para qué sirve el código de verificación de la página web y qué problema de seguridad debe resolver?

• Un programa público totalmente automático que distingue si el usuario es una computadora o un humano. Puede evitar el descifrado malicioso de contraseñas, el robo de tickets y la inundación de foros.
• Evite de manera efectiva que los piratas informáticos realicen intentos continuos de inicio de sesión para un usuario registrado específico con un método de descifrado de fuerza bruta de programa específico

31. ¿Por qué es más eficaz utilizar varios nombres de dominio para almacenar los recursos del sitio web?

• CDNEl almacenamiento en caché es más conveniente
• Límite de simultaneidad del navegador innovador
• ahorrar cookieancho de banda
• Guarde la cantidad de conexiones del nombre de dominio principal y optimice la velocidad de respuesta de la página
• Evite problemas de seguridad innecesarios

32. Hay muchas imágenes en una página (sitio web grande de comercio electrónico) y la carga es muy lenta. ¿Qué métodos existen para optimizar la carga de estas imágenes para brindar a los usuarios una mejor experiencia?

• Carga diferida de imágenes, puede agregar un evento de desplazamiento al área invisible de la página para juzgar la distancia entre la posición de la imagen y la parte superior del navegador y la distancia desde la página, si la primera es más pequeña que la segunda, se cargará primero.
• Si se trata de una presentación de diapositivas, un álbum de fotos, etc., puede utilizar la tecnología de precarga de imágenes para descargar primero las imágenes anterior y siguiente de la imagen que se muestra actualmente.
• Si la imagen es una imagen CSS, puede utilizar CSSsprite, SVGsprite, y otras técnicas.IconfontBase64
• Si la imagen es demasiado grande, puede utilizar una imagen especialmente codificada. Al cargar, primero se cargará una miniatura especialmente comprimida para mejorar la experiencia del usuario.
• Si el área de visualización de la imagen es más pequeña que el tamaño real de la imagen, la imagen se comprime primero en el lado del servidor según las necesidades comerciales y el tamaño de la imagen después de la compresión es el mismo que el que se muestra.

33. ¿Cuáles son los métodos de seguimiento de sesiones en el desarrollo web?

• cookie
• session
• urlvolver a escribir
• esconderinput
• ipDIRECCIÓN

34. La diferencia entre título y h1, la diferencia entre b y fuerte, la diferencia entre i y em

• titleEl atributo no tiene un significado claro y solo indica un título, mientras que H1 indica un título con una jerarquía clara, lo que también tiene un gran impacto en el rastreo de la información de la página.
• strongEs para indicar el contenido clave y tiene el significado de fortalecer el tono. Cuando se utiliza un dispositivo de lectura para leer Internet: 会重读，而es para mostrar el contenido enfatizado.
• i el contenido se muestra en cursiva, em significa texto enfatizado

35. ¿Cuáles son los núcleos de los navegadores? ¿Cuáles son los respectivos navegadores?

• IE: tridentnúcleo
• Firefox: geckonúcleo
• Safari: webkitnúcleo
• Opera: Solía ​​​​ser prestoel kernel, Operapero se cambió a Google Chrome- Blinkkernel
• Chrome:Blink(Basado en webkit, desarrollado conjuntamente por Google y Opera Software)

36. ¿Cómo representa el navegador la página?

• 1. Analice el documento para construir el árbol DOM.
• HTML/XHTML/SVG: después de analizar estos tres archivos, se generará un árbol DOM (árbol DOM)
• CSS: analiza la hoja de estilo y genera un árbol de reglas CSS (árbol de reglas CSS)
• JavaScript: analiza scripts, opera el árbol DOM y el árbol de reglas CSS a través de la API DOM y la API CSSOM e interactúa con los usuarios.
• 2. Construya el árbol de renderizado
• Después de analizar el documento, el motor del navegador adjuntará el árbol de reglas CSS al árbol DOM y construirá el árbol de representación (árbol de representación) basado en el árbol DOM y el árbol de reglas CSS.
• 3. Diseño y dibujo del árbol de renderizado.
• Analice la posición, el desbordamiento, el índice z y otros atributos, y calcule la posición y el tamaño de cada nodo del árbol de representación. Este proceso se denomina reflujo. Finalmente, se llama a la API GUI nativa del sistema operativo para completar el dibujo (repintar).

37. ¿Por qué TCP necesita un protocolo de enlace de tres y cuatro vías?

El protocolo de enlace de tres vías es para establecer un canal de transmisión de datos confiable, y el protocolo de enlace de cuatro vías es para garantizar que la conexión se cierre después de recibir los datos.

38. Protocolo de enlace de tres vías TCP

• Cuando un cliente necesita establecer una conexión, enviará un mensaje para confirmar la conexión. Este mensaje es un mensaje sincrónico SYN = 1, y se generará un número de secuencia aleatorio seq = x. Este es el primer protocolo de enlace
• Cuando el servidor recibe el mensaje de solicitud de conexión, enviará un mensaje de confirmación del mensaje de sincronización, este mensaje SYN = 1 y ACK = 1, y el servidor también generará aleatoriamente una secuencia = y y establecerá el reconocimiento en x + 1. De regreso al cliente, este es el segundo apretón de manos.
• Cuando el cliente recibe el mensaje ACK del servidor, responderá con un mensaje de confirmación ACK para confirmar que se ha recibido el mensaje de confirmación. Este mensaje ACK = 1, seq = x + 1, ack = y + 1, lo que significa es el tercer apretón de manos;
• 这里有个点说明一下：大写的 ACK 表示报文的类型是确认报文，小写的 ack 是报文里面的确认号，这个确认号是上一次握手对方的 seq 值加 1 得到

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bU41OHCQ-1686967105034)(file:///C:\Users\lenovo\AppData\Local\Temp\ksohtml7300\wps2.jpg)]

39.TCP四次挥手

• 客户端发起 FIN 断开连接的报文，携带随机生成的 seq 值 u，发送给服务端，并且自己处于 FIN-WSIT 状态，这是第一次挥手；
• 服务端接收到 FIN 报文后，回复一个确认报文，其中 ACK = 1，随机生成一个 seq，以及 ack = u + 1，这是第二次挥手；
• 当服务端数据发送完了过后，再发送一个 FIN 报文给客户端，通知客户端，服务端准备关闭连接了，此报文 FIN = 1，ACK = 1，ack = u + 1，seq = w，这是第三次挥手；
• 当客户端收到 FIN 确认报文时再发送一个FIN 的确认报文，其中 ACK = 1，seq = u + 1，ack = w + 1，并进入 TIME-WAIT 状态，当等待 2MSL 后关闭连接，这是第四次挥手。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oh7C8Oyl-1686967105036)(file:///C:\Users\lenovo\AppData\Local\Temp\ksohtml7300\wps3.jpg)]

40.data-属性的作用？

data: es una nueva adición a H5 para proporcionar atributos personalizados para los desarrolladores front-end.
Estos conjuntos de atributos se pueden obtener a través del atributo de conjunto de datos del objeto.
Los navegadores que no admiten este atributo pueden obtenerlo a través del método getAttribute:
debería ser Observó que: después de los datos: los atributos que constan de varias palabras separadas por guiones se obtienen en formato camel. Todos los principales navegadores admiten atributos de datos-*.
Es decir: cuando no hay atributos y elementos adecuados, el atributo de datos personalizados puede almacenar los datos personalizados privados de la página o aplicación.

41. ¿Nuevas características de HTML5?

1.语义化标签

• header: define el encabezado del documento (header)

• nav: la sección que define los enlaces de navegación

• pie de página: define el pie de página (parte inferior) del documento o sección

• artículo: define el contenido del artículo

• sección: define la sección en el documento (sección, sección)

• a un lado: define el contenido fuera del contenido en el que se encuentra (lado)

2.媒体标签

• audio: audio
  • Atributos:
    • enlace de audio src
    • controles panel de control
    • auto-reproducción
    • loop='true' reproducción en bucle
• vídeo: vídeo
  • Atributos:
    • póster: el vídeo especificado no se ha descargado por completo o el usuario no ha hecho clic en la portada que se muestra antes de reproducirlo. De forma predeterminada, se muestra el primer fragmento del archivo de video actual; por supuesto, también puede especificarlo usted mismo a través del póster.
    • controles: panel de control
    • ancho, alto
• Etiqueta de fuente: debido a que los navegadores admiten diferentes formatos de video, para que sea compatible con diferentes navegadores, puede especificar la fuente del video a través de la fuente.

3.表单

• Tipo de formulario:
  • correo electrónico: puede verificar si la dirección de correo electrónico ingresada actualmente es legal
  • URL: URL de verificación
  • número: solo se pueden ingresar números, no se permiten otras entradas y tiene sus propias flechas hacia arriba y hacia abajo para aumentar y disminuir. El atributo máximo se puede establecer en el valor máximo, el mínimo se puede establecer en el valor mínimo y el valor es el valor predeterminado.
  • buscar: Se proporcionará una pequeña bifurcación detrás del cuadro de entrada, que puede eliminar el contenido de entrada, que es más humanizado.
  • rango: se puede proporcionar a un rango donde se pueden establecer el máximo y el mínimo y un valor donde el
    atributo de valor se puede establecer en un valor predeterminado
  • color: proporciona un selector de color
  • tiempo: horas minutos segundos
  • fecha : selección de fecha año mes día
  • datatime: hora y fecha (actualmente solo compatible con Safari)
  • datatime-local: control de fecha y hora
  • semana : control semanal
  • mes: control de mes
• Propiedades del formulario:
  • marcador de posición: información rápida
  • enfoque automático: obtiene el enfoque automáticamente
  • autocomplete="on" o autocomplete="off" Hay dos requisitos previos para utilizar este atributo:
    • El formulario debe haber sido enviado.
    • Debe tener atributo de nombre
  • requerido: se requiere que el cuadro de entrada no pueda estar vacío y debe tener un valor antes de poder enviarse
  • patrón=""Escribe el patrón regular deseado dentro
  • múltiple: puede seleccionar varios archivos o varios buzones de correo
  • formulario=ID del formulario!
• Eventos de formulario:
  • oninput Este evento se activa cada vez que cambia el contenido del cuadro de entrada en la entrada.
  • oninvalid Activa este evento cuando falla la validación.

4.进度条，度量器

• etiqueta de progreso: se usa para indicar el progreso de la tarea (no compatible con IE y Safari), max se usa para indicar el progreso de la tarea y el valor indica cuánto se ha completado
• atributo del medidor: se utiliza para mostrar la capacidad restante o el inventario restante (IE, Safari no lo admite)
  • alto/bajo: especifica el rango que se considerará alto/bajo
  • max/min: especifica el valor máximo/mínimo
  • valor: especifica el valor de la métrica actual

5.DOM查询操作

• documento.querySelector()
• documento.querySelectorAll()

6.Web存储

• almacenamiento local y almacenamiento de sesión

7.其他

• Arrastrar y soltar: Arrastrar y soltar es una característica común en la que se toma un objeto y luego se arrastra a otra ubicación. Establecer elementos para que se puedan arrastrar y soltar
• lienzo y svg
• websocket, trabajo web
• geolocalización
• datos - atributos personalizados

42. ¿Comprensión del trabajador web? ¿Cómo crearlo?

En una página HTML, si el estado de la página no responde cuando se ejecuta el script, la página no responde hasta que se ejecuta el script. Un trabajador web es un js que se ejecuta en segundo plano, independientemente de otros scripts, y no afectará el rendimiento de la página. Y pase el resultado al hilo principal a través de postMessage. De esta forma, al realizar operaciones complejas, no se bloqueará el hilo principal.

crear:

• Detectar compatibilidad con navegadores para trabajadores web
• Cree archivos de trabajo web (js, funciones de devolución de llamada, etc.)
• Crear un objeto de trabajo web

43. Habla sobre la API de arrastre 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 arrastra y suelta.
dragenter: el cuerpo del evento es el elemento de destino, que se activa cuando el elemento arrastrado ingresa a un elemento.
dragover: 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 completamente el elemento arrastrado y soltado.
dragend: el cuerpo del evento es el elemento que se arrastra y suelta, que se activa cuando finaliza toda la operación de arrastrar y soltar.

44. Http sondeo corto, sondeo largo

Sondeo: el cliente envía una solicitud HTTP al servidor a intervalos regulares (por ejemplo, cada 5 segundos) y el servidor devuelve los datos más recientes al cliente después de recibir la solicitud.

Encuesta de clientes: encuesta corta, encuesta larga

• Sondeo breve: generalmente, el cliente inicia una solicitud HTTP ordinaria al servidor a intervalos (por ejemplo, cada 5 segundos). El servidor pregunta si hay actualizaciones de datos en la interfaz actual. Si hay actualizaciones de datos, devolverá los datos más recientes al cliente. De lo contrario, le indicará al cliente que no hay actualizaciones de datos.
• Sondeo largo: generalmente, el cliente envía una solicitud HTTP con un tiempo de espera de red más largo al servidor y no desconecta activamente la conexión antes de que se agote el tiempo de espera de la conexión Http; después de que el cliente agota el tiempo de espera o devuelve datos, se establece otro El mismo Http solicitar, repita el proceso anterior

45. Conceptos básicos del dibujo en lienzo (línea, triángulo, rectángulo, círculo)

<canvas id=“myCanvas” width=200 height=100 ></canvas>

• id es el ID del elemento lienzo;
• alto, ancho especifica el tamaño del lienzo

直线：

El método beginPath() indica la ruta para comenzar a dibujar: ctx.beginPath();
El método moveTo() mueve las coordenadas al punto inicial de la línea: ctx.moveTo(x,y);
El método lineTo() dibuja una línea: ctx.lineTo(x,y) );
método Stroke(), que dibuja el contorno de los límites de los gráficos: ctx.stroke();
método closePath(), que indica la ruta de dibujo cerrada: ctx.closePath()

    var mycanvas=document.getElementById("canvas");
    var ctx=mycanvas.getContext("2d");
	ctx.beginPath();
	ctx.moveTo(100,100);//移动到绘制点
	ctx.lineTo(200,200);
	ctx.strokeStyle="#000000"; //指定描边颜色
	ctx.stroke();

三角形：

	var mycanvas=document.getElementById("canvas");
    var ctx=mycanvas.getContext("2d");
	ctx.beginPath();
	ctx.moveTo(100,200);
	ctx.lineTo(400,200);
	ctx.lineTo(250,400);
	ctx.closePath();//闭合绘图
	ctx.strokeStyle="#000000";
	ctx.stroke();

矩形：

Dibuja un rectángulo: rect(x,y,ancho,alto);

Dibuja un borde rectangular: trazoRect(x, y, ancho, alto);

Dibuja un rectángulo relleno: fillRect(x, y, ancho, alto);

Borre el área rectangular especificada: clearRect(x, y, width, height);

	var mycanvas=document.getElementById("canvas");
	var ctx=mycanvas.getContext("2d");
 
	//rect()函数调用
	ctx.beginPath();
	ctx.rect(20,20,100,50);
	ctx.stroke();

圆形：arc(centerx,centery,radius,startAngle,endAngle,antiClockwise);

• centerx, coordenadas del punto central del arco central
• radio radio
• startAngle inicio radianes
• arco final endAngle
• antiClockwise Si dibujar en el sentido contrario a las agujas del reloj es un parámetro opcional, el valor predeterminado es falso (es decir, dibujar en el sentido de las agujas del reloj)
  radianes = ángulo * ( Math.PI / 180 )

	var mycanvas=document.getElementById("canvas");
	var ctx=mycanvas.getContext("2d");
	//arc()函数调用
	ctx.beginPath();
	ctx.arc(100,150,70,0,90*Math.PI/180,true);
	ctx.stroke();

46. ​​​​¿Cuál es la diferencia entre TCP y HTTP?

• TCP corresponde a la capa de transporte y HTTP corresponde a la capa de aplicación. Esencialmente, los dos no son comparables.

• El protocolo Http se basa en el protocolo TCP: cuando el navegador necesita obtener datos de una página web del servidor, enviará una solicitud Http. Http establecerá un canal de conexión con el servidor a través de TCP. Cuando se completen los datos requeridos para esta solicitud, Http desconectará inmediatamente la conexión TCP. Este proceso es muy corto. Entonces la conexión Http es una conexión corta y una conexión sin estado.

• TCP es el protocolo subyacente, que define la especificación de la transmisión de datos y los métodos de conexión.

  HTTP es un protocolo de capa de aplicación que define la especificación del contenido de los datos transmitidos.

  Los datos en el protocolo HTTP se transmiten mediante el protocolo TCP, por lo que el soporte HTTP debe admitir TCP

2. Artículos CSS

1. ¿Presentar el modelo de caja de CSS?

margen (margen exterior): borra el área fuera del borde, el margen es transparente.
borde: un borde alrededor del relleno y fuera del contenido.
padding: limpia el área alrededor del contenido, el relleno es transparente.
contenido (contenido): el contenido del cuadro, mostrar texto e imágenes.

Modelo de caja estándar del W3C: en el modelo de caja estándar, el ancho se refiere al ancho de la parte del contenido.

Modelo de caja de IE: en el modelo de caja de IE, el ancho representa el ancho de las tres partes de contenido + relleno + borde

• Cómo habilitar diferentes modelos de cajas
  • tamaño de caja: caja de contenido; modelo de caja estándar
  • tamaño de caja: caja de borde; modelo de caja IE

2. selector css?

• selector de id (#box), seleccione el elemento cuyo id es box
• Selector de clase (.one), selecciona todos los elementos con el nombre de clase uno
• Selector de etiquetas (div), selecciona todos los elementos con etiqueta div
• Selector descendiente (#box div), selecciona todos los elementos div con id dentro del elemento box
• Selector secundario (.one>one_1), selecciona todos los elementos de .one_1 cuyo elemento principal es .one
• Selector de hermanos adyacentes (.one+.two), selecciona todos los elementos .two inmediatamente después de .one
• Selector de grupo (div, p), seleccione todos los elementos de div, p
• selector de pseudoclase
• selector de atributos

3. ¿Prioridad del selector CSS?

!importante > estilo en línea (peso 1000) > selector de ID (peso 100) > selector de clase (peso 10) > etiqueta (peso 1) > comodín > herencia > atributo predeterminado del navegador

4. ¿Atributos heredables en CSS?

• atributo de familia de fuentes
  • familia de fuentes: familia de fuentes
  • peso de fuente: peso de fuente
  • tamaño de fuente: tamaño de fuente
  • estilo de fuente: estilo de fuente
• Propiedades de la serie de texto
  • sangría de texto: sangría de texto
  • text-align: alineación horizontal del texto
  • altura de línea: altura de fila
  • color: color del texto
• Visibilidad del elemento: visibilidad
• Atributo de diseño de lista: estilo de lista
• Propiedad del cursor: cursor

5. ¿De cuántas maneras se puede centrar verticalmente?

• Configure el modo de visualización en tabla, display:table-celly configurevertial-align：middle
• Usando flexel diseño, configúrelo enalign-item：center
• Establecer en posicionamiento absoluto bottom:0,top:0y establecermargin:auto
• Cuando la altura se fija en posicionamiento absoluto, el top:50%，margin-topvalor de configuración es un valor negativo de la mitad de la altura.
• centro vertical del texto establecido line-heighten heightvalor

6. Explique brevemente la diferencia y el uso entre enlace CSS y @import.

• link es una etiqueta XHTML, además de cargar CSS, también se puede usar para definir RSS, definir atributos de conexión rel, etc., mientras que @import es proporcionado por CSS y solo se puede usar para cargar CSS;
• Cuando se carga la página, el enlace se cargará al mismo tiempo y el CSS al que hace referencia @import esperará hasta que se cargue la página antes de cargar;
• La importación es propuesta por CSS2.1 y solo puede ser reconocida por IE5 y superior, y el enlace es una etiqueta XHTML, por lo que no hay problema de compatibilidad.

7. ¿Cuál es la diferencia entre los efectos de transparencia de rgba y la opacidad?

• Rgba puede especificar tanto el color del elemento como la transparencia, la opacidad solo puede controlar la transparencia del elemento y no puede establecer el color.
• La transparencia de Rgba se basa en el color real y la opacidad se establece para la transparencia del elemento en sí. El uso de rgba puede lograr una transparencia diferente en diferentes partes del elemento, mientras que la opacidad hace que la transparencia del elemento sea consistente.
• Los navegadores que admiten rgba son más comunes que los que admiten opacidad, pero en versiones inferiores de ie, rgba no es compatible y la opacidad sí lo es.

8. El valor del atributo y la función de visualización.

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-JAbGv3HB-1686967105037) (C:\Users\lenovo\AppData\Roaming\Typora\ imágenes-de-usuario-de-typora\ 1683804216661.png)]

9. ¿Cuál es la diferencia entre bloque de visualización, en línea y bloque en línea?

block: ocupará una sola línea, varios elementos comenzarán una nueva línea, puede establecer atributos de ancho, alto, margen y relleno;

inline: El elemento no ocupará una sola línea, establecer los atributos de ancho y alto no es válido. Sin embargo, puede establecer las propiedades de margen y relleno en la dirección horizontal, pero no puede establecer el relleno y el margen en la dirección vertical;

inline-block: establece el objeto como un objeto en línea, pero el contenido del objeto se representa como un objeto de bloque y los objetos en línea posteriores se organizarán en la misma línea.

10. ¿Cuál es la diferencia entre visualización: ninguna y visibilidad: oculta?

display:none oculta el elemento correspondiente, no se le asigna ningún espacio en el diseño del documento y los elementos a cada lado se cerrarán, como si nunca hubieran existido.
visibilidad: oculto oculta el elemento correspondiente, pero conserva el espacio original en el diseño del documento.

11. El valor de posición, relativo y absoluto, ¿son relativos a quién están posicionados?

Relativo: posicionamiento relativo, relativo a su propia posición en el flujo normal de documentos.
absoluto: Genera posicionamiento absoluto, relativo al elemento padre cuyo posicionamiento no es estático en el nivel más cercano. Finalmente encontré el cuerpo
corregido: (la versión anterior de IE no es compatible) genera posicionamiento absoluto, relativo a la ventana del navegador o al marco para el posicionamiento.
estático: el valor predeterminado, sin posicionamiento, el elemento aparece en el flujo normal del documento.
pegajoso: genera elementos posicionados adhesivos, la posición del contenedor se calcula de acuerdo con el flujo normal de documentos.

12. ¿Cuáles son los métodos para ocultar elementos?

display: none: 渲染树不会包含该染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。

visibility: hidden: 元素在页面中仍占据空间，但是不会响应绑定的监听事件

opacity: 0: 将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件

position: absolute: 通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏

z-index: 负值: 来使其他元素遍盖住该元素，以此来实现隐藏

transform: scale(0,0): 将元索缩放为 0，来实现元素的隐藏。

13.transition和animation区别？

1. 触发方式不同：transition 通过 CSS 属性值的变化来触发动画效果，而 animation 则需要通过设置关键帧（keyframes）来指定动画序列。
2. 控制方式不同：transition 只能控制开始和结束状态之间的过渡动画，而 animation 可以指定多个关键帧，控制元素动画的每一个阶段，包括动画开始、中间和结束的时刻、变换状态以及持续时间等。
3. 耗费资源不同：相对来说，animation 消耗的浏览器资源更多，因为它需要计算多个关键帧之间的动画效果，而 transition 只需在两种状态之间进行简单的计算即可。
4. 兼容性不同：transition 相对来说更加兼容不同的浏览器，而 animation 在某些旧版浏览器上可能无法正常工作。

14.伪元素和伪类区别？

伪元素：是创造文档树之外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。伪元素还提供一些在源文档中不存在的内容分配样式，例如:before和:after能够访问产生的内容。伪元素的内容实际上和普通DOM元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-limpieza, se recomienda guardar la imagen y cargarla directamente (img-mND9y0Cq-1686967105038) (C:\Users\lenovo\AppData\Roaming\Typora\ imágenes-de-usuario-de-typora\ 1683805298891.png)]

Pseudoclases: se basan en las características de los elementos más que en su identificación, clase, atributos o contenido. En términos generales, las características de un elemento no se pueden inferir del árbol DOM y es dinámico. Cuando el usuario interactúa con el DOM, el elemento puede ganar o perder una pseudoclase. (La única excepción aquí es que :first-child y :lang se pueden inferir del árbol DOM).

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-0PrLEaC2-1686967105039) (C:\Users\lenovo\AppData\Roaming\Typora \typora-user-images\ 1683805345353.png)]

similitudes y diferencias

mismo:

• Ni las pseudoclases ni los pseudoelementos aparecen en los archivos fuente ni en el árbol del documento. Es decir, las pseudoclases y pseudoelementos no se pueden ver en el archivo fuente html.

diferencia:

• Las pseudoclases son en realidad estados diferentes basados ​​​​en elementos DOM ordinarios, que son una característica determinada de los elementos DOM. Los pseudoelementos pueden crear objetos abstractos que no existen en el árbol DOM y estos objetos abstractos son accesibles.

15. Comprensión de requestAnimationframe

HTML5 proporciona una API dedicada a solicitar animación

gramática:

• window.requestAnimationFrame(callback); Entre ellos, la devolución de llamada es la función llamada para actualizar el cuadro de animación antes del siguiente rediseño (es decir, la función de devolución de llamada mencionada anteriormente). A la función de devolución de llamada se le pasará el parámetro DOMHighResTimeStamp, que indica el momento en que requestAnimationFrame() comienza a ejecutar la función de devolución de llamada. Este método es una macrotarea, por lo que se ejecutará después de que se ejecute la microtarea.

Cancelar animación:

• Utilice cancelAnimationFrame() para cancelar la ejecución de la animación. Este método recibe un parámetro: la identificación devuelta por requestAnimationFrame de forma predeterminada. Solo necesita pasar esta identificación para cancelar la animación.

Ventaja:

• Ahorro de energía de la CPU
• función de estrangulamiento
• Reducir la manipulación DOM

16. ¿Cuál es el motivo del espacio en blanco invisible entre li y li?¿Cómo solucionarlo?

El navegador coloreará los caracteres en blanco (espacios, nuevas líneas, tabulaciones, etc.) entre los elementos en línea en un espacio. Por estética, normalmente un

• puesto en una línea, esto resulta en
• Se genera un carácter de nueva línea después de una nueva línea, que se convierte en un espacio y ocupa el ancho de un carácter.

• resolver:

  • para
  • Establecer flotador: izquierda. Insuficiente: algunos contenedores no se pueden configurar para que floten, como el mapa de enfoque para el cambio hacia la izquierda y hacia la derecha.
  • ¿todos
  • escrito en la misma línea. Insuficiente: el código no es bonito.
  • Establezca el tamaño de carácter interno en 0 directamente, es decir, tamaño de fuente: 0. insuficiente:
    • Los otros tamaños de caracteres también se establecen en 0, y es necesario restablecer otros tamaños de caracteres, y todavía habrá espacios en blanco en el navegador Safari.
  • eliminar
    • El espacio entre caracteres espacio entre letras: -8px, insuficiente: esto también establece el
    • El espacio del carácter dentro del , por lo que debes poner el
    • El espacio entre caracteres se establece en el espacio entre letras predeterminado: normal.

17. Nuevas características de CSS3

• Agregue varios selectores CSS (:not(.input): todos los nodos cuya clase no es 'entrada'): selector de atributos, selector de pseudoclase, selector de pseudoelemento, selector básico
• Tres propiedades fronterizas
  • border-radius: crea un borde redondeado
  • border-shadow: agrega una sombra al elemento
  • imagen-borde: usa una imagen para dibujar el borde
• fondo
  • clip de fondo: determina el área de dibujo del fondo
  • origen de fondo: la configuración comienza desde la esquina superior izquierda del cuadro de borde, cuadro de relleno y cuadro de contenido
  • tamaño de fondo: ajusta el tamaño de la imagen de fondo
  • background-break: El elemento se puede dividir en varias cajas independientes
• carta
  • ajuste de palabra: normal|salto de palabra utilizar el salto de línea predeterminado del navegador|permitir saltos de línea dentro de palabras
  • desbordamiento de texto: establece o recupera cómo la línea actual excede el borde del contenedor especificado para mostrar, la propiedad consta de dos valores
    • clip: recortar texto
    • puntos suspensivos: muestra puntos suspensivos para representar texto recortado
  • sombra de texto: se puede aplicar una sombra al texto. Capacidad para especificar sombra horizontal, sombra vertical, distancia de desenfoque y color de sombra
  • decoración de texto: CSS3 comenzó a admitir una representación más profunda del texto y hay tres atributos específicos que se pueden proporcionar
    • text-fill-color: establece el color de relleno dentro del texto
    • color-trazo-texto: establece el color de relleno del límite del texto
    • ancho de trazo de texto: establece el ancho del borde del texto
• Color (nueva representación de color rgba y hsla)
  • rgba se divide en dos partes, rgb es el valor del color, a es la transparencia
  • hsla se divide en cuatro partes, h es tono, s es saturación, l es luminosidad, a es transparencia
• transición transición, transformación conversión, animación animación
• diseño elástico flexible, diseño de cuadrícula
• consulta de medios

18. Crea un formato de imagen (breve descripción), ¿la diferencia?

• BMP: Es un mapa de bits sin pérdidas y admite colores tanto indexados como directos.
• GIF: es un mapa de bits de color indexado y sin pérdidas. Codificar con algoritmo de compresión LZW
• JPEG: es un mapa de bits con pérdida en color directo. La ventaja de las imágenes JPEG es que utilizan color directo, lo que se beneficia de colores más ricos.
• PNG-8: es un mapa de bits sin pérdidas que utiliza colores indexados.
• PNG-24: es un mapa de bits sin pérdidas que utiliza color directo.
• SVG: es un gráfico vectorial sin pérdidas. SVG es un diagrama vectorial, lo que significa que la imagen SVG consta de líneas y curvas y los medios para dibujarlas.
• WebP: es un nuevo formato de imagen desarrollado por Google. WebP es un mapa de bits que admite compresión con y sin pérdida y utiliza color directo.

19. ¿Dibujar una línea recta a 0,5 px?

La prueba es la transformada de css3.

height: 1px;
transform: scale(0.5);

20. ¿Cuáles son los significados y usos de calc, support y media?

• @support se utiliza principalmente para detectar si el navegador admite un determinado atributo de CSS. De hecho, es un juicio condicional. Si admite un determinado atributo, puede escribir un conjunto de estilos. Si no admite un determinado atributo, También puede proporcionar otro conjunto de estilos como sustituto.
• La función calc() se utiliza para calcular dinámicamente el valor de longitud. La función calc() admite operaciones "+", "-", "*", "/";
• @media query, puede definir diferentes estilos para diferentes tipos de medios.

21. ¿Cuál es la diferencia entre px y em, rem?

px: unidad de longitud absoluta, píxel px es relativo a la resolución de pantalla de la pantalla
em: unidad de longitud relativa, relativo al tamaño de fuente del texto en el objeto actual, el valor de em no es fijo y em heredará el valor del tamaño de fuente del elemento principal (la referencia es el tamaño de fuente del elemento principal)
rem: relativo al tamaño de fuente del elemento raíz html

22. ¿Qué representan 1rem, 1em, 1vh, 1px, vmin y vmax?

• rem
  rem son todas las longitudes relativas al elemento raíz. La práctica habitual es establecer un tamaño de fuente para los elementos html y luego la unidad de longitud de otros elementos es rem.
• El em del tamaño de fuente del subelemento em
  es relativo al tamaño de fuente del elemento principal.
  El ancho/alto/relleno/margen del elemento es relativo al tamaño de fuente del elemento si se usa em.
• Los nombres completos de vw/vh
  son Ancho de ventana gráfica y Alto de ventana gráfica. El ancho y alto de la ventana equivalen al 1% del ancho y alto de la pantalla. Sin embargo, la unidad % es más apropiada cuando se trata de ancho, y la unidad vh es mejor cuando se trata de altura.
• px
  px píxel (píxel). Unidad de longitud relativa. Los píxeles px son relativos a la resolución de pantalla del monitor.
  La resolución de una computadora general es {1920 1024} y otras resoluciones diferentes
  1920 1024. La primera tiene un ancho de pantalla de 1920 píxeles en total, mientras que la segunda tiene una altura de 1024 píxeles.
• vmin/vmax: Tome el valor mínimo de la altura y el ancho de la ventana como referencia/tome el valor máximo de la altura y el ancho de la ventana como referencia.
  • 如果窗口高度1080，宽度1920那么。 1vmin=1080px/100=10.8px 1vmax=1920px/100=19.2px。

23. CSS画一个三角形？

这属于简单的css考查，平时在用组件库的同时，也别忘了原生的css

.a {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #0099CC transparent transparent;
    transform: rotate(90deg); /*顺时针旋转90°*/
}
<div class="a"></div>

24.元素水平垂直居中

• 利用定位+margin:auto
• 利用定位+margin:负值
• 利用定位+transform
• table布局
• flex布局
• grid布局

25.响应式布局原理

1. 什么是响应式： 一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸，屏幕定向等）进行相应的响应和调整
2. 基本原理： 通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport.
3. 实现方式
   • 媒体查询
   • 百分比布局
   • vw/vh
   • rem

26.CSS定位方式？

static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

27.css sprite（雪碧图，精灵图）是什么,有什么优缺点？

CSSSprites(精灵图)，将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。

优点：

• 减少HTTP请求，极大提高页面加载速度
• 增加图片信息重复度，提高压缩比，减少图片大小
• 更换风格方便，只需要在一张或几张图片上修改颜色或样式即可

缺点：

• 图片合并麻烦
• 维护麻烦

28.设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？

设备像素：又称为物理像素， 指设备能控制显示的最小物理单位，不一定是一个小正方形区块，也没有标准的宽高，只是用于显示丰富色彩的一个“点”而已

css像素： 适用于web编程，在 CSS 中以 px 为后缀，是一个长度单位 。css中长度分为两类：绝对单位和相对单位，px属于相对单位

设备独立像素： 与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念 。我们常说的分辨率，不严谨来讲是指的设备独立像素。在javascript中我们可以通过 window.screen.width/ window.screen.height 来查看

dpr：设备像素比， 代表设备独立像素到设备像素的转换关系

ppi：像素密度， 表示每英寸所包含的像素点数目

29.margin 和 padding 的使用场景

需要在border外侧添加空白，且空白处不需要背景 (色)时，使用 margin;

需要在border内测添加空白，且空白处需要背景(色) 时，使用 padding。

30.对line-height的理解，赋值方式

概念：

• line-height 属性设置行间的距离（行高），说的直白一点，就是设置两段段文本之间的距离如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了。

原理：

• 我们可以理解为将div分为三份，分别为上边距，内容，下边距。举例：div高度100px，字体为16px，那么上下边距计算为(100px-16px)/2

赋值方式：

• 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
• 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
• 百分比：将计算后的值传递给后代

31.谈谈你对BFC的理解？触发条件？应用场景？

Concepto: BFC es el contexto de formato a nivel de bloque, que es un área de representación en la página y tiene su propio conjunto de reglas de representación. El propósito de BFC es formar un espacio completamente independiente del mundo exterior.让内部的子元素不会影响到外部的元素

Condiciones desencadenantes:

• El elemento raíz, el elemento HTML.
• Elemento flotante: el valor flotante es izquierda, derecha
• El valor de desbordamiento no es visible, es automático, de desplazamiento, oculto
• display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
• El valor de la posición es absoluto o fijo.

Escenario de aplicación:

• Evitar márgenes superpuestos
• flotador interno transparente
• Diseño adaptable de varias columnas

32. ¿Cómo implementar un diseño de dos columnas adaptable en el lado derecho? ¿Adaptativo en medio del diseño de tres columnas?

两栏布局：

• Use float para hacer flotar la columna izquierda a la izquierda y use margin-left a la derecha para expandir el ancho de la columna izquierda. Agregue BFC al elemento principal y habilítelo con desbordamiento: oculto.
• diseño flexible

三栏布局：

• El principio de los siguientes tres métodos es el mismo que el del primer método del diseño de dos columnas.
  • Utilice flotador en ambos lados y margen en el medio.
  • Utilice absoluto en ambos lados y margen en el medio.
  • Utilice margen flotante y negativo en ambos lados
• diseño flexible
• visualización: implementación de tabla
  • Configure display: table como una tabla y configure table-layout: fix` para indicar que el ancho de la columna lo determina él mismo, en lugar de calcularlo automáticamente.
  • La izquierda, el medio y la derecha de la capa interna se configuran como celdas de tabla mediante display: table-cell.
  • Establezca un ancho fijo a la izquierda y a la derecha, y establezca el ancho en el medio: 100% para llenar el ancho restante
• diseño de cuadrícula

33. ¿Hablar sobre flexbox (modelo de diseño de caja elástica) y escenarios aplicables?

Comprensión: diseño flexible significa "diseño elástico", que puede realizar varios diseños de página de una manera simple, completa y receptiva. De forma predeterminada, hay dos ejes en el contenedor, el eje principal y el eje transversal, que están en una relación de 90 grados. Los elementos están organizados a lo largo del eje principal de forma predeterminada, y flex-directionla dirección del eje principal está determinada por

Atributos:

• dirección flexible determina la dirección del eje principal
• flex-wrap determina si los artículos en el contenedor se pueden envolver
  • envolver, envolver
• alineación de elementos de justificación de contenido en el eje principal
  • inicio flexible (predeterminado): alineado a la izquierda
  • extremo flexible: alineación correcta
  • centro: centrado
  • espacio entre: ambos extremos están alineados y los intervalos entre elementos son iguales
  • espacio alrededor: dos elementos están igualmente espaciados en ambos lados
• align-items Cómo se alinean los elementos en el eje transversal
  • flex-start: el punto inicial del eje transversal está alineado
  • flex-end: alinea el extremo del eje transversal
  • centro: alinea el punto medio del eje transversal 垂直居中
  • línea base: la alineación base de la primera línea de texto en el elemento
  • estirar (predeterminado): si el elemento no tiene una altura establecida o está configurado en automático, ocupará la altura de todo el contenedor
• alinear-contenido

34. Introduzca el diseño de la cuadrícula.

Comprensión: GridEl diseño es un diseño de cuadrícula, que es un método de diseño bidimensional. Es una estructura de diseño de marco formada por dos conjuntos de líneas de cuadrícula que se cruzan vertical y horizontalmente, y pueden manejar filas y columnas al mismo tiempo.

Propiedades del contenedor:

• display: grid El contenedor es un elemento a nivel de bloque/inline-grid El contenedor es un elemento en línea
• atributo de columnas de plantilla de cuadrícula, atributo de filas de plantilla de cuadrícula:
  • Establezca el ancho de la columna y el alto de la fila en varias filas y columnas. Si el ancho y el alto se repiten, repetir (3200 px) se puede usar para representar 3 filas y columnas, 200 px de ancho y alto
• propiedad grid-row-gap, propiedad grid-column-gap, propiedad grid-gap
  • Establezca el espacio entre filas y columnas, grid-gap es una abreviatura de ambos
• atributo grid-template-areas: utilizado para definir el área
• atributo grid-auto-flow: después de dividir la cuadrícula, los elementos secundarios del contenedor estarán en orden y el orden lo determina grid-auto-flow

Propiedades del proyecto:

• atributo grid-column-start, atributo grid-column-end, atributo grid-row-start y atributo grid-row-end: especifique los cuatro bordes donde se encuentra el elemento de la cuadrícula y qué línea de la cuadrícula se encuentra respectivamente, de modo que para especificar la posición del elemento
• Atributo de área de cuadrícula: el atributo especifica en qué área se coloca el elemento. Las áreas están divididas por la propiedad grid-template-areas
• atributo de justificarse, atributo de alinearse y atributo de ubicarse

35. ¿Qué son las animaciones CSS3?

• la transición implementa una animación degradada

• transformar transformar animación

• animación implementa animación personalizada

36. ¿Cómo entender el reflujo y el redibujado? ¿En qué circunstancias se activará?

• Redistribución: el motor de diseño calcula el tamaño y la posición de cada cuadro en la página en función de varios estilos.
• Redibujar: después de calcular la posición, el tamaño y otros atributos del modelo de caja, el navegador dibuja de acuerdo con las características de cada caja.

Condiciones desencadenantes:

• Reflujo:
  • Agregar o eliminar elementos DOM visibles
  • La posición del elemento cambia.
  • El tamaño del elemento cambia (incluidos márgenes, bordes interiores, tamaño del borde, alto y ancho, etc.)
  • Cambios de contenido, como cambios de texto o una imagen reemplazada por otra imagen de diferente tamaño
  • Cuando la página comienza a renderizarse (esto no se puede evitar)
  • El tamaño de la ventana del navegador cambia (porque el reflujo calcula la posición y el tamaño de los elementos en función del tamaño de la ventana gráfica)
• Redibujar ------触发回流一定会触发重绘
  • modificación de color
  • Modificación de la orientación del texto
  • modificación de sombra

37. Si se va a realizar una optimización, ¿cuáles son los métodos de CSS para mejorar el rendimiento?

• CSS crítico en línea en la mitad superior de la página
• evitar expresiones css
• Cargar CSS de forma asincrónica
• compresión de recursos
• Utilice los selectores sabiamente
• Uso reducido de propiedades costosas como box-shadow/// transparencia/ etc.border-radiusfilter:nth-child
• No utilice @import

38. ¿Cómo lograr el estilo de puntos suspensivos del desbordamiento de texto de una o varias líneas?

desbordamiento de texto de una sola línea

• espacio en blanco: configura el texto para que se muestre en una línea y no se puede ajustar
• desbordamiento: si la longitud del texto excede el ancho limitado, el contenido sobrante se ocultará
• desbordamiento de texto: especifica que cuando el texto se desborda, se muestran puntos suspensivos para representar el texto recortado
  • clip: cuando se corta la parte desbordante del texto en el objeto
  • puntos suspensivos: muestra marcadores de puntos suspensivos (...) cuando el texto dentro de un objeto se desborda
  • text-overflowSólo entrará en vigor cuando el overflow:hiddenywhite-space:nowrap

Se omitió el desbordamiento de texto multilínea

• Truncamiento basado en altura – pseudo elemento + posicionamiento
  • posición: relativa: Posicionamiento absoluto para pseudoelementos
  • overflow: oculto: el texto desborda el ancho limitado para ocultar el contenido)
  • altura de línea: 20px: combinado con la altura del elemento, cuando la altura es fija, establece la altura de la línea y controla el número de líneas mostradas
  • altura: 40px: establece la altura del elemento actual
  • ::after {}: puntos suspensivos de estilo – establecer pseudoelemento
  • posición: absoluta: Posicionamiento absoluto para la elipsis
  • contenido:"…"
• Truncar según el recuento de líneas - CSS puro
  • -webkit-line-clamp: 2: se utiliza para limitar el número de líneas de texto que se muestran en un elemento de bloque; para lograr este efecto, debe combinarse con otras propiedades de WebKit)
  • display: -webkit-box: combinado con -webkit-line-clamp, el objeto se muestra como un modelo de caja flexible
  • -webkit-box-orient: vertical: se usa junto con -webkit-line-clamp para establecer o recuperar la disposición de los elementos secundarios del objeto flex box
  • overflow: oculto: el texto desborda el ancho limitado para ocultar el contenido
  • desbordamiento de texto: puntos suspensivos: en el caso de texto de varias líneas, use los puntos suspensivos "..." para ocultar el texto desbordado

39. ¿Cuáles son las formas de hacer que Chrome admita texto de menos de 12 píxeles? ¿la diferencia?

La versión china de Chrome establecerá el tamaño mínimo de fuente de la página en 12 píxeles de forma predeterminada y no hay límite para la versión en inglés.

solución:

• zoom: "Zoom", que puede cambiar el tamaño de los elementos de la página, que pertenece al tamaño real
• -webkit-transform:scale(): para chromenavegadores, agregue webkitun prefijo y use transform:scale()este atributo para escalar
• -webkit-text-size-adjust:none: este atributo se utiliza para establecer si el tamaño del texto se ajusta automáticamente según el dispositivo (navegador)

la diferencia:

• ZoomAtributos no estándar, hay problemas de compatibilidad, el zoom cambiará el tamaño del espacio ocupado por el elemento, lo que provocará una reorganización
• -webkit-transform:scale()La mayoría de los navegadores modernos lo admiten y también es eficaz para inglés, números y chino. El zoom no cambiará el espacio ocupado por los elementos y el diseño de la página no cambiará.
• -webkit-text-size-adjustExiste un requisito de versión para Google Chrome. Después de la 27, la compatibilidad con este atributo se cancela y solo tiene efecto para inglés y números.

40. Cuénteme sobre su comprensión de los lenguajes preprogramados Css (descarado, menos). ¿Cuáles son las diferencias?

Comprensión: se ha ampliado el lenguaje Cssy se han agregado funciones como variables, mixins y funciones para que sea Cssmás fácil de mantener y facilitar. Básicamente, el preprocesamiento es Cssun superconjunto de . Contiene un conjunto de gramáticas personalizadas y un analizador. De acuerdo con estas gramáticas, puede definir sus propias reglas de estilo. Estas reglas eventualmente compilarán y generarán los Cssarchivos correspondientes a través del analizador.

Los cuales son: sass, less,stylus

Compara menos y descaro:

• Mismo punto:
  • En primer lugar, tanto sass como less son lenguajes de procesamiento CSS precompilados. Introducen mixins, parámetros, reglas de anidamiento, operaciones, colores, espacios de nombres, alcances, asignaciones de JavaScript, etc. para acelerar la eficiencia del desarrollo CSS. Por supuesto, ambos pueden Se pueden usar juntas. Herramientas de construcción front-end como gulp y grunt.
• la diferencia:
  • Less se basa en JavaScript y se procesa en el lado del cliente, así que use npm al instalar
  • Sass está basado en Ruby por lo que se procesa en el servidor.
• Ventajas y desventajas de menos.
  • Ventajas: menos es simple y fácil de usar; pertenece a la expansión básica de CSS; menos es más adecuado para escribir estilos en interfaces estáticas
  • Desventaja: el motor JavaScript necesita tiempo adicional para procesar el código y luego enviar el CSS modificado al navegador.
• Ventajas y desventajas del descaro
  • Ventajas: La expansión Sass, potente y más rica, es adecuada para juegos u otros efectos que requieren lógica para reemplazar diferentes estilos.
  • Desventajas: complejo y hostil para los principiantes.

41. ¿Qué es la FOUC? ¿Cómo evitarlo?

FOUC: El parpadeo del contenido sin estilo también se puede llamar falla a corto plazo en el estilo del documento, que se refiere principalmente al fenómeno de parpadeo causado por el HTML que se ha cargado pero la hoja de estilo no está cargada y luego la hoja de estilo se carga nuevamente.

Como evitar:

• Frente de la hoja de estilo : según el orden de representación del navegador, CSS se introduce o incrusta en
• Intente utilizar el enlace para evitar el uso de @import ,

42. ¿Cuáles son las ventajas y desventajas de liquidar los métodos flotantes?

• Método de etiqueta adicional: para quién borrar el flotador, agregue una etiqueta en blanco adicional después

  • Ventajas: Fácil de entender y fácil de escribir. (no recomendado)
  • Desventajas: se agregan muchas etiquetas sin sentido y la estructura es relativamente pobre.

• El método de desbordamiento agregado por los padres: el efecto flotante claro se puede lograr activando el BFC.

  • Ventajas: Simple, menos código, buena compatibilidad con el navegador

• Desventajas: cuando el contenido aumenta, es fácil hacer que el contenido se oculte sin un ajuste automático de línea y los elementos que deben desbordarse no se pueden mostrar. No se puede utilizar junto con la posición, porque el tamaño sobrante quedará oculto.

• Utilice el pseudoelemento after para borrar el flotante: el método :after es una versión mejorada del elemento vacío y la ventaja es que no es necesario etiquetarlo por separado.

  • Ventajas: De acuerdo con la idea de flotación cerrada, la estructura es semánticamente correcta y no es fácil tener problemas extraños (actualmente: se utilizan sitios web grandes, como: Tencent, Netease, Sina, etc.)
  • Desventajas: dado que IE6-7 no es compatible

43. ¿Deberían utilizarse fuentes pares o impares en las páginas web? ¿por qué?

• Los números pares son relativamente más fáciles de formar una relación proporcional con el resto del diseño web.

44. Si necesitas escribir una animación manualmente, ¿cuánto crees que es el intervalo de tiempo mínimo y por qué? (Alí)

• La frecuencia predeterminada de la mayoría de las pantallas es 60Hz, es decir, tiempos 1de actualización 60por segundo, por lo que el intervalo mínimo teórico es1/60*1000ms ＝ 16.7ms

45. ¿El principio y las ventajas y desventajas de base64?

• Las ventajas se pueden cifrar, reduciendo HTTTPlas solicitudes .
• La desventaja es que necesita consumir CPUcódec .

46. ​​​​¿Diseño fluido, diseño del Santo Grial, diseño de doble ala volante?

La diferencia entre el diseño del Santo Grial y el diseño de ala de doble vuelo:

• Mismo punto
  • Las funciones de los dos son las mismas, ambos son lograr un diseño de tres columnas con ancho fijo en ambos lados y ancho adaptable en el medio , y la parte central debe escribirse delante del código HTML, para que sea cargado y renderizado primero.
• diferencia
  • La principal diferencia es que a la hora de solucionar el problema de que la parte media está bloqueada, las soluciones adoptadas son diferentes. El diseño del santo grial es establecer padding-left y padding-right en el elemento principal, establecer la posición relativa para el contenido en los lados izquierdo y derecho, y mover el contenido a la izquierda y a la derecha para que el contenido esté a la izquierda. y los lados derecho se muestran bien, mientras que el diseño del ala de doble vuelo En la capa exterior del div en el medio, se configura otro div para colocar el contenido, y el margen izquierdo y el margen derecho están configurados para el div del medio.

47. El papel de postcss

PostCSS es una herramienta para transformar CSS utilizando complementos JS. Estos complementos pueden admitir variables y mixins, transpilar sintaxis CSS futura, imágenes en línea y más.

efecto:

• Admite CSS futuro: use cssnext para escribir CSS futuro (complemento postcss-cssnext)
• La velocidad de compilación ha mejorado enormemente. PostCSS afirma ser entre 3 y 30 veces más rápido que los preprocesadores.
• Rico sistema de complementos, libera tus manos.
• La modularización de CSS, que limita el alcance a los componentes, evita el problema del alcance global y ya no tiene que preocuparse por la duplicación de nombres de estilos.

Postcss es un posprocesador CSS que compila CSS dinámicamente, es decir, compila en tiempo de ejecución.

48. ¿CSS tiene un atributo de contenido? ¿Cuál es el efecto? ¿Cuál es la aplicación?

Las propiedades de CSS contentse aplican específicamente a before/afterpseudoelementos, que se utilizan para insertar contenido generado. La aplicación más común es utilizar pseudoclases para borrar flotantes.

49. Método de centrado horizontal.

• El elemento es un elemento en línea, establezca el elemento principaltext-align:center
• Si el ancho del elemento es fijo, puede establecer izquierda y derecha marginen auto;
• Posicionamiento y movimiento absolutos:absolute + transform
• Utilice flex-boxel diseño, especifique justify-contentel atributo como centro
• displayEstablecer comotabel-ceil

50. Habla en detalle sobre la animación y transición de CSS3.

• animation
  • css3 animationes un nuevo atributo de animación de css3. Cada cuadro de esta animación css3 se @keyframesdeclara pasando, keyframesdeclarando el nombre de la animación y definiendo el proceso de animación frompor o porcentajeto
  • El estado de cada cuadro de los elementos de animación se utiliza para animation-namehacer referencia a esta animación. Al mismo tiempo, la animación css3 también puede definir la duración de la animación, la hora de inicio de la animación, la dirección de la animación y el número de bucles de animación. y la forma en que se reproduce la animación.
  • Estas subpropiedades de animación relacionadas son:
    • animation-nameDefinir el nombre de la animación
    • animation-durationDefine la duración de la animación a reproducir.
    • animation-delayDefine cuánto tiempo demora la animación en reproducirse.
    • animation-directionDefine la dirección de reproducción de la animación.
    • animation-iteration-countDefinir el recuento de jugadas
    • animation-fill-modeDefinir el estado después de reproducir la animación.
    • animation-play-stateDefina el estado de reproducción, como pausar, ejecutar, etc.
    • animation-timing-functionDefina el modo de reproducción, como reproducción a velocidad constante, reproducción en desaceleración, etc.
• transition
  • propiedad de transición: especifica el nombre de la propiedad CSS para configurar el efecto de transición
  • duración de la transición: especifica cuántos segundos o milisegundos se necesitan para completar el efecto de transición
  • función de sincronización de transición: especifica la función de transición, especificando la curva de velocidad del efecto de velocidad.
  • Transition-Delay: especifica el tiempo de retraso para comenzar a aparecer.

51. ¿Qué es CSS Hack? Trucos comunes

Descripción: al agregar algunos símbolos especiales en el estilo CSS, diferentes navegadores pueden reconocer diferentes símbolos (existe un estándar para qué tipo de símbolos reconocen los navegadores, el truco de CSS es para permitirle recordar este estándar), para lograr el propósito de aplicar diferentes estilos CSS.

Trucos comunes:

• Hack a nivel de atributo: por ejemplo, IE6 puede reconocer el guión bajo " " y el asterisco "*", IE7 puede reconocer el asterisco "*", pero no el guión bajo " " , y Firefox no puede reconocer ambos.
• Hack a nivel de selector: por ejemplo, IE6 puede reconocer html .class{} e IE7 puede reconocer +html .class{} o *:first-child+html .class{}.
• Hack de comentario condicional de IE: el comentario condicional de IE es una declaración lógica no estándar proporcionada por Microsoft IE5.

52. ¿Cómo analizan los navegadores los selectores de CSS?

• La forma en que los navegadores analizan los selectores CSS es de derecha a izquierda

53. Cómo escribir el módulo de estilo independiente y expresar ideas.

• CSS se puede dividir en 2 partes: CSS público y CSS empresarial:
  • La combinación de colores, la fuente y la interacción del sitio web se extraen como CSS público. Esta parte de la denominación CSS no debe involucrar negocios específicos.
  • Para CSS empresarial, es necesario tener un nombre unificado y utilizar un prefijo común. Puede consultar CSS orientado a objetos

54. ¿La configuración del porcentaje vertical del elemento es relativa a la altura del contenedor?

不是

Tanto la configuración de porcentaje vertical como la horizontal son relativas al contenedor 宽度. Podemos verificar por margen y relleno.

55. ¿Cuál es el principio del desplazamiento de pantalla completa? ¿Qué propiedades de CSS se utilizan?

• El principio es similar al principio del carrusel de imágenes, más allá de la parte oculta, se mostrará al desplazarse.
• Posibles propiedades CSS:overflow:hidden; transform:translate(100%, 100%); display:none;

56. Después de configurar el elemento para que flote, ¿cómo cambiará el valor de visualización del elemento?

Después de que el elemento esté configurado para flotar, displayel valor del elemento se convertirá automáticamenteblock

57. ¿Cuándo se mostrarán los espacios en pantalla de bloques en línea?

• inline-blockEl espaciado ocurre cuando los elementos adyacentes están separados por nuevas líneas o espacios.
• Elementos no inline-blockhorizontales configurados para inline-blocktener también espaciado horizontal
• vertical-align:top;Los huecos verticales se pueden eliminar con la ayuda de
• Puede font-size：0;agregar el tamaño de fuente requerido en el elemento secundario en el nivel principal para eliminar el espacio vertical
• Poner lilas etiquetas en la misma línea puede eliminar el espacio vertical, pero el código es menos legible

58. ¿Cuál es la diferencia entre pageX, clientX, screenX y offsetX?

páginaX/Y: para toda la página, incluida la longitud de la parte del cuerpo que se retira

clientX/Y: las coordenadas x, y de la posición del clic desde el área visible del cuerpo actual

screenX/Y: Las coordenadas x, y de la posición del clic desde la pantalla actual de la computadora

offsetX/Y: Relativo a las coordenadas x, y del cuadro principal con posicionamiento

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-rXHtNM4t-1686967105041) (C:\Users\lenovo\AppData\Roaming\Typora\ imágenes-de-usuario-de-typora\ 1683882788135.png)]

59. ¿Cómo realizar una prueba de compatibilidad para navegadores de diferentes versiones de IE?

Utilice la herramienta para cambiar la versión de IE y luego ejecute la prueba en el navegador IE

60. Explicación detallada del radio fronterizo.

En desarrollo, a menudo establecemos radio de borde: 50% para lograr un círculo a través de un cuadrado.

Selección de parámetros de radio de borde:

• radio de borde: 10px; creará cuatro esquinas redondeadas del mismo tamaño
• border-radius:10px 15px 10px 15px; Los cuatro valores representan la esquina superior izquierda, la esquina superior derecha, la esquina inferior derecha y la esquina inferior izquierda
• border-radius:10px 15px; El primer valor indica la esquina superior izquierda y la esquina inferior derecha; el segundo valor indica la esquina superior derecha y la esquina inferior izquierda
• border-radius:10px 15px 5px; el primer valor indica la esquina superior izquierda; el segundo valor indica la esquina superior derecha y la esquina inferior izquierda; el tercer valor indica la esquina inferior derecha.

61. ¿Cómo hacer que la fuente de la página sea más clara y delgada con CSS?

-webkit-font-smoothing: suavizado;

63. ¿Degradados CSS3?

CSS3 define dos tipos de degradados:

• Degradado lineal: direcciones abajo/arriba/izquierda/derecha/diagonal
• Degradados radiales - (Gradientes radiales) - definidos por sus centros

Gradiente lineal:

• Sintaxis: imagen-de-fondo: linear-gradientdirección, color-parada1, color-parada2,...);
  • dirección: dirección/ángulo del degradado, opcional (45 grados, hacia abajo, hacia arriba, hacia la derecha, hacia la izquierda, hacia la izquierda, arriba…)
  • color-stop: seleccione el color rgba para establecer la transparencia, o por 设置色标点区域ejemplo: rgba(255,255,255,0.3) 20%

径向渐变：

• 语法：background-image: radial-gradient(shape size at position, start-color, …, last-color);
  • shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
  • size：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”
  • at position起点：中心点的位置，可以是关键字（水平方向–left,center,right, 垂直方向–top,center,bottom），具体数值或百分比。

64.响应式布局和自适应布局的区别 ?

• 响应式布局是指通过CSS媒体查询，根据不同设备或视口宽度设置不同的样式来适应不同屏幕大小，实现页面的自动调整和优化。响应式布局可以使网站在桌面、平板电脑和手机等多种设备上都能够以最佳的显示效果呈现。
• 自适应布局是指根据屏幕尺寸选择合适的布局方式，使页面在不同设备上看起来更加美观和可读性更好。自适应布局相对来说更加固定一些，它的页面布局通常是由几个固定的布局组成，在不同的屏幕尺寸下选择不同的布局组合来进行展示，而不是像响应式布局那样直接改变样式。

65.z-index失效的几种情况

• position属性未设置或值为static：如果要使用z-index属性，您需要首先将元素的position属性设置为relative、absolute或fixed。否则，即使设置了z-index，也无法使其生效。
• 父元素的z-index值高于子元素：当一个父元素和它的子元素都设置了z-index时，子元素的z-index可能会失效。
• 浮动元素的z-index失效：当使用浮动元素时，z-index属性可能不起作用。这是因为浮动本身就具有一定的层叠性质，并且浮动元素之间的堆叠顺序由它们在文档流中的先后顺序决定。

66.float之后display值改为？

bloquear

67. Anclas en CSS

<a name="go">来我这里</a>
......
<a href="#go">我来了</a>

Puede usar el atributo id para reemplazar el atributo de nombre, usar el id para definir el punto de anclaje y ubicar cualquier etiqueta. El atributo de nombre solo se puede ubicar para la etiqueta a.

68. Solución al problema de 1px en dispositivos móviles

• Escalado con pseudoelementos CSS::después + transfrom
  • Ventajas: todos los modelos son compatibles, se realiza 1px real y las esquinas se pueden redondear. Bueno para proyectos antiguos.
  • Desventaja: el pseudoelemento posterior se utiliza temporalmente, lo que puede afectar la eliminación de la flotación.
• Establecer el valor de escala de la ventana gráfica
  • Ventajas: Compatible con todos los modelos, escribir directamente 1px no puede ser más conveniente.
  • Desventajas: Aplicable a proyectos nuevos, los proyectos antiguos pueden cambiar mucho.
• Utilice la biblioteca de componentes vant/ant-design-mobile

69. Evite el comportamiento deslizante predeterminado hacia la izquierda y hacia la derecha de los navegadores de desarrollo móviles H5

html{
    
    
    touch-action:none;
}
//此时上下左右都不可滑动
--------改动
html{
    
    
touch-action:none;
touch-action:pan-y;
}

70. Comparación de posición de posicionamiento y transformación de elementos móviles en CSS

• En términos de rendimiento: el rendimiento de transformación es mucho mayor que el de posición
• Movido por traducir, el elemento seguirá ocupando su espacio original. Si se mueve por posición, la posición se cambiará para activar el rediseño

71.margen izquierdo: automático, margen derecho: automático, margen: automático

margen izquierdo: automático右对齐

margen derecho: automático左对齐

margen: automático居中

Desplazamiento de pantalla completa 72.css

overflow-y；overflow-x；scroll-snap-type;scroll-snap-align;atributos requeridos

<style>
        html,
        body {
     
     
            height: 100%;
            margin: 0;
        }

        ul {
     
     
            margin: 0;
            /* scroll-behavior: smooth 让页面在滚动时拥有平滑的过渡效果，而不是瞬间跳转 */
            scroll-behavior: smooth;
            font-size: 40px;
            width: 100%;
            height: 100%;
            /* 
            overflow-y: auto 表示当内容超出元素的高度时，元素会显示垂直方向的滚动条以便用户浏览。如果内容不超出元素的高度，则不会显示滚动条。
            overflow-x: hidden 则表示当内容超出元素的宽度时，元素不会显示水平方向的滚动条，同时超出部分的内容也将被隐藏。
            */
            overflow-y: auto;
            overflow-x: hidden;
            border: 1px solid #000;
            /* 
            scroll-snap-type: y mandatory; 表示在垂直方向上开启滚动对齐功能，并强制要求元素对齐到滚动容器的边缘。这样可以确保每个子元素都在独立的、整数倍的位置停留，从而实现更加规整的页面布局。
            */
            scroll-snap-type: y mandatory;
            /*设置父级*/
            padding: 0;
        }

        li {
     
     
            height: 100%;
            width: 100%;
            flex-shrink: 0;
            /* 
            scroll-snap-align: center; 则表示对齐方式为中心对齐，当子元素的中心点（水平轴和垂直轴的中心点）与滚动容器的中心点重合时，就会触发对齐效果。
            */
            scroll-snap-align: center;
            /*子级设置*/
            text-align: center;
        }

        li:nth-child(1) {
     
     
            background-color: teal;
        }

        li:nth-child(2) {
     
     
            background-color: gold;
        }

        li:nth-child(3) {
     
     
            background-color: green;
        }
    </style>

	<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

73. Desventajas del diseño de la mesa.

• La estructura HTML no es semántica: el uso del diseño de tabla requiere el uso de una gran cantidad de elementos de tabla, filas y celdas, lo que hará que la estructura HTML no sea semántica. Cuando se utiliza el diseño de tabla, el significado de la estructura HTML se oscurece, lo que causará ciertas dificultades a las personas que leen y comprenden el código HTML.
• Redundancia de código: para lograr efectos de diseño complejos, a menudo es necesario utilizar una gran cantidad de atributos de intervalo de filas y colspan, lo que hará que el código HTML sea largo y difícil de mantener.
• Difícil de adaptar a dispositivos móviles: la implementación del diseño de tabla generalmente requiere especificar el ancho y el alto de la tabla, por lo que no funciona bien en dispositivos móviles, lo que resulta en un contenido de página truncado o reducido.
• Bajo rendimiento de representación: dado que los navegadores necesitan analizar una gran cantidad de elementos de la tabla, el uso del diseño de tabla afectará el rendimiento de la representación de la página.
• No favorece el SEO: dado que el diseño de la tabla no es semántico, dificultará que los motores de búsqueda comprendan la estructura y el contenido de la página, lo que reducirá el efecto SEO (optimización de motores de búsqueda) del sitio web.
• No propicio para un diseño receptivo: dado que el diseño de la tabla debe especificar el ancho y el alto de la tabla, es difícil adaptarse a pantallas de diferentes tamaños. Para implementar un diseño responsivo, el efecto del diseño de la tabla no es muy ideal.

---

3. Artículos mixtos HTML/CSS

1. ¿Qué nuevas características se agregan en HTML5 y CSS3?

HTML5

• nuevas etiquetas semánticas
  • artículo Contenido independiente.
  • al lado de la barra lateral.
  • encabezado encabezado.
  • navegación Navegación.
  • sección La sección del documento.
  • pie de página El pie de página.
• API de lienzo
• API de geolocalización
• El almacenamiento local fuera de línea localStorage almacena datos durante mucho tiempo y los datos no se perderán después de cerrar el navegador; los
  datos de sessionStorage se eliminan automáticamente después de cerrar el navegador
• Trabajador web de nuevas tecnologías, websocket, geolocalización.
• API de arrastrar y soltar
• API de audio y vídeo (audio, vídeo)
• Controles de formulario, calendario, fecha, hora, correo electrónico, URL, búsqueda

---

CSS3

• transformación 2d, 3d
• Transición, animación.
• consulta de medios
• Unidades nuevas (rem, vw, vh, etc.)
• Esquinas redondeadas (borde-radio), sombras (cuadro-sombra), efectos de texto (texto-sombra), degradado lineal (degradado), rotación (transformación) transformación: rotar (9 grados) escala (0.85,0.90) traducir (0px, - 30px) skew(-9deg,0deg);//rotar, escalar, posicionar, inclinar
• rgb

---

4. Artículos JS

1. ¿Tipo de datos JS?¿Diferencia en el almacenamiento?

El tipo de datos consta principalmente de dos partes:

• Datos básicos + tipos: indefinido, nulo, booleano, número y cadena, símbolo (tipo de datos único e inmutable después de la creación)
• Tipo de datos de referencia: Objeto (incluido Objeto, Matriz, Función)

Diferencia de almacenamiento:

• Los tipos de datos primitivos se almacenan en la pila.
• Los objetos de tipo de referencia se almacenan en el montón.

2. ¿Métodos comunes de matrices?

aumentar:

• push() Agrega uno o más elementos al final de la matriz y devuelve la nueva longitud
• unshift() agrega cualquier número de valores al comienzo de la matriz y luego devuelve la nueva longitud de la matriz
• splice() pasa tres parámetros, que son la posición inicial, 0 (el número de elementos que se eliminarán), el elemento insertado y devuelve una matriz vacía.
• concat() primero crea una copia de la matriz actual, luego agrega sus parámetros al final de la copia y finalmente devuelve esta matriz recién construida sin afectar la matriz original.

borrar:

• El método pop() se utiliza para eliminar el último elemento de la matriz, reducir lengthel valor de la matriz y devolver el elemento eliminado.
• El método shift() se utiliza para eliminar el primer elemento de la matriz, reducir lengthel valor de la matriz al mismo tiempo y devolver el elemento eliminado.
• splice() pasa dos parámetros, que son la posición inicial, el número de elementos eliminados y devuelve una matriz que contiene elementos eliminados.
• slice() pasa dos parámetros, que son la posición inicial y la posición final, excluyendo el valor final, y devuelve una nueva matriz sin afectar la matriz original

cambiar:

• splice() pasa tres parámetros, que son la posición inicial, la cantidad de elementos que se eliminarán, cualquier cantidad de elementos que se insertarán y devuelve la matriz de elementos eliminados, lo que afectará la matriz original.

controlar:

• indexOf() Devuelve la posición del elemento que se encontrará en la matriz, o -1 si no se encuentra
• incluye() Devuelve la posición del elemento que se encontrará en la matriz, si se encuentra, devuelve true, en caso contrariofalse

3. ¿Cuáles son los métodos operativos comunes de las cadenas de JavaScript?

aumentar:

• Las cadenas se pueden concatenar mediante '+' y ${}
• concat se utiliza para concatenar una o más cadenas en una nueva cadena

Eliminar: las tres funciones reciben uno o dos parámetros, similar al segmento en la matriz

• rebanada()
• substr() toma dos argumentos: el índice inicial y el número de caracteres a extraer
• substring() acepta dos parámetros: índice inicial e índice final sin incluir el carácter en la posición final

cambiar:

• trim(), trimLeft(), trimRight() eliminan los caracteres frontales, posteriores o todos los espacios antes y después, y luego devuelven una nueva cadena
• repetir() recibe un parámetro entero, que indica cuántas veces copiar la cadena, y luego devuelve el resultado después de unir todas las copias
• padStart (), padEnd () copia la cadena, recibe dos parámetros, el primer parámetro es la longitud, el segundo parámetro es el carácter a completar, si es menor que la longitud especificada, complete el carácter en el lado correspondiente (final /start), hasta que se cumpla la condición de longitud
• toLowerCase(), toUpperCase() conversión de casos

controlar:

• chatAt() devuelve el carácter en el índice dado, especificado por el parámetro entero pasado al método
• indexOf() busca la cadena entrante desde el principio de la cadena y 返回位置(devuelve -1 si no se encuentra)
• startWith() busca la cadena pasada de la cadena 判断开头字符串是否与期待值相同y devuelve un valor booleano que indica si contiene
• incluye() busca la cadena pasada de la cadena, 判断字符串是否包含期待值y devuelve un valor booleano que indica si está incluida

4. ¿Métodos de conversión comunes y métodos de coincidencia de plantillas para cadenas de JavaScript?

Método de conversión:

• split() divide la cadena en cada elemento de la matriz de acuerdo con el delimitador especificado

Método de coincidencia de plantillas:

• match() recibe un parámetro, que puede ser una cadena de expresión regular o un RegExpobjeto, y devuelve una matriz
• search() recibe un parámetro, que puede ser una cadena de expresión regular o un RegExpobjeto, y devuelve el índice coincidente si se encuentra; de lo contrario, devuelve -1
• reemplazar() recibe dos parámetros, el primer parámetro es el contenido coincidente y el segundo parámetro es el elemento reemplazado (función disponible)

5. Mecanismo de conversión de tipos en JavaScript

Conversión de pantalla:

• Número()
  • Cadena: si se puede analizar como un valor numérico, conviértalo al valor numérico correspondiente
  • Cadena: si no se puede analizar como un número, devuelve NaN
  • Las cadenas vacías se convierten a 0
  • Valor booleano: verdadero se convierte en 1, falso se convierte en 0
  • undefined：转成 NaN
  • null：转成0
  • Objetos: generalmente convertidos a NaN (excepto matrices que contienen solo un valor)
• parseInt() parseInt相比Number，就没那么严格了，parseInt函数逐个解析字符，遇到不能转换的字符就停下来
• String() 可以将任意类型的值转化成字符串
  • 特殊：如果接受的是对象则返回[object,object] 如果是数组【1,2,3】返回1,2,3
• Boolean() 可以将任意类型的值转为布尔值

隐式转换：

• 在+运算中，一旦存在字符串，则会进行字符串拼接操作
• 除了+有可能把运算子转为字符串，其他运算符都会把运算子自动转成数值 。常用就是将字符串转为数值 字符串-0 = 数值

6.null 和 undefined 的区别？

• null和undefined不能通过==来判断。
• undefined
  • 这个变量从根本上就没有定义
• 隐藏式 空值
• null
  • 这个值虽然定义了，但它并未指向任何内存中的对象
• 声明式 空值

7. “ ===”、“ ==”的区别？

==： 如果操作数相等，则会返回 true

• 两个都为简单类型，字符串和布尔值都会转换成数值，再比较
• 简单类型与引用类型比较，对象转化成其原始类型的值，再比较
• 两个都为引用类型，则比较它们是否指向同一个对象
• null 和 undefined 相等
• 存在 NaN 则返回 false

===：只有在无需类型转换运算数就相等的情况下，才返回 true，需要检查数据类型

区别：

• 相等操作符（==）会做类型转换，再进行值的比较，全等运算符不会做类型转换

8. “eval是做什么的？

它的功能是把对应的字符串解析成 JS 代码并运行；
应该避免使用 eval，不安全，非常耗性能（2次，一次解析成 js 语句，一次执行）。

9. 箭头函数有哪些特点？

No necesita la palabra clave function para crear una función
Omita la palabra clave return
Cambie esto para que apunte a

10. ¿Cuál es la diferencia entre var, let y const?

var elevación variable existe.
let solo es accesible en el ámbito de nivel de bloque.
const se usa para definir constantes, que deben inicializarse y no pueden modificarse (los objetos son especiales)

11. ¿Qué hace exactamente el nuevo operador?

1. Cree un objeto vacío y esta variable se refiere al objeto y también hereda el prototipo de la función.
2. Las propiedades y métodos se agregan al objeto al que hace referencia.
3. Esto hace referencia al objeto recién creado y finalmente lo devuelve implícitamente.

12. ¿Cuál es la diferencia entre copia profunda y copia superficial? ¿Cómo implementar una copia profunda?

Copia superficial: se refiere a la creación de nuevos datos, que tienen una copia exacta del valor del atributo de datos original y los dos objetos apuntan a la misma dirección.

Copia profunda: la copia profunda abre una nueva pila, dos objetos pertenecen al mismo, pero corresponden a dos direcciones diferentes, modifican las propiedades de un objeto,不会改变另一个对象的属性

Cómo implementar una copia profunda:

• JSON.stringify()
• recursión de bucle escrito a mano
• _.clonDeep()
• Canal de mensajes agregado
• extender jquery

13. Comprensión de la cadena de alcance

• La función de la cadena de alcance es garantizar que las variables y funciones a las que se puede acceder en el entorno de ejecución estén en orden. Solo se puede acceder a las variables de la cadena de alcance hacia arriba y las variables finalizarán cuando accedan al objeto. No se accederá a las variables a las que se accede hacia abajo mediante la cadena de alcance window. Permitido
• En pocas palabras, 作用域就是变量与函数的可访问范围el alcance controla la visibilidad y el ciclo de vida de variables y funciones.

14. Prototipo de JavaScript, cadena de prototipos, ¿cuáles son las características?

• prototipo:
  • JavaScriptTodos los objetos de contienen una [__proto__]propiedad interna, que corresponde al prototipo del objeto.
  • El objeto de función JavaScript, además del prototipo [__proto__], también preestablece prototypela propiedad
  • 当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 [__proto__]
• 原型链：
  • 当一个对象调用的属性/方法自身不存在时，就会去自己 [__proto__] 关联的前辈 prototype 对象上去找
  • 如果没找到，就会去该 prototype 原型 [__proto__] 关联的前辈 prototype 去找。依次类推，直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”
• 原型特点：
  • JavaScript对象是通过引用来传递的，当修改原型时，与之相关的对象也会继承这一改变

15.请解释什么是事件代理

• 事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能
• 可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒
• 可以实现当新增子对象时无需再次对其绑定

16.Javascript如何实现继承？

• 构造函数绑定：使用 call 或 apply 方法，将父对象的构造函数绑定在子对象上
• 实例继承：将子对象的 prototype 指向父对象的一个实例 Cat.prototype = new Animal();
• 拷贝继承：如果把父对象的所有属性和方法，拷贝进子对象
• 原型继承：将子对象的 prototype 指向父对象的 prototype F.prototype = Parent.prototype;
• ES6 语法糖 extends：class ColorPoint extends Point {}

17.谈谈This对象的理解

• this总是指向函数的直接调用者（而非间接调用者）
• Si hay newuna palabra clave, thisseñale newel objeto que sale.
• En el caso, thisapunta al objeto que desencadenó el evento. En particular, of in IEsiempre apunta al objeto global.attachEventthisWindow

18. Modelo de evento

W3CLa ocurrencia de eventos definidos pasa por tres fases: la fase de captura ( capturing), la fase objetivo ( targetin) y la fase de burbujeo ( bubbling).

• Evento de difusión: cuando utiliza la difusión de eventos, el elemento secundario se activa primero y el elemento principal se activa más tarde.
• Captura de eventos: cuando utiliza la captura de eventos, el elemento principal se activa primero y el elemento secundario se activa más tarde.
• DOMFlujo de eventos: admite dos modelos de eventos al mismo tiempo: capturar eventos y difundir eventos
• Evite el burbujeo: en W3c, use stopPropagation()el método; establecido en IEcancelBubble = true
• Captura de bloque: el comportamiento predeterminado de bloquear eventos, como click - saltar después. En W3c, preventDefault()método de uso, establecido IEenwindow.event.returnValue = false

19. ¿Qué hace exactamente el nuevo operador?

• Crea un objeto vacío y thisla variable se refiere a ese objeto, al mismo tiempo que hereda el prototipo de la función.
• Las propiedades y métodos se agregan al thisobjeto referenciado.
• El objeto recién creado es thisreferenciado y devuelto implícitamente al final.this

20. ¿Cuál es el contexto de ejecución y la pila de ejecución en JavaScript?

Contexto de ejecución: es un Javascriptconcepto abstracto del entorno de ejecución de código, es decir, mientras haya Javascriptcódigo ejecutándose, debe estar ejecutándose en el contexto de ejecución.

• Contexto de ejecución global: solo uno, el objeto global en el navegador es windowel objeto que thisapunta a este objeto global
• Contexto de ejecución de funciones: hay innumerables, solo se crean cuando se llama a la función, cada vez que se llama a una función, se crea un nuevo contexto de ejecución
• Contexto de ejecución de la función de evaluación: se refiere al evalcódigo que se ejecuta en la función, que rara vez se usa y no se recomienda

Pila de ejecución: también llamada pila de llamadas, tiene una estructura LIFO (último en entrar, primero en salir) para almacenar todos los contextos de ejecución creados durante la ejecución del código.

• Cuando Javascriptel motor comienza a ejecutar su primera línea de código de script, crea un contexto de ejecución global y lo coloca en la pila de ejecución.
• Siempre que el motor encuentra una función, crea un contexto de ejecución de función y luego empuja este contexto de ejecución a la pila de ejecución.
• El motor ejecutará el contexto de ejecución (generalmente el contexto de ejecución de la función) en la parte superior de la pila de ejecución. Cuando finalice la ejecución de la función, aparecerá el contexto de ejecución correspondiente y luego el flujo de control alcanzará el siguiente contexto de ejecución del pila de ejecución.

21. ¿Cuál es la diferencia entre tipo de e instancia de?

typeofEl operador devuelve una cadena que representa el tipo del operando no evaluado.

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-GFG2mFwF-1686967105042) (C:\Users\lenovo\AppData\Roaming\Typora \typora-user-images\ 1683945877205.png)]

instanceofEl operador se utiliza para detectar si el atributo del constructor prototypeaparece en la cadena de prototipo de un objeto de instancia.

la diferencia:

• typeofDevolverá el tipo básico de una variable instanceofy devolverá un valor booleano.
• instanceofPuede juzgar con precisión tipos de datos de referencia complejos, pero no puede juzgar correctamente tipos de datos básicos
• Y typeoftambién hay desventajas: aunque se puede juzgar el tipo de datos básico ( nullexcepto), en el tipo de datos de referencia, excepto functionel tipo, no se pueden juzgar otros

22. ¿Cinco formas de juzgar si es una matriz?

• instanceofinstancia de datos de matriz
• constructordatos.constructor == Matriz
• Array.isArray()Array.isArray(datos) más recomendado
• typeoftipo de (datos)
• Object.prototype.toSrtring.call()

23. ¿Cuáles son los métodos para determinar el tipo de un valor?

• tipo de operador
• operador de instancia
• Método Object.prototype.toString.call
• constructor

24. ¿Proceso Ajax?

(1) Cree un objeto XMLHttpRequest, es decir, cree un objeto de llamada asincrónica.
(2) Cree una nueva solicitud HTTP y especifique el método, la URL y la información de autenticación de la solicitud HTTP.
(3) Establezca la función que responde a la cambio de estado de la solicitud HTTP.
(4) Enviar una solicitud HTTP.
(5) Obtener los datos devueltos por la llamada asincrónica.
(6) Usar JavaScript y DOM para lograr una actualización parcial.

25. Principio de Ajax, ¿ventajas y desventajas de Ajax?

• AjaxEn pocas palabras, el principio es agregar una capa intermedia ( AJAXmotor) entre el usuario y el servidor, XmlHttpRequestenviar una solicitud asincrónica al servidor a través del objeto, obtener datos del servidor y luego usar javascript para operar DOMy actualizar la página. Acciones de usuario asincrónicas y respuestas del servidor. El paso más crítico es obtener los datos de la solicitud del servidor.

• AjaxEl proceso implica únicamente JavaScript, XMLHttpRequesty DOM. XMLHttpRequestsi ajaxmecánica central

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-tk5uFVRn-1686967105043) (C:\Users\lenovo\AppData\Roaming\Typora\ imágenes-de-usuario-de-typora\ 1683946428125.png)]

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-R52CumK9-1686967105044) (C:\Users\lenovo\AppData\Roaming\Typora \typora-user-images\ 1683946512993.png)]

• ventaja:
  • A través del modo asíncrono, se mejora la experiencia del usuario.
  • Optimice la transmisión entre el navegador y el servidor, reduzca los viajes de ida y vuelta de datos innecesarios y reduzca el uso de ancho de banda.
  • AjaxAl ejecutarse en el lado del cliente, realiza parte del trabajo realizado originalmente por el servidor, lo que reduce la carga del servidor para una gran cantidad de usuarios.
  • AjaxPuede lograr una no actualización dinámica (actualización parcial)
• defecto:
  • Las preguntas de seguridad AJAXexponen detalles de las interacciones con el servidor.
  • El soporte para los motores de búsqueda es relativamente débil.
  • No es fácil de depurar.

26. ¿Cuál es la diferencia entre vincular, llamar y aplicar?

enlazar, llamar y aplicar se utilizan para cambiar la dirección de este

apply: Acepta dos parámetros, el primer parámetro es thisel puntero, el segundo parámetro es el parámetro aceptado por la función, que se pasa como una matriz

La función original se ejecutará inmediatamente después de cambiar thisel puntero, y este método solo cambia temporalmente thisel puntero una vez fn.apply(null,[1,2,3]);

call: El primer parámetro también es thisel puntero, y más adelante se pasa una lista de parámetros fn.call(obj,1,2,3)

bind: El método de vinculación es muy similar a la llamada, el primer parámetro también es thisel puntero y luego se pasa una lista de parámetros (pero esta lista de parámetros se puede pasar varias veces)返回的是新的函数

27. ¿Cómo implementar un enlace?

Implemente el enlace en tres pasos:

• Modifique esto para señalar
• Pasar parámetros dinámicamente
• Compatible con nueva palabra clave

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-Au8o7qGB-1686967105045) (C:\Users\lenovo\AppData\Roaming\Typora \typora-user-images\ 1683947651751.png)]

28. Cuénteme sobre su comprensión de las expresiones regulares. ¿Escenario de aplicación?

Las expresiones regulares son un 匹配字符串arma poderosa para

Escenario de aplicación:

• Verifique la legitimidad de QQ (5 ~ 15 dígitos, todos los números, que no comiencen con 0):
• Verificar el formato del número de teléfono móvil

29. ¿Comprensión del bucle de eventos (detallado)?

Premisa: JavaScriptes un 单线程lenguaje, lo que significa que solo se puede hacer una cosa al mismo tiempo, pero esto no significa que un solo subproceso esté bloqueando, y el método para lograr el no bloqueo de un solo subproceso es el bucle de eventos.

En JavaScript, todas las tareas se pueden dividir en

• Tareas sincrónicas: tareas que se ejecutan inmediatamente. Generalmente, las tareas sincrónicas ingresarán directamente al hilo principal para su ejecución.
• Tareas asincrónicas: tareas ejecutadas de forma asincrónica, como ajaxsolicitudes de red, setTimeoutfunciones de sincronización, etc.

La tarea sincrónica ingresa al hilo principal, es decir, la pila de ejecución principal, y la tarea asincrónica ingresa a la cola de tareas. Después de que la tarea en el hilo principal se ejecuta y está vacía, irá a la cola de tareas para leer la tarea correspondiente. y empújelo en el hilo principal para su ejecución. La repetición continua del proceso anterior es el bucle de eventos.

Las tareas asincrónicas se dividen en 微任务y 宏任务:

微任务: Una función que debe ejecutarse de forma asincrónica. El tiempo de ejecución es después de que finaliza la ejecución de la función principal y antes del final de la macrotarea actual.

• Promesa
• MutaionObserver monitorea los cambios dom
• Object.observe (obsoleto; reemplazado por objeto Proxy)
• proceso.nextTick (Node.js)

宏任务: La granularidad de tiempo de las macrotareas es relativamente grande, el intervalo de tiempo de ejecución no se puede controlar con precisión y no cumple con algunos requisitos elevados en tiempo real.

• script (puede entenderse como código síncrono externo)
• establecerTiempo de espera/establecerIntervalo
• postMensaje、MessageChannel
• setImmediate、E/S（Node.js）

Orden de ejecución:

• Primero ejecute el código sincrónico,
• Cuando encuentre una tarea de macro asincrónica, coloque la tarea de macro asincrónica en la cola de tareas de macro,
• Cuando encuentre una microtarea asincrónica, colóquela en la cola de microtarea.
• Una vez ejecutados todos los códigos sincrónicos, las microtareas asincrónicas se transfieren de la cola al hilo principal para su ejecución.
• Una vez ejecutada la microtarea, la macrotarea asincrónica se transfiere de la cola al hilo principal para su ejecución.
• Continúe en bucle hasta que se ejecuten todas las tareas.

30. ¿Cuáles son las operaciones comunes de DOM?

• crear nodo
  • createElement crea un nuevo elemento y acepta un parámetro, que es el nombre de la etiqueta del elemento que se creará.
• nodo de consulta
  • querySelector Pase cualquier cssselector válido para seleccionar un solo DOMelemento (el primero) Si no hay ningún elemento especificado en la página, regresenull
  • querySelectorAll devuelve una lista que contiene todos Elementlos nodos coincidentes en el subárbol de nodos, o una lista de nodos vacía si no hay coincidencias
• actualizar nodo
  • InnerHTML no solo puede modificar DOMel contenido de texto de un nodo, sino también HTMLmodificar directamente DOMel subárbol dentro del nodo a través de fragmentos.
  • texto interno
  • estilo dom objeto.estilo.estilo propiedad = ''
• agregar nodo
  • HTML interno
  • appendChild agrega un nodo secundario al último nodo secundario del nodo principal
  • insertBefore (nuevo dom, objeto dom especificado) inserta el nodo secundario delante de la posición especificada
  • setAttribute agrega un nodo de atributo al elemento especificado y cambia el valor del atributo si el atributo ya existe en el elemento
• Eliminar nodo
  • removeChild obtiene el nodo principal, el objeto dom del nodo que se eliminará. padre.removeChild(niño)

31. Cuénteme sobre su comprensión de BOM, ¿qué sabe sobre los objetos BOM comunes?

BOM(Modelo de objetos del navegador), el modelo de objetos del navegador, proporciona objetos que interactúan con la ventana del navegador independientemente del contenido.

Todo el contenido del navegador se puede ver como DOMy todo el navegador se puede ver como BOM.

Objeto de lista de materiales:

• ventana: Bomel objeto principal es windowque representa una instancia del navegador. En el navegador, windowun objeto tiene una doble función como interfaz para la ventana del navegador y como objeto global.
• ubicación: obtener información de la dirección URL
• navegador: el objeto se utiliza principalmente para obtener las propiedades del navegador y distinguir el tipo de navegador.
• pantalla: lo que se guarda es puramente información de capacidad del cliente, es decir, la información que el cliente muestra fuera de la ventana del navegador, como el ancho y la altura de los píxeles.
• URLhistorial: se utiliza principalmente para operar el historial del navegador , puede pasar parámetros hacia adelante, hacia atrás o al URLsalto especificado

32. ¿Cuál es la diferencia entre BOM y DOM?

• BOM (Browser Object): métodos y objetos que interactúan con el navegador.
  • BOM es el modelo de objetos del navegador, se refiere a 将浏览器当作一个对象tratar, este objeto define principalmente los métodos e interfaces para interactuar con el navegador.
  • El núcleo de BOM es la ventana, y el objeto de ventana tiene una doble función: no solo es una interfaz para que js acceda a la ventana del navegador, sino también un objeto global (Global).
  • Esto significa que cualquier objeto, variable y función definida en la página web existirá como propiedad o método del objeto global.
• DOM (Document Object Model): métodos e interfaces para procesar contenido web
  • DOM es el modelo de objetos de documento, que se refiere a tratar un documento como un objeto, que define principalmente el contenido y la interfaz para procesar páginas web.

33. ¿Cómo solucionar el problema entre dominios?

Comprenda la política del mismo origen: el mismo origen significa que " protocolo + nombre de dominio + puerto " son iguales. Es la función de seguridad principal y más básica del navegador. Si falta la política del mismo origen, el navegador vulnerable a XSSataques CSRFcomo .

• Dominio cruzado a través de jsonp
• proxy nginx entre dominios
• middleware nodejs entre dominios
• El backend establece el nombre del dominio de seguridad en la información del encabezado.
• proxy frontal

34. ¿Cómo cargar js de forma asincrónica?

• Establezca la ``propiedad async="async"(una vez que el script esté disponible, se ejecutará de forma asincrónica)
• Crear dinámicamente script DOM:document.createElement('script');
• XmlHttpRequestinyección de guión
• Cargar bibliotecas de forma asincrónicaLABjs
• cargador de módulosSea.js

35. ¿Qué operaciones provocarán pérdidas de memoria?

Pérdida de memoria: la pérdida de memoria de JavaScript significa que el objeto todavía existe cuando no es necesario usarlo, por lo que la memoria ocupada no se puede usar ni reciclar.

• varvariable global no declarada con
• función de cierre ( Closures)
• Referencia circular (dos objetos se refieren entre sí)
• registro de consola ( console.log)
• DOMEliminar elementos que tengan eventos vinculados ( IE)
• setTimeoutUsar una cadena como primer parámetro en lugar de una función provocará una pérdida de memoria
• 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收

36.XML和JSON的区别？

• 数据体积：JSON数据体积更小
• 数据交互：JSON与JavaScript得交互更加方便，更容易被解析，更好的数据传输
• 传输速度：JSON传输速度快
• 数据描述：JSON对数据的描述相比XML较差

37.说说你对递归得理解？

递归： 在数学与计算机科学中，是指在函数的定义中使用函数自身的方法

38.说说你对函数式编程的理解？优缺点？纯函数，高阶函数，柯里化

主要的编程范式有三种：命令式编程，声明式编程和函数式编程

函数式编程： 更加强调程序执行的结果而非执行的过程，简单来讲，就是要把过程逻辑写成函数，定义好输入参数，只关心它的输出结果

纯函数： 纯函数是对给定的输入返还相同输出的函数，并且要求你所有的数据都是不可变的，即纯函数=无状态+数据不可变

• 函数内部传入指定的值，就会返回确定唯一的值
• 不会造成超出作用域的变化，例如修改全局变量或引用传递的参数

高阶函数： 是以函数作为输入或者输出的函数被称为高阶函数

柯里化： 把一个多参数函数转化成一个嵌套的一元函数的过程

优点：

• 更好的管理状态
• 更简单的复用
• 减少代码量，提高维护性

缺点：

• 性能：函数式编程相对于指令式编程，性能绝对是一个短板，因为它往往会对一个方法进行过度包装，从而产生上下文切换的性能开销
• 资源占用：在 JS 中为了实现对象状态的不可变，往往会创建新的对象，因此，它对垃圾回收所产生的压力远远超过其他编程方式
• 递归陷阱：在函数式编程中，为了实现迭代，通常会采用递归操作

39.Javascript中如何实现函数缓存？函数缓存有哪些应用场景？

函数缓存，就是将函数运算过的结果进行缓存

实现方式： 实现函数缓存主要依靠闭包、柯里化、高阶函数

应用场景：

• 对于昂贵的函数调用，执行复杂计算的函数
• 对于具有有限且高度重复输入范围的函数
• 对于具有重复输入值的递归函数
• Para una función pura, es decir, una función que devuelve el mismo resultado cada vez que se llama con una entrada específica

40. ¿Comprensión de JSON?

JSON (Notación de objetos JavaScript) es un formato ligero de intercambio de datos.
Se basa en un subconjunto de JavaScript. El formato de datos es simple, fácil de leer y escribir y ocupa menos ancho de banda
{'age':'12', 'name':'back'}

41. ¿Cuál es la diferencia entre document.write e internalHTML?

document.write solo puede volver a dibujar la página completa.
InnerHTML puede volver a dibujar parte de la página.

42. ¿Explique la política del mismo origen de JavaScript?

Concepto: La política del mismo origen es una secuencia de comandos del cliente (especialmente Netscape Navigator2.0, cuyo propósito es evitar que un documento o secuencia de comandos se cargue desde múltiples fuentes diferentes. La política del mismo origen
aquí se refiere a: el mismo protocolo, nombre de dominio y puerto, la misma política de origen es un protocolo de seguridad,
lo que significa que un script solo puede leer las propiedades de ventanas y documentos de la misma fuente.

43. ¿Introducir cierres y escenarios comunes de cierres?

• Un cierre es una función que tiene acceso a variables en el alcance de otra función. Una forma común de crear un cierre es crear otra función dentro de una función.
• El objetivo principal del uso de cierres es diseñar métodos y variables privados. La ventaja de los cierres es que pueden evitar la contaminación variable. La desventaja es que los cierres permanecerán en la memoria y aumentarán el uso de la memoria. El uso inadecuado puede causar fácilmente pérdidas de memoria. En js, las funciones son cierres y solo las funciones tienen el concepto de alcance.
• Los cierres tienen tres propiedades:
  • Anidar funciones dentro de funciones
  • Las funciones internas pueden referirse a parámetros y variables externos.
  • Los parámetros y variables no se recolectan como basura.
• Beneficios de los cierres: se puede lograr la encapsulación y el almacenamiento en caché;
• La desventaja de los cierres es que residen en la memoria, lo que aumentará el uso de la memoria y el uso inadecuado provocará pérdidas de memoria.
• Escenario de aplicación:
  • Estrangulamiento antivibración común
  • Los cierres se pueden utilizar para JavaScriptsimular el alcance a nivel de bloque en
  • Los cierres se pueden utilizar para crear variables privadas en objetos.

44. ¿Mecanismo de recuperación de memoria (basura) de Javascript?

• El recolector de basura descubrirá la memoria que ya no se usa de vez en cuando y luego la liberará.
• Método de marcar y barrer (marcar y barrer) ,
  • Este es el método de recolección de basura más común en JavaScript. Cuando una variable ingresa al entorno de ejecución, como una variable declarada en una función, el recolector de basura la marca como "entrando al entorno" y marcada como "saliendo del entorno".
  • El recolector de basura marcará todas las variables almacenadas en la memoria en tiempo de ejecución y luego eliminará las variables en el entorno y las variables (cierres) a las que hacen referencia las variables en el entorno.
• conteo de referencia
  • Las pérdidas de memoria suelen ocurrir en versiones inferiores de IE y muchas veces se debe a que utiliza el recuento de referencias para la recolección de basura. La estrategia del recuento de referencias es rastrear y registrar el número de veces que se utiliza cada valor. Cuando se declara una variable y se asigna un tipo de referencia a la variable, el número de referencias al valor aumenta en 1. Si el valor de la variable se convierte en otra, entonces el número de referencias a este valor se reduce en 1. Cuando el número de referencias a este valor se convierte en 0, significa que no hay ninguna variable en uso y no se puede acceder a este valor. Por lo tanto, el espacio que ocupa se puede recuperar, de modo que el recolector de basura estará en Al ejecutar, limpie el espacio ocupado por el valor cuyo recuento de referencia es 0.
• En IE, aunque los objetos JavaScript se recolectan como basura mediante marcado y limpieza, los objetos BOM y DOM se recolectan como basura mediante el conteo de referencias, lo que significa que mientras BOM y DOM estén involucrados, se producirán problemas de referencia circular.

45. ¿Escribir la suma de 1 a 100 en js de forma recursiva?

function add(num1, num2) {
	const num = num1 + num2;
    if(num2 === 100) {
        return num;
	} else {
	    return add(num, num2 + 1)
    }
}
var sum = add(1, 2);              

46. ​​​​Cola de eventos (microtarea macrotarea)

Se puede dividir en cola de micro tareas (micro tareas) y cola de macro tareas (macro tareas).

Las microtareas generalmente se ejecutan antes que las macrotareas, y solo hay una cola de microtareas y puede haber varias colas de macrotareas . Además, nuestros eventos comunes de clic y teclado también pertenecen a tareas macro.

Echemos un vistazo a las macrotareas comunes y las microtareas comunes.

Tareas macro comunes:

• establecerTiempo de espera()
• establecerintervalo()
• establecerInmediato()

Microtareas comunes:

• promesa.entonces()、promesa.catch()
• nuevo Observador de mutaciones()
• proceso.nextTick()

La diferencia esencial entre microtareas y macrotareas.

• Características de las tareas macro : hay tareas asincrónicas claras que deben ejecutarse y volver a llamarse; se requiere soporte para otros subprocesos asincrónicos.
• Características de Microtask : no hay una tarea asincrónica clara para ejecutar, solo devolución de llamada; no se requiere ningún otro soporte de subprocesos asincrónicos.

setTimeout(function () {
    console.log("1");
}, 0);
async function async1() {
    console.log("2");
    const data = await async2();
    console.log("3");
    return data;
}
async function async2() {
    return new Promise((resolve) => {
        console.log("4");
        resolve("async2的结果");
    }).then((data) => {
        console.log("5");
        return data;
    });
}
async1().then((data) => {
    console.log("6");
    console.log(data);
});
new Promise(function (resolve) {
    console.log("7");
  resolve()
}).then(function () {
    console.log("8");
});

// 2 4 7 5 8 3 6 async2的结果 1

43.async/await, Generador

async es una función que se ejecuta de forma asincrónica y devuelve implícitamente una Promesa como resultado. Es el azúcar sintáctico de la función Generador, y la función Generador se ha mejorado.
Mejorar:

• Ejecutor incorporado, no es necesario ejecutar manualmente el método next().
• mejor semántica
• Aplicabilidad más amplia: el módulo co acepta que el comando de rendimiento solo puede ser seguido por funciones Thunk u objetos Promise, mientras que el comando await de funciones asíncronas puede ser seguido por objetos Promise y tipos primitivos de valores (números, cadenas y valores booleanos). , pero esto se convertirá automáticamente en un objeto Promise resuelto inmediatamente).
• El valor de retorno es Promise, que es más conveniente que el objeto Iterador devuelto por la función Generador y se puede llamar directamente usando el método then ().
• async devuelve implícitamente Promise como una función de resultado, por lo que se puede entender simplemente que cuando se ejecuta la función detrás de await, await generará una microtarea (Promise.then es una microtarea).

Los generadores son un nuevo concepto introducido por ES6 que permiten suspender y reanudar el estado de funciones durante su ejecución. Al function*declarar una función Generador, puede usar la palabra clave en el cuerpo de la función yieldpara generar un estado y suspender la función hasta la siguiente llamada. La función Generador devuelve un objeto iterable y next()el valor de estado del generador actual se puede obtener a través del método. El uso de la función Generador puede implementar operaciones asincrónicas de manera más simple, evitando los problemas causados ​​por el anidamiento de devoluciones de llamadas.

48. JavaScript es de un solo subproceso, los navegadores son multiproceso

• Se crea un proceso de renderizado cada vez que se abre una nueva página web.
• El proceso de renderizado es multiproceso.
• Hilo de representación GUI responsable de la representación de la página
• El hilo del motor JavaScript responsable de la ejecución de JavaScript.
• El subproceso activado por eventos responsable del bucle de eventos del navegador. Tenga en cuenta que esto no forma parte de la gestión de subprocesos del motor JavaScript.
• El hilo de activación de tiempo responsable del temporizador, el intervalo de tiempo inferior a 4 ms en setTimeout se cuenta como 4 ms
• Hilo de solicitud http asincrónico responsable de XMLHttpRequest
• El hilo de representación de la GUI y el hilo del motor de JavaScript son mutuamente excluyentes
• JavaScript de un solo subproceso sirve para evitar conflictos de representación DOM. Los trabajadores web admiten subprocesos múltiples, pero los trabajadores web no pueden acceder a objetos de ventana, objetos de documentos, etc.

49. Habla del problema de la pérdida de precisión en los números de Javascript, ¿cómo solucionarlo?

Ejemplo: 0,1+0,2===0,3 =>falso implica el estándar IEE754

causas del problema:

• Para almacenar números de punto flotante de doble precisión, la computadora primero debe convertir el número decimal a notación científica binaria, y luego la computadora usa sus propias reglas {bit de signo + (bit de exponente + desplazamiento binario del exponente) + parte decimal} para almacenar la notación científica binaria
• Debido a que hay un límite en el número de dígitos (64 bits) al almacenar, y algunos números decimales de punto flotante aparecerán bucles infinitos cuando se conviertan a números binarios, lo que provocará operaciones de redondeo binario (0 redondeando 1), cuando se conviertan a decimal causar error de cálculo

resolver:

• Utilice el método toFixed(): convierta el número de punto flotante en una forma de cadena de un número específico de decimales
• Usando bibliotecas de terceros Math.js,BigDecimal.js

50. Cuénteme sobre su comprensión de las soluciones modulares, como ¿qué son CommonJS, AMD, CMD y ES Module?

• CommonJS carga la sincronización del módulo, se usa principalmente en el lado del servidor, se basa principalmente en require y exports para lograr la modularización, requiere que los usuarios carguen módulos y exports se usa para exportar módulos.
• Definición de módulo asíncrono AMD, que resuelve el problema de gestión de archivos y carga de módulos en el entorno del navegador. A diferencia de commonjs, AMD carga módulos de forma asincrónica
• CMD define el módulo general, cmd también resuelve la modularización del lado del navegador, y AMD se diferencia en que utiliza un método sincrónico para cargar módulos, confiando principalmente en require y define para lograr la modularización.
• ES Module是es6新增的模块化方案，支持在浏览器和node.js使用，并且已经得到了嵌入式运行环境的支持，与commonjs和amd不同，ES Module是静态加载它使用import和export关键字实现模块化

51.用过哪些设计模式？

• 工厂模式：
  • 工厂模式解决了重复实例化的问题，但还有一个问题,那就是识别问题
  • 主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字
• 构造函数模式
  • 使用构造函数的方法，即解决了重复实例化的问题，又解决了对象识别的问题，该模式与工厂模式的不同之处在于,直接将属性和方法赋值给 this对象;

52.javascript有哪些方法定义对象?

• 对象字面量： var obj = {}; 原型是Object.prototype
• 构造函数： var obj = new Object();
• Object.create(): var obj = Object.create(Object.prototype);

53.说说你对promise的了解

54.web开发中会话跟踪的方法有哪些？

• cookie
• session
• url重写
• 隐藏input
• ip地址

55.介绍js有哪些内置对象？

• Object 是 JavaScript 中所有对象的父对象
• 数据封装类对象：Object、Array、Boolean、Number 和 String
• 其他对象：Function、Arguments、Math、Date、RegExp、Error

56.eval是做什么的？

• 它的功能是把对应的字符串解析成JS代码并运行
• 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）
• 由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')')

57.parseInt函数，[“1”, “2”, “3”].map(parseInt) 答案是多少？

La función parseInt recibe dos parámetros: el primer parámetro es la cadena que se va a analizar y el segundo parámetro es un número base opcional.

Respuesta: [1, NaN, NaN]

Analizar gramaticalmente:

• ['1','2','3'].map(parseInt) pasará el índice como segundo parámetro a través de la conveniente matriz de map, por lo que el segundo parámetro 1 de parseint(2,1) no es legal. número, paeseint(3,2) aquí porque 3 no es un número binario

58. ¿Qué significa "usar estricto" en código javascript? Habla sobre las restricciones del modo estricto.

• use strictEs un ECMAscript 5modo de operación agregado (estricto), que hace que Javascript se ejecute bajo condiciones más estrictas, hace que la JScodificación sea más estandarizada, elimina Javascriptalgunas gramáticas irrazonables e imprecisas y reduce algunos comportamientos extraños.

límite:

• Las variables deben declararse antes de poder usarse.
• Los parámetros de función no pueden tener atributos con el mismo nombre
• no se puede utilizar la declaración with
• Prohibir que esto apunte a la ventana.

59. ¿Cuáles son las formas de carga diferida de js?

• Establezca la ``propiedad defer="defer"(el script se ejecutará cuando la página termine de analizarse)
• Crear dinámicamente script DOM:document.createElement('script');
• XmlHttpRequestinyección de guión
• herramienta de carga diferidaLazyLoad

60. ¿Cuál es la diferencia entre sincrónico y asincrónico?

• Sincronización: el navegador accede a la solicitud del servidor, el usuario puede ver que la página se actualiza y la solicitud se reenvía. Una vez completada la solicitud, la página se actualiza, aparece nuevo contenido, el usuario ve el nuevo contenido y procede a el siguiente paso
• Asíncrono: el navegador accede a la solicitud del servidor, el usuario opera normalmente y el backend del navegador realiza la solicitud. Una vez completada la solicitud, la página no se actualizará, aparecerá contenido nuevo y el usuario verá el contenido nuevo.

61. Nuevas características de ES6

• Se agregó el comando letand constpara declarar variables.
• Cadenas de plantilla agregadas (para JavaScriptinterpolación de cadenas simple)
• función de flecha
• for-of(Se utiliza para iterar sobre datos, como valores en una matriz).
• argumentsLos objetos se pueden sustituir perfectamente por parámetros indeterminados y parámetros predeterminados.
• operador de extensión, asignación desestructurante
• ES6La incorporación promisede objetos a la especificación proporciona Promiseobjetos nativos.
• Se agregó un alcance a nivel de bloque; letel comando en realidad aumenta el alcance a nivel de bloque.
• También existe el concepto de introducir modulemódulos.
• generador generador
• Clases y herencia

62. ¿Cuál es la diferencia entre let, const y var?

通过const声明的对象属性不可修改！！！

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-nUkDO8Ka-1686967105046) (C:\Users\lenovo\AppData\Roaming\Typora \typora-user-images\ 1684154487983.png)]

63. ¿Cuál es la diferencia entre let y var?

• letNo hay promoción variable en el comando, si se usa letantes , causará un error
• Si hay comandos lety consten el área del bloque, formará un ámbito envolvente
• No se permiten declaraciones duplicadas, por lo tanto, los parámetros no se pueden redeclarar dentro de una función.

64. ¿Qué pasa si new es una función de flecha?

La función de flecha se propuso en ES6, no tiene prototipo, no tiene su propio puntero this y no puede usar el parámetro de argumentos, por lo que no se puede crear una nueva función de flecha.

65. ¿Cuál es la diferencia entre una función de flecha y una función ordinaria?

• Las funciones de flecha son más concisas que las funciones ordinarias
• Las funciones de flecha no tienen su propio esto.
• Esto heredado por la función de flecha nunca cambiará
• Las funciones de flecha no se pueden utilizar como constructores.
• Las funciones de flecha no tienen argumentos
• llamar, vincular, aplicar no puede cambiar el punto de este

66. El papel del operador de spread

Operador de propagación: (…)

Operador de extensión de objeto: se utiliza para eliminar todas las propiedades transitables en el objeto de parámetro y copiarlas al objeto actual.

Operador de expansión de matriz: una matriz se puede convertir en una secuencia de parámetros separados por comas y solo se puede expandir una capa de matriz a la vez

67. Sintaxis de plantilla y procesamiento de cadenas en ES6

Antes de es6, las cadenas se empalmaban usando '+', lo cual es muy problemático

Uso de la plantilla de caracteres es6: `` combinado con ${nombre de variable}

var name='lc'
var age = 27
var address = 'zg'
var information = `my name ${name},I am ${age} years old this year,I'm from ${address}`

68. La diferencia entre map y forEach

• forEachEl método es el método más básico, que es transversal y cíclico. Hay 3 parámetros por defecto: contenido de la matriz a atravesar item, índice de la matriz indexy matriz actual a atravesar Array. La matriz original no se cambiará.
• mapmétodo, el uso básico es forEachel mismo, pero diferente, devolverá una nueva matriz, por lo que debe haber returnun valor en la devolución de llamada; si no, devolveráundefined

69. La diferencia entre la animación Js y la animación CSS y la implementación correspondiente.

• Ventajas de las animaciones CSS3
  • El rendimiento será ligeramente mejor y el navegador optimizará CSS3un poco la animación.
  • El código es relativamente simple.
• defecto
  • No es lo suficientemente flexible en el control de la animación.
  • mala compatibilidad
• JavaScriptLa animación simplemente compensa estas dos deficiencias: tiene una gran capacidad de control y se puede controlar y transformar en un solo cuadro. Al mismo tiempo, está bien escrita, es totalmente compatible y tiene funciones poderosas IE6. Para algunas animaciones con controles complejos, javascriptsu uso será más confiable. Al implementar algunos pequeños efectos interactivos, piénselo más CSS.

70. ¿Qué es el trago?

• gulpEs una herramienta de construcción de código basada en flujo en el proceso de desarrollo front-end y una poderosa herramienta para construir proyectos de automatización; no solo puede optimizar los recursos del sitio web, sino que también muchas tareas repetitivas se pueden completar automáticamente con las herramientas correctas durante el proceso de desarrollo.
• Características de trago:
  • Facilidad de uso : con una estrategia de código sobre configuración, gulp hace que las tareas simples sean simples y las tareas complejas sean manejables.
  • Construya rápidamente Aprovechando Node.jsel poder de los flujos, puede crear proyectos rápidamente y reducir IOlas operaciones frecuentes.
  • Fácil de aprenderAPI Dominar con un mínimo gulpesfuerzo Sin esfuerzo de construir: como una serie de canales de transmisión

71. Las distintas etapas del evento, addEventListener

fase de captura – fase objetivo – fase de burbujeo

• Por tanto, la diferencia entre establecer el tercer parámetro de addEventListener en verdadero y falso es muy clara.
  • trueIndica que el elemento responde al evento durante la "fase de captura" del evento (al pasar del exterior al interior)
  • falseIndica que el elemento responde a eventos durante la "fase de burbujeo" del evento (cuando pasa de adentro hacia afuera)默认false

72. Matriz de alguna función y de cada función.

everyLa función toma una función como argumento, que se aplica a cada elemento de la matriz por turno. La función debería devolver un valor booleano:

• Si devuelve true, significa que el elemento actual cumple la condición y continúa verificando el siguiente elemento.
• Si regresa false, significa que el elemento actual no cumple con la condición y everyla función regresará inmediatamente falsesin verificar los siguientes elementos

someLa función toma una función como argumento, que se aplica a cada elemento de la matriz por turno. La función debería devolver un valor booleano:

• Si devuelve true, significa que el elemento actual cumple con la condición y somela función regresará inmediatamente truesin verificar los siguientes elementos.
• Si devuelve false, significa que el elemento actual no cumple la condición y continúa verificando el siguiente elemento.

73. Matriz fuera de servicio

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    arr.sort(() => Math.random() - 0.5)

74. Cómo renderizar decenas de miles de datos sin quedarse atascado en la interfaz, requestAnimationFrame

requestAnimationFrameEs una API proporcionada por los navegadores para optimizar las animaciones de las páginas y evitar tartamudeos, olores extraños y caídas de fotogramas. Puede notificar al navegador que llame a una función específica para actualizar la animación antes del próximo rediseño del navegador, de modo que la animación sea más fluida y natural.

Proceso de implementación: si hay 10,000 datos, también debemos establecer la cantidad de piezas renderizadas cada vez, la cantidad total de renderizaciones y la cantidad actual de renderizaciones. Primero, la función de renderizado (bucle) se ejecuta automáticamente una vez y la condición se usa para juzgar si el tiempo de renderizado actual es menor que el tiempo total de renderizado para continuar con la ejecución. Si se cumplen las condiciones, llame a window.requestAnimationFrame (función de renderizado específica agregar); se crea una etiqueta vacía en la función agregar para recibir cada representación. La estructura reduce el número de reflujos, el número actual de representaciones +1 y continúa ejecutando la función de bucle.

// 插入十万条数据
        const total = 100000
        // 一次插入 20 条，如果觉得性能不好就减少
        const once = 20
        // 渲染数据总共需要几次
        const loopCount = total / once
        // 当前渲染次数
        let countOfRender = 0
        let ul = document.querySelector("ul");
        function add() {
    
    
            // 优化性能，插入不会造成回流  createDocumentFragment是一个指向空DocumentFragment对象的引用。下面先将20条插入空元素避免回流
            const fragment = document.createDocumentFragment();
            for (let i = 0; i < once; i++) {
    
    
                const li = document.createElement("li");
                li.innerText = Math.floor(Math.random() * total);
                fragment.appendChild(li);
            }
            // 一次性添加dom，减少回流次数
            ul.appendChild(fragment);
            countOfRender += 1;  
            loop();
        }
        function loop() {
    
    
            if (countOfRender < loopCount) {
    
    
                window.requestAnimationFrame(add);
            }
        }
        loop();

75. Cómo conseguir todas las casillas de verificación en la página

 var domList = document.getElementsByTagName(‘input’)
 var checkBoxList = [];
 var len = domList.length;　　//缓存到局部变量
 while (len--) {
    
    　　//使用while的效率会比for循环更高
 　　if (domList[len].type == ‘checkbox’) {
    
    
     　　checkBoxList.push(domList[len]);、
 　　}
 }

76. Cómo agregar, eliminar, mover, copiar, crear y buscar nodos

Crea un nodo:

• createElement() crea un elemento concreto
• createDocumentFragment() crea un fragmento dom
• createTextNode() crea un nodo de texto

Agregar, quitar, reemplazar, insertar:

• appendChild() agrega
• removeChild() elimina
• reemplazarChild() reemplaza
• insertarAntes() Insertar

Encontrar:

• getElementsByTagName() //Por nombre de etiqueta
• getElementsByName() // Pasa el valor del atributo Nombre del elemento
• getElementById() //Por ID de elemento, unicidad

77.window.onload和$(documento).listo

• window.onload()El método consiste en esperar hasta que se carguen todos los elementos, incluidas las imágenes, de la página antes de poder ejecutarla.
• $(document).ready()Se DOMejecuta después de dibujar la estructura y no es necesario esperar hasta que se complete la carga.

78. La diferencia entre addEventListener() y adjuntoEvent()

• addEventListener()Es un método estándar que cumple con la especificación W3C; attachEvent()es un método no estándar para versiones inferiores de IE
• addEventListener()Admite la difusión y captura de eventos; - y attachEvent()solo admite la difusión de eventos
• addEventListener()En el primer parámetro de , no es necesario agregar el tipo de evento on; attachEvent()es necesario agregarlo'on'
• Si se vinculan varios eventos al mismo elemento, addEventListener()se ejecutarán secuencialmente de acuerdo con el orden de vinculación de eventos y attachEvent()se ejecutarán en orden inverso de acuerdo con el orden de vinculación de eventos.

79. Deduplicación de matrices

Utilice ES6 Set para eliminar duplicados (más comúnmente utilizado en ES6)

vararr = [1,2,2,2,3,3,3,3];

console.log(nuevo conjunto(arr))

deduplicación transversal

incluir, índice de

80. Determinar si dos objetos son iguales

Normalmente, a través de la comparación ==, no es posible juzgar si los objetos son iguales.

Primero debe convertirse en una cadena a través de JSON.stringify() y luego compararse

81. Estrangulamiento antivibración

Aceleración: si este evento se activará con frecuencia, la función de aceleración ejecutará la función de acuerdo con un cierto número 频率. No importa cuántas veces se active este evento en el medio, la frecuencia de ejecución de la función siempre es fija;

Antivibración: cuando se activa un evento, la función correspondiente no se activará inmediatamente, pero se activará 等待一定的时间(muy poco tiempo), cuando el evento se activa intensamente, la activación de la función se retrasará con frecuencia y solo después de esperar durante un período de tiempo, no se activará ningún evento, la función de respuesta realmente se ejecutará

82. ¿Cuáles son las formas de detectar la versión del navegador?

• de acuerdo anavigator.userAgent UA.toLowerCase().indexOf('chrome')
• Según windowel miembro del objeto.'ActiveXObject' in window

83. Especificación básica de javascript.

• No declares múltiples variables en la misma línea
• Utilice ===/!==para comparar true/falseo numérico
• Utilice un objeto literal en lugar de new Arrayesta forma
• No utilizar funciones globales.
• Switchla declaración debe tener defaultuna rama
• IfLas declaraciones deben usar llaves
• for-inLas variables en los bucles deben tener letun alcance explícito utilizando palabras clave para evitar la contaminación del alcance.

84. ¿Cuáles son las ventajas de npm e hilo, pnpm?

npm:

• npm es el administrador de paquetes que viene con Node.js, por lo que no es necesario instalar paquetes adicionales cuando se usa npm y puede usar una gran cantidad de paquetes de terceros. Los comandos de npm son fáciles de aprender y pueden satisfacer las necesidades de la mayoría de los proyectos.

hilo:

• Proporciona mejor rendimiento y velocidad, y puede descargar en paralelo al instalar paquetes, mejorando así la eficiencia de la instalación.
• El concepto de archivos de bloqueo se introduce para garantizar la coherencia de las versiones de los paquetes en el entorno de desarrollo y el entorno de producción, evitando así problemas causados ​​por versiones de paquetes incompatibles.
• Admite el modo fuera de línea. Si los paquetes requeridos ya están instalados en el proyecto, Yarn no necesita descargar los paquetes de Internet, sino que los usa directamente en el caché local.

pnpm:

• La mayor ventaja es ahorrar espacio en disco. pnpm solo instala un paquete en el proyecto.
• pnpm no necesita reinstalar todas las dependencias, pero instala incrementalmente cada proyecto y dependencia

85. ¿Cuáles son las razones del largo tiempo de carga de la página y cómo optimizarla?

razón:

• Una gran cantidad de solicitudes HTTP: durante el proceso de carga de la página, el navegador debe solicitar al servidor que obtenga recursos como HTML, CSS, JavaScript e imágenes de la página. Si hay demasiadas solicitudes, el tiempo de carga de la página se reducirá. más extenso. La velocidad de carga se puede optimizar reduciendo la cantidad de solicitudes HTTP, como combinando archivos CSS y JavaScript, comprimiendo imágenes, etc.
• Gran cantidad de código JavaScript: cuando el navegador descarga y analiza el código JavaScript, se bloqueará la representación de la página, lo que también hará que la página se cargue por más tiempo. Puede optimizar la velocidad de carga cargando el código JavaScript de forma asincrónica, cargándolo de forma diferida o dividiéndolo en varios archivos más pequeños.
• Mucho código CSS: al igual que JavaScript, el código CSS también bloqueará la representación de la página. Puede optimizar la velocidad de carga comprimiendo el código CSS, reduciendo el tamaño y la cantidad de archivos CSS y utilizando enlaces externos.
• Tiempo de respuesta prolongado del servidor: si el servidor tarda demasiado en responder, también puede hacer que la página tarde más en cargarse. El tiempo de respuesta del servidor se puede reducir actualizando el hardware del servidor, optimizando el código, etc.
• Estructura DOM irrazonable: si la estructura DOM de la página no es razonable, también hará que la página se cargue por más tiempo. Puede optimizar la velocidad de carga reduciendo la cantidad de nodos DOM, evitando el uso de diseño de tabla y usando CSS Sprite (Sprite).

mejoramiento:

• Comprima HTML, CSS, JavaScript, imágenes y otros recursos para reducir el tamaño del archivo.
• Combine archivos CSS y JavaScript para reducir la cantidad de solicitudes HTTP.
• Cargue el código JavaScript de forma asincrónica, cargue de forma diferida o divídalo en varios archivos más pequeños.
• Utilice la memoria caché del navegador para evitar descargas repetidas de recursos.
• Utilice enlaces externos o aceleradores CDN para acelerar la carga de recursos.
• Reduzca la cantidad de nodos DOM y evite el uso del diseño de tabla para optimizar la velocidad de representación de la página.

86. Operación de clonación DOM

Clon profundo (nodo de texto en el elemento clonado más todos los nodos del elemento descendiente),

Clon superficial (clonación del elemento en sí, no clonación de nodos de texto ni nodos descendientes)

cloneNode() acepta un parámetro que opcionalmente puede ser verdadero o falso. True para clonar el elemento y todos sus nodos secundarios. Falso significa clonar el elemento sin incluir sus nodos secundarios

87. Modo caja de arena

El modo Sandbox es un patrón de diseño de software que se utiliza para crear un entorno de ejecución aislado y protegido, aislar el código para que no interactúe con el mundo exterior y limitar los recursos y funciones a los que el código puede acceder. En JavaScript, el modo sandbox generalmente se implementa encapsulando código en una función anónima y llamándola inmediatamente. Esto crea un ámbito privado en el que las variables no se filtran al ámbito global, evitando colisiones de nombres de variables y contaminación de datos.

Aunque los cierres y los patrones de sandbox son conceptos diferentes, se pueden combinar entre sí para lograr necesidades de programación de nivel superior. Por ejemplo, los cierres se pueden usar para crear una zona de pruebas que limite el alcance de las variables a las que puede acceder una función. Esta combinación da como resultado un código más limpio, seguro y fácil de mantener.

88. ¿Cuál es la diferencia entre string y tostring?

La diferencia entre los métodos string y ToString es que hacen cosas diferentes.

string es un tipo de datos utilizado para almacenar y manipular cadenas y ToString es un método genérico utilizado para convertir datos en cadenas. Cuando necesitamos convertir algunos datos de tipo que no son cadenas en una cadena, podemos usar el método ToString para lograrlo.

toString toma un parámetro. Puede convertir cadenas numéricas en números base correspondientes.

string可以将任何数据类型转化为字符串，toString不可以转换null和undefined

Método de almacenamiento de datos 89.js

• Cookie: la cookie es un mecanismo para almacenar datos en el lado del navegador, que puede admitir el almacenamiento de datos a largo plazo y los datos se pueden compartir entre diferentes páginas. Las cookies se pueden manipular utilizando JavaScript a través de la propiedad document.cookie.
• Almacenamiento web: el almacenamiento web proporciona dos mecanismos, almacenamiento de sesión y almacenamiento local, los cuales son nuevos en HTML5. El almacenamiento de sesión se utiliza para el almacenamiento temporal de datos de la sesión y los datos se borrarán después de que el usuario cierre el navegador, mientras que el almacenamiento local puede almacenar los datos durante mucho tiempo, incluso si el usuario cierra el navegador, no se perderán. Estos dos mecanismos de almacenamiento se pueden manipular a través de los objetos window.sessionStorage y window.localStorage usando JavaScript.
• IndexedDB: IndexedDB es un mecanismo para almacenar grandes cantidades de datos estructurados en el navegador, que es similar a una base de datos local. IndexedDB proporciona una API asincrónica que puede crear un espacio de almacenamiento de objetos en el navegador y almacenar datos de pares clave-valor en él. Este mecanismo de almacenamiento se puede manipular a través de la API IndexedDB usando JavaScript.
• SQL web: obsoleto

90.cookie, sesión, diferencia simbólica

• Cookie: la cookie es un mecanismo para almacenar datos del lado del usuario, que puede almacenar información e identificación simples del usuario. El servidor configura una cookie y la envía al cliente, y el cliente la llevará automáticamente en la siguiente solicitud, para verificar la identidad del usuario o realizar otras operaciones. La desventaja de las cookies es que pueden enfrentar problemas de seguridad, porque las cookies se almacenan en el lado del cliente y son vulnerables a ataques de robo o falsificación.
• Sesión: la sesión es un mecanismo para almacenar datos en el lado del servidor, que puede guardar información y estado complejos del usuario, y se utiliza para verificar y rastrear la identidad del usuario. El servidor utiliza un ID de sesión único para interactuar con el cliente, evitando así problemas de seguridad. Sin embargo, Session también tiene algunas desventajas, como una mayor presión sobre la carga del servidor.
• Token: el token es una cadena cifrada que contiene la identidad del usuario y la información de permisos, generalmente generada por el servidor y enviada al cliente. El cliente utiliza Token en lugar de Cookie o Sesión para la autenticación y transmisión de datos. La ventaja de Token es que puede reducir la presión del servidor, reducir el tráfico y los retrasos de la red y reducir los problemas de seguridad. La desventaja de Token es que necesita garantizar la seguridad de su cifrado y transmisión.

La cookie es adecuada para autenticación simple y almacenamiento de datos, la sesión es adecuada para escenarios que requieren administración de estado compleja y seguimiento de usuarios, y Token es más adecuado para la transmisión de datos multiplataforma, como sistemas distribuidos y aplicaciones.

91.js convierte decimal a binario

• Usando toString()el método y el parámetro 2:

let num = 123
num.toString()  //'123'
num.toString(2)  //'1111011'

92. Cómo hacer que varias funciones asincrónicas se ejecuten secuencialmente

• Utilice el método Promisede thenpara encadenar tareas asincrónicas.

• Utilice async/awaitla palabra clave.

93.mecanismo de eventos settimeout

setTimeout()La implementación del método se basa en el mecanismo de eventos, que agregará la función de devolución de llamada a la cola de eventos. Cuando llega el tiempo de retraso especificado, la función de devolución de llamada se envía al final de la cola de eventos y espera la ejecución cuando el motor JavaScript está inactivo.

Debido a la naturaleza de subproceso único de JavaScript y al mecanismo de bucle de eventos, múltiples tareas pueden bloquear la cola de eventos, lo que resulta en código asincrónico que no se puede ejecutar en el orden esperado. Necesitamos usar temporizadores de manera razonable para evitar esta situación.

Si el tiempo de retraso establecido es inferior a 4 milisegundos, el tiempo de retraso real puede ser mayor que el valor establecido, porque los navegadores suelen utilizar el intervalo de tiempo mínimo de 4 milisegundos para ejecutar tareas del temporizador.

94. Bind se une varias veces seguidas y finalmente apunta a esto.

Mira el código primero:

function say() {
     
     
	alert(this.x);
};
var a = say.bind({
     
     x: 1});
var b = a.bind({
     
     x: 2});
b(); // 这里会输出1还是2呢？    答案：1

No importa cuántas veces use bind para vincular, el valor final de this de la función original está determinado por los parámetros pasados ​​en el primer enlace.

95. mep y conjunto

• Map: una colección iterable donde cada elemento consta de una clave y un valor correspondiente. MapLas claves pueden ser de cualquier tipo y los valores pueden ser de cualquier tipo, incluidas referencias a objetos y valores primitivos.
• Set: una colección que contiene solo valores únicos; no se permiten duplicados. SetLos valores pueden ser de cualquier tipo, incluidas referencias a objetos y valores primitivos.

96. Carga de archivos grandes

1. Carga parcial: divida un archivo grande en varios archivos pequeños, cargue cada archivo pequeño por separado y finalmente realice una operación de fusión en el lado del servidor, lo que puede reducir el tiempo de carga y descarga, y una vez que la carga falla, solo la parte fallida necesita volver a cargarlo, sin volver a cargar el archivo completo.
2. Carga de reanudación del punto de interrupción: sobre la base de la carga de fragmentos, puede utilizar tecnología de almacenamiento local para registrar la información del fragmento cargado. Cuando la carga falla, puede continuar cargando el fragmento fallido de acuerdo con la información del fragmento cargado, para realizar http.
3. Carga de transmisión: en el método de carga tradicional, el archivo debe leerse completamente en la memoria antes de cargarlo, mientras que en la carga de transmisión, los archivos se leen y cargan uno por uno de acuerdo con el método de transmisión, lo que puede evitar leer el tamaño completo. archivo a la vez, reduciendo así el uso de memoria.
4. Carga comprimida: para ciertos tipos de archivos, como archivos de texto, imágenes, videos, etc., puede comprimirlos antes de cargarlos, lo que puede reducir el tamaño del archivo y acelerar la velocidad de carga.
5. Utilice el SDK para reanudar la carga después de un corte de energía: además de realizar la carga reanudable usted mismo, también puede utilizar algunos SDK de carga reanudable de terceros, como Qiniu y Alibaba Cloud, que proporcionan SDK relacionados, que pueden simplificar la implementación de archivos grandes. cargas.

97. La solución al retraso de clic de 300 milisegundos del terminal móvil Click

Causa: El navegador necesita esperar un momento (aproximadamente 300 milisegundos) para detectar si el usuario hizo clic o hizo doble clic.

• Usos FastClick: FastClick es un complemento de JavaScript que mejora la capacidad de respuesta de las aplicaciones web al eliminar los retrasos en los clics en los navegadores móviles. FastClick.attach(element)Para usar FastClick, solo necesita importar el archivo de la biblioteca después de cargar la página y vincularlo mediante el método en el elemento que debe vincularse al clic rápido .
• Uso touch 事件: si no desea utilizar bibliotecas o complementos de terceros, también puede simular clics rápidos a través de eventos táctiles nativos. Por ejemplo, se puede lograr una respuesta más rápida escuchando touchstartel evento en lugar del evento.click
• Configuración meta 标签: agregue la siguiente metaetiqueta a headla etiqueta de su archivo HTML para indicarle al navegador que no haga zoom en la página y que deshabilite los gestos de pellizcar y pellizcar, mejorando así la respuesta al clic:

98. Cómo juzgar que un objeto es un objeto vacío

Obtenga todos los nombres de atributos del objeto a través Object.keys(obj)del método y juzgue si el número de atributos es 0 para lograrlo.

let obj = {
     
     'name':'zs'}
Object.keys(obj).length     //1
let objs = {
     
     }
Object.keys(objs).length	//0

99. Métodos comunes de matriz

• push: Agrega uno o más elementos al final de la matriz y devuelve la nueva longitud.
• pop: Elimina y devuelve el último elemento de la matriz.
• shift: Elimina y devuelve el primer elemento de la matriz.
• unshift: Agrega uno o más elementos al comienzo de la matriz y devuelve la nueva longitud.
• concat: combina dos o más matrices y devuelve una nueva matriz. La matriz original no se modifica.
• join: convierte todos los elementos de la matriz en cadenas y concatenarlos con el delimitador especificado.
• slice: Devuelve un fragmento (copia superficial) de la matriz sin afectar la matriz original.
• splice: agregue o elimine elementos en la matriz para modificar la matriz original.
• sort: Ordena los elementos de la matriz. De forma predeterminada, se ordenan en orden ascendente de puntos de código Unicode. Puede pasar una función de devolución de llamada para implementar una clasificación personalizada.
• reverse: invierte el orden de los elementos de la matriz y cambia la matriz original.
• indexOf: Consulta la posición donde aparece el elemento por primera vez en la matriz; si se encuentra, devuelve su subíndice; de ​​lo contrario, devuelve -1.
• lastIndexOf: Desde el final de la matriz, consulta la posición de la última aparición del elemento en la matriz y devuelve su subíndice si se encuentra; de lo contrario, devuelve -1.
• filter: Devuelve una nueva matriz que consta de todos los elementos que cumplen las condiciones de la función de devolución de llamada, sin cambiar la matriz original.
• map: Devuelve una nueva matriz cuyos elementos son el resultado de aplicar la función de devolución de llamada a los elementos de la matriz original.
• reduce：累加器方法，对数组的每个元素（从左到右）执行一个回调函数，返回单个值。
• some：判断数组是否具有满足条件的值,有就返回true
• every：判断数组所有值是否都满足条件，都满足返回true
• forEach:循环数组

100.数组扁平化

• 使用递归
• 使用 reduce 方法：reduce 方法可以用来将数组中的每个元素累加到一个结果中
• 使用 flat 方法：
  • ES2019 中引入了数组的 flat 方法，可以将嵌套的数组扁平化成一维数组。
  • flat 方法只能够将嵌套的层数降至一维，如果需要将多维数组扁平化成一维数组，则需要传递一个大于等于嵌套层数的参数 arr.flat( Infinity ), Infinity 表示扁平化任何深度的嵌套数组

101.for…in 和 for … of区别

for…in 循环是用来遍历对象属性的，它可以枚举目标对象的所有可枚举属性，包括继承链上的属性，但遍历的顺序是不确定的

for…of 循环是用来遍历可迭代对象 (Iterable) 的，它可以遍历数组、字符串、Map、Set 等内置的可迭代对象，但不能遍历普通的对象，也不能遍历对象的属性

区别：

• for…in遍历数组返回下标，遍历对象返回键
• for…of遍历数组返回数据，不可以遍历普通对象

102.伪数组,伪数组转换为数组

伪数组是一种类数组对象，它具有类似数组的结构和特性，但并不是真正的数组。

在 JavaScript 中，常见的伪数组包括函数参数 arguments、DOM 元素集合 NodeList 和 HTMLCollection 等。

伪数组和数组区别：

• 伪数组没有数组的方法和属性（如 push、pop、length），不能使用数组相关的循环方法（如 forEach、map、reduce）等。但它们具有类数组的结构，可以通过下标来访问元素，并且拥有 length 属性

转换： Array.from() 方法或者扩展运算符

103.二维数组应用场景

• 游戏开发： 在游戏开发中，二维数组通常被用来表示游戏场景、地图、迷宫等
• Procesamiento de imágenes: en el procesamiento de imágenes, a menudo se utiliza una matriz bidimensional para representar los píxeles de una imagen, y cada píxel se puede representar mediante un valor de color.
• Computación numérica: en computación matemática, las matrices bidimensionales se utilizan a menudo para almacenar y manipular matrices.

---

Cinco, artículos de Vue

1. Cuénteme sobre su comprensión del modelo de desarrollo MVVM.

MVVM es un estilo de programación basado en la práctica que simplifica las interfaces de usuario . En el modelo de desarrollo convencional actual donde el front-end y el back-end están separados, la superioridad del modelo MVVM se refleja cada vez más. En comparación con el modelo MVC clásico, su encapsulación de módulos de programa resuelve la redundancia y la complejidad del front-end y el back-end. finalizar la interacción de información.

MVVM se divide en Modelo, Vista y ViewModel.
El modelo representa el modelo de datos, y los datos y la lógica empresarial se definen en la capa del modelo;
Vista representa la vista de la interfaz de usuario y es responsable de la visualización de los datos;
ViewModel es responsable de monitorear los cambios de datos en el modelo y controlar la actualización de la vista. y manejo de la interacción del usuario;
Modelo y Vista no tienen asociación directa, pero a través de ViewModel, existe una relación de enlace de datos bidireccional entre Modelo y ViewModel. Por lo tanto, cuando los datos en el Modelo cambian, se activará la actualización de la capa de Vista y los datos modificados en la Vista debido a la interacción del usuario también se sincronizarán en el Modelo.
Este modo realiza la sincronización automática de datos entre el Modelo y la Vista, por lo que los desarrolladores solo necesitan centrarse en las operaciones de mantenimiento de datos en lugar de manipular dom ellos mismos.

Por qué utilizar MVVM: 低耦合, 可复用, 独立开发,可测试

2. ¿Cuál es la diferencia entre v-if y v-show?

• medio
  • v-if es agregar o eliminar dinámicamente elementos DOM al árbol DOM;
  • v-show es controlar la visualización y ocultación configurando el atributo de estilo de visualización del elemento DOM;
• compilar
  • v-if es vago, no hace nada si la condición inicial es falsa; sólo inicia la compilación local cuando la condición se vuelve verdadera por primera vez;
  • v-show se compila bajo cualquier condición, independientemente de si la primera condición es verdadera o no, y luego se almacena en caché y se retiene el elemento DOM;
• Consumo de rendimiento:
  • v-if tiene mayor consumo de conmutación;
  • v-show tiene un costo de renderizado inicial más alto
• La directiva v-if se puede aplicar al elemento contenedor de plantilla, v-show no la admite

3. $La$ diferencia$entre$$ruta$$y$$enrutador$

• $ ruta es un "objeto de información de enrutamiento", que incluye parámetros de información de enrutamiento como ruta, parámetros, hash, consulta, ruta completa, coincidencia, nombre, etc.
• $router es una "instancia de enrutamiento" que desea navegar a diferentes objetos URL, incluidos métodos de salto de enrutamiento, funciones de enlace, etc. Utilice empujar, reemplazar, ir, retroceder y otros métodos para realizar el salto entre páginas.

4.comando personalizado de vue

directiva de vista

vue2

局部注册: opción directiva

directives: {
    'focus': {
      bind(el, binding, vnode) {
        el.focus()
      }
    }
  }

全局注册:principal.js

Vue.directives('focus',{
	bind(el, binding, vnode) {
        el.focus()
      }
})

生命周期：

• vincular: se llama solo una vez, la instrucción está vinculada a la llamada del elemento por primera vez para la inicialización
• insertado: se llama cuando el elemento vinculado se inserta en el nodo principal
• actualización: la llamada de actualización del componente vnode
• componenteUpdate: el comando se llama después de que se hayan actualizado todos los nodos virtuales del componente y subcomponentes
• ubind: solo se llama a un lado y la instrucción no está vinculada

vue3

局部注册: Introduzca import {Directiva, DirectivaBinding} desde 'vue' para verificar por separado vFocus,binding

<template>
  <input type="text" v-focus="{ color: 'red' }" />
</template>

<script setup>
const vFocus = {
  created(el, binding) {
    el.style.backgroundColor = binding.value.color;
    console.log(el, binding.value.color); //<input type="text" style="background-color: red;"> 'red'
  },
};
</script>

全局注册: main.js, app.vue importado como arriba

import {
     
      createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

app.directive('focus', {
     
     
    created(el, binding) {
     
     
        el.style.backgroundColor = binding.value.color;
        console.log(el, binding.value.color); //<input type="text" style="background-color: red;"> 'red'
    }
})

app.mount('#app')

生命周期：

• Cuando se inicializa el elemento creado
• La directiva beforeMount se llama solo una vez después de estar vinculada al elemento
• El elemento montado se inserta en la llamada dom principal.
• beforeUpdate Llamado antes de que se actualice el elemento.
• actualizar Este método periódico se elimina y se reemplaza con actualizaciones
• beforeUnmount se llama antes de que se elimine el elemento
• Se llama solo una vez después de que se elimina la directiva desmontada

5. Optimización del proyecto Vue

• nivel de código
  • Lista larga de optimización del rendimiento: método Object.freeze para congelar un objeto, una vez que el objeto congelado ya no se puede modificar
  • El evento se destruye y la lógica de destrucción se ejecuta en la función del ciclo de vida beforeDestroy.
  • Carga diferida de imágenes
  • Enrutamiento de carga diferida
  • Cargar complementos a pedido
  • v-if, v-for evitar usar al mismo tiempo, v-for atravesar para agregar clave
  • v-si, v-mostrar seleccionar
  • caché de componentes de mantenimiento de vida
  • estrangulamiento anti-vibración de entrada
• Optimización básica de la tecnología web.
  • Habilitar la compresión gzip
  • caché de navegador
  • aceleración CDN
• optimización del paquete web

6. Cómo compilar la plantilla vue

La compilación de plantillas de Vue es el proceso de compilar plantillas "HTML" en funciones de renderizado. Este proceso se puede dividir a grandes rasgos en tres etapas:

• Fase de análisis: analiza la plantilla "HTML" en un árbol de sintaxis AST;
  • Core parseHTML (plantilla, {}) Vue define muchas expresiones regulares que coinciden con HTML, parseHTML coincide de acuerdo con el regular
  • parseHTML es el "hilo principal" para analizar cadenas de plantilla. Su primer parámetro es la cadena de plantilla que se va a analizar, que es la parte más externa del componente de un solo archivo; el segundo parámetro es un objeto de opción, que contendrá algunas devoluciones de llamada, y algunos elementos de configuración.
  • objeto de opciones:
    • start( tag, attrs, unary ) La devolución de llamada cuando la etiqueta de inicio coincide, tag es el nombre de la etiqueta actual, attrs es la lista de atributos de la etiqueta y unary es si la etiqueta actual es una etiqueta de cierre automático
    • end() Devolución de llamada cuando la etiqueta final coincide
    • devolución de llamada de caracteres (texto) para nodos de texto coincidentes
    • comentario (texto) coincide con la devolución de llamada del nodo comentario y su lógica de procesamiento es similar a la del texto
• Etapa de optimización: busque el subárbol estático del árbol de sintaxis AST y márquelo (el subárbol estático marcado se ignorará durante la comparación de dom virtual, mejorando así el rendimiento de la comparación de dom virtual);
  • Como se presentó brevemente anteriormente, el trabajo de la fase de optimización es marcar el subárbol estático. Después de marcar el subárbol estático, existen dos ventajas principales:
    • En el proceso de generación de dom virtual, si se encuentra que un nodo es un subárbol estático, no se generará un nuevo árbol de subnodo excepto para la primera representación, pero se copiará un subárbol estático existente;
    • En el proceso de comparación del dom virtual, si se descubre que el nodo actual es un subárbol estático, omítalo directamente y no es necesario comparar.
  • El proceso de marcar un subárbol estático es un proceso de dos pasos:
    • Recorra el árbol de sintaxis AST, busque todos los nodos estáticos y márquelos (Nota: el nodo actual y todos sus nodos secundarios son nodos estáticos, y el nodo actual se marcará como un nodo estático)
    • Recorra el árbol después de los pasos anteriores, busque el nodo raíz estático y márquelo (Nota: el nodo raíz estático se refiere al nodo en sí y todos los nodos secundarios son nodos estáticos, pero el nodo principal es un nodo dinámico y la raíz estática También se encuentra el nodo. Se encontró el "subárbol estático")
• Etapa de generación de código: genere cadenas de código a través de AST y finalmente genere funciones de representación.

Siete, principio de respuesta de vue2

Vue utiliza varios componentes principales: Observer, Dep, Watcher,Scheduler

• El observador convierte un objeto ordinario en un objeto receptivo
  • Observer convierte cada propiedad del objeto en una propiedad con getter y setter a través de object.defineProperty
• Dep significa dependencia. Vue creará una instancia dep para cada atributo en el objeto responsivo, el objeto en sí y la matriz en sí. Cada instancia dep puede hacer dos cosas:
  • Dependencia récord: quién me está utilizando
  • Actualización de distribución: He cambiado, quiero informar a quienes me usan
• Durante la ejecución de la función de observador, si se produce un registro de dependencia, entonces dep registrará esta variable global, lo que indica que un observador usa mi atributo.
• El Programador no ejecutará la actualización inmediatamente, sino que la actualizará de forma asincrónica a través de nexttick

Ocho, principio de respuesta de vue3

A través de Proxy (proxy): Intercepta el cambio de cualquier atributo en el objeto, incluyendo: lectura y escritura de valores de atributos, agregar atributos, eliminar atributos, etc.

A través de Reflect (reflexión): opera sobre las propiedades del objeto fuente, Reflect no es un objeto de función, por lo que no se puede construir.

9. Después de actualizar el navegador, ¿existen los datos de Vuex? ¿Cómo resolver?

不存在

Motivo: debido a que storelos datos se almacenan en la memoria en ejecución, cuando se actualiza la página, la página recargará la instancia de vue y los datos en el almacén se reasignarán e inicializarán.

Tenemos dos formas de solucionar este problema:

1. usarvuex-along
2. usar localStorageosessionStroage

10. ¿Qué tienen en común vue y reaccionar? la diferencia

共同点:

• Vista basada en datos
• Componentización
• usa ambosVirtual DOM

不同点：

• diferentes ideas centrales
  • El posicionamiento de vue es reducir el umbral de desarrollo front-end tanto como sea posible, para que más personas puedan comenzar con el desarrollo más rápido. Este tiene las características principales de vue: 灵活易用的渐进式框架，进行数据拦截/代理，它对侦测数据的变化更敏感、更精确.
  • El posicionamiento de React es proponer una nueva idea de desarrollo de UI React推崇函数式编程（纯组件），数据不可变以及单向数据流. Por supuesto, cuando se requieren dos vías, también se puede implementar manualmente, como con la ayuda de onChangey setState.
• Escritura de componentes
  • El enfoque recomendado por React es JSX + inline styleescribir todo HTML y CSS en JavaScript.
  • El método recomendado para Vue es el formato de componente de un solo archivo de plantilla ( 简单易懂，从传统前端转过来易于理解), es decir, html, css y JS están escritos en el mismo archivo (vue también admite la escritura JSX).
• algoritmo de diferenciación
• Principio responsivo
  • vue2 usa object.defineProperty, vue3 usa proxy, refleja
  • React se basa en una máquina de estado, optimizada manualmente y los datos son inmutables, y necesita impulsar setStateel nuevo estado para reemplazar el estado anterior.

11. Principio de enlace de datos bidireccional de vue

简易实现: v-model se divide en dos partes, vincula el valor a través de v-bind y luego modifica el valor paso a paso a través de v-on: input

原理：

• Los objetos de datos que deben observarse se atraviesan recursivamente, incluidos los atributos de los objetos de subatributos, y se agregan establecedores y captadores. Asignar un valor a este objeto activará el definidor y luego se podrán monitorear los cambios de datos.
• Aclare las dependencias a través del departamento y el observador se agrega a las dependencias
• La compilación analiza las instrucciones de la plantilla, reemplaza las variables en la plantilla con datos, luego inicializa la vista de página renderizada, vincula el nodo correspondiente a cada instrucción con una función de actualización, agrega suscriptores que escuchan los datos y, una vez que los datos cambian, recibe un vista de notificaciones y actualizaciones
• 待属性变动dep.notice()通知时，能调动watcher自身的update方法，并处罚compile回调渲染视图

12.computed和watch区别

computed计算属性，watch监听属性

• 计算属性不在 data 中，它是基于data 或 props 中的数据通过计算得到的一个新值。watch 可以监听的数据来源：data，props，computed内的数据
• component中有get和set方法，会默认缓存计算结果。watch不支持缓存，支持异步， immediate监听属性立即执行一次，deep开启深度监听

13.Vuex

Vuex是一种状态管理模式，存在的目的是共享可复用的组件状态。

主要包括以下几个模块：

• State => 基本数据，定义了应用状态的数据结构，可以在这里设置默认的初始状态。
• Getter => 从基本数据派生的数据，允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
• Mutation => 是唯一更改 store 中状态的方法，且必须是同步函数。
• Action => 像一个装饰器，包裹mutations，使之可以异步。用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
• Module => 模块化Vuex，允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

14.vuex辅助函数

mapState, mapMutations, mapActions, mapGetters

mapState和mapGetters:

• 两者都放在 computed中，以mapState举例

import { mapState } from 'vuex'

computed中
computed:{
	...mapState(['data'])  //data是vuex存放的state中的属性，此时{
    
    {data}}可使用
}

mapMutations， mapActions：

• 放在组件的methods属性中 。使用与上类似

15.vuex模块化使用

Cuando el proyecto que desarrollamos es relativamente grande, puede haber más datos en la tienda. En este momento, los datos en nuestra tienda pueden inflarse. Para resolver este problema, necesitamos modularizar la tienda (módulo).

前提: Cree dos archivos js, que contienen los mismos atributos que vuex y deben namespaced：trueabrir el espacio de nombres store/index.js: importe archivos en módulos

usar:

• Acceder a los datos del estado:
  • La primera forma:this.$store.state.moduleA.sum
  • La segunda forma:...mapState('moduleA',['sum','number'])
• acción enviar mutación
• La primera forma: es necesario pasar parámetros this.$store.dispatch('moduleB/addZhang',{name:'小明',age:18}), no es necesario pasar parámetrosthis.$store.dispatch('moduleB/addServer')
• La segunda forma:...mapActions('moduleB',['addZhang'])
• getters propiedades calculadas
• La primera forma:this.$store.getters['moduleB/firstName']
• La segunda forma:...mapGetters('moduleB',['firstName'])

16. mezclando en vue

mixin: proporciona una forma muy flexible de distribuir Vuefunciones reutilizables en componentes.

La esencia es en realidad un objeto , que puede contener cualquier opción de función en nuestros jscomponentes, como data,,,, etc.componentsmethods createdcomputed

Solo necesitamos pasar la función común mixinsa las opciones como un objeto, y cuando el componente use mixinsel objeto, todas mixinslas opciones del objeto se mezclarán con las opciones del propio componente.

Uso específico:

• Crea el archivo mixins.js

let mixin = {
     
     
    created() {
     
     
        console.log('我是mixin中的');
    },
    methods: {
     
     
        hellow() {
     
     
            console.log('你好');
        },
    },
}
export default mixin

• uso topico

import mixin from "./mixins";
export default {
     
     
  mixins: [mixin],
  mounted() {
     
     
    this.hellow();//你好
  },
};

• Utilice main.js globalmente

import {
     
      createApp } from 'vue'
import App from './App.vue'
import mixins from "./mixins";
const app = createApp(App)
app.mixin(mixins)
app.mount('#app')

17. Al agregar nuevas propiedades a un objeto en Vue, ¿qué debo hacer si la interfaz no se actualiza?

Motivo: vue2 responsive usa object.defineProperty para el secuestro. Al agregar una nueva propiedad, la nueva propiedad no tendrá métodos get y set. No es un tipo responsive, por lo que la interfaz no se actualizará

Solución: Vue.set() agrega uno al objeto responsivo propertyy garantiza que este nuevo property también responda

Vue3 implementa la capacidad de respuesta mediante el secuestro de proxy y el mapeo reflejado, y no habrá tal problema

18. Método de comunicación del componente Vue

• pasando por accesorios
  • verificación de accesorios: si el nombre: {tipo: Cadena, requerido: verdadero, predeterminado: valor predeterminado} requerido es necesario
• Activar eventos personalizados a través de $emit
• utilizar referencia
• Autobús de eventos
• Proporcionar e inyectar
• Vuex

19. ¿Cómo escribir vue3setup de padre a hijo?

Se introducen tres métodos:

El primero: use el método de escritura vue2 para pasar accesorios y $emit

El segundo método: escritura de funciones de configuración

• configuración (props, contexto), recibir datos a través de accesorios, pasar context.emit ('llamar al método del componente principal', pasar parámetros)

El tercer tipo: configuración en script

• Vue3 viene con defineProps, defineEmits

const emits = defineEmits(["changeNumber"]);
// 也可以不赋值，取值通过{
    
    {num}}获取
const props = defineProps({
  num: {
    type: Number,
    default: () => [],
  },
  list: {
    type: Array,
  },
});
const changeNum = function () {
  emits("changeNumber", 888);
  //   console.log(11111111111);
};

20. ¿Puede la configuración escribir directamente asíncrono y esperar?

Poder

Await se puede usar directamente en la configuración sintáctica del azúcar, no es necesario escribir asíncrono, la configuración se convertirá automáticamente en configuración asíncrona

<script setup>
  import Api from '../api/Api'
  const data = await Api.getData()
  console.log(data)
</script>

21. Ciclo de vida de Vue

vue2

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-8P7sspQX-1686967105047) (C:\Users\lenovo\AppData\Roaming\Typora \typora-user-images\ 1685089235304.png)]

beforeCreate: accede a los datos por primera vez

creado: primer acceso a este ciclo de vida

montado – visualización de página

vue3

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-yfSFfojq-1686967105048) (C:\Users\lenovo\AppData\Roaming\Typora\ imágenes-de-usuario-de-typora\ 1685089301710.png)]

区别：

• beforeCreate -> setup() Antes de crear componentes, se crean datos y métodos
• creado -> configuración()
• beforeMount -> onBeforeMount La función ejecutada antes de que el componente se monte en el nodo.
• montado -> onMounted La función ejecutada después de montar el componente
• beforeUpdate -> onBeforeUpdate La función ejecutada antes de que se actualice el componente.
• actualizado -> onUpdated La función ejecutada después de actualizar el componente.
• beforeDestroy -> onBeforeUnmount La función ejecutada antes de que el componente se monte en el nodo.
• destruido -> onUnmounted La función ejecutada antes de desmontar el componente. dszhuoyi
• activado -> onActivated La función ejecutada después de desinstalar el componente
• desactivado -> activadoDesactivado

22. Hable sobre el principio de CSS con alcance en Vue.

Después de agregar la etiqueta de alcance, se agregará un identificador único a todos los elementos de etiqueta en el componente. Este identificador único es un atributo personalizado, como data-v-xxxxxxxx, y el selector de estilo correspondiente también agregará este selector de atributo único.

23. Principio de $nextTick

Devolución de llamada retrasada para ejecutarse después de que finalice el siguiente ciclo de actualización de DOM. Utilice este método inmediatamente después de modificar los datos para obtener el DOM actualizado

siguientePrincipio de tick

24.los datos son una función, no un objeto

Vue es una aplicación de una sola página y, finalmente, todas las instancias se montarán en el archivo app.vue. Si los datos son un objeto, provocará contaminación de datos. Al devolver un objeto de una función, utilice la limitación del alcance de la función para evitar la contaminación de datos.

25. Guardia de ruta

Los protectores de enrutamiento de Vue se dividen en tres tipos: protectores de enrutamiento globales, protectores de enrutamiento exclusivos y protectores de enrutamiento de componentes.

a: qué ruta entrar

desde: desde qué ruta

siguiente: si saltar

• Guardia global: router.beforeEach((a,desde,siguiente)=>{})
• Guardia de ruta exclusiva: beforeEnter:(to,from,next)=>{}
• Protectores de enrutamiento de componentes: beforeRouteEnter:(to,from,next)=>{}, beforeRouteUpdate, beforeRouteLeave

26. Vue establece variables globales

método uno:

• vue2.xMontar lo global es Vue.prototype.$xxxx=xxxmontarlo en forma de y luego this.$xxxmontar las variables o métodos en lo global a través de .
• Vue 3En uso config.globalProperties, app.config.globalProperties.$data = '111'

 const {
     
     proxy} = getCurrentInstance()
 console.log(proxy.$data)

Método dos:

• proporcionar/inyectar

27. mantener vivo en vue

Atributos: includeyexclude

gramática:

// 指定home组件和about组件被缓存
<keep-alive include="home,about" >
    <router-view></router-view>
</keep-alive>

// 除了home组件和about组件别的都缓存
<keep-alive exclude="home,about" >
    <router-view></router-view>
</keep-alive>

Función de gancho:

• activatedLa activación cuando el componente está activado (usado) puede entenderse simplemente como activación al ingresar a esta página
• deactivatedLa activación cuando el componente no está en uso (estado inactivo) puede entenderse simplemente como la activación al salir de la página.

Ingrese el componente que habilita el almacenamiento en caché

初始进入和离开 created ---> mounted ---> activated --> deactivated
后续进入和离开 activated --> deactivated

28. ranura de vista

Slot, también conocido como slot, es el mecanismo de distribución de contenido de Vue. El motor de plantillas dentro del componente utiliza el elemento slot como salida para transportar y distribuir contenido. La ranura de ranura es un elemento de etiqueta de plantilla del componente secundario, y el componente principal determina si se muestra este elemento de etiqueta y cómo. Hay tres tipos de espacios: espacios predeterminados, espacios con nombre y espacios con ámbito.

Ranura predeterminada: también conocida como ranura anónima, cuando la ranura no especifica un valor de atributo de nombre, se muestra una ranura de forma predeterminada y solo hay una ranura anónima en un componente.

Ranura con nombre: una ranura con un nombre específico, es decir, una ranura con un atributo de nombre. Pueden aparecer varias ranuras con nombre en un componente.

Ranura de alcance: ranura predeterminada, una variante de la ranura con nombre, que puede ser una ranura anónima o una ranura con nombre. La diferencia de esta ranura es que cuando el subcomponente representa la ranura de alcance, el subcomponente Los datos dentro del componente se pasan al componente principal y al componente principal. El componente decide cómo representar la ranura en función de los datos pasados ​​desde el componente secundario.

Principio de implementación: cuando se crea una instancia del componente secundario vm, el contenido de la etiqueta de ranura pasada por el componente principal se obtiene y se almacena en vm.slot, la $En\; slot,\; la\; ranura\; predeterminada\; esvm.$ slot.default y la ranura con nombre es vm.$slot.xxx,xxxes\; el\; nombre\; de\; la\; ranura.\; Cuando\; el\; componente\; ejecuta\; la\; función\; de\; renderizado,\; encuentralaetiquetaderanuray\; la\; reemplaza\; con\; el\; contenido\; de\; la\; ranura.En$ este momento, los datos se pueden pasar a la ranura Si hay datos, entonces esta ranura se puede llamar ranura de alcance.

29. La diferencia entre vue2 y vue3

actualización de enlace bidireccional

El enlace de datos bidireccional de vue2 se realiza mediante el uso de una API de ES5, Object.defineProperty() para secuestrar datos combinados con el modo de publicación-suscripción.

Vue3 utiliza ProxyAPI de ES6 para representar datos. Cada objeto se envuelve con una capa de Proxy a través de la función reactiva () y el cambio de propiedades se monitorea a través de Proxy para realizar el monitoreo de datos.

Estas son las ventajas de usar proxy en comparación con la versión vue2:

1. defineProperty solo puede monitorear una determinada propiedad y no puede monitorear todos los objetos. Puede guardar para entradas, cierres, etc. para mejorar la eficiencia (simplemente vincule todo el objeto directamente)

2. Puede monitorear la matriz, en lugar de realizar operaciones específicas en la matriz por separado, puede interceptar directamente la operación de todos los datos de tipo de objeto a través de Proxy, que admite perfectamente el monitoreo de la matriz.

obtener accesorios

vue2在script代码块可以直接获取props，vue3通过setup指令传递

API不同

Vue2使⽤的是选项类型API（Options API），Vue3使⽤的是合成型API（Composition API）

建立数据data

vue2是把数据放入data中，vue3就需要使用一个新的setup()方法，此方法在组件初始化构造得时候触发。

生命周期不同

vue2 -------- vue3

beforeCreate -> setup() 开始创建组件之前，创建的是data和method

created -> setup()

beforeMount -> onBeforeMount 组件挂载到节点上之前执行的函数。

mounted -> onMounted 组件挂载完成后执行的函数

beforeUpdate -> onBeforeUpdate 组件更新之前执行的函数。

updated -> onUpdated 组件更新完成之后执行的函数。

beforeDestroy -> onBeforeUnmount 组件挂载到节点上之前执行的函数。

destroyed -> onUnmounted 组件卸载之前执行的函数。dszhuoyi

activated -> onActivated 组件卸载完成后执行的函数

deactivated -> onDeactivated

是否支持碎片：vue2.0 只允许有一个根标签，vue3.0支持碎片化，可以拥有多个根节点

main.js文件不同：vue2中我们可以使用pototype(原型)的形式去进行操作，引入的是构造函数 vue3中需要使用结构的形式进行操作，引入的是工厂函数

diff算法不同

更好的支持ts

30. ¿Cuál es la diferencia entre la Api de composición (tipo combinado) utilizada por Vue3.0 y la Api de opciones (tipo de opción) utilizada por Vue2.x?

• opciones Api Cuando el componente se vuelve complejo, la lista de propiedades correspondientes también crecerá, lo que puede hacer que el componente sea difícil de leer y comprender. composición Api define funciones juntas, lo cual es conveniente para encontrar y comprender
• Composition API Amigable tree-shaking, el código es más fácil de comprimir.
• Composition APIUsos que no se ven en this, reduciendo thisla situación de desconocimiento
• Si es un componente pequeño, puedes seguir usándolo Options APIy además es muy amigable.

31. gancho en vue3

La esencia es una función que encapsula la API de composición (API combinada) utilizada en la función de configuración, similar al mixin en vue2.

Ventajas de los enlaces personalizados: reutilización de código, lo que hace que la lógica de la configuración sea más clara y fácil de entender

32. La diferencia entre componentes vue y complementos

组件: Un componente de Vue es una instancia de Vue reutilizable que puede tener su propio estado y métodos. Los componentes pueden contener otros componentes, formando una lista de interfaz de usuario compleja.

ventaja

• El código se puede encapsular en un componente reutilizable para mejorar la eficiencia del desarrollo.
• Los componentes tienen buena mantenibilidad y son fáciles de modificar y actualizar.

defecto

• Las funciones y funciones de los componentes son relativamente independientes y no son adecuadas para la expansión de funciones globales.
• La gestión y organización de los componentes requiere cierta disciplina, de lo contrario puede generar confusión y dificultades de mantenimiento.

插件: Los complementos de Vue pueden ampliar la funcionalidad global de Vue y pueden reutilizarse en aplicaciones. Complementos comunes como vue-router, vuexetc.axios

ventaja

• Los complementos pueden ampliar fácilmente la funcionalidad global de Vue.
• Los complementos pueden reutilizar el código y mejorar la eficiencia del desarrollo.
• Ya existe una gran cantidad de complementos en la comunidad de código abierto que pueden usarse para resolver problemas comunes.

defecto

• Los complementos tienen cierta complejidad y requieren más costos de aprendizaje.
• La funcionalidad del complemento puede ser compleja y provocar una degradación del rendimiento.

33. modificador de vista

在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理

• 表单修饰符
  • .lazy 懒加载，光标离开标签时，才赋值给value
  • .trim 过滤首位空格
  • .number 限制输入类型为数字或转为数字
• 事件修饰符
  • .stop 阻止事件冒泡
  • .prevent 组织事件默认行为
  • .once 事件只触发一次
  • .capture 开启事件捕获
  • .self 事件只在自身触发
• 鼠标按键修饰符
  • left 左键点击
  • right 右键点击
  • middle 中键点击
• 键值修饰符
  • 普通键（enter、tab、delete、space、esc、up…）
  • 系统修饰键（ctrl、alt、meta、shift…）
• v-bind修饰符
  • .async 对props进行双向绑定
  • .prop 设置自定义标签属性，避免暴露数据，防止污染html结构
  • .camel 将命名为驼峰命名法

34.Vue路由中，history和hash两种模式有什么区别？

hash: hash 模式是一种把前端路由的路径用井号 # 拼接在真实 URL 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 hashchange 事件。

• 优点：浏览器兼容性较好，连 IE8 都支持
• 缺点：路径在井号 # 的后面，比较丑

history: history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求

• 优点：路径比较正规，没有井号 #
• 缺点：兼容性不如 hash，且需要服务端支持，否则一刷新页面就404了

35. La diferencia entre parámetros y consulta.

paramsAmbos queryse utilizan para pasar parámetros, pero sus métodos para pasar parámetros y escenarios de uso son diferentes.

params:paramNameLos parámetros se pasan a través de la ruta de enrutamiento y se declaran en forma de uso en la configuración de enrutamiento.

const router = new VueRouter({
     
     
  routes: [
    {
     
     
      path: '/user/:id',
      component: User,
    },
  ],
})

queryPase parámetros a través de la cadena de consulta URL (es decir, la parte después del signo de interrogación) y utilícelos después de la dirección de enrutamiento para ?conectar múltiples pares clave-valor de parámetros.

No es necesario configurarlo en el enrutador, /search?q=vue coincidirá automáticamente con el componente de búsqueda

la diferencia:

• paramsEs adecuado para pasar parámetros que deben existir, como acceder a páginas de detalles del usuario o páginas de detalles del artículo.
• queryAdecuado para el paso de parámetros opcionales, como el paso de palabras clave en la función de búsqueda.

36. ¿Cuál es la diferencia entre activos en vue2 y públicos en vue3?

En Vue 2, assetsel directorio existe de forma predeterminada y se puede crear directamente en el directorio raíz del proyecto. Generalmente se usa para almacenar archivos de recursos estáticos, como imágenes y estilos requeridos por los componentes. Estos archivos se agrupan en archivos JavaScript y se hace referencia a ellos mediante rutas relativas en el código.

En Vue 3, el directorio se puede vue.config.jsconfigurar a través del archivo de configuración public, que assetses similar al directorio y se usa para almacenar archivos de recursos estáticos. Sin embargo, a diferencia de Vue 2, publiclos archivos en el directorio no se empaquetarán, sino que se copiarán directamente al directorio de salida.

37. ¿Cómo puede una aplicación de una sola página mejorar la velocidad de carga?

• Utilice la división de código: divida su código en pequeños fragmentos y cárguelos según demanda (carga diferida) para evitar solicitudes de red innecesarias y reducir el tiempo de carga.
• Recursos de almacenamiento en caché: aproveche el caché del navegador para almacenar archivos reutilizables, como archivos CSS y JS, imágenes, etc.
• Precargue recursos clave: antes de la primera representación, cargue los recursos clave con anticipación, como JS, CSS o datos requeridos por la página de inicio, para garantizar una representación rápida del contenido clave.
• Utilice un formato de imagen apropiado: elija un formato de imagen apropiado (por ejemplo, JPEG, PNG, WebP, etc.) y comprímalo según sea necesario para reducir el tamaño del archivo. Para algunos íconos pequeños, iconfontse pueden usar archivos de fuentes como.
• Habilite la compresión Gzip: los archivos se comprimen utilizando el algoritmo de compresión Gzip del lado del servidor para reducir el tiempo de transferencia y el consumo de ancho de banda.
• Utilice una CDN: utilice una red de entrega de contenido (CDN) para almacenar en caché y entregar archivos para mejorar la velocidad y confiabilidad de la descarga de archivos.
• Optimice las solicitudes de API: minimice la cantidad de llamadas a API y utilice técnicas como el almacenamiento en caché y la carga diferida para optimizar la eficiencia de las solicitudes de API.
• Utilice la representación del lado del servidor: utilice la representación del lado del servidor (SSR) para generar HTML y reducir el tiempo y los recursos necesarios para la representación del lado del cliente. Sin embargo, tenga en cuenta que SSR también puede sobrecargar su servidor y complicar su sitio.

38. El componente principal de Vue llama al método del componente secundario

En vue, si el componente principal quiere llamar al método del componente secundario, puede agregar una referencia al componente secundario y luego llamarlo a través de esto.$refs.ref.method

<child ref="child"></child>
调用：this.$refs.child.子组件方法

39. Adquisición de Dom en vue3, ref se usa en componentes

<template>
  <div class="ref">
    <h3>ref使用：</h3>
    <input type="text" ref="input" /> //  ref="input" 需要和 const input = ref(null); 相对应
  </div>
</template>

<script setup>
import {
     
      reactive, ref, createApp, onMounted } from "vue";

let state = reactive({
     
      text: "信息按钮" });
// 同名的 input来进行获取节点
const input = ref(null);
onMounted(() => {
     
     
  if (input.value) {
     
     
    input.value.focus();
  }
});
</script>
<style scoped></style>

40. Comprensión del marco progresivo

Progresivo: Puede entenderse como no hacer más que el deber

Comprensión personal: el que tenga menos reclamos, inicialmente construido sobre la base del marco básico, continuará expandiéndose con la demanda.

41. La inicialización de la página parpadea

Causa: Cuando la velocidad de la red es lenta y vue.jsel archivo no se ha cargado, las palabras {{mensaje}} se mostrarán en la página. Sabiendo que vue crea una instancia y compila la plantilla, el dom será reemplazado, por lo que la pantalla parpadea durante este proceso.

Entonces, para resolver este problema, debe configurar [v-cloak] {display: none} en el estilo. En general, v-clock es una mejor práctica para solucionar el parpadeo de la página causado por una inicialización lenta, lo cual es muy práctico para proyectos simples.

Pero en proyectos de ingeniería, como proyectos que utilizan webpack y vue-router, la estructura html es solo un elemento div vacío, y el resto del contenido se completa enrutando para montar diferentes componentes, por lo que no se necesita v -cloak.

42. ¿Cuál es el problema con el mismo nombre de atributo vue y nombre de método?

En vue2, esto 属性anula 盖掉 methodsel método en . En otras palabras, este método no se llamará correctamente.

En vue3, se informa un error

43. Cómo vincular dinámicamente clase y estilo

La unión dinámica de clase y estilo generalmente se realiza a través de objetos o matrices.

Método de escritura de objetos: Es adecuado para el nombre del estilo a vincular, el estilo está determinado, pero se determina dinámicamente si se usa o no.

Escritura de matriz: aplicable al nombre del estilo a vincular y el estilo es incierto.

<div v-bind:class="{ active: isActive }"></div> //对象写法
<div v-bind:class="[activeClass, errorClass]"></div> //数组写法

44. El pozo encontrado por vue

• Los datos deben ser una función, no un objeto.
• Las funciones administradas por vue no deben escribirse como funciones de flecha
• Agregar página de propiedades no se actualiza
• No es necesario agregar **/**, ruta='nueva' a la ruta de subenrutamiento

45. v-if y v-para prioridad

En la práctica, ni vue2 ni vue3 deberían usar v-if y v-for juntos.

En vue 2.x, cuando se utilizan v-if y v-for en un elemento al mismo tiempo, v-for tendrá prioridad.

En vue 3.x, v-if siempre tiene prioridad sobre v-for.

La prioridad de v-for en vue2 es mayor que la de v-if. Cuando se juntan, el bucle se ejecutará primero para juzgar la condición y si es necesario atravesar una pequeña cantidad de elementos en la lista de representación de valores cada vez. se vuelve a renderizar la lista, lo cual es un desperdicio de recursos.

La prioridad de v-if en vue3 es mayor que v-for, por lo que cuando se ejecuta v-if, llama a la variable correspondiente si no existe, provocará una excepción.

46. ​​​​El principio básico de vue

Sistemas de construcción basados ​​en datos

47. Vue viene con componentes de animación y transición.

Vue proporciona componentes para envolver componentes de elementos que requieren efectos de animación. Los componentes se pueden utilizar para animar fácilmente la entrada y salida de elementos.

<template>
  <div>
    <button @click="visible = !visible">Toggle</button>
    <transition name="fade">
      <p v-if="visible">Hello, World!</p>
    </transition>
  </div>
</template>

<script>
export default {
     
     
  data() {
     
     
    return {
     
     
      visible: false
    }
  },
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
     
     
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
     
     
  opacity: 0;
}
</style>

48. Principio de funcionamiento de vue-loader

1. Corte un archivo .vue en tres partes: plantilla , script y estilos .
2. template 部分 通过 compile 生成 render、 staticRenderFns。
3. 获取 script 部分 返回的配置项对象 scriptExports。
4. styles 部分，会通过 css-loader、vue-style-loader， 添加到 head 中， 或者通过 css-loader、MiniCssExtractPlugin 提取到一个 公共的css文件 中。
5. 使用 vue-loader 提供的 normalizeComponent 方法， 合并 scriptExports、render、staticRenderFns， 返回 构建vue组件需要的配置项对象 - options， 即 {data, props, methods, render, staticRenderFns…}。

49.vue的diff算法

diff整体策略为：深度优先，同层比较

• Cuando los datos cambien, el suscriptor watcherllamará al parche patchreal.DOM

• Al isSameVnodehacer un juicio, si es el mismo, llame patchVnodeal método

• parcheVnodo

  hizo lo siguiente:

  • Encuentra la verdad correspondiente dom, llamadael
  • Si ambos tienen nodos de texto y no son iguales, establezca elel nodo de texto en Vnodeel nodo de texto
  • Si oldVnodehay un nodo secundario y VNodeno hay ningún nodo secundario, elimine elel nodo secundario
  • Si oldVnodeno hay ningún nodo secundario VNode, entonces VNodeel nodo secundario se realizará y se agregará ael
  • Si ambos tienen nodos secundarios, ejecute updateChildrenla función comparar nodos secundarios

• actualizarNiños

  Principalmente realizó las siguientes operaciones:

  • Establecer los VNodepunteros de cabeza y cola antiguos y nuevos
  • Compare los punteros de cabeza y cola antiguos y nuevos, acérquese al medio en un bucle, llame para repetir el proceso según la situación, llame para patchVnodecrear patchun createElemnuevo nodo, busque un nodo keyconsistente VNodeen la tabla hash y luego divida la situación en operaciones

50. La diferencia entre vue y jquery

设计理念

Vue.js es un marco de JavaScript moderno centrado en crear aplicaciones web grandes y fáciles de mantener. El núcleo de Vue.js es la componenteización, que proporciona una manera de descomponer una página en componentes independientes y reutilizables, y gestionar las dependencias entre estos componentes muy fácilmente. Al mismo tiempo, Vue.js también tiene funciones integradas como gestión de estado, enrutamiento y herramientas de construcción, lo que facilita la creación de aplicaciones web complejas.

而 jQuery 则是一个早期的 JavaScript 库，主要关注的是 DOM 操作和处理事件。它的设计理念是将 JavaScript 代码尽可能地简单化，使得使用者可以很容易地完成一些常见的操作（如选择元素、修改样式、处理事件等）。在 jQuery 中，通过链式调用和函数式变成的设计，可以使得代码变得非常简洁易读。

用途

Vue.js 主要用于构建大型的、复杂的 Web 应用程序，它提供了诸如组件化、状态管理、路由等功能，非常适合构建单页面应用（SPA）。

而 jQuery 则更多地用于简化 DOM 操作和事件处理，它适用于编写小型的 Web 应用程序或较为简单的交互效果。同时，由于 jQuery 在浏览器兼容性、性能等方面的优势，它也被广泛应用于一些成熟的网站和CMS系统中。

51.说说你对 SPA 单页面的理解，它的优缺点分别是什么？

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

• 优点：
  用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
  基于上面一点，SPA 相对对服务器压力小；
  前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
• Desventajas:
  Carga inicial que requiere mucho tiempo: para realizar las funciones y los efectos de visualización de las aplicaciones web de una sola página, es necesario cargar JavaScript y CSS cuando se carga la página, y algunas páginas se cargan según demanda; gestión de enrutamiento hacia adelante y hacia atrás : debido a que
  las aplicaciones de una sola página se colocan en una sola página, todo el contenido se muestra en el navegador, por lo que no puede usar las funciones de avance y retroceso del navegador. Todos los cambios de página deben establecer una administración de pila usted mismo; SEO es
  más Difícil: dado que todo el contenido se reemplaza dinámicamente y se muestra en una página, tiene una cierta ventaja en SEO. Debilidad natural.

52. ¿Cómo entender el flujo de datos unidireccional de Vue?

Todos los accesorios forman un único enlace descendente entre sus accesorios principales y secundarios: las actualizaciones del accesorio principal fluyen hacia los componentes secundarios, pero no al revés.
Esto evita cambios accidentales en el estado del componente principal desde los componentes secundarios, lo que puede hacer que el flujo de datos de su aplicación sea difícil de entender.
Además, cada vez que se actualiza el componente principal, todos los accesorios del componente secundario se actualizarán con los valores más recientes.
Esto significa que no debes cambiar los accesorios dentro de un componente secundario. Si hace esto, Vue emitirá una advertencia en la consola del navegador.
Cuando un componente secundario quiere modificarlo, solo puede enviar un evento personalizado a través de $ emit, y el componente principal lo modificará después de recibirlo.

53. ¿Puede el componente principal monitorear el ciclo de vida del componente secundario?

Por ejemplo, si hay un componente principal Parent y un componente secundario Child, si el componente principal monitorea que el componente secundario esté montado, realizará algún procesamiento lógico, que se puede lograr mediante el siguiente método de escritura:

// Parent.vue
<Child @mounted="doSomething"/>

// Child.vue
mounted() {
  this.$emit("mounted");
}

Lo anterior necesita activar manualmente el evento del componente principal a través de $emit. La forma más sencilla es escucharlo a través de @hook cuando el componente principal hace referencia al componente secundario, como se muestra a continuación:

//  Parent.vue
<Child @hook:mounted="doSomething" ></Child>

doSomething() {
   console.log('父组件监听到 mounted 钩子函数 ...');
},

//  Child.vue
mounted(){
   console.log('子组件触发 mounted 钩子函数 ...');
},    

// 以上输出顺序为：
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...

Por supuesto, el método @hook no solo puede monitorear el montaje, sino que también se pueden monitorear otros eventos del ciclo de vida, como creación, actualización, etc.

54. ¿Cuáles son los aspectos principales de la mejora del rendimiento de Vue3.0?

• optimización del algoritmo de diferenciación
• Promoción estática: Vue3para los elementos que no participan en la actualización, se realizará una promoción estática, que solo se creará una vez y se reutilizará directamente durante el renderizado.
• 移除一些不常用的API，再重要的是Tree shanking
• 响应式系统

55.什么是 MVVM？比之 MVC 有什么区别？什么又是 MVP ？

MVC 通过分离 Model、View 和 Controller 的方式来组织代码结构。 用户与页面产生交互时Controller 中的事件触发器就开始工作了，通过调用 Model 层，来完成对 Model 的修改，然后 Model 层再去通知 View 层更新。

MVVM 模式中的 VM，指的是 ViewModel， 它通过双向的数据绑定，将 View 和 Model 的同步更新给自动化了。当 Model 发生变化的时候，ViewModel 就会自动更新；ViewModel 变化了，View 也会更新。

MVP 模式 ，View 层的接口暴露给了 Presenter 因此我们可以在 Presenter 中将 Model 的变化和 View 的变化绑定在一起，以此来实现 View 和 Model 的同步更新

56.vue中hook和react中hook区别

在React中，hook是一种函数，它可以让你在函数组件中添加state、effect等功能。 React 中的hook有useState、useEffect、useContext等。使用hook可以避免使用类组件时可能会出现的繁琐的生命周期方法、this等问题。

在Vue中，hook被称为生命周期钩子函数，它们是在组件实例化过程中自动调用的回调函数。 Vue中的生命周期钩子函数包括beforeCreate、created、beforeMount、mounted等。它们可以用于控制组件的生命周期，以及在组件生命周期特定阶段执行特定的操作。

57.Redux和Vuex的区别

redux是一个范用的js库，vuex是专门服务vue的

相同点：

1. state共享数据
2. 流程一致：定义全局state，触发，修改state
3. 原理相似，通过全局注入store。

不同点:

1. Vuex define cinco objetos de estado, captador, mutación, acción y módulo; redux define estado, reductor y acción;
2. Hay dos formas de activar Vuex: enviar sincrónico y asincrónico, tanto redux sincrónico como asincrónico usan el envío;
3. Las acciones en Vuex tienen solicitudes ajax asíncronas más complejas; las acciones en redux pueden ser simples o complejas, simplemente envían objetos de datos directamente ({type:xxx, your-data}) y llamadas complejas para ajax asíncrono (dependiendo del complemento redux-thunk). ).
4. Redux usa datos inmutables, mientras que los datos de Vuex son mutables. Redux reemplaza el estado anterior con el nuevo estado cada vez, mientras que Vuex lo modifica directamente;
5. Cuando Redux detecta cambios en los datos, usa diff para comparar diferencias, mientras que Vuex en realidad usa el mismo principio que Vue y usa getter/setter para comparar.

58. ¿Qué problemas resuelve el renderizado del lado del servidor (SSR) de vue?

La representación del lado del servidor (SSR) de Vue logra una carga de página más rápida, una mejor optimización del motor de búsqueda y una mejor experiencia de usuario al generar previamente la cadena HTML del componente Vue en el servidor y enviarla al cliente. La representación del lado del servidor resuelve muchos problemas en las aplicaciones SPA (aplicación de página única), como por ejemplo:

1. Problemas de SEO (optimización de motores de búsqueda): dado que las aplicaciones SPA tradicionales están integradas en el navegador, los motores de búsqueda no pueden indexar correctamente su contenido. Con Vue SSR, es posible representar cadenas HTML en el servidor y proporcionar páginas más amigables para los motores de búsqueda.
2. Problemas de rendimiento: las aplicaciones SPA requieren una gran cantidad de código JavaScript para inicializar e interactuar con la aplicación. Esto puede provocar tiempos de carga de página lentos y una mala experiencia de usuario. Con Vue SSR, el logotipo completo del HTML inicial se puede representar más rápido en el navegador, con el JavaScript necesario incrustado en él. Esto da como resultado cargas de página más rápidas y una mejor experiencia de usuario.
3. Problema de representación de la primera pantalla: las aplicaciones SPA tradicionales pueden tardar mucho tiempo en representar la primera pantalla cuando se cargan por primera vez, hasta que se descarga y ejecuta el código JavaScript. Con Vue SSR, los componentes se pueden representar en el servidor y enviarse al cliente como una cadena HTML, logrando así el objetivo de representar rápidamente la primera pantalla.

59. ¿Qué es la función Treeshaking en Vue 3.0 y da un ejemplo?

Tree shakingEs una técnica para optimizar el volumen de empaquetado de proyectos eliminando código redundante.

Tree shakingSe basa en ES6la sintaxis de plantilla ( importy export), principalmente con la ayuda de ES6la idea de compilación estática del módulo, la relación de dependencia del módulo, así como las variables de entrada y salida, se pueden determinar en el momento de la compilación.

Tree shakingNo es más que hacer dos cosas:

• La fase de compilación se utiliza para ES6 Moduledeterminar qué módulos se han cargado.
• Determine qué módulos y variables no se utilizan ni se hace referencia a ellos y luego elimine el código correspondiente

efecto:

• Reducir el tamaño del programa (más pequeño)
• Tiempo de ejecución del programa reducido (más rápido)
• Es conveniente optimizar la estructura del programa en el futuro (más amigable)

60. ¿Cuáles son las ventajas y desventajas del DOM virtual?

ventaja:

• Garantizar el límite inferior de rendimiento: el DOM virtual del marco debe adaptarse a cualquier operación que pueda generar la API de la capa superior, y la implementación de algunas de sus operaciones DOM debe ser universal, por lo que su rendimiento no es óptimo; pero en comparación con la operación DOM aproximada, el rendimiento es mucho mejor, por lo que el DOM virtual del marco al menos puede garantizar que aún puede proporcionar un buen rendimiento sin optimización manual, es decir, el límite inferior de rendimiento garantizado;
• No es necesario operar DOM manualmente: ya no necesitamos operar DOM manualmente, solo necesitamos escribir la lógica del código de View-Model, el marco vinculará el DOM virtual y los datos en dos direcciones, lo que nos ayudará a actualizar la vista de una manera predecible. manera, mejorar en gran medida nuestra eficiencia de desarrollo;
• Multiplataforma: el DOM virtual es esencialmente un objeto JavaScript y el DOM está fuertemente relacionado con la plataforma. Por el contrario, el DOM virtual puede ser más conveniente para operaciones multiplataforma, como la representación del servidor, el desarrollo de Weex, etc.

defecto:

• No se puede realizar una optimización extrema: aunque el DOM virtual + una optimización razonable es suficiente para cumplir con los requisitos de rendimiento de la mayoría de las aplicaciones, en algunas aplicaciones con requisitos de rendimiento extremadamente altos, el DOM virtual no se puede seleccionar para una optimización extrema.

61. ¿Cuál es el principio del DOM virtual?

虚拟 DOM 的实现原理主要包括以下 3 部分：

• 用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
• diff 算法 — 比较两棵虚拟 DOM 树的差异；
• pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

62. Vue 中的 key 有什么作用？

key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速。
Vue 的 diff 过程可以概括为：oldCh 和 newCh 各有两个头尾的变量 oldStartIndex、oldEndIndex 和 newStartIndex、newEndIndex，它们会新节点和旧节点会进行两两对比，即一共有4种比较方式：newStartIndex 和oldStartIndex 、newEndIndex 和 oldEndIndex 、newStartIndex 和 oldEndIndex 、newEndIndex 和 oldStartIndex，如果以上 4 种比较都没匹配，如果设置了key，就会用 key 再进行比较，在比较的过程中，遍历会往中间靠，一旦 StartIdx > EndIdx 表明 oldCh 和 newCh 至少有一个已经遍历完了，就会结束比较。
所以 Vue 中 key 的作用是：key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速!

• 更准确：因为带 key 就不是就地复用了，在 sameNode 函数 a.key === b.key 对比中可以避免就地复用的情况。所以会更加准确。
• 更快速：利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快，源码如下：

function createKeyToOldIdx (children, beginIdx, endIdx) {
  let i, key
  const map = {}
  for (i = beginIdx; i <= endIdx; ++i) {
    key = children[i].key
    if (isDef(key)) map[key] = i
  }
  return map
}

62. Object.defineProperty怎么用， 三个参数？，有什么作用啊？

El método Object.defineProperty() define una nueva propiedad directamente en un objeto, o modifica una propiedad existente de un objeto y devuelve este objeto.

     obj：需要定义属性的对象
     prop：需要定义的属性
     {}：要定义或修改的属性描述符。
	     value: "18",         // 设置默认值 （与 get() 互斥）
	     enumerable: true,    //这一句控制属性可以枚举 enumerable 改为true 就可以参与遍历了   默认值false
	     writable: true,      // 该属性是否可写   默认值false （与 set() 互斥）
	     configurable: true,  // 该属性是否可被删除   默认值false
	      get // 当有人读取 prop 的时候  get函数就会调用,并且返回就是 sss 的值
	      set // 当有人修改 prop 的时候  set函数就会调用, 有个参数这个参数就是修改后的值

63. ¿Cuál es la diferencia entre reactivo y ref?

Desde la perspectiva de la definición de datos:

• ref se utiliza para definir: datos de tipo básico

• reactivo se utiliza para definir datos de tipo objeto (o matriz)

  Observaciones: ref también se puede utilizar para definir datos de tipo objeto (o matriz), que se convertirán automáticamente en un objeto proxy mediante reactivos internos.

Desde la perspectiva de la comparación de principios:

• ref implementa la capacidad de respuesta (secuestro de datos) mediante la obtención y configuración de Object.defineProperty().
• reactivo implementa la capacidad de respuesta (secuestro de datos) mediante Proxy y manipula los datos dentro del objeto fuente a través de Reflect.

Desde el punto de vista del uso:

• Datos definidos por ref: .value es necesario para operar los datos, y .value no es necesario para la lectura directa en la plantilla al leer datos.
• Los datos definidos por reactivo: datos de operación y datos de lectura: ninguno necesita .value.

64. ¿Puede v-on monitorear múltiples métodos?

Dos formas de vincular múltiples eventos a un elemento

<a v-on='{click:DoSomething,mouseleave:MouseLeave}'>doSomething</a>
<button @click="a(),b()">点我ab</button>

65. ¿Cómo obtener objetos refs y dom en vue3? ¿Cómo usarlo en vue2?

vista 3:

(1) En el método de la función de configuración, obtenga el elemento dom vinculado a un único atributo de referencia: primero defina una definición de referencia de datos de respuesta vacía, qué elemento dom desea obtener y use el atributo de referencia en el elemento para vincular los datos. puedes obtener el nodo dom a través de ref.value

(2) Obtenga los elementos dom vinculados por múltiples atributos de referencia. Utilice ref para vincular una función y agregar dom a la matriz en la función

//vue2
<h3 ref="myref">myref</h3>

//获取
this.$refs.myref

66. La diferencia entre superficialReactivo y superficialRef

(1) superficialReactivo: solo se ocupa de la respuesta de la capa más externa del objeto (respuesta superficial)

(2) superficialRef: solo maneja el tipo de respuesta del tipo de datos básico y no realiza el procesamiento del tipo de respuesta del objeto.

(3) Escenarios de aplicación:

① Si hay datos de un objeto, la estructura es relativamente profunda, pero cuando cambia, solo cambian los atributos externos, use superficialReactive.

② Si hay datos de un objeto, la función posterior no modificará las propiedades del objeto, sino que generará un nuevo objeto para reemplazarlo, utilizando superficialRef.

67. Cómo utilizar proporcionar e inyectar

(1) El paso de parámetros entre componentes padre e hijo se puede lograr mediante accesorios y emisión, pero cuando la jerarquía de componentes es profunda, los accesorios y la emisión no tienen ningún efecto. Para resolver este problema, vue propone Proporcionar / Inyectar; proveedor / inyectar: ​​en pocas palabras, las variables se proporcionan a través de proveedores en los componentes principales y las variables se inyectan mediante inyección en los componentes secundarios.

(2) Primero se debe introducir el suministro y pasamos las variables que deben pasarse a los componentes de nivel inferior a través del proveedor ('clave de transferencia', variable)

(3) Inyectar, los componentes de nivel inferior reciben a través de variables, persona = inyectar ('clave de transferencia')

68. ¿Cuál es la función de toRaw y markRaw?

(1) toRaw: convierte un objeto responsivo generado por reactivo en un objeto normal

Escenario de uso: se utiliza para leer el objeto común correspondiente al objeto responsivo. Todas las operaciones en este objeto común no provocarán actualizaciones de la página.

(2) markRaw: marca un objeto para que nunca vuelva a convertirse en un objeto responsivo.

Escenario de aplicación: algunos valores no deben configurarse para que respondan, como bibliotecas de clases complejas de terceros. Al representar listas grandes con fuentes de datos inmutables, omitir la conversión receptiva puede mejorar el rendimiento.

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-0gRb8BE4-1686967105050) (C:\Users\lenovo\AppData\Roaming\Typora \typora-user-images\ 1685349361040.png)]

69. Comprensión de solo lectura y superficial

solo lectura: haga que los datos receptivos sean de solo lectura (solo lectura profunda), solo lectura es una función que recibirá datos receptivos

superficialReadonly: haga que los datos receptivos sean de solo lectura (solo lectura superficial), superficialReadonly solo restringe la primera capa de datos en el objeto (no se puede cambiar, como: salario), pero el valor del atributo de valor profundo anidado se puede cambiar Sí, Hacemos clic en el botón Cambiar para probar y podemos encontrar que el valor profundo del objeto envuelto por superficialReadonly ha cambiado.

70. La diferencia entre toref y torefs

toRefy toRefsse puede utilizar para copiar reactivelas propiedades internas y convertirlas en ref, y conserva tanto la capacidad de respuesta como引用

toref(变量，属性)，torefs(整个变量)

la diferencia:

• En la expresión de interpolación { {}}:
  • Para acceder al valor de toRefs, debe traerlo. .valueSi no lo trae, habrá comillas dobles { {user.name.value}}
  • Para acceder al valor de toRef, no es necesario traer .value{ {user.name}}
• Propiedades de conversión:
  • toRef: copia los atributos en reactivo 单个y conviértelos a ref
  • toRefs: copia los atributos en reactivo 所有y conviértelos en ref

71. Aprenda EventBus

Primero, cree un archivo en su proyecto eventBus.jsy defina un objeto EventBus vacío:

import Vue from 'vue';
export const EventBus = new Vue();

enviar evento

import {
    
     EventBus } from './eventBus.js';

// 发送名为 'myEvent' 的事件
EventBus.$emit('myEvent', data);

recibir evento

import {
    
     EventBus } from './eventBus.js';

EventBus.$on('myEvent', (data)=>{
    
    });

dejar de escuchar

EventBus.$off('myEvent');

72.filtro vue2 (cancelación de vue3)

filterEl filtro es una función muy común que se puede utilizar para formatear, ordenar, filtrar y otras operaciones con datos. Durante el uso, solo necesitamos usar el carácter de barra vertical en la expresión de plantilla |y pasar el nombre del filtro que se usará como parámetro.

全局过滤器: Vue.filter('nombre del filtro', función(){})

局部过滤器:opciones de filtro

filters: {
    
    
    //filterName过滤器名，value是'|'之前的数据
    filterName(value) {
    
    
      if (!value) return '';
      return '你好'+value.toString()
    }
  }

73. ¿Puede vue escuchar propiedades calculadas a través de propiedades calculadas?

Respuesta:不可以

计算属性依赖于其他属性值，所以我们可以在计算属性中监听这些属性值的变化，并执行一些相关的操作 。 但是，计算属性无法直接监听另一个计算属性的变化，因为一个计算属性的值不是响应式的，它依赖的属性值发生变化时只有它自己才会重新计算，而不会触发其他计算属性的更新

---

六、TypeScript篇

1.TypeScript基本数据类型

原始数据类型：

• boolean 布尔值
• number 数值
• string 字符串
• null 空值
• undefined 未定义
• Symbol （ES6 中的新类型）

非原始数据类型：

• 数组 arr: number[] arr: Array

• Tuple 元祖 x: [string, number]

• enum 枚举

enum Color {
     
     Red, Green, Blue};
let c: Color = Color.Blue;//默认情况下，从 0 开始为元素编号。
console.log(c);    // 输出 2

enum Person {
     
     
 name = "NAME",
 age = "AGE",
 love = "LOVE",
 hobby = "HOBBY",
}
console.log(Person.name); // NAME
console.log(Person.hobby); // HOBBY

• never 永不存在的值的类型

• void

//void 类型像是与 any 类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void。
function hello(): void {
     
     
   alert("Hello ts");
}

• any 任意类型

• 联合类型

//联合类型（Union Types）表示取值可以为多种类型中的一种。
let num: string | number;
num = "seven";
num = 7;

• 函数类型
• unknown 表示一个未知的类型,使用unknown标注的变量和参数必须经过类型检查和转换后才能使用。

2.void和undefined

let unde: void = undefined;
let nu: void = null;

let un: undefined = undefined;
let nu: null = null;

//与 void 的区别是，undefined是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量

let num: number = undefined;

let un: undefined;
let num2: number = un;

3.TypeScript类修饰符

TypeScript支持访符 public，private 和 protected，它们决定了类成员的可访问性。

public(公共)：所有定义成public的属性和方法都可以在任何地方进行访问。

private(私有)：所有定义成private的属性和方法都只能在类定义内部进行访问。

protected(受保护)： 该类及其子类的所有成员都可以访问它们。 但是该类的实例无法访问

4.如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型

//通过不同方式使用联合类型写法  |

// 方法1：
let arr1: (number | string)[] = [1]
arr1.push(1)
arr1.push('3')

// 方法2：
let  arr2 : Array<string | number> = [1, '2']
arr2.push(1)
arr2.push('3')

// 方法3：
type newType = number|string
let arr3:newType []= [3]
arr3.push(1)
arr4.push('5')

5.TypeScript接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

//接口定义 interface
interface interface_name {
    
     
}

//以下实例中，我们定义了一个接口 IPerson，接着定义了一个变量 customer，它的类型是 IPerson。
//customer 实现了接口 IPerson 的属性和方法。
interface IPerson {
    
     
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 
 
var customer:IPerson = {
    
     
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{
    
    return "Hi there"} 
} 
 
console.log("Customer 对象 ") //Customer 对象
console.log(customer.firstName) //Tom
console.log(customer.lastName)//Hanks
console.log(customer.sayHi()) //Hi there

6.TypeScript对象和TypeScript接口的区别

Objeto: el objeto es un tipo de datos en TS que se puede usar 存储多个数据属性和方法para crear instancias a través de constructores o literales de objetos.

Interfaz: la interfaz está definida en TS 数据结构的规范y se utiliza principalmente para describir la forma del objeto, es decir, qué propiedades y métodos debe contener el objeto, pero no proporciona implementación. Una interfaz puede actuar como un contrato, asegurando que otro código se ajuste a su especificación.

//对象
let person = {
    
    
  name: "Tom",
  age: 18,
  sayHi: function() {
    
    
    console.log("Hi");
  }
};

console.log(person.name); // Tom
person.sayHi(); // Hi

//接口
interface Person {
    
    
  name: string;
  age: number;
  sayHi(): void;
}

let person: Person = {
    
    
  name: "Tom",
  age: 18,
  sayHi() {
    
    
    console.log("Hi");
  }
};

console.log(person.name); // Tom
person.sayHi(); // Hi

Escriba alias y escriba símbolo referencia de detalles de csdn

7. Alias ​​de tipo TypeScript

Lo anterior presenta los tipos de datos y las interfaces en ts, pero es inevitable encontrar varios tipos complejos durante el proceso de desarrollo . Algunos tipos de datos son más flexibles y complejos. En este momento, los alias de tipos son una herramienta muy útil . Puede ayudarnos simplificar el código, mejorar la legibilidad y el mantenimiento del código

Uso básico: type 类型名 = 类型值

type Name = string;
type Age = number;
type Person = {
    
    
  name: Name;
  age: Age;
  sayHi(): void;
};

let person: Person = {
    
    
  name: "Tom",
  age: 18,
  sayHi() {
    
    
    console.log("Hi");
  }
};

console.log(person.name); // Tom
person.sayHi(); // Hi

8. Tipo literal de TypeScript

Los tipos literales se utilizan para representar valores literales específicos, incluidas cadenas, números y valores booleanos. Se pueden utilizar como parte de anotaciones de tipo para limitar el rango de valores de variables, parámetros de funciones, valores de retorno de funciones, etc.

• Literales numéricos, literales de cadena, literales booleanos, literales nulos, literales enumerativos

  //数字字面量
  type Num = 10
  const num: Num = 10
  const num2: Num = 20 // 抛错，不能将20赋值给类型10
  
  //字符串字面量
  type Str = "a"
  const num: Str = "a"
  
  //布尔字面量
  type Bool = false
  const bool: Bool = false
  
  //空值字面量
  type Void = void;
  const isNull: Void = null
  const isUndefined: Void = undefined
  const isVoid: Void = void 0
  
  //枚举字面量
  enum Color {
        
        
      Red = 1,
      Green,
      Blue
  }
  type colorBlue = Color.Blue
  const blue: colorBlue = 3
  

9. Notación de tipo TypeScript

Los símbolos de tipo en TypeScript son símbolos utilizados para declarar tipos de variables, principalmente en las siguientes categorías:

1. :: Se utiliza para declarar el tipo de variable, por ejemplo: let a: number = 10;significa declarar una variable llamada a y marcar su tipo como número.
2. ?: Se utiliza para indicar que cierto atributo o parámetro es opcional, por ejemplo: interface Person { name: string; age?: number; }indica que el atributo de edad de la interfaz Persona es opcional.
3. []: se usa para indicar el tipo de matriz, por ejemplo: let arr: number[] = [1, 2, 3];significa declarar una matriz llamada arr, donde el tipo de elemento es número.
4. (): Se utiliza para indicar el tipo de función, por ejemplo: function add(a: number, b: number): number { return a + b; }significa declarar una función llamada agregar, donde los tipos de parámetros a y b son números y el tipo de valor de retorno también es número.
5. |: se utiliza para representar el tipo de unión, por ejemplo: let c: number | boolean = 10;para declarar una variable llamada c cuyo tipo es numérico o booleano.
6. &: se utiliza para representar el tipo de intersección, por ejemplo: interface A { a: number; } interface B { b: string; } type C = A & B;significa definir un tipo cruzado llamado C, que contiene tanto las propiedades como los métodos de las dos interfaces A y B

10. Tipo cruzado de TypeScript

Los tipos de intersección se pueden utilizar para combinar varios tipos en uno. El tipo de intersección se usa 且符号&para conectar dos o más tipos; vale la pena señalar que el tipo de intersección se usa generalmente para definir tipos de datos complejos como objetos. Si el tipo de intersección se usa para definir el tipo básico, se convertirá al nunca escriba , porque un tipo es imposible Ambos tipos básicos

& 连接的是简单联合类型，则产生的新类型是 & 符号两边类型的公有类型。

//交叉基础类型，错误示范
type str = string
type num = number
type StrAndNum = str & num // never类型

//正确示范
type information = {
    
    
    name: string
    age?: number  //?是可选类型，可以下放交叉不使用
}
type information2 = {
    
    
    readonly address: string
}
 
type user = information & information2
 
const whiteDog: WhiteDog = {
    
    
    name: "lc",
    address: "中国",
}

//` & 连接的是简单联合类型
type A = string | number
type B = string[] | number
// C是A和B共有的类型，number类型
type C = A & B

11. Objetos genéricos

Genéricos: use corchetes angulares <> para declarar parámetros de tipo (puede haber más de uno) para representar un tipo temporalmente desconocido, y pase el tipo correspondiente (o deducido automáticamente por TS) para reemplazar la aparición correspondiente del parámetro de tipo al declarar los lugares variables, reemplazando así tipos abstractos y desconocidos por tipos concretos y conocidos. Un parámetro de tipo se refiere a un tipo, como <T, K, U, ...> cada uno se refiere a un tipo temporalmente desconocido. Cuando se utilizan genéricos para definir tipos de objetos, se obtienen objetos genéricos.

// 类型T代表一种暂时未知的类型
interface PersonInfo<T> {
    
    
  info: T
}
// 传入类型变量string，这时候string就会在相应的地方替换原来的T
let p1: PersonInfo<string> = {
    
    
  info: 'cc'
}

let p2: PersonInfo<number> = {
    
    
  info: 18
}

let p3: PersonInfo<'男' | '女'> = {
    
    
  info: "男"
}

Los genéricos también se pueden utilizar en alias de tipos . Además de definir tipos de objetos, los alias de tipos también pueden utilizar genéricos para definir otros tipos. Por lo tanto, podemos usar anidamiento genérico para definir estructuras de tipos más complejas.

12. Escriba afirmaciones

La aserción de tipo (Type Assertion) es una forma de decirle explícitamente al compilador el tipo de una variable, lo que nos permite especificar manualmente el tipo de una variable, evitando así la verificación del tipo de variable por parte del compilador TypeScript.

//断言两种方式,<>和as

let str: unknown
const len: number = (<string>str).length

let str: unknown
const len: number = (str as string).length

Comprensión personal: una variable se define de antemano y se establece el tipo para ella, pero en otros escenarios, esta variable debe ser de otro tipo para evitar informes de errores al especificarla 断言como el tipo requerido.

13. tipo desconocido

类型unknown表示一个未知的类型。与any类型不同，使用unknown标注的变量和参数必须经过类型检查和转换后才能使用。

应用场景：

• 当我们不知道某个变量的类型时，在某些情况下可以先把它标注为unknown类型，并在使用前进行类型检查或类型转换。
• 当我们编写一些通用的函数或库时，为了避免与不同的代码库之间发生类型冲突，可以使用unknown类型来定义变量和参数。

function processValue(value: unknown) {
    
    
  if (typeof value === "string") {
    
    
    console.log(value.toUpperCase());
  } else if (typeof value === "number") {
    
    
    console.log(value.toFixed(2));
  }
}

let val1: unknown = "hello";
processValue(val1); // 输出HELLO

let val2: unknown = 3.1415;
processValue(val2); // 输出3.14

let val3: unknown = true;
processValue(val3); // 编译时错误：boolean类型不能转换为string或number类型

从上面的例子中可以看出，如果不进行类型检查或类型转换，使用unknown类型的变量会导致编译时错误。但是，通过类型检查和转换，我们可以安全地使用这个变量并避免类型错误。

14.函数重载

函数名称相同，但是参数的个数或者类型不同。

// 函数的定义
function add(num1: number, num2: number): number;
function add(num1: string, num2: string): string;

// 函数的实现
function add(num1: any, num2: any): any {
    
    
    return num1 + num2;
}

15.抽象类

通过abstract定义抽象类

在 TypeScript 中，抽象类是一种特殊的类，它本身不能被实例化，而只能被继承。抽象类可以包含抽象方法（即只有方法签名，没有实现），用于定义一些基本的行为或约束子类必须实现的方法，以及普通的具体方法，用于提供一些默认的实现。

// 不可以 new Animal 只能继承抽象类
abstract class Animal {
    
    
  abstract makeSound(): void;
  move(distanceInMeters: number = 0) {
    
    
    console.log(`Animal moved ${
      
      distanceInMeters}m.`);
  }
}

class Dog extends Animal {
    
    
  makeSound() {
    
    
    console.log("Woof! Woof!");
  }
}

let dog = new Dog();
dog.makeSound(); //  "Woof! Woof!"
dog.move(10); // "Animal moved 10m."

16.类型守卫，typeof 以及 instanceof

typeof 类型守卫：使用 typeof 运算符可以判断一个变量的类型是 string、number、boolean、symbol 或 undefined。

instanceof 类型守卫：使用 instanceof 运算符可以判断一个变量是否为指定类的实例。它的使用方法是在检测对象的同时指定一个构造函数作为比较对象

//typeof
function example(value: string | number) {
    
    
  if (typeof value === "string") {
    
    
    console.log(`The value is a string: ${
      
      value}`);
  } else {
    
    
    console.log(`The value is a number: ${
      
      value}`);
  }
}
example("hello"); // Output: "The value is a string: hello"
example(42); // Output: "The value is a number: 42"

//instanceof
class MyClass {
    
    }
function example(input: MyClass | string) {
    
    
  if (input instanceof MyClass) {
    
    
    console.log("The input is an instance of MyClass.");
  } else {
    
    
    console.log(`The input is a string: ${
      
      input}`);
  }
}
example(new MyClass()); // Output: "The input is an instance of MyClass."
example("hello"); // Output: "The input is a string: hello"

17.TypeScript 编译上下文

在 TypeScript 中，编译上下文是指编译器对源代码进行类型检查和转换时所使用的环境和规则

编译上下文可以包含以下几个方面：

1. Opciones de compilación: el compilador puede configurar varias opciones de compilación a través de parámetros de línea de comando o archivos tsconfig.json, incluido el directorio de salida, el método de análisis del módulo, la versión de JavaScript generada, etc.
2. Comprobación de tipos: el compilador realiza una comprobación de tipos en el código fuente para detectar posibles errores de tipo y proporcionar una inferencia de tipos más precisa. El proceso de verificación de tipos implica conceptos como sistema de tipos, anotación de tipos e inferencia de tipos.
3. Conversión de tipos: durante la compilación, TypeScript convierte las características del lenguaje utilizadas en el código fuente (como clases, interfaces, genéricos, enumeraciones, espacios de nombres, etc.) en el código JavaScript correspondiente. Durante este proceso, el compilador también realizará algunas optimizaciones y ajustes.
4. Procesamiento de archivos de declaración: TypeScript admite el uso de archivos de declaración para describir la información de tipo de bibliotecas y módulos de JavaScript para mejorar la compatibilidad con bibliotecas de terceros y la eficiencia del desarrollo. El compilador buscará automáticamente archivos de declaración en el proyecto, o bibliotecas sin archivos de declaración; también puede generarlo automáticamente mediante herramientas de terceros.
5. Resolución del módulo: durante el proceso de compilación, el compilador necesita resolver las dependencias entre módulos para poder generar correctamente los archivos de código JavaScript correspondientes. La resolución de módulos implica cuestiones como rutas de módulos, alias de módulos y resolución personalizada.

18.tsconfig.json

tsconfig.json es un archivo de configuración utilizado para configurar el compilador TypeScript. A través de este archivo de configuración, puede especificar las reglas y opciones utilizadas por el compilador para implementar un proceso de compilación personalizado y ajustar la salida.

{
    
    
  "compilerOptions": {
    
    
    /* 基本选项 */
    "target": "es5",                       /* 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', or 'ESNEXT' */
    "module": "commonjs",                  /* 指定模块化代码生成方式: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext' */
    "lib": ["es6", "dom"],                 /* 指定要包含在编译中的库文件，默认为所有支持的库 */
    "outDir": "./dist",                    /* 指定输出目录 */
    "rootDir": "./src",                    /* 指定源代码目录 */
  
    /* 详细选项 */
    "strict": true,                        /* 启用所有严格类型检查选项 */
    "noImplicitAny": true,                 /* 在表达式和声明上有隐含的 any 类型时报错 */
    "strictNullChecks": true,              /* 启用严格的 null 检查 */
    "noImplicitThis": true,                /* 当 this 表达式值为 any 类型的时候，生成一个错误 */
    "alwaysStrict": true,                  /* 以严格模式检查每个模块，并在模块内部启用 "use strict" */
  
    /* 配置文件扩展选项 */
    "resolveJsonModule": true,             /* 允许导入 .json 模块 */
    "esModuleInterop": true,               /* 自动生成命名空间导入 (import * as module from "module") */
    "skipLibCheck": true                    /* 跳过对声明文件的检查 */
  }
}

19. Diferencia entre TypeScript y JavaScript

js no tiene el concepto de sobrecarga, pero ts puede sobrecargar

ts agrega interfaz de interfaz, tipo genérico, clase, polimorfismo de clase, herencia, etc.

En comparación con el tipo básico de js, ts agrega void/never/any/tuple/enumeration/y algunos tipos avanzados

选择学习

1. Sistema de tipos: TS es un lenguaje de programación con verificación de tipos estáticos, que admite especificar explícitamente el tipo de datos de las variables en el código, declarar los tipos de funciones de entrada y salida, definir interfaces y clases, etc. JS es un lenguaje de tipo dinámico y los tipos de variables se determinan dinámicamente en tiempo de ejecución.
2. Método de compilación: TS es un lenguaje compilado que requiere un compilador para convertir el código TS en código JS equivalente antes de que pueda ejecutarse en un navegador o Node.js. Y JS es un lenguaje interpretado, que el tiempo de ejecución interpreta y ejecuta directamente.
3. 扩展语法：TS 支持 ECMAScript 标准中定义的所有语法，并且还提供了一些自己的扩展语法，例如枚举类型、泛型、元组类型等。JS 则不支持所有扩展语法，并且在新标准发布前需要等待浏览器厂商的实现或者使用 polyfill 进行补丁。
4. 开发工具：TS 具备良好的 IDE 集成、语法高亮、代码提示、错误检查等功能，开发体验更加友好。JS 的开发工具则相对简单，主要是一些文本编辑器和浏览器控制台。
5. 生态环境：TS 是由微软开发并维护的项目，有着全球范围内的活跃社区和丰富的第三方库。JS 则更加开放和自由，生态环境更加广泛和多样化。

---

七、React篇

1.react理解

• React，用于构建用户界面的 JavaScript 库，只提供了 UI 层面的解决方案 ，是渐进式框架，采用mvc架构
• 特性： JSX 语法 ， 单向数据绑定 ， 虚拟 DOM ， 声明式编程 ，组件化开发

2.react-router 里的 标签和 标签有什么区别？

• react-router 接管了其默认的链接跳转行为，与传统的页面跳转有区别的是，Link 的 “跳转” 行为只会触发相匹配的对应的页面内容更新，而不会刷新整个页面。
• link做了哪些事：1.有onclick就执行onclick，2.click的时候阻止a标签默认事件，3.根据跳转href用history跳转，此时只是链接变了，并没有刷新页面

3.React Jsx转换成真实DOM过程？

• 首先我们知道Jsx代码是不会被浏览器识别的，最终都会转化为 React.createElement 形式，babel实现这个过程
• createElement函数对key和ref等特殊的props进行处理，并获取defaultProps对默认props进行赋值，并且对传入的孩子节点进行处理，最终构造成一个虚拟DOM对象
• ReactDOM.render renderiza el DOM virtual generado en el contenedor especificado, que adopta procesamiento por lotes, transacciones y otros mecanismos y optimiza el rendimiento de navegadores específicos, y finalmente lo convierte en un DOM real.

4. ¿Comprensión y principio de React Router? ¿Cuáles son los componentes del enrutador más utilizados?

• La esencia del enrutamiento es que cuando la página URLcambia, los resultados de visualización de la página pueden URLcambiar según el cambio, pero la página no se actualizará.
• react-routerSe divide principalmente en varios paquetes diferentes (este no se escribirá primero)
• Componentes comunes del enrutador:
  • BrowserRouter, HashRouter: historial del modo de enrutamiento, hash
  • ruta: Routese utiliza para hacer coincidir rutas y luego representar componentes
  • Enlace, NavLink: el salto de la ruta habitual es utilizar Linkel componente para agregar algunos atributos de estilo en función de, por ejemplo, cuando se selecciona el componente, el estilo cambia (activeStyle, activeClassName NavLink) .Link
  • redirección: redirección de ruta
  • interruptor: swichla función del componente es aplicable cuando el primer componente coincide y los siguientes componentes no deben continuar coincidiendo

Cinco, reaccionar ciclo de vida

• Cuando se monta un componente
  Cuando se crea e inserta una instancia de componente en el DOM, su secuencia de invocación del ciclo de vida es la siguiente:

  constructor()
  estático getDerivedStateFromProps()
  render()
  componenteDidMount()

• Cuando se actualiza el componente,
  se activa una actualización cuando cambian los accesorios o el estado del componente. El orden de las llamadas del ciclo de vida para las actualizaciones de componentes es el siguiente:

  static getDerivedStateFromProps()
  shouldComponentUpdate()
  render()
  getSnapshotBeforeUpdate()
  componentDidUpdate()

• 组件卸载时
  当组件从DOM中移除时会调用如下方法

  componentWillUnmount()

6.react新生命周期取代了哪些？为什么？

React 新的生命周期方法主要是为了支持 Fiber 架构中的三个新概念而设计的： fiber节点，异步渲染，可中断性

• getDerivedStateFromProps(静态方法) 取代了componentWillMount和 componentWillReceiveProps

• getSnapshotBeforeUpdate 取代了componentWillUpdate

• getDerivedStateFromProps 中禁止了组件去访问 this.props， 由于 this.props 可能在任何时刻发生变化，所以计算出来的 state 对象可能会与旧的 state 对象相同，从而导致状态更新无效和不必要的组件重新渲染。 在 getDerivedStateFromProps 方法中应该始终使用参数中的 nextProps，而不是 this.props。这样可以保证组件状态的计算是基于最新的 props，从而避免了状态更新无效和渲染性能的问题。

• getSnapshotBeforeUpdate 方法是在组件的 render 方法被调用后，在更新 DOM 之前被调用的 ，也就是说在 getSnapshotBeforeUpdate 中读取到的 DOM 元素信息是可以保证与componentDidUpdate 中一致的。

7.Fiber架构的理解？解决了什么问题？

在 React 16 之前，VirtualDOM 的更新采用的是Stack架构实现的，也就是循环递归方式。不过，这种对比方式有明显的缺陷，就是一旦任务开始进行就无法中断，如果遇到应用中组件数量比较庞大，那么VirtualDOM 的层级就会比较深，带来的结果就是主线程被长期占用，进而阻塞渲染、造成卡顿现象。

fiber：为了避免出现卡顿等问题，我们必须保障在执行更新操作时计算时不能超过16ms，如果超过16ms，就需要先暂停，让给浏览器进行渲染，后续再继续执行更新计算。而Fiber架构就是为了支持“可中断渲染”而创建的。 解决了react在渲染大量dom节点出现丢帧的问题

React Fiber 与浏览器的交互流程如下图。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4G89UyXp-1686967105051)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\1685850448945.png)]

• 从架构角度：fiber是对react核心算法的重写(调和过程)
• 从编码角度：fiber是react内部定义的一种数据结构，是fiber树结构的节点单位，react16新架构下的虚拟dom
• 主要操作：
  • 为每个增加了优先级，优先级高的任务可以中断低优先级的任务。然后再重新，注意是重新执行优先级低的任务
  • 增加了异步任务，调用requestIdleCallback api，浏览器空闲的时候执行
  • dom diff树变成了链表，一个dom对应两个fiber（一个链表），对应两个队列，这都是为找到被中断的任务，重新执行

En la arquitectura Fiber, React divide el proceso de actualización de componentes en dos fases: reconciliación y confirmación. La etapa de conciliación es principalmente responsable de calcular el árbol DOM virtual actualizado y determinar qué componentes deben volver a representarse, mientras que la etapa de confirmación es responsable de mapear los cambios del árbol DOM virtual al DOM real.

Resumen: en comparación con la arquitectura Stack tradicional, Fiber divide el trabajo en múltiples unidades de trabajo y, después de ejecutar cada unidad de trabajo, decide si cede el control al navegador para realizar el renderizado de acuerdo con el tiempo restante. Y fija la prioridad de cada unidad de trabajo, suspende, reutiliza y aborta unidades de trabajo. Cada nodo de fibra es un nodo en el árbol de fibras, conectado por hijos, hermanos y referencias de retorno para formar un árbol de fibras completo.

8. ¿Comprensión y escenarios de uso de componentes con estado y componentes sin estado de reacción? ,

• componentes con estado
  • Características:
    • Es un componente de clase
      con herencia
      , puede usar esto,
      puede usar el ciclo de vida de reaccionar,
      se usa con más frecuencia y es fácil activar la función de enlace del ciclo de vida con frecuencia , lo que afecta el rendimiento
      Estado de uso interno, mantenimiento el cambio de su propio estado, los componentes con estado de acuerdo con los accesorios pasados ​​por los componentes externos y el propio estado para la representación
  • escenas a utilizar:
    • Aquellos que necesitan usar el estado
      deben usar el estado para operar componentes (los componentes sin estado también pueden implementar la nueva versión de los ganchos de reacción)
  • Resumen:
    los componentes de clase pueden mantener sus propias variables de estado, es decir, el estado del componente. Los componentes de clase también tienen diferentes métodos de ciclo de vida, lo que permite a los desarrolladores hacer más con los componentes en diferentes etapas del componente (montaje, actualización y desinstalación). ).controlar. Los componentes de clase pueden actuar como componentes con y sin estado. Cuando un componente de clase no necesita administrar su propio estado, también se le puede llamar componente sin estado.
• componentes sin estado
  • Características:
    • El estado que no depende de sí mismo
      puede ser un componente de clase o un componente de función.
      Puede evitar completamente el uso de esta palabra clave (porque usa eventos de función de flecha sin enlace)
      y tiene un mayor rendimiento. Cuando no necesita usar el ciclo de vida ganchos, debe usarlos primero. Componente de función sin estado El
      componente no mantiene el estado dentro del componente y solo representa el componente de acuerdo con los accesorios pasados ​​por el componente externo. Cuando los accesorios cambian, el componente se vuelve a renderizar
  • escenas a utilizar
    • Los componentes no necesitan administrar el estado, pura visualización
  • Ventajas:
    simplifica el código,
    no es necesario crear instancias de los componentes de renderizado, no hay ciclo de vida, mejora el rendimiento, la salida (renderizado) solo depende de la entrada (propiedades), sin efectos secundarios Desacoplamiento
    y separación de vistas y datos
  • Desventajas:
    No se puede usar ref
    sin el método de ciclo de vida.
    No se puede controlar la reproducción de componentes, porque el método shouldComponentUpdate no se puede usar; cuando el componente recibe nuevas propiedades, se volverá a representar

9. ¿Síntesis de eventos de React?

• Todos los eventos están delegados id = rooten el elemento DOM (muchos en Internet dicen que está en document, 17la versión no);
• El monitoreo de eventos de todos los nodos de la aplicación en realidad se id = rootactiva en el elemento DOM;
• ReactImplementó un conjunto de mecanismos de captura de eventos por sí solo;
• ReactSe implementan eventos sintéticos SyntheticEvent;
• ReactEl grupo de eventos ya no se usa en 17la versión (muchos en Internet dicen que el grupo de objetos se usa para administrar la creación y destrucción de objetos de eventos sintéticos, cuál es 16la versión y anterior);
• Una vez que el evento id = rootse delega en el elemento DOM, en realidad se activa todo el tiempo, pero la función de devolución de llamada correspondiente no está vinculada;

10. ¿Cómo comunicarse entre los componentes de React?

1. 父组件向子组件通讯:
   父组件可以向子组件传入props的方式，向子组件进行通讯。
2. 子组件向父组件通讯:
   props+回调的方式，父组件向子组件传递props进行通讯，此props为作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到⽗组件的作⽤域中。
3. 兄弟组件通信:
   兄弟组件之间的传递，则父组件作为中间层来实现数据的互通，通过使用父组件传递
   例：组件A – 传值 --> 父组件 – 传值 --> 组件B
4. 跨层级通讯:
   Context 设计⽬的是为了共享那些对于⼀个
   组件树⽽⾔是“全局”的数据，
   使用context提供了组件之间通讯的一种方式，可以共享数据，其他数据都能读取对应的数据
   例如当前认证的⽤户、主题或⾸选语⾔,对于跨越多层的全局数据通过 Context 通信再适合不过。
5. 发布订阅者模式:
   发布者发布事件，订阅者监听事件并做出反应,我们可以通过引⼊event模块进⾏通信。
6. 全局状态管理工具:
   借助Redux或者Mobx等全局状态管理⼯具进⾏通信,这种⼯具会维护⼀个全局状态中⼼Store,并根据不同的事件产⽣新的状态。

11.React服务端渲染怎么做？原理是什么？

• 服务端渲染(SSR)： 指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程
• 服务端渲染解决的问题：1.SEO由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面 2.加速首屏加载，解决首屏白屏问题
• React如何做服务端渲染？
  • 手动搭建SSR框架
  • 使用成熟的SSR框架，如next.js
• 实现原理：
  • node server 接收客户端请求，得到当前的请求url 路径，然后在已有的路由表内查找到对应的组件，拿到需要请求的数据，将数据作为 props、context或者store 形式传入组件
  • 然后基于 react 内置的服务端渲染方法 renderToString()把组件渲染为 html字符串在把最终的 html 进行输出前需要将数据注入到浏览器端
  • 浏览器开始进行渲染和节点对比，然后执行完成组件内事件绑定和一些交互，浏览器重用了服务端输出的 html 节点，整个流程结束

12.使用 React hooks 怎么实现类里面的所有生命周期？

• 在 React 16.8 之前，函数组件也称为无状态组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wyoi6A3F-1686967105051)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\1682042087354.png)]

13.React事件和原生事件的执行顺序

• 为什么会有合成事件：
  • 在传统的事件里，不同的浏览器需要兼容不同的写法，在合成事件中React提供统一的事件对象，抹平了浏览器的兼容性差异
  • React通过顶层监听的形式，通过事件委托的方式来统一管理所有的事件，可以在事件上区分事件优先级，优化用户体验。React在合成事件上对于16版本和17`版本的合成事件有很大不同
• 执行顺序总结：
  • 16La versión ejecuta primero el evento original y documentejecuta el evento sintético de manera uniforme cuando llega la burbuja.
  • 17La versión ejecuta la fase de captura de eventos sintéticos antes de la ejecución del evento nativo. Después de ejecutar el evento nativo, se ejecuta el evento sintético en la fase de burbujeo. Todos los eventos se administran a través del nodo raíz. El flujo de eventos de bloqueo nativo bloqueará el ejecución del evento sintético, y el evento sintético se bloqueará. También afectará la ejecución nativa posterior

14. ¿Por qué los elementos de reacción tienen un atributo de tipo $$?

El objetivo es prevenir XSS 攻击. Debido a Synbolque no se puede serializar, se puede juzgar si el objeto actual proviene de la base de datos o si se genera por sí mismo Reactmediante la presencia o ausencia del atributo. Sin este atributo, se rechaza el procesamiento del elemento.$$typeofelement$$typeofreact

15. ¿setState es sincrónico o asincrónico?

• Antes de reaccionar18: setState puede comportarse de forma asincrónica o sincrónica en diferentes situaciones. Se sincroniza en la actualización de estado de Promise, evento nativo js, ​​setTimeout, setInterval... En el evento sintético de reaccionar, es asincrónico.
• Después de reaccionar18: setState se comportará de forma asincrónica (es decir, procesamiento por lotes).
• Antes de explicar reaccionar18:
  • Motivo: en la implementación de la función setState de React, juzgará si actualizar this.state directamente o colocarlo en la cola de acuerdo con una variable isBatchingUpdates, y isBatchingUpdates es falso de forma predeterminada, lo que significa que setState actualizará this.state Sin embargo, hay una función BatchingUpdates, esta función modificará isBatchingUpdates a verdadero, y cuando React llama a este BatchingUpdates antes de llamar a la función de procesamiento de eventos, la consecuencia es que el proceso de procesamiento de eventos setState controlado por React no actualizará this.state sincrónicamente. .

16. ¿Cómo hacer que useEffect admita async/await?

• ¿Por qué no?
  • effect functionDebe devolver una función de destrucción ( función returndevuelta cleanup), si useEffectse pasa el primer parámetro async, el valor de retorno será Promise, lo que provocará reactun error al llamar a la función de destrucción.
• ¿Cómo admite useEffect async/await?
  • Cree una función asincrónica ( async...awaitway) y ejecute esa función.

17. ¿Qué optimizaciones de rendimiento se pueden realizar en React?

• Utilice componentes puros: los componentes puros son aquellos que no dependen del estado externo o de referencias.

• optimización de deberíaComponentUpdate

• No use definiciones de funciones en línea (si usamos funciones en línea, renderse creará una nueva instancia de función cada vez que se llame a la función " ")

  function MyButton(props) {
    return (
      <button onClick={() => console.log('Button clicked!')}>
        {props.label}
      </button>
    );
  }
  
  

• Evite el uso de atributos de estilo en línea;

• Utilice datos inmutables inmutables. Cuando utilizamos tipos de referencia en nuestro proyecto, para evitar el impacto en los datos originales, generalmente se recomienda utilizar copia superficial y copia profunda para procesar los datos, pero esto provocará un desperdicio de CPU y memoria, por lo que Se recomienda utilizar inmutable.

  • ventaja:
    • Reduce la complejidad de las variables.
    • Ahorre memoria, lo inmutable utiliza el uso compartido de estructuras para reutilizar la memoria tanto como sea posible, y los objetos a los que no se hace referencia se recolectarán como basura
    • No habrá problemas de concurrencia (ya que los datos en sí son inmutables)
    • Adopte la programación funcional

• Establezca una clave única para el subcomponente, porque en el algoritmo de diferenciación, la clave se utilizará como identificador único para optimizar la representación.

• Úselo React.memopara la memoria del componente ( React.memoun componente de alto nivel), para la misma entrada, no repita la ejecución;

• useCallbackUtilice y en el componente de función useMemopara optimizar el componente. Si no hay cambios en la dependencia, no se ejecutará repetidamente

• Enrutamiento de carga diferida

18. ¿Cuál es la diferencia entre reaccionar y vue?

• la diferencia:
  • La idea de React es que HTML en JavaScript genera HTML a través de JavaScript, por lo que se diseña la sintaxis JSX y se manipula CSS a través de JS.
  • Vue combina HTML, CSS y JavaScript y utiliza sus propios métodos de procesamiento. Vue tiene un componente de archivo único que puede escribir HTML, CSS y JS en un solo archivo. HTML proporciona un motor de plantillas para el procesamiento.
  • React en su conjunto es una idea funcional. En React, es un flujo de datos unidireccional. Se recomienda combinar inmutable para lograr la inmutabilidad de los datos.
  • La idea de Vue es responsiva, es decir, basada en datos variables, al establecer un Vigilante para cada atributo a monitorear, cuando el atributo cambia, el DOM virtual correspondiente se actualiza de manera responsiva.
  • La optimización del rendimiento de React debe realizarse manualmente, mientras que la optimización del rendimiento de Vue es automática, pero el mecanismo de respuesta de Vue también tiene problemas, es decir, cuando hay demasiados estados, habrá muchos Vigilantes, lo que provocará congelaciones.
• terreno común:
  • React y Vue tienen mucho en común, por ejemplo, ambos son marcos de interfaz de usuario de JavaScript, desarrollo basado en componentes, flujo de datos de un solo elemento, programación declarativa y dominio virtual.
• Ventaja:
  • Reaccionar
    • Flexibilidad y capacidad de respuesta: Proporciona máxima flexibilidad y capacidad de respuesta.
    • Biblioteca de JavaScript enriquecida: colaboradores de todo el mundo están trabajando arduamente para agregar más funciones.
    • Escalabilidad: debido a su estructura flexible y escalabilidad, React ha demostrado ser mejor para aplicaciones grandes.
    • En constante evolución: React cuenta con el respaldo de los desarrolladores profesionales de Facebook que buscan constantemente formas de mejorarlo.
    • Plataformas web o móviles: React ofrece la plataforma React Native para desarrollar aplicaciones renderizadas de forma nativa para iOS y Android a través del mismo modelo de componentes de React.
  • vista
    • Facilidad de uso: Vue.js incluye plantillas estándar basadas en HTML que facilitan el uso y la modificación de aplicaciones existentes.
    • Integración más fluida: ya sea una aplicación de una sola página o una interfaz web compleja, Vue.js permite una integración más fluida de componentes más pequeños sin ningún impacto en el sistema general.
    • Mejor rendimiento, tamaño más pequeño: ocupa menos espacio y tiende a proporcionar un mejor rendimiento que otros frameworks.
    • 精心编写的文档：通过详细的文档提供简单的学习曲线，无需额外的知识; HTML和JavaScript将完成工作。
    • 适应性：整体声音设计和架构使其成为一种流行的JavaScript框架。
    • 它提供无障碍的迁移，简单有效的结构和可重用的模板。
• 总结：
  • Vue 的响应式机制也有问题，当 state 特别多的时候，Watcher 会很多，会导致卡顿，所以大型应用（状态特别多的）一般用 React，更加可控。
  • 对于易用性来说，VUE 是更容易上手的，对于项目来说新人更容易接手。

19.React render方法的原理，在什么时候会触发？

原理：
在类组件中render函数指的就是render方法；而在函数组件中，指的就是整个函数组件
render函数中的jsx语句会被编译成我们熟悉的js代码，在render过程中，react将新调用的render函数返回的树与旧版本的树进行比较，这一步是决定如何更新 DOM 的必要步骤，然后进行 diff 比较，更新dom树
触发机：
类组件调用 setState 修改状态
函数组件通过useState hook修改状态
一旦执行了setState就会执行render方法，useState 会判断当前值有无发生改变确定是否执行render方法，一旦父组件发生渲染，子组件也会渲染

20.React Hooks 在使用上有哪些限制？

• 不要在循环、条件或嵌套函数中调用 Hook；
• 在 React 的函数组件中调用 Hook。

21.React Hooks概述及常用的Hooks介绍？

Hooks是React 16.8版本引入的新特性，它为函数组件添加了一些类似于类组件中的状态和生命周期方法的功能

• useState：用于在函数组件中添加状态管理功能。它返回一个由当前状态值和更新函数组成的数组，我们可以通过该数组来获取和更新状态的值。
• useEffect：用于执行副作用操作，例如订阅事件、修改DOM等。它接受一个函数作为参数，该函数将在每次渲染完成后执行。
• useContext：用于在组件间共享数据，它接受一个上下文对象作为参数，然后返回该上下文对象中提供的数据。
• useReducer：用于对复杂状态进行管理。它接受一个reducer函数和初始状态作为参数，并返回一个由当前状态值和dispatch函数组成的数组。
• useCallback：用于缓存函数以提高性能，类似于React.memo。
• useMemo：用于缓存计算结果以提高性能，类似于记忆函数。
• useRef：用于引用DOM节点或保存任意可变值，它返回一个可变的ref对象。

22.说说React生命周期中有哪些坑？如何避免？

• getDerivedStateFromProps 容易编写反模式代码，使受控组件和非受控组件区分模糊
• componentWillMount 在 React 中已被标记弃用，不推荐使用，主要的原因是因为新的异步架构会导致它被多次调用，所以网络请求以及事件绑定应该放到 componentDidMount 中
• componentWillReceiveProps 同样也被标记弃用，被 getDerivedStateFromProps 所取代，主要原因是性能问题。
• shouldComponentUpdate 通过返回 true 或者 false 来确定是否需要触发新的渲染。主要用于性能优化。
• componentWillUpdate 同样是由于新的异步渲染机制，而被标记废弃，不推荐使用，原先的逻辑可结合 getSnapshotBeforeUpdate 与 componentDidUpdate 改造使用。
• 如果在 componentWillUnmount 函数中忘记解除事件绑定，取消定时器等清理操作，容易引发 bug。
• 如果没有添加错误边界处理，当渲染发生异常时，用户将会看到一个无法操作的白屏，所以一定要添加。

23.说说Real diff算法是怎么运作的？

• DiffEl algoritmo es DOMun resultado inevitable de la virtualización, es a través de DOMla comparación de lo antiguo y lo nuevo, será necesario actualizar el contenido parcialmente sin actualizar la página.
• DiffEl algoritmo sigue el principio de comparación en profundidad primero y al mismo nivel.
• reactEl algoritmo diffsigue principalmente la estrategia de tres niveles:
  Nivel de árbol : las operaciones entre niveles de los nodos DOM no se optimizan, solo se comparan los nodos del mismo nivel, solo se realizan operaciones de eliminación y creación, y no hay operaciones de movimiento
  . : si es el mismo tipo de componente, continuará realizando operaciones de diferenciación; de lo contrario, eliminará todos los nodos secundarios bajo el componente directamente y creará un nuevo nivel de elemento:
  para comparar nodos en el mismo nivel, cada nodo es único keyidentificado en el nivel correspondiente, y se conoce a través de la clave Cambios de nodo, mover la antigua posición del nodo establecido, actualizar a la nueva posición del nodo establecido

24. ¿Qué hace setState en la fase de reconciliación?

• setStateDespués de llamar a la función en el código , Reactel objeto de parámetro entrante se fusionará con el estado actual del componente y luego Reconciliationse activará el llamado proceso de reconciliación ().
• Después del proceso de conciliación, el árbol de elementos Reactse construirá de manera relativamente eficiente de acuerdo con el nuevo estado Reacty se volverá a representar toda la interfaz de usuario;
• Después de Reactobtener el árbol de elementos, Reactcalculará automáticamente la diferencia de nodos entre el árbol nuevo y el árbol antiguo, y luego minimizará la representación de la interfaz de acuerdo con la diferencia;
• En el algoritmo de cálculo de diferencias, Reactes relativamente preciso saber qué posiciones han cambiado y cómo deben cambiarse, lo que garantiza actualizaciones bajo demanda en lugar de volver a renderizarlas por completo.

25. ¿Cuáles son los principios del uso de redux?

• Fuente de datos única: el estado global de toda la aplicación se almacena en un árbol de objetos, y este árbol de objetos solo existe en el único almacén.
• State 是只读的：唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事情的普通对象。
• 使用纯函数来执行修改：为了描述 action 如何改变 state tree，你需要编写纯的 reducers。

26.说说redux的实现原理是什么，写出核心代码？

• 将应用的状态统一放到state中，由store来管理state。
• reducer的作用是 返回一个新的state去更新store中对用的state。
• 按redux的原则,UI层每一次状态的改变都应通过action去触发，action传入对应的reducer 中，reducer返回一个新的state更新store中存放的state，这样就完成了一次状态的更新
• subscribe是为store订阅监听函数，这些订阅后的监听函数是在每一次dipatch发起后依次执行
• 可以添加中间件对提交的dispatch进行重写
  核心API
• createStore 创建仓库，接受reducer作为参数
• bindActionCreator 绑定store.dispatch和action 的关系
• combineReducers 合并多个reducers
• applyMiddleware 洋葱模型的中间件,介于dispatch和action之间，重写dispatch
• compose 整合多个中间件

27.对Redux中间件的理解？原理？常用中间件有哪些？

ReduxEn el proceso, el middleware se coloca en dispatchel proceso y actionse intercepta durante la distribución. Es esencialmente una función que store.dispatchmodifica el método y agrega otras funciones entre los dos pasos de emisión Action y ejecución.Reducer

Principio de implementación:

• applyMiddlewaresEn el código fuente, podemos ver que todo el middleware se coloca en una matriz chain, luego se anida y se ejecuta, y finalmente se ejecuta store.dispatch. Como puede ver, el middleware interno ( middlewareAPI) se puede obtener getStatey dispatchestos dos métodos

Middleware de uso común:

• redux-thunk: para operaciones asincrónicas
• redux-logger: para iniciar sesión

28. ¿Cuál es la diferencia entre Redux y Vuex y qué ideas tienen en común?

• Mismo punto:
  • estado de datos compartidos
  • Proceso consistente: definir el estado global, activar, modificar el estado
  • El principio es similar: la tienda se inyecta globalmente.
• diferencia:
  • Principio de implementación:
    • Redux usa datos inmutables, mientras que los datos de Vuex son mutables. Redux reemplaza el estado anterior con el nuevo estado cada vez, mientras que Vuex modifica directamente
    • Cuando Redux detecta cambios en los datos, compara las diferencias mediante diff, mientras que Vuex en realidad usa el mismo principio que Vue y las compara mediante getter/setter.
  • Capa de presentación:
    • Vuex define cuatro objetos: estado, captador, mutación y acción; redux define estado, reductor y acción.
    • El estado en vuex se almacena de manera uniforme para una fácil comprensión; reduxstate depende del valor inicial de todos los reductores.
    • Vuex tiene un getter, el propósito es obtener el estado rápidamente; redux no tiene esta capa y el parámetro react-redux mapStateToProps hace este trabajo.
    • La mutación en vuex es simplemente una asignación simple (una capa muy superficial); el reductor en redux simplemente establece un nuevo estado (una capa muy superficial). Funcionan de manera similar, pero están escritos de manera diferente.
    • La acción en vuex tiene solicitudes ajax asincrónicas más complejas; la acción en redux puede ser simple o compleja, simplemente envíe el objeto de datos directamente ({type: xxx, your-data}), y la acción compleja requiere llamar a ajax asincrónico (dependiendo del redux -thunk complemento).
    • Hay dos formas de activar vuex: confirmar sincrónicamente y enviar asincrónicamente; redux usa el envío tanto sincrónico como asincrónicamente
• pensamiento común:
  • única fuente de verdad
  • el cambio es predecible

29. ¿Cuáles son las similitudes y diferencias entre accesorios y estado?

La diferencia:
los accesorios son de solo lectura y solo se pueden pasar del componente principal al componente secundario, pero no se pueden modificar en el componente secundario. El estado es variable y su valor se puede modificar mediante el método setState dentro del componente.
El mismo punto:
1. Tanto los accesorios como el estado activarán actualizaciones de renderizado.

2. Los accesorios y el estado son objetos JS puros (use typeof para juzgar, el resultado es un objeto)

30. ¿Cuál es la función de mustComponentUpdate?

deberíaComponentUpdate () puede entenderse como una válvula para activar la renderización. Cuando el estado cambia, irá a este ciclo de vida. deberíaComponentUpdate recibe dos accesorios de parámetros, y el estado es el estado antes y después de la actualización. Puede juzgar si hay un cambio antes y después y devuelve verdadero y falso para decidir si se ejecuta

31. Props.children de React usa la función de mapa para recorrer y recibirá una visualización de excepción, ¿por qué? ¿Cómo se debe atravesar?

Motivo: props.children no es necesariamente una matriz en react.js

• El componente actual no tiene nodos secundarios indefinidos
• tiene un objeto de nodo hijo
• Matriz de múltiples nodos secundarios

React Senior proporciona un método react.children.map() que puede atravesar de forma segura objetos de nodos secundarios.

32. ¿Cuénteme sobre su comprensión de immutable.js?

Immutable.js adopta una estructura de datos persistentes para garantizar que cada objeto sea inmutable. Cualquier operación como agregar, modificar o eliminar generará un nuevo objeto y mejorará en gran medida el rendimiento al compartir estructuras y otros métodos.

33.redux原理、工作流程及其应用，三大原则

redux： redux是专门用于集中式管理状态的javascript库，他并不是react的插件库。

redux三大核心：

• actions
  actions英文直译过来就是行动、动作的意思，那么我们就可以猜到他表示的是“怎么做”，简单来说actions就是一个对象，actions里面有两个属性分别为type和data：
  type：标识属性，值为字符串且唯一，必要属性（你想要做什么事情
  data：数据属性，值为任意类型，可选属性（你要做事情的数据

  那我们浅浅举个栗子：比如计算器你可以进行加1减2等操作，那么加减乘除这个操作就是你的type，数字就是你的数据

• store
  store有且只能有一个，他相当于一个最高指挥家，他负责把action动作交给对应的reducer进行执行，也就是说将state、action和reducer联系在一起的对象。

• reducer
  reducer用于将store发过来的action完成并将结果返回给store，他接收两个参数preState（旧状态）和action（动作）并返回一个newState（新状态）。

工作流程：当组件使用store中的数据需要发生变化时，告诉action生成动作对象，通过dispatch分发对象到store，store对需要使用的reducer进行绑定，然后将action分发到对应reducer上执行相应逻辑进行数据覆盖,再将store数据渲染

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-srPGmnk2-1686967105052)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\1685666639607.png)]

三大原则

唯一数据源(state)

数据源(state)只读

通过纯函数(pure function)改变数据源(state)

34.react-redux原理，工作流程

react-redux实现过程

react-redux执行流程详解：

初始化阶段：

• 创建 Redux store 对象，并将 Reducer 传入 createStore 函数中。
• 创建一个 Provider 组件，并将 Redux store 对象作为 Provider 组件的 props 传入其中。
• 将应用根组件包装在 Provider 组件中，并渲染整个应用。

运行阶段：

• 使用 connect 函数将组件与 Redux 中的 state 和 action creators 相连接，并将它们转化为组件的 props 属性

import { connect } from 'react-redux';
import { addToCart } from '../actions';

const Product = ({ product, addToCart }) => (
 <div>
   <h3>{product.name}</h3>
   <button onClick={() => addToCart(product)}>Add to cart</button>
 </div>
);

const mapDispatchToProps = {
 addToCart,
};

export default connect(null, mapDispatchToProps)(Product);

更新阶段：

• 在 Store 的 dispatch 方法中，执行 action 并更新 Store 中的 state。
• React-Redux 根据 Store 中的新状态，检查哪些组件的 props 发生了变化。
• 对于发生变化的组件，React-Redux 将触发相关的生命周期方法和 render 方法进行重新渲染。

工作流程：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OaD98GCF-1686967105053)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\1685667792598.png)]

35.react组件通讯的context

使用步骤：

• 在顶层组件中创建一个 context 对象，并将需要共享的数据挂载到该对象上

  const MyContext = React.createContext(defaultValue);
  

• En el método de renderizado del componente de nivel superior, use MyContext.Providerel componente para empaquetar toda la aplicación y pasar los datos compartidos a valuela propiedad.

  <MyContext.Provider value={sharedData}>
      <App />
  </MyContext.Provider>
  

• En componentes que necesitan usar datos compartidos, use MyContext.Consumerel componente para recibir el atributo de valor del contexto y use los datos en los subelementos de Consumer

  <MyContext.Consumer>
      {sharedData => (
          // 此处可以使用 sharedData 来操作共享数据
      )}
  </MyContext.Consumer>
  

36. Principio de implementación del componente Proveedor en reaccionar-redux

El componente Proveedor en React-Redux es un componente de React que utiliza la API de contexto de React para transferir datos. El componente Proveedor proporciona un objeto de contexto, que permite que los subcomponentes anidados dentro de él accedan al objeto de contexto y puedan usarlo para obtener datos en el almacén de Redux.

37. El principio de Connect en reaccionar-redux

La función de conexión es una forma importante de conectar componentes de React con Redux Store. Toma dos funciones como parámetros y devuelve un componente de orden superior a través del cual Redux Store se puede asociar con los componentes de React. (implementar componentes de contenedor para envolver componentes de interfaz de usuario)

Envuelva una capa en el componente de la aplicación original, convierta toda la aplicación original en un subcomponente del Proveedor, reciba la tienda Redux como accesorios, pase el objeto de contexto a la conexión en el componente descendiente, realmente conecta Redux y React, y está envuelto en nuestro componente contenedor Recibe el estado y el envío en la tienda proporcionado por el Proveedor anterior, lo pasa a un constructor, devuelve un objeto y lo pasa a nuestro componente contenedor en forma de atributos.

//其中 mapStateToProps 和 mapDispatchToProps 是将 Store 和 action creator 映射到组件的 props 上的函数。
connect(mapStateToProps, mapDispatchToProps)(Product);

38.kit de herramientas de reacción

reaccionar-toolkit es una biblioteca de Redux mantenida oficialmente que contiene varias herramientas útiles, cuyo objetivo es hacer que el desarrollo de React y Redux sea más fácil, más eficiente y más intuitivo.

1. Simplifique su flujo de trabajo de Redux

redux-toolkitProporciona una nueva forma de escribir aplicaciones Redux que adopta patrones Redux comunes y los simplifica al encapsular código repetitivo. Esto permite a los desarrolladores centrarse más en implementar la lógica empresarial sin tener que preocuparse por los detalles de nivel inferior.

1. Middleware común integrado

redux-toolkitContiene varios middleware comúnmente utilizados en aplicaciones Redux, como redux-thunkmiddleware, redux-sagamiddleware y redux-loggermiddleware, para que los desarrolladores puedan usar y configurar fácilmente estos middleware.

1. hacer cumplir la inmutabilidad

redux-toolkitLa createSlicefunción actualizará automáticamente el estado con inmutabilidad al crear el reductor, lo que evita posibles errores causados ​​por la modificación directa del estado.

1. Generar automáticamente tipos de acciones de Redux

redux-toolkitSe proporciona una función createSlicepara crear un reductor, que también creará automáticamente una constante de cadena para cada tipo de acción, evitando el código redundante causado por escribir manualmente estas constantes.

1. controlar los efectos secundarios

redux-toolkitLa función se proporciona createAsyncThunkpara crear acciones con efectos secundarios asincrónicos, que maneja automáticamente el proceso asincrónico y puede rastrear el progreso y los resultados de cada operación asincrónica en el estado.

39. ¿Cuál es el uso de React.memo() y useMemo(), y cuáles son las diferencias?

React.memoEs un componente de alto nivel que puede utilizar un componente de función pura. Cuando los accesorios del componente no cambian, reutilizará directamente el resultado de renderizado del componente, evitando así renderizados innecesarios.

//当 MyComponent 的 text 属性没有变化时，MemoizedComponent 就会复用之前的渲染结果，而不会重新渲染。
function MyComponent(props) {
  return <div>{props.text}</div>;
}
const MemoizedComponent = React.memo(MyComponent);

useMemoEs un gancho que se puede utilizar para almacenar en caché los resultados de los cálculos para evitar cálculos repetidos. Cuando las dependencias entrantes no han cambiado, los resultados almacenados en caché se devuelven directamente.

//如果 calculate 方法比较耗时，为了避免不必要的计算，我们可以使用 useMemo 来缓存计算结果：
function MyComponent({ a, b }) {
  const result = useMemo(() => calculate(a, b), [a, b]);
  return <div>{result}</div>;
}

la diferencia:

React.memo​y useMemose puede utilizar para optimizar el rendimiento de las aplicaciones React, pero sus objetos de optimización y métodos de optimización son diferentes. React.memoMejora el rendimiento al evitar la representación innecesaria de componentes y useMemomejora el rendimiento al evitar cálculos dobles. En el desarrollo real, es necesario seleccionar un método de optimización adecuado de acuerdo con escenarios y requisitos específicos.

40. La diferencia entre usecallback y usememo

useCallbackSe utiliza para almacenar en caché funciones para evitar la creación y representación de funciones innecesarias. Cuando las dependencias cambian, se devuelve una nueva referencia de función; de lo contrario, la referencia de función previamente almacenada en caché se devuelve directamente.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

useMemoSe utiliza para almacenar en caché los resultados de los cálculos para evitar cálculos y renderizaciones repetidos. Cuando las dependencias cambien, se volverá a calcular y devolverá el nuevo resultado calculado.

const memoizedValue = useMemo(() => {
  return heavyComputation(a, b);
}, [a, b]);

useCallbackMejora el rendimiento evitando la creación y renderizado de funciones, y useMemomejora el rendimiento evitando el doble cálculo y renderizado

41. Reaccionar usa referencia

Una referencia es una forma de acceder a una referencia a un elemento DOM o instancia de componente.

字符串回调

class MyComponent extends React.Component {
  componentDidMount() {
    console.log(this.refs.myInput);
    // 输出：<input type="text" />
  }
  render() {
    return <input type="text" ref="myInput" />;
  }
}

函数回调

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = null;
  }
  componentDidMount() {
    console.log(this.myRef);
    // 输出：<input type="text" />
  }
  render() {
    return <input type="text" ref={node => this.myRef = node} />;
  }
}

React.createRef

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    console.log(this.myRef.current);
    // 输出：<input type="text" />
  }
  render() {
    return <input type="text" ref={this.myRef} />;
  }
}

42. Por qué los bucles y los juicios no pueden utilizar ganchos

razón:

​Los alcances a nivel de bloque, como los bucles y las declaraciones condicionales, afectarán la cantidad y el orden de las llamadas de Hooks, destruyendo así las dependencias y la lógica de representación dentro de React, lo que provocará errores inesperados en los componentes. Por lo tanto, para garantizar que los componentes se puedan representar y actualizar normalmente, debemos seguir las especificaciones de uso de React Hooks y llamar a Hooks en el alcance de nivel superior.

43.React implementa animación excesiva.

Utilice una biblioteca de terceros: React Transition Group para obtener más información sobre la animación de transición

Nota: El método de denominación de clases en CSSTransitionclassNames

44. Principio de implementación de la carga diferida de reacción.

El principio de implementación de carga diferida de React se basa principalmente en import()las funciones de ES6 y lazylas funciones de React.

import React, { lazy, Suspense } from "react";

const LazyComponent = lazy(() => import("./LazyComponent"));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

Cuando usamos lazyla función, React creará dinámicamente un nuevo componente en tiempo de ejecución. Este nuevo componente hereda todas las propiedades y métodos del componente original, y su método de representación se reescribe como una función asincrónica. Cuando sea necesario renderizar este nuevo componente, React activará automáticamente su método de renderizado, que carga de forma asincrónica el código del componente original y lo representa en la página.

Esto involucra import()la función en ES6, que es una función asincrónica utilizada para cargar dinámicamente módulos JavaScript. import()La función devolverá un objeto Promise. Cuando se carga el módulo, el objeto Promise se resolverá. Podemos obtener el objeto de exportación predeterminado del módulo a través del método then.

45.inmutable

Immutable es una biblioteca de JavaScript que proporciona algunas estructuras de datos y API que hacen 不可变数据posible la creación. El uso de Immutable en React puede traer los siguientes beneficios:

• Optimización del rendimiento: la tecnología Virtual DOM utilizada en React realizará operaciones frecuentes de comparación y actualización, y los datos inmutables pueden reducir la cantidad de nodos que deben actualizarse, mejorando así el rendimiento y la velocidad de respuesta de la aplicación.
• Estado fácil de administrar: el estado en las aplicaciones React suele ser muy complejo. El uso de datos inmutables puede administrar el estado de manera más conveniente y evitar los efectos secundarios causados ​​​​por la modificación del estado.
• Seguridad de la concurrencia: en un entorno de alta concurrencia, el uso de datos inmutables puede reducir la competencia de datos y bloquear la competencia, y mejorar el rendimiento de la seguridad de la concurrencia.

Immutable crea un tipo de datos inmutable. Si desea modificarlo, solo puede crear una nueva variable a través de la cobertura de datos para optimizar el rendimiento de reaccionar.

46. ​​¿Por qué useState devuelve una matriz en lugar de un objeto?

Motivo: el equipo de React cree que el uso de matrices permite una mayor flexibilidad y facilidad de uso.

ventaja:

• No es necesario nombrar: cuando usamos matrices, podemos usar la sintaxis de desestructuración de matrices para nombrar variables de estado y modificar funciones, y no es necesario considerar problemas como conflictos de nombres.
• Modificación directa: después de usar la desestructuración de matrices, podemos modificar directamente los elementos de la matriz sin volver a llamar a un método o propiedad en el objeto.
• 易于扩展： 在未来的版本中，React 还可能会增加更多的状态相关的 Hook，使用数组可以使得新增的 Hook 更加容易添加到现有的语法中

47.类组件为什么不能使用hooks

Hooks 是基于函数式编程思想设计的，不支持类组件的一些特性。但是，React 提供了一些方法，可以让开发者在类组件中使用 Hooks 的部分功能，或者将类组件转换为函数组件来使用 Hooks。

48.redux-thunk和redux-saga区别

redux-thunk 的设计思路是将异步逻辑封装到“thunk”函数中，这个函数接收 dispatch 方法作为参数，并返回一个带有回调函数的函数。这个回调函数在异步操作完成后被调用，然后再通过 dispatch 方法触发一个 action，更新 Redux store 中的数据。redux-thunk 适合用于处理简单的异步逻辑，比如发送 AJAX 请求或者获取本地存储数据等。 没有拓展api

redux-saga 则采用了另外一种设计思路，它使用了 ES6 的 generator 函数来实现异步逻辑的管理。在 redux-saga 中，使用 generator 函数定义一个 saga，它可以监听一个或多个 action，并在相应的 action 被触发后执行一些副作用，比如发送 AJAX 请求、触发其他 action 等。redux-saga 还提供了一些辅助函数和特性(api)，比如 takeLatest、put、call 等，使得开发者可以更加方便地管理异步流程，处理错误和取消请求等。

49.react合成事件使用原因，原理

探索合成事件

React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象

使用原因：

• 进行浏览器兼容，实现更好的跨平台

  React utiliza 顶层事件代理un mecanismo que puede garantizar la coherencia de la burbuja y se puede ejecutar en todos los navegadores. Los eventos sintéticos proporcionados por React se utilizan para suavizar las diferencias entre diferentes objetos de eventos del navegador y simular diferentes eventos de plataforma para simular eventos sintéticos.

• evitar la recolección de basura

  Los objetos de eventos se pueden crear y reciclar con frecuencia, por lo que se introdujo React 事件池para adquirir o liberar objetos de eventos en el grupo de eventos. Es decir, el objeto del evento React no se liberará, sino que se almacenará en una matriz 数组. Cuando se activa el evento, se extraerá de esta matriz para evitar la creación y destrucción frecuentes (recolección de basura).

• Facilitar la gestión unificada de eventos y el mecanismo de transacciones.

principio:

• enlace de evento
  • Antes de React17, React delegaba eventos al documento. React17 y versiones posteriores ya no delegan eventos al documento, sino al contenedor montado.
  • Los eventos nativos y los eventos sintéticos en realidad están relacionados a través de un módulo llamado EventPlugin. Cada complemento solo maneja el evento sintético correspondiente. Por ejemplo, el evento onClick corresponde al complemento SimpleEventPlugin, por lo que React cargará estos complementos en el comienzo Entra, inicializa algunos objetos globales a través del complemento, por ejemplo, uno de los objetos es RegistrationNameDependencies, que define la correspondencia entre eventos sintéticos y eventos nativos.
• desencadenante de evento
  • El activador del evento ejecutará la función despachoEvent. Cuando se activa el evento, todos los elementos principales del elemento actual se procesarán y construirán en un objeto sintético, y el evento sintético se almacenará en eventQueue una vez, y eventQueue será atravesado para simular las fases de captura y burbujeo, y luego activado a su vez por el método runEventsInBatch Llame al evento de escucha de cada elemento

50. Mecanismo de proxy de eventos de reacción

React no vincula todos los controladores directamente a nodos reales. En su lugar, vincule todos los eventos a la capa más externa de la estructura y utilice un detector de eventos unificado, que mantiene un mapeo para guardar las funciones de procesamiento y escucha de eventos dentro de todos los componentes.

• Todos los eventos están delegados id = rooten el elemento DOM (muchos en Internet dicen que está en document, 17la versión no);
• El monitoreo de eventos de todos los nodos de la aplicación en realidad se id = rootactiva en el elemento DOM;
• ReactImplementó un conjunto de mecanismos de captura de eventos por sí solo;
• ReactSe implementan eventos sintéticos SyntheticEvent;
• ReactEl grupo de eventos ya no se usa en 17la versión (muchos en Internet dicen que el grupo de objetos se usa para administrar la creación y destrucción de objetos de eventos sintéticos, cuál es 16la versión y anterior);
• Una vez que el evento id = rootse delega en el elemento DOM, en realidad se activa todo el tiempo, pero la función de devolución de llamada correspondiente no está vinculada;

51. Orden de ejecución de eventos React y eventos nativos

import React, { useRef, useEffect } from "react";
import "./styles.css";

const logFunc = (target, isSynthesizer, isCapture = false) => {
    const info = `${isSynthesizer ? "合成" : "原生"}事件，${
        isCapture ? "捕获" : "冒泡"}阶段，${target}元素执行了`;
    
    console.log(info);
};

const batchManageEvent = (targets, funcs, isRemove = false) => {
    targets.forEach((target, targetIndex) => {
        funcs[targetIndex].forEach((func, funcIndex) => {
            target[isRemove ? "removeEventListener" : "addEventListener"](
                "click",
                func,
                !funcIndex
            );
        });
    });
};

export default function App() {
    const divDom = useRef();
    const h1Dom = useRef();
    useEffect(() => {
    
        const docClickCapFunc = () => logFunc("document", false, true);
        const divClickCapFunc = () => logFunc("div", false, true);
        const h1ClickCapFunc = () => logFunc("h1", false, true);
        const docClickFunc = () => logFunc("document", false);
        const divClickFunc = () => logFunc("div", false);
        const h1ClickFunc = () => logFunc("h1", false);

        batchManageEvent(
            [document, divDom.current, h1Dom.current],
            [
                [docClickCapFunc, docClickFunc],
                [divClickCapFunc, divClickFunc],
                [h1ClickCapFunc, h1ClickFunc]
            ]
        );

        return () => {
            batchManageEvent(
                   [document, divDom.current, h1Dom.current],
                [
                    [docClickCapFunc, docClickFunc],
                    [divClickCapFunc, divClickFunc],
                    [h1ClickCapFunc, h1ClickFunc]
                ],
                true
            );
        };
    }, []);

    return (
        <div
          ref={divDom}
          className="App1"
          onClickCapture={() => logFunc("div", true, true)}
          onClick={() => logFunc("div", true)}
        >
          <h1
            ref={h1Dom}
            onClickCapture={() => logFunc("h1", true, true)}
            onClick={() => logFunc("h1", true)}
          >
            Hello CodeSandbox
          </h1>
        </div>
    );
}

React16

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-0te4nKyx-1686967105054) (C:\Users\lenovo\AppData\Roaming\Typora\ imágenes-de-usuario-de-typora\ 1685930695759.png)]

React17

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-limpieza, se recomienda guardar la imagen y cargarla directamente (img-39vZwaap-1686967105055) (C:\Users\lenovo\AppData\Roaming\Typora\ imágenes-de-usuario-de-typora\ 1685930673755.png)]

总结

• 16La versión ejecuta primero el evento original y documentejecuta el evento sintético de manera uniforme cuando llega la burbuja.
• 17La versión ejecuta la fase de captura de eventos sintéticos antes de que se ejecute el evento nativo, ejecuta el evento sintético en la fase de propagación después de que se ejecuta el evento nativo y administra todos los eventos a través del nodo raíz.

52. jsx convierte el proceso dom real

• Utilice React.createElement() o JSX para escribir componentes de React; de hecho, todo JSX se convertirá a React.createElement(), Babel completa el proceso de conversión
• La función createElement procesa accesorios especiales como key y ref para generar vDom
• ReactDOM.render renderiza el dom generado en el contenedor y lo convierte en dom real para su procesamiento.

53. ¿Qué es JSX?

JSX significa JavaScript XML. Una sintaxis similar a XML para crear etiquetas dentro de los componentes de React. JSX es un conjunto desarrollado para react.js 语法糖, que también es la base para usar react.js. React puede funcionar sin usar JSX; sin embargo, usar JSX puede mejorar la legibilidad de los componentes, por lo que se recomienda JSX.

ventaja:

• Permite el uso de una sintaxis familiar para definir árboles de elementos HTML;
• Proporcionar etiquetas más semánticas y móviles;
• La estructura del programa es más fácil de visualizar;
• Resuma el proceso de creación de React Element;
• Tener control sobre las etiquetas HTML y el código que las genera en cualquier momento;
• es JavaScript nativo.

8. Miniprogramas de WeChat

1. Hable sobre las similitudes y diferencias entre WXML y HTML estándar.

(1) WXML es un conjunto de lenguaje de etiquetado diseñado por el marco del subprograma, que se utiliza para construir la estructura de la página del subprograma, y ​​su función es similar a la de html en el desarrollo web.

① se utilizan para describir la estructura de la página.

② Ambos se componen de etiquetas, atributos, etc.

③ Los nombres de las etiquetas son diferentes y hay menos etiquetas de subprograma y más etiquetas individuales

④ El subprograma tiene más atributos como wx:if y expresiones como { {}}

⑤ WXML solo se puede obtener una vista previa en la herramienta de desarrollo del subprograma WeChat, mientras que HTML se puede obtener una vista previa en el navegador

⑥ El empaquetado de componentes es diferente, WXML vuelve a empaquetar los componentes

⑦ El subprograma se ejecuta en JS Core, no hay árbol DOM ni objeto de ventana, y el objeto de ventana y el objeto de documento no se pueden usar en el subprograma.

2. Hable sobre las similitudes y diferencias entre WXSS y CSS.

(1) Se agrega la unidad de tamaño rpx y la conversión de unidades de píxeles debe realizarse manualmente en css, como rem

(2) WXSS admite el nuevo tamaño rpx y el subprograma lo convertirá automáticamente en pantallas de diferentes tamaños

(3) Proporciona estilo global y estilo local. El app.wxss en el directorio raíz del proyecto actuará en todas las páginas del subprograma y el estilo .wxss de la página local solo tendrá efecto en la página actual.

(4) WXSS solo admite algunos selectores CSS:

① selector de clase, selector de identificación

② Selector de elementos

③ Selector de unión, selector de descendientes

④ Selectores de pseudoclase como ::after y ::before

3. Hable sobre la función del directorio principal y los archivos del Mini Programa WeChat.

(1) project.config.json: archivo de configuración del proyecto, el más utilizado es para configurar si se habilita la verificación https;

(2) App.js: establece algunos datos básicos globales, etc., archivos de script de la página, almacena los datos de la página, funciones de procesamiento de eventos, etc.;

(3) App.json: el archivo de configuración de la página actual, la apariencia y el rendimiento de la ventana de configuración, etc., los elementos de configuración en la página sobrescribirán app.json;

(4) App.wxss: estilo público, importar fuente de iconos, etc.;

(5) páginas: contiene páginas específicas una por una;

(6) index.json: (configura el título de la página actual e importa componentes, etc.);

(7) index.wxml: el archivo de estructura de plantilla de la página;

(8) archivo .wxss: el archivo de hoja de estilo de la página actual;

(9) index.js: (lógica de página, solicitud y procesamiento de datos, etc.)

4. Hable sobre las similitudes y diferencias entre el enlace bidireccional del subprograma y vue.

(1) Enlace bidireccional del mini programa: primero vincule el evento de entrada del cuadro de texto a través de bindinput

① Declare un contenido variable en los datos y vincúlelo dinámicamente al valor del cuadro de texto

② En el evento bindinput, el último valor en el cuadro de texto se puede obtener a través del parámetro de evento e.detail.value

③ Asigne el último valor del cuadro de texto al contenido del valor vinculado dinámicamente a través de this.setData para realizar un enlace bidireccional de datos

(2) Enlace bidireccional de Vue: primero vincule @input al cuadro de texto para escuchar el evento de entrada del cuadro de texto

① Vincule dinámicamente el atributo de valor al cuadro de texto, cuyo valor es la variable definida en los datos

② En el evento vinculado por @input, el último valor en el cuadro de entrada se puede obtener a través del parámetro de evento event.target.value

③ Asigne el valor recuperado a la variable vinculada dinámicamente al valor

(3) 大体上区别不大，绑定事件不同，以及获取value值的具体方式不同，以及在小程序中设置data中的数据，
需要调用 this.setData方法进行设置

5.简单描述下微信小程序的相关文件类型

(1) WXML(weixin Markup Language) 是框架设计的一套标签语言，结合基础组件，事件系统，可以构建出页面的结构。内容主要事微信自己定义的一套组件。

(2) WXSS(WeiXin Style Sheets) 是一套样式语言，主要用于描述 WXML 的组件样式。

(3) JS 逻辑处理，网络请求

(4) json 小程序设置，静态配置

(5) app.json 必须要有这个文件，此文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置tabBar 最少两个

6.微信小程序有哪些传值(传递数据)方法

(1) 使用全局变量传递数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pu3nDBnO-1686967105056)(file:///C:\Users\lenovo\AppData\Local\Temp\ksohtml14876\wps1.jpg)]

(2) 使用本地存储数据传递

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H6cLbqBk-1686967105057)(file:///C:\Users\lenovo\AppData\Local\Temp\ksohtml14876\wps2.jpg)]

(3) 使用路由传递数据

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-p4zSUW0R-1686967105058)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876\wps3.jpg)]

7. ¿ Cuál es la diferencia entre Bindtap y catchtap?

(1) Tanto Bindtap como catchtap pertenecen a la función de evento de clic, que vincula el evento al componente, y la función se puede activar después de hacer clic en el componente.

bindtap: después de que el elemento secundario usa bindtap para vincular el evento, se enviará al elemento principal cuando se ejecute (activa el evento bingtap vinculado al elemento principal)

catchtap: no se propagará al elemento principal, evitando que el evento se expanda

8. ¿Cuál es la diferencia entre wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()?

(1) wx.navigateTo (Objeto): mantiene la página actual y salta a una página en la aplicación. Pero no puedo saltar a la página de la barra de pestañas. Utilice wx.navigateBack para volver a la página original. La pila de páginas en el subprograma puede tener hasta diez capas.

(2) Wx.navigateBack(): cierra la página actual y regresa a la página anterior o a páginas de varios niveles. La pila de páginas actual se puede obtener a través de getCurrentPages para determinar cuántas capas se deben devolver.

(3) wx.redirectTo(): ​​cierra la página actual y salta a una página de la aplicación. Pero no se permite saltar a la página de la barra de pestañas.

(4) wx.switchTab(): salta a la página tabBar y cierra todas las demás páginas que no sean tabBar

(5) wx.reLaunch(): cierra todas las páginas y abre una página en la aplicación

9. ¿Cuál es la diferencia entre el programa WeChat Mini y h5?

(1) Desde la perspectiva del desarrollo: las herramientas de desarrollo de H5 y los subprogramas son muy diferentes, y todos los subprogramas dependen del cliente WeChat, por lo que, en términos relativos, no hay tantas herramientas de desarrollo como H5; es diferente del H5 estándar. lenguaje; Y también tiene muchos componentes de aplicaciones nativas de forma independiente, por lo que también es diferente de H5 en términos de empaquetado de componentes.

(2) Desde el entorno operativo: los desarrolladores web deben enfrentarse a varios navegadores: el lado de la PC debe enfrentarse a IE, Chrome, el navegador QQ, etc., y el lado móvil debe enfrentarse a Safari, Chrome, iOS y varias vistas web en Android. sistema. En el proceso de desarrollo de un pequeño programa, lo que hay que enfrentar son los clientes WeChat de los dos principales sistemas operativos, iOS y Android, y las herramientas de desarrollo de pequeños programas utilizadas para ayudar al desarrollo. Los tres entornos operativos del pequeño programa también son diferente.

(3) Configuración del servidor: debido a que el rendimiento del subprograma será mayor que el de H5, en términos de requisitos de configuración del servidor, los requisitos del subprograma son más altos que los de H5. Permisos del sistema: porque WeChat puede obtener más permisos del sistema , como el estado de comunicación de la red, la capacidad de almacenamiento en caché de datos, etc., estos permisos a nivel del sistema se pueden conectar sin problemas con los subprogramas WeChat, que es la afirmación oficial de que los subprogramas WeChat pueden tener el rendimiento fluido de la aplicación nativa (aplicación nativa). Sin embargo, las aplicaciones web H5 tienen relativamente menos acceso a los permisos del propio sistema, que es donde las aplicaciones web H5 suelen ser criticadas. Por lo tanto, la mayoría de las aplicaciones de H5 se limitan al ámbito de la lógica empresarial simple y la función única.

(4) Nombre de etiqueta: al escribir HTML, las etiquetas que se usan con frecuencia son div, p, span y las etiquetas WXML del subprograma son vista, botón, texto, etc. Estas etiquetas son los subprogramas empaquetados para desarrolladores básicos. capacidad. El subprograma tiene más atributos como wx:if y expresiones como { { }} En el proceso general de desarrollo de páginas web, normalmente manipulamos el DOM (correspondiente al árbol generado por la descripción HTML) a través de JS para provocar algunos cambios en la interfaz. .Cambios en respuesta al comportamiento del usuario.

10. ¿Cuál es la diferencia entre subprograma y vue?

(1) La diferencia en la definición de eventos: Vue usa @ para vincular eventos y los subprogramas usan bind

(2) Valor de paso de función de evento: el valor de paso de Vue se escribe directamente entre corchetes de función, el valor de paso del subprograma WeChat debe usar data-custom name={ {{valor a pasar} }

(3) Referencia de palabras clave: agregue ":" o v-bind delante del nombre del atributo en vue. En el subprograma WeChat, solo necesita agregar "{ {} }" al valor del atributo para resumirlo .

(4) Instrucciones de uso: use v- en vue, use wx: en subprogramas

11. Comprensión de Rpx:

(1) Rpx es la unidad de respuesta en el subprograma WeChat

(2) rpx es una unidad de tamaño única para que los subprogramas WeChat resuelvan la adaptación de la pantalla

(3) Se puede adaptar según el ancho de la pantalla. Independientemente del tamaño de la pantalla, el ancho de pantalla especificado es 750 rpx, y cuando el ancho de la página es 750 px, 1 rpx = 1 px

12. ¿Pueden los subprogramas de WeChat realizar operaciones DOM?

(1) Los subprogramas WeChat no admiten document.querySelect para obtener elementos, porque la capa de representación y la capa lógica de los subprogramas WeChat son independientes, pero tienen dos métodos integrados para obtener elementos.

① wx.createSelectorQuery() obtiene elementos dom

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-oEW3uzli-1686967105059)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876\wps4.jpg)]

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-XH7ohB3C-1686967105059)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876\wps5.jpg)]

13. ¿Cuál es la diferencia entre Mini Program y Vue?

(1) El ciclo de vida es diferente y el ciclo de vida del subprograma WeChat es relativamente simple

(2) El enlace de datos también es diferente: el enlace de datos del subprograma Wechat debe usar { {}}, vue directamente: está bien

(3) Mostrar y ocultar elementos. En vue, use v-if y v-show para controlar la visualización y ocultación de elementos. En subprogramas, use wx-if y oculto para controlar la visualización y ocultación de elementos.

(4) El procesamiento de eventos es diferente: en programas pequeños, use bindtap (bind + event) o catchtap (catch + event) para vincular eventos, vue: use v-on: event para vincular eventos, o use @event para vincular eventos

(5) La vinculación bidireccional de datos también es diferente. En Vue, solo necesita agregar v-model al elemento del formulario y luego vincular un valor correspondiente en los datos. Cuando el contenido del elemento del formulario cambia, el correspondiente valor en datos El valor de también cambiará en consecuencia, lo cual es un punto de vista muy bueno. El subprograma WeChat debe obtener el elemento del formulario, cambiar el valor y luego asignar el valor a una variable declarada en los datos.

14. ¿ Comprensión de la barra de pestañas personalizada del miniprograma?

(1) En primer lugar, me critican. Configure la barra de pestañas en App.json, habilite la barra de pestañas personalizada y cree un archivo de barra de pestañas personalizada después de la configuración. En este momento, el contenido del archivo se generará en la parte inferior del subprograma. Agregue el código de estructura de tabBar al índice. wxml y agréguelo a index.js Configuración de datos y métodos de eventos

15. ¿Cómo configurar el caché para el subprograma WeChat?

(1) wx.getStorage/wx.getStorageSync lee el caché local y escribe datos en el caché a través de wx.setStorage/wx.setStorageSync, donde la interfaz con el sufijo Sync indica una interfaz sincrónica

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-BOmNe545-1686967105060)(file:///C:\Users\lenovo\AppData \Local\Temp\ksohtml14876 \wps6.jpg)]

16. ¿Cómo realiza el Mini Programa WeChat solicitudes de red?

(1) wx.request (objeto objeto) se utiliza para enviar solicitudes de red

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-r5VZUL7r-1686967105062)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876\wps7.jpg)]

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-so2LhJfi-1686967105063)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876\wps8.jpg)]

17. El ciclo de vida del Mini Programa se divide en tres partes.

(1) Nivel de aplicación:

① onLaunch: se activa cuando se inicializa el miniprograma, solo se activa una vez a nivel global

② onShow: se activa cuando el subprograma se inicia o cambia a la pantalla de primer plano

③ onHide: se activa cuando el subprograma ingresa al fondo desde el primer plano (como cambiar a otra aplicación

④ onError: se activa cuando se produce un error de secuencia de comandos en el subprograma o se informa un error en una llamada API

(2) Nivel de página:

① onLoad: se ejecuta cuando se carga la página, solo una vez

② onShow: se ejecuta cuando se muestra la página y se ejecuta varias veces

③ onReady: se ejecuta cuando la página se representa por primera vez, solo una vez

④ onHide: se ejecuta cuando la página pasa al fondo desde el primer plano

⑤ onUnload: se ejecuta cuando se descarga la página

(3) Nivel de componente:

① creado (importante): se activa cuando se acaba de crear la instancia del componente

② adjunto (importante): se activa después de que el componente se inicializa completamente y ingresa al árbol de nodos de la página

③ listo: se ejecuta después de que se completa el diseño del componente en la capa de vista

④ movido: se ejecuta cuando la instancia del componente se mueve a otra ubicación en el árbol de nodos

⑤ separado (importante): se activa después de que el componente abandona el árbol de nodos de la página

⑥ Error: se ejecuta cada vez que un método de componente arroja un error

18. 微信小程序如何做模块化？

(1) 可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口

(2) 需要使用这些模块的文件中，使用 require 将公共代码引入

19. 微信所有api都放在哪里，简单介绍几个

(1) 小程序全局对象是: wx，所有的 API 都保存在 wx 对象中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IzoRS18A-1686967105064)(file:///C:\Users\lenovo\AppData\Local\Temp\ksohtml14876\wps9.jpg)]

20. 微信小程序应用和页面生命周期触发顺序？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZlYZbvim-1686967105064)(file:///C:\Users\lenovo\AppData\Local\Temp\ksohtml14876\wps10.jpg)]

21. 微信小程序自定义组件使用

(1) 创建components文件夹

(2) 创建组件文件(例tabs)，新建为component形式

(3) 在tabs的json文件中设置component：true

(4) 在需要引入的组件页面的json文件中，在usingComponent里面写键值对，组件名:路径

(5) 在需要页面写入标签

注意：WXML 节点标签名只能是小写字母、中划线和下划线的组合

22. 微信小程序事件通道使用

El canal de eventos del Mini Programa WeChat (bus de eventos) es un mecanismo para comunicarse entre múltiples páginas o componentes de un Mini Programa mediante la activación de eventos. Al saltar a la página o componente de destino a través del método wx.navigateTo o wx.redirectTo, pase el parámetro de eventos y asígnelo al objeto del canal de eventos.

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-Z9pQwqTy-1686967105065)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876\wps11.jpg)]

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-6a1HlQJq-1686967105066)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876\wps12.jpg)]

23. Cómo utilizar la biblioteca de componentes vant para subprogramas

Si el pequeño programa se crea con js como lenguaje de secuencias de comandos de la página web y no hay ningún archivo package.json, el comando npm no se puede utilizar

Primero inicialice npm a través de npm init para generar un archivo package.json

Descargue la biblioteca de componentes a través del sitio web oficial de vantweapp npm

Cree npm a través de herramientas en el subprograma WeChat

Elimine "style": "v2" en app.json para evitar la confusión de estilo causada por el estilo del subprograma que es superior al de vant.

Registre componentes usando Componentes en app.json

24. Transferencia entre padres e hijos de subprogramas WeChat

父传子: Vincula atributos a través de etiquetas de componentes principales y los componentes secundarios reciben atributos en propiedades

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-olTg2Lfx-1686967105067)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876\wps13.jpg)]

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-NMW1E5Xq-1686967105068)(file:///C:\Users\lenovo\AppData \Local\Temp\ksohtml14876 \wps14.jpg)]

子传父: A través del evento personalizado de vinculación del componente principal, vincula su propia función y el componente secundario pasa this.triggerEvent ('nombre del evento de vinculación del componente principal', pasando parámetros) a la función de vinculación del componente principal en la función de activación.

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-oNSSzdfi-1686967105068)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876\wps15.jpg)]

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-JOYkl8El-1686967105069)(file:///C:\Users\lenovo\AppData \Local\Temp\ksohtml14876 \wps16.jpg)]

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-s8Gidbyv-1686967105070)(file:///C:\Users\lenovo\AppData \Local\Temp\ksohtml14876 \wps17.jpg)]

25. Inicio de sesión de autorización del Mini Programa

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-J7YYIVIy-1686967105071)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876\wps18.jpg)]

26. vista web

web-view es un componente del navegador web que se puede utilizar para alojar páginas web y llenará automáticamente toda la página.

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-vj1a9jN1-1686967105072)(file:///C:\Users\lenovo\AppData \Local\Temp\ksohtml14876 \wps19.jpg)]

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-mQueHEZG-1686967105073)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876\wps20.jpg)]

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-1MvzbHfJ-1686967105074)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876\wps21.jpg)]

Seis, artículos de Webpack

1. Cinco núcleos de paquete web

1. Entrada - entrada

Entry le dice a Webpack desde qué módulo comenzar a construir el gráfico de dependencia interna y cómo conectar todas las dependencias.

1. Salida - salida

La salida define la ubicación y el nombre del archivo de salida para la compilación del paquete web.

1. Cargador - cargador

Loader se utiliza para transformar el código fuente del módulo para que pueda ser procesado por Webpack. Por ejemplo, cuando Webpack encuentra un archivo ".css", utiliza "css-loader" y "style-loader" para convertirlo en código JavaScript para diseñarlo en el navegador.

1. Complemento - Complemento

El complemento juega un papel clave en el proceso de construcción de Webpack y puede completar diversas tareas, como comprimir código, copiar archivos al directorio de salida, crear variables globales, etc.

1. Modo - modo

El modo es una nueva característica introducida por Webpack 4, que proporciona tres modos de compilación diferentes, a saber, "desarrollo", "producción" y "ninguno", que corresponden al modo de desarrollo, el modo de producción y el modo sin configuración, respectivamente.

1. Hable sobre su comprensión de Webpack (¿qué es Webpack?)

Webpack es un empaquetador de módulos estáticos que puede analizar las dependencias de cada módulo. Todos los recursos del proyecto son módulos. Al analizar las dependencias entre módulos, se construye recursivamente un gráfico de dependencias dentro de él, que contiene los componentes requeridos de la aplicación. cada módulo y luego empaquetar esos módulos en uno o más bundle. Los módulos de salida compilados finales son HTML, JavaScript, CSS y varios archivos estáticos (imágenes, fuentes, etc.).

Webpack es como una línea de producción: necesita pasar por una serie de procesos de procesamiento (cargador) antes de convertir los archivos fuente en resultados de salida. La responsabilidad de cada proceso de procesamiento en esta línea de producción es única y existen dependencias entre múltiples procesos. Solo después de que se completa el procesamiento actual se puede pasar al siguiente proceso para su procesamiento.
Un complemento es como una función insertada en la línea de producción para procesar los recursos en la línea de producción en un momento específico. Webpack transmitirá eventos durante la operación y el complemento solo necesita escuchar los eventos que le interesan y puede unirse a la línea de producción para cambiar la operación de la línea de producción.

Las funciones principales del paquete web son las siguientes:

• El empaquetado de módulos puede empaquetar e integrar archivos de diferentes módulos y garantizar que las referencias entre ellos sean correctas y la ejecución ordenada. Al utilizar paquetes, podemos dividir libremente los módulos de archivos según nuestro propio negocio durante el desarrollo para garantizar la claridad y legibilidad de la estructura del proyecto.
• La compilación y compatibilidad en la "era antigua" del front-end, escribir a mano un montón de código compatible con el navegador siempre ha sido un dolor de cabeza para los ingenieros de front-end, pero hoy este problema se ha debilitado enormemente, a través del mecanismo Loader del paquete web, no solo puede ayudarnos Al completar el código, también puede compilar y convertir archivos en formatos que los navegadores no pueden reconocer, como .less, .vue y .jsx, de modo que podamos usar nuevas funciones y nuevas sintaxis para el desarrollo durante el desarrollo. y mejorar la eficiencia del desarrollo.
• Expansión de capacidades A través del mecanismo de complemento de webpack, podemos realizar aún más una serie de funciones como la carga bajo demanda y la compresión de código sobre la base del empaquetado modular y la compatibilidad de compilación, lo que nos ayuda a mejorar aún más la automatización, la eficiencia de la ingeniería y la calidad de la salida del empaquetado.

2. ¿Cuál es el proceso de empaquetado/principio de empaquetado/proceso de construcción de Webpack?

1. 初始化：启动构建，读取与合并配置参数，加载plugin,实例化Compiler
2. 编译：从Entry出发，针对每个Module串行调用对应的Loader去翻译文件中的内容，再找到该Module依赖的Module，递归的进行编译处理
3. 输出：将编译后的Module组合成Chunk,将Chunk转换成文件，输出到文件系统中

细节：

Webpack CLI 通过 yargs模块解析 CLI 参数，并转化为配置对象option（单入口：Object，多入口：Array），调用 webpack(option) 创建 compiler 对象。

如果有 option.plugin，则遍历调用plugin.apply()来注册 plugin，

判断是否开启了 watch，如果开启则调用 compiler.watch，否则调用 compiler.run，开始构建。

创建 Compilation 对象来收集全部资源和信息，然后触发 make 钩子。

make阶段从入口开始递归所有依赖，

每次遍历时调用对应Loader翻译文件中内容，然后生成AST，遍历AST找到下个依赖继续递归，

根据入口和模块之间关系组装chunk，输出到dist中的一个文件内。

在以上过程中，webpack会在特定的时间点（使用tapable模块）广播特定的事件，插件监听事件并执行相应的逻辑，并且插件可以调用webpack提供的api改变webpack的运行结果

3. loader的作用

webpack中的loader是一个函数，主要为了实现源码的转换，所以loader函数会以源码作为参数，比如，将ES6转换为ES5，将less转换为css，然后再将css转换为js，以便能嵌入到html文件中。

默认情况下，webpack只支持对js和json文件进行打包，但是像css、html、png等其他类型的文件，webpack则无能为力。因此，就需要配置相应的loader进行文件内容的解析转换。

4. 有哪些常见的Loader？他们是解决什么问题的？

常用的loader如下：

• image-loader：加载并且压缩图片文件。
• less-loader：加载并编译 LESS 文件。
• sass-loader：加载并编译 SASS/SCSS 文件。
• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性，使用css-loader必须要配合使用style-loader。
• style-loader：用于将 CSS 编译完成的样式，挂载到页面的 style 标签上。需要注意 loader 执行顺序，style-loader 要放在第一位，loader 都是从后往前执行。
• babel-loader：把 ES6 转换成 ES5
• postcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀。
• eslint-loader：通过 ESLint 检查 JavaScript 代码。
• vue-loader：加载并编译 Vue 组件。
• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)
• cargador de URL: similar al cargador de archivos, la diferencia es que los usuarios pueden establecer un umbral, que se entregará al cargador de archivos para su procesamiento si es mayor que el umbral, y devolver la codificación base64 del archivo (procesando imágenes y fuentes) si es inferior al umbral.
• source-map-loader: carga archivos de mapas de origen adicionales para facilitar la depuración de puntos de interrupción.

5. El papel de los complementos

El complemento es una clase , y hay un método apply() en la clase , que se usa principalmente para la instalación del complemento, donde puede escuchar algunos eventos del compilador y hacer algo en el momento adecuado.

El complemento en webpack le brinda varias funciones flexibles, como optimización de empaquetado, administración de recursos, inyección de variables de entorno, etc., que se ejecutarán en diferentes etapas de webpack (gancho/ciclo de vida), durante todo el ciclo de compilación de webpack. El objetivo es "resolver otras cosas que el cargador no puede lograr".

6. ¿Cuáles son los complementos comunes? ¿Qué problema resuelven?

• html-webpack-plugin: puede copiar un archivo html estructurado e importar automáticamente todos los recursos (JS/CSS) de salida empaquetada
• clean-webpack-plugin: Repackage borra automáticamente el directorio dist
• mini-css-extract-plugin: extrae css en js en un archivo separado
• optimizar-css-assets-webpack-plugin：压缩css
• uglifyjs-webpack-plugin: comprimir js
• commons-chunk-plugin: extrae el código común
• definir-plugin: definir variables de entorno

7. La diferencia entre Loader y Plugin en Webpack

Tiempo de ejecución
1.el cargador se ejecuta en la fase de compilación
2.los complementos funcionan durante todo el ciclo

Cómo utilizar
Loader: 1. Descargar 2. Usar
complemento: 1. Descargar 2. Referencia 3. Usar

loader es un cargador de archivos, que puede cargar archivos de recursos y realizar algún procesamiento en estos archivos, como compilar, comprimir, etc., y finalmente empaquetarlos juntos en el archivo especificado; el complemento dota al paquete web de varias funciones flexibles, como el empaquetado Optimización, gestión de recursos, inyección de variables de entorno, etc., el propósito es resolver otras cosas que el cargador no puede lograr.

En tiempo de ejecución, el cargador se ejecuta antes de empaquetar los archivos; el complemento funciona durante todo el ciclo de compilación.

En términos de configuración, el cargador está configurado en module.rules, como las reglas de análisis del módulo, y el tipo es una matriz. Cada elemento es un objeto, que contiene prueba (tipo de archivo), cargador, opciones (parámetros) y otros atributos; el complemento se configura por separado en los complementos, el tipo es una matriz, cada elemento es una instancia del complemento y los parámetros se construyen como función. aprobada en.

8. ¿Cómo funciona la actualización en caliente del paquete web? ¿Explicar su principio?

El núcleo de la actualización en caliente es que el cliente extrae el archivo actualizado del servidor. Para ser precisos, es un fragmento de diferencia (la parte del fragmento que necesita actualizarse). De hecho, se mantiene un websocket entre el paquete web y dev-server y el navegador Cuando el recurso local cambia, webpack-dev-server enviará una actualización al navegador y traerá el hash cuando se creó, para que el cliente pueda compararlo con el último recurso. Después de que el cliente compara las diferencias, iniciará una solicitud Ajax al servidor webpack-dev-server para obtener el contenido modificado (lista de archivos, hash), de modo que el cliente pueda usar esta información para continuar iniciando una solicitud jsonp al paquete web. -dev-server para obtener el fragmento. Actualización incremental.

La parte siguiente (¿cómo lidiar con las actualizaciones incrementales? ¿Qué estados deben mantenerse? ¿Cuáles deben actualizarse?) la realiza HotModulePlugin, que proporciona API relacionadas para que los desarrolladores las procesen de acuerdo con sus propios escenarios, como reaccionar-hot- loader y vue-loader utilizan estas API para implementar actualizaciones en caliente.

Detalles:
1. En el modo de observación de webpack, si se modifica un archivo en el sistema de archivos, webpack monitoreará el cambio de archivo, recompilará y empaquetará el módulo de acuerdo con el archivo de configuración y guardará el código empaquetado en la memoria a través de un simple Objeto JavaScript.
2. La interacción de la interfaz entre webpack-dev-server y webpack, y en este paso, principalmente la interacción entre webpack-dev-middleware de dev-server y webpack, webpack-dev-middleware llama a la API expuesta por webpack Monitorea los cambios de código y dígale a webpack que empaquete el código en la memoria.
3. Webpack-dev-server monitorea los cambios de archivos. Este paso es diferente del primer paso. No es para monitorear los cambios de código y reempaquetar. Cuando configuramos devServer.watchContentBase en verdadero en el archivo de configuración, el servidor monitoreará los cambios de los archivos estáticos en estas carpetas de configuración y notificará al navegador que vuelva a cargar la aplicación en vivo después de los cambios. Tenga en cuenta que aquí está la actualización del navegador y HMR son dos conceptos
4. El trabajo del código webpack-dev-server, este paso es principalmente para establecer una conexión larga entre el navegador y el servidor a través de sockjs (dependencia webpack-dev-server). que notifica al navegador la información de estado de cada etapa de compilación y empaquetado del paquete web,
y también incluye la información de que el servidor monitorea los cambios del archivo estático en el tercer paso. El lado del navegador realiza diferentes operaciones según estos mensajes de socket. Por supuesto, la información más importante transmitida por el servidor es el valor hash del nuevo módulo, y los siguientes pasos realizarán el reemplazo en caliente del módulo de acuerdo con este valor hash.
El lado webpack-dev-server/cliente no puede solicitar código actualizado, ni realizar operaciones de módulo en caliente y devolver estas tareas a webpack. El trabajo de webpack/hot/dev-server se basa en webpack-dev - La información pasada a él por el servidor/cliente y la configuración del servidor de desarrollo determina si se actualiza el navegador o se realizan actualizaciones del módulo en caliente. Por supuesto, si simplemente actualiza el navegador, no habrá pasos posteriores. HotModuleReplacement.runtime es el centro del cliente HMR, recibe el valor hash del nuevo módulo que se le pasó en el paso anterior, envía una solicitud Ajax al servidor a través de JsonpMainTemplate.runtime y el servidor devuelve un json, que contiene todo lo actualizado El valor hash del módulo, después de obtener la lista actualizada, el módulo solicita el último código del módulo a través de jsonp nuevamente.
5. El paso clave para determinar el éxito de HMR. En este paso, HotModulePlugin comparará los módulos antiguos y nuevos para decidir si actualizar el módulo. Después de decidir actualizar el módulo, verifique las dependencias entre los módulos y actualice el módulo en al mismo tiempo Referencias dependientes entre. En el último paso, cuando HMR falla, recurra a la operación de recarga en vivo, es decir, actualice el navegador para obtener el código empaquetado más reciente.

9. Cómo resolver el problema de la dependencia circular

En Webpack, reemplace require con *webpack_require* , irá a installModules según moduleId para encontrar si se ha cargado y, si está cargado, volverá directamente a la exportación anterior sin carga repetida.

10. Cómo aumentar la velocidad de construcción de Webpack

1. Compresión de código

• El paquete web de compresión JS
  4.0 admite la compresión de código de forma predeterminada en el entorno de producción, es decir, en modo = modo de producción. De hecho, webpack 4.0 usa el complemento de compresión terser-webpack-plugin por defecto. Antes de eso, se usaba uglifyjs-webpack-plugin. La diferencia entre los dos es que este último no comprime muy bien ES6. Al mismo tiempo, nosotros Puede abrir el parámetro paralelo y utilizar la compresión multiproceso para una compresión más rápida.
• Minificación de CSS
  La minificación de CSS suele ser para eliminar espacios en blanco inútiles, etc., porque es difícil modificar selectores, nombres de propiedades, valores, etc. Se puede utilizar otro complemento: css-minimizer-webpack-plugin.
• Compresión HTML
  Cuando utilice el complemento HtmlWebpackPlugin para generar plantillas HTML, optimice el HTML configurando el atributo minify.

module.exports = {
plugin:[
  new HtmlwebpackPlugin({
    minify:{
      minifyCSS: false, // 是否压缩css
      collapseWhitespace: false, // 是否折叠空格
      removeComments: true // 是否移除注释
    }
  })
  ]
}

2. Compresión de imágenes

configuraciónimage-webpack-loader

3. Sacudida de árboles

Tree Shaking es un término que significa eliminar el código muerto en las computadoras, confiando en el análisis de sintaxis estática del módulo ES (sin ejecutar ningún código, puede conocer claramente las dependencias de los módulos). Hay dos opciones para implementar Tree Shake en el paquete web:

usedExports: marcando si se utilizan ciertas funciones y luego optimizadas a través de Terser

module.exports = {
    ...
    optimization:{
        usedExports
    }
  }

Después de su uso, el código no utilizado se agregará al comentario mul de exportación de armonía no utilizado en el paquete web para informar a Terser que este código se puede eliminar durante la optimización.

sideEffects: omita todo el módulo/archivo y verifique directamente si el archivo tiene efectos secundarios

sideEffects se usa para indicarle al compilador del paquete web qué módulos tienen efectos secundarios. El método de configuración es establecer la propiedad sideEffects en package.json. Si sideEffects se establece en falso, le indica al paquete web que puede eliminar de forma segura las exportaciones no utilizadas. Si es necesario conservar algunos archivos, se pueden configurar en forma de matriz, como por ejemplo:

"sideEffecis":[
    "./src/util/format.js",
    "*.css" // 所有的css文件
]

4. Reducir el dominio del embalaje

排除webpack不需要解析的模块，即在使用loader的时候，在尽量少的模块中去使用。可以借助 include和exclude这两个参数，规定loader只在那些模块应用和在哪些模块不应用。

5. 减少 ES6 转为 ES5 的冗余代码

使用、bable-plugin-transform-runtime插件

6. 提取公共代码

通过配置CommonsChunkPlugin插件，将多个页面的公共代码抽离成单独的文件

7. 其他

组件懒加载、路由懒加载、开启gzip、公共的第三方包上cdn、配置cache缓存Loader对文件的编译副本、配置resolve提高文件的搜索速度（@: src）

---

七、性能优化篇

1. 浏览器缓存优化

为了让浏览器缓存发挥最大作用，该策略尽量遵循以下五点就能发挥浏览器缓存最大作用。

• 「考虑拒绝一切缓存策略」：Cache-Control:no-store
• 「考虑资源是否每次向服务器请求」：Cache-Control:no-cache
• 「考虑资源是否被代理服务器缓存」：Cache-Control:public/private
• 「考虑资源过期时间」：Expires:t/Cache-Control:max-age=t,s-maxage=t
• 「考虑协商缓存」：Last-Modified/Etag

缓存策略通过设置HTTP报文实现，在形式上分为**「强缓存/强制缓存」和「协商缓存/对比缓存」**。为了方便对比，笔者将某些细节使用图例展示，相信你有更好的理解。


整个缓存策略机制很明了，先走强缓存，若命中失败才走协商缓存。若命中强缓存，直接使用强缓存；若未命中强缓存，发送请求到服务器检查是否命中协商缓存；若命中协商缓存，服务器返回304通知浏览器使用本地缓存，否则返回最新资源。

Hay dos escenarios de aplicación de uso común que vale la pena 缓存策略probar; por supuesto, se pueden formular más escenarios de aplicación de acuerdo con los requisitos del proyecto.

• "Recursos que cambian con frecuencia" : configurado Cache-Control:no-cache, para que el navegador envíe una solicitud al servidor cada vez y coopere para Last-Modified/ETagverificar si el recurso es válido
• "Recursos que cambian con poca frecuencia" : establezca Cache-Control:max-age=31536000, haga hash del nombre del archivo, genere un nuevo nombre de archivo cuando se modifique el código y descargue el archivo más reciente cuando el archivo HTML importe el nombre del archivo y cambie

2. Optimización del rendimiento a nivel de renderizado.

La optimización del rendimiento del ** "nivel de representación" ** es sin duda la forma de crear el código 解析更好执行更快. Por lo tanto, el autor hace sugerencias a partir de los siguientes cinco aspectos.

• "Estrategia CSS" : basada en reglas CSS
• "Estrategia DOM" : basada en operaciones DOM
• "Estrategia de bloqueo" : basada en la carga del script
• "Estrategia de redibujo de reflujo" : redibujo basado en reflujo
• "Estrategia de actualización asincrónica" : basada en actualización asincrónica

Los cinco aspectos anteriores se completan al escribir el código y se completan en la etapa de desarrollo de todo el proceso del proyecto. Por lo tanto, en la etapa de desarrollo, siempre se debe prestar atención a cada punto involucrado a continuación, desarrollar buenos hábitos de desarrollo 性能优化y se utilizará de forma natural.

渲染层面Más 性能优化rendimiento en los detalles de codificación, en lugar del código físico. En pocas palabras, se trata de seguir ciertas reglas de codificación para maximizar el efecto 渲染层面.性能优化

** La "estrategia de redibujo de reflujo" ** ocupa una proporción relativamente grande en el 渲染层面juego 性能优化y también es una de las más convencionales 性能优化. El año pasado, el autor publicó el folleto de pepitas de oro "Jugar con la belleza del arte CSS" con un capítulo completo para explicar 回流重绘. Este capítulo se ha abierto para lectura de prueba. Para obtener más detalles, haga clic aquí.

estrategia css

• Evite más de tres capas de嵌套规则
• Evite ID选择器agregar selectores redundantes para
• Evite usar 标签选择器en su lugar类选择器
• Evite el uso 通配选择器, declare reglas solo para los nodos de destino
• Para evitar coincidencias repetidas de definiciones repetidas, céntrese en可继承属性

estrategia DOM

• cacheDOM计算属性
• evitar demasiadoDOM操作
• DOMFragmentProcesamiento por lotes con almacenamiento en cachéDOM操作

estrategia de bloqueo

• El script tiene DOM/其它脚本una fuerte dependencia de: ``configuracióndefer
• El script DOM/其它脚本no tiene una fuerte dependencia de: ``configuraciónasync

estrategia de redibujo de reflujo

• cacheDOM计算属性
• Utilice la clase para fusionar estilos y evitar cambiar los estilos elemento por elemento
• Utilizando displaylos controles DOM显隐, establezca elDOM离线化

Política de actualización asincrónica

• Envuélvalo cuando 异步任务se modifique enDOM微任务

3. Seis indicadores para la optimización del rendimiento

六大指标Básicamente incluye la mayoría de 性能优化los detalles y puede utilizarse como 九大策略complemento. 性能优化建议Según las características de cada artículo, el autor 指标lo divide en los siguientes seis aspectos.

• "Optimización de carga" : optimización del rendimiento que se puede realizar cuando se cargan los recursos
• "Optimización de ejecución" : la optimización del rendimiento que los recursos pueden realizar durante la ejecución.
• "Optimización de renderizado" : optimización del rendimiento que se puede realizar cuando se renderizan los recursos
• "Optimización de estilo" : optimización del rendimiento que los estilos pueden realizar al codificar
• "Optimización de scripts" : optimización del rendimiento que los scripts pueden realizar al codificar
• "Optimización del motor V8" : V8引擎optimización del rendimiento de las funciones

---

Ocho, otros artículos diversos.

1. ¿Cuáles son los núcleos de navegador más comunes?

• Se divide principalmente en dos partes: el motor de renderizado (ingeniero de diseño o motor de renderizado) y el motor JS.
  • Motor de renderizado: responsable de obtener el contenido de la página web (HTML, XML, imágenes, etc.), organizar la información (como agregar CSS, etc.), calcular el método de visualización de la página web y luego enviarlo a el monitor o la impresora. Los diferentes núcleos de navegador tienen diferentes interpretaciones de sintaxis para las páginas web, por lo que los efectos de representación también son diferentes. Todos los navegadores web, clientes de correo electrónico y otras aplicaciones que editan y muestran contenido web requieren un kernel.
  • El motor JS: analiza y ejecuta javascript para lograr el efecto dinámico de la página web.
• Al principio, el motor de renderizado y el motor JS no se distinguían claramente, pero luego el motor JS se volvió cada vez más independiente y el kernel tendía a referirse solo al motor de renderizado.
• núcleo común
  • Núcleo Trident: IE, MaxThon, TT, The World, 360, navegador Sogou, etc. [también conocido como MSHTML]
  • Kernel Gecko: Netscape6 y superior, FF, MozillaSuite/SeaMonkey, etc.
  • Núcleo Presto: Opera7 y superior. [El núcleo de Opera era originalmente: Presto, ahora: Blink;]
  • Núcleo de Webkit: Safari, Chrome, etc. [Chrome: Blink (bifurcación de WebKit)]

2. ¿Cuáles son las formas de optimizar el rendimiento del front-end de la página web?

1. Comprimir css, js, imágenes
2. Reducir la cantidad de solicitudes http, fusionar css, js, fusionar imágenes (imagen Sprite)
3. Usar CDN
4. Reducir la cantidad de elementos dom
5. Carga diferida de imágenes
6. Recursos estáticos también utilice un nombre de dominio sin cookies
7. Reduzca el acceso a dom (dom de almacenamiento en caché)
8. Utilice la delegación de eventos con habilidad
9. Establezca la hoja de estilo en la parte superior y el script en la parte inferior

3. ¿Qué proceso sigue la página web desde que se ingresa la URL hasta que se representa?

Se puede dividir aproximadamente en los siguientes 7 pasos:

• Introducir URL;
• Envíelo al servidor DNS y obtenga la dirección IP correspondiente al servidor web correspondiente al nombre de dominio;
• Establezca una conexión TCP con el servidor web;
• El navegador envía una solicitud http al servidor web;
• El servidor web responde a la solicitud y devuelve los datos de la URL especificada (o un mensaje de error, o una nueva dirección URL redirigida);
• El navegador descarga los datos devueltos por el servidor web y analiza el archivo fuente html;
• Genere un árbol DOM, analice css y js, represente la página hasta que se complete la visualización;

4. ¿Cuál es la diferencia entre un hilo y un proceso?

• Un programa tiene al menos un proceso y un proceso tiene al menos un subproceso.
• La escala de división de subprocesos es menor que la de los procesos, por lo que la concurrencia de programas multiproceso es alta.
• Además, un proceso tiene una unidad de memoria independiente durante la ejecución y varios subprocesos comparten la memoria, lo que mejora enormemente la eficiencia operativa del programa.
• Todavía existe una diferencia entre un hilo y un proceso durante la ejecución. Cada hilo independiente tiene un punto de entrada para la ejecución del programa, una secuencia de ejecución secuencial y un punto de salida para el programa. Sin embargo, los subprocesos no se pueden ejecutar de forma independiente y deben depender del programa de aplicación, y el programa de aplicación proporciona control de ejecución de múltiples subprocesos.
• Desde un punto de vista lógico, el significado de subprocesos múltiples es que en una aplicación se pueden ejecutar varias partes de ejecución al mismo tiempo. Sin embargo, el sistema operativo no considera múltiples subprocesos como múltiples aplicaciones independientes para implementar la programación, gestión y asignación de recursos de procesos. Ésta es la diferencia importante entre proceso e hilo.

5. ¿Cuáles son los códigos de estado comunes de HTTP?

100 Continuar Continuar. Generalmente, al enviar una solicitud de publicación, el servidor devolverá esta información después de que se haya enviado el encabezado http para indicar la confirmación y luego enviará información de parámetros específicos. 200 OK devuelve información
normalmente
. 201 Creado La solicitud es exitosa y el el servidor ha creado un nuevo recurso
202 Aceptado El servidor ha aceptado la solicitud pero aún no la ha procesado
301 Movida permanentemente La página web solicitada se ha movido permanentemente a una nueva ubicación.
302 Encontrado Redirección temporal.
303 Consulte Otros redireccionamientos temporales y utilice siempre GET para solicitar un nuevo URI.
304 No modificado La página solicitada no ha sido modificada desde la última solicitud.
400 Solicitud incorrecta El servidor no puede comprender el formato de la solicitud y el cliente no debe intentar iniciar una solicitud con el mismo contenido nuevamente.
401 No autorizado La solicitud no está autorizada.
403 Prohibido Acceso prohibido.
404 No encontrado No se puede encontrar ningún recurso que coincida con el URI.
500 Error interno del servidor El error más común del lado del servidor.
503 Servicio no disponible El servidor no puede procesar temporalmente la solicitud (tal vez por sobrecarga o mantenimiento).

6. ¿Carga diferida de imágenes?

Cuando se activa el tiempo de desplazamiento de la página -> ejecute la operación de carga de imagen -> juzgue si la imagen está en el área visible -> sí, luego asigne dinámicamente el valor de data-src a la imagen

7. ¿Optimización del rendimiento móvil?

• Intente utilizar la animación css3 y active la aceleración de hardware
• Utilice adecuadamente el tiempo de contacto en lugar del tiempo de clic
• Evite el uso del efecto de sombra degradado css3
• Puede usar transform: TranslateZ(0) para habilitar la aceleración de hardware
• No abusar del flotador. Float tiene una cantidad relativamente grande de cálculo durante el renderizado, así que trate de minimizar el uso
• No abuses de las fuentes web. Las fuentes web deben descargarse, analizarse y volverse a pintar en la página actual
• Uso razonable de la animación requestAnimationFrame en lugar de setTimeout
• Las propiedades en CSS (transiciones CSS3, transformaciones 3D CSS3, opacidad, webGL, video) activarán el renderizado GUP, que consume energía.

8. Estrategia de protocolo de enlace de tres y cuatro vías para la transmisión TCP

• Apretón de manos de tres vías:

  Para entregar datos con precisión al objetivo, el protocolo TCP utiliza una estrategia de protocolo de enlace de tres vías. Después de usar el protocolo TCP para enviar el paquete de datos, TCP no ignorará la situación después de la transmisión, definitivamente confirmará a la otra parte si se ha entregado y usará el indicador TCP durante el proceso de protocolo de enlace: SYN y ACK.

  • El remitente primero envía un paquete de datos con el indicador SYN a la otra parte.
  • Después de que el extremo receptor lo recibe, devuelve un paquete de datos con el indicador SYN/ACK para mostrar la información de confirmación.
  • Finalmente, el remitente devuelve un paquete de datos con un indicador ACK, lo que significa que el "apretón de manos" ha terminado.

• Si hay una cierta interrupción durante el proceso de protocolo de enlace, el protocolo TCP enviará los mismos paquetes de datos en el mismo orden nuevamente.

---

• Desconectar una conexión TCP requiere "cuatro ondas"
  • La primera ola: el cierre activo envía un FIN para prestar atención a la transmisión de datos del cierre activo al cierre pasivo, es decir, el cierre activo advierte al cierre pasivo: No le enviaré más datos ( en el paquete FIN Para los datos enviados antes, si no se recibe el mensaje de confirmación ACK correspondiente, la parte de cierre activa aún reenviará los datos). Sin embargo, en este momento, la parte cerrada activamente todavía puede aceptar datos.
  • La segunda ola: después de que la parte de cierre pasiva recibe el paquete FIN, envía un ACK a la otra parte, confirmando que el número de serie ha recibido el número de serie + 1 (igual que SYN, un FIN ocupa un número de serie)
  • Tercera ola: el cierre pasivo envía un FIN. Se utiliza para cerrar la transmisión de datos del cierre pasivo al cierre activo, es decir para decirle al cierre activo que mis datos han sido enviados y no le enviaré datos.
  • La cuarta ola: después de que la parte de cierre activa recibe el FIN, envía un ACK a la parte de cierre pasiva, confirmando que el número de serie es el número de serie recibido + 1, hasta ahora, se han completado cuatro movimientos de manos.

9. HTTP y HTTPS, ¿por qué HTTPS es seguro?

• El protocolo HTTP generalmente se superpone al protocolo TCP y se agrega una capa de protocolo de seguridad (SSL o TSL) entre HTTP y TCP, que en este momento se convierte en lo que a menudo llamamos HTTPS.
• El número de puerto HTTP predeterminado es 80 y el número de puerto HTTPS es 443.
• Debido a que la solicitud de red debe ser reenviada por muchas rutas de servidor en el medio, los nodos intermedios pueden alterar la información y, si usa HTTPS, la clave está solo con usted y la estación terminal. La razón por la cual https es más seguro que http se debe a que utiliza la transmisión del protocolo ssl/tls. Incluyendo certificados, reenvío de tráfico, equilibrio de carga, adaptación de página, adaptación del navegador, transferencia de referencias, etc., garantizando la seguridad del proceso de transmisión.

10. La diferencia entre axios y fetch

Axios es un cliente HTTP basado en Promise para navegadores y nodejs. Es esencialmente una encapsulación de XHR nativo, pero es una versión de implementación de Promise, que se ajusta a la última especificación ES. Tiene las siguientes características

• Crear XMLHttpRequest desde el navegador
• API de promesa de soporte
• Soporte al cliente para prevenir CSRF
• Proporciona algunas interfaces para solicitudes simultáneas (importante, facilita muchas operaciones)
• Crear solicitud http desde node.js
• Interceptar solicitudes y respuestas
• Transformar datos de solicitudes y respuestas
• cancelar petición
• Convertir automáticamente datos JSON

buscarVentajas:

• La sintaxis es concisa y más semántica.
• Basado en la implementación estándar de Promise, admite async/await
• El isomorfismo es conveniente, use búsqueda isomorfa
• Es de nivel más bajo y proporciona API enriquecidas (solicitud, respuesta)
• Separado de XHR, es una nueva implementación en la especificación ES.

Hay un problema con la recuperación.

• fetch es una API de bajo nivel, puede considerarla como un XHR nativo, por lo que no es tan cómodo de usar y debe encapsularse.
• Fetch solo informa errores para solicitudes de red y trata 400 y 500 como solicitudes exitosas. Cuando el servidor devuelve códigos de error 400 y 500, no los rechazará. Fetch se rechazará solo cuando la solicitud no se pueda completar debido a errores de red.
• fetch no trae cookies de forma predeterminada, es necesario agregar elementos de configuración: fetch(url, {credentials: 'include'})
• Fetch no admite la cancelación ni el control de tiempo de espera. El control de tiempo de espera implementado mediante setTimeout y Promise.reject no puede evitar que el proceso de solicitud continúe ejecutándose en segundo plano, lo que resulta en una pérdida de tráfico.
• Fetch no tiene forma de monitorear el progreso de la solicitud de forma nativa, mientras que XHR puede

---

Nueve preguntas subjetivas

1. ¿En qué proyectos has trabajado? Hable en detalle sobre la tecnología utilizada en un determinado proyecto.

Nota: Busque el proyecto que crea que puede hacer más (el proyecto con mayor complejidad y más tecnología utilizada) y agregue algunos términos técnicos tanto como sea posible al describir el diseño. Usamos html5 + css3 y Usaremos reset Si .css restablece el marco JS de estilo predeterminado del navegador, elegimos jQuery (o tal vez Zepto). Usamos la herramienta de control de versiones git para desarrollar de forma colaborativa.
Desarrollaremos en base al proyecto de automatización front-end creado por gulp ( que contiene la estructura de nuestro proyecto, la biblioteca de terceros a la que necesitamos hacer referencia y otra información, también hemos realizado la automatización de la compilación sass, el prefijo CSS3, etc.) Nuestro proyecto también utiliza el complemento de validación de verificación de formulario, carga diferida de imágenes Complemento de carga diferida

2. ¿Cuál es el problema técnico más difícil que ha encontrado? ¿Cómo lo solucionaste?

3. ¿Cuáles son las bibliotecas de uso común? ¿Herramientas de desarrollo front-end de uso común? ¿Qué aplicaciones o componentes habéis desarrollado?

4. ¿Conoce otras tecnologías además del front-end? ¿Cuál es tu habilidad más fuerte?

5. ¿Cómo entiendes el puesto de ingeniero de desarrollo front-end? ¿Cuáles son sus perspectivas?

El front-end es el programador más cercano al usuario, más cercano que el back-end, la base de datos, el administrador de productos, la operación y la seguridad.
1. Realizar la interacción de la interfaz
2. Mejorar la experiencia del usuario
3. Con Node.js, el front-end puede realizar algunas cosas en el lado del servidor
. El front-end es el programador más cercano al usuario. Aún mejor,
participa en el proyecto. complete rápidamente y de alta calidad las representaciones de implementación, con una precisión de 1 px;
comuníquese con los miembros del equipo, el diseño de la interfaz de usuario y los gerentes de producto;
haga un buen trabajo en la estructura de la página, la refactorización de la página y la experiencia del usuario;
maneje los hacks, la compatibilidad y escriba un formato de código hermoso ;
optimizado para el servidor, adoptando la última tecnología de front-end.

hacer

• "Estrategia de bloqueo" : basada en la carga del script
• "Estrategia de redibujo de reflujo" : redibujo basado en reflujo
• "Estrategia de actualización asincrónica" : basada en actualización asincrónica

Los cinco aspectos anteriores se completan al escribir el código y se completan en la etapa de desarrollo de todo el proceso del proyecto. Por lo tanto, en la etapa de desarrollo, siempre se debe prestar atención a cada punto involucrado a continuación, desarrollar buenos hábitos de desarrollo 性能优化y se utilizará de forma natural.

渲染层面Más 性能优化rendimiento en los detalles de codificación, en lugar del código físico. En pocas palabras, se trata de seguir ciertas reglas de codificación para maximizar el efecto 渲染层面.性能优化

** La "estrategia de redibujo de reflujo" ** ocupa una proporción relativamente grande en el 渲染层面juego 性能优化y también es una de las más convencionales 性能优化. El año pasado, el autor publicó el folleto de pepitas de oro "Jugar con la belleza del arte CSS" con un capítulo completo para explicar 回流重绘. Este capítulo se ha abierto para lectura de prueba. Para obtener más detalles, haga clic aquí.

estrategia css

• Evite más de tres capas de嵌套规则
• Evite ID选择器agregar selectores redundantes para
• Evite usar 标签选择器en su lugar类选择器
• Evite el uso 通配选择器, declare reglas solo para los nodos de destino
• Para evitar coincidencias repetidas de definiciones repetidas, céntrese en可继承属性

estrategia DOM

• cacheDOM计算属性
• evitar demasiadoDOM操作
• DOMFragmentProcesamiento por lotes con almacenamiento en cachéDOM操作

estrategia de bloqueo

• El script tiene DOM/其它脚本una fuerte dependencia de: ``configuracióndefer
• El script DOM/其它脚本no tiene una fuerte dependencia de: ``configuraciónasync

estrategia de redibujo de reflujo

• cacheDOM计算属性
• Utilice la clase para fusionar estilos y evitar cambiar los estilos elemento por elemento
• Utilizando displaylos controles DOM显隐, establezca elDOM离线化

Política de actualización asincrónica

• Envuélvalo cuando 异步任务se modifique enDOM微任务

3. Seis indicadores para la optimización del rendimiento

六大指标Básicamente incluye la mayoría de 性能优化los detalles y puede utilizarse como 九大策略complemento. 性能优化建议Según las características de cada artículo, el autor 指标lo divide en los siguientes seis aspectos.

• 「加载优化」：资源在加载时可做的性能优化
• 「执行优化」：资源在执行时可做的性能优化
• 「渲染优化」：资源在渲染时可做的性能优化
• 「样式优化」：样式在编码时可做的性能优化
• 「脚本优化」：脚本在编码时可做的性能优化
• 「V8引擎优化」：针对V8引擎特征可做的性能优化

---

八、其他杂项篇

1. 常见的浏览器内核有哪些？

• 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
  • 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
  • JS引擎则：解析和执行javascript来实现网页的动态效果。
• 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
• 常见内核
  • Trident 内核：IE, MaxThon, TT, The World, 360, 搜狗浏览器等。[又称 MSHTML]
  • Gecko 内核：Netscape6 及以上版本，FF, MozillaSuite / SeaMonkey 等
  • Presto 内核：Opera7 及以上。 [Opera内核原为：Presto，现为：Blink;]
  • Webkit 内核：Safari, Chrome等。 [ Chrome的：Blink（WebKit 的分支）]

2. 网页前端性能优化的方式有哪些？

1. Comprimir css, js, imágenes
2. Reducir la cantidad de solicitudes http, fusionar css, js, fusionar imágenes (imagen Sprite)
3. Usar CDN
4. Reducir la cantidad de elementos dom
5. Carga diferida de imágenes
6. Recursos estáticos también utilice un nombre de dominio sin cookies
7. Reduzca el acceso a dom (dom de almacenamiento en caché)
8. Utilice la delegación de eventos con habilidad
9. Establezca la hoja de estilo en la parte superior y el script en la parte inferior

3. ¿Qué proceso sigue la página web desde que se ingresa la URL hasta que se representa?

Se puede dividir aproximadamente en los siguientes 7 pasos:

• Introducir URL;
• Envíelo al servidor DNS y obtenga la dirección IP correspondiente al servidor web correspondiente al nombre de dominio;
• Establezca una conexión TCP con el servidor web;
• El navegador envía una solicitud http al servidor web;
• El servidor web responde a la solicitud y devuelve los datos de la URL especificada (o un mensaje de error, o una nueva dirección URL redirigida);
• El navegador descarga los datos devueltos por el servidor web y analiza el archivo fuente html;
• Genere un árbol DOM, analice css y js, represente la página hasta que se complete la visualización;

4. ¿Cuál es la diferencia entre un hilo y un proceso?

• Un programa tiene al menos un proceso y un proceso tiene al menos un subproceso.
• La escala de división de subprocesos es menor que la de los procesos, por lo que la concurrencia de programas multiproceso es alta.
• Además, un proceso tiene una unidad de memoria independiente durante la ejecución y varios subprocesos comparten la memoria, lo que mejora enormemente la eficiencia operativa del programa.
• Todavía existe una diferencia entre un hilo y un proceso durante la ejecución. Cada hilo independiente tiene un punto de entrada para la ejecución del programa, una secuencia de ejecución secuencial y un punto de salida para el programa. Sin embargo, los subprocesos no se pueden ejecutar de forma independiente y deben depender del programa de aplicación, y el programa de aplicación proporciona control de ejecución de múltiples subprocesos.
• Desde un punto de vista lógico, el significado de subprocesos múltiples es que en una aplicación se pueden ejecutar varias partes de ejecución al mismo tiempo. Sin embargo, el sistema operativo no considera múltiples subprocesos como múltiples aplicaciones independientes para implementar la programación, gestión y asignación de recursos de procesos. Ésta es la diferencia importante entre proceso e hilo.

5. ¿Cuáles son los códigos de estado comunes de HTTP?

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

6. 图片懒加载？

当页面滚动的时间被触发 -> 执行加载图片操作 -> 判断图片是否在可视区域内 -> 在，则动态将data-src的值赋予该图片

7. 移动端性能优化？

• 尽量使用css3动画，开启硬件加速
• 适当使用touch时间代替click时间
• 避免使用css3渐变阴影效果
• 可以用transform: translateZ(0) 来开启硬件加速
• 不滥用float。float在渲染时计算量比较大，尽量减少使用
• No abuses de las fuentes web. Las fuentes web deben descargarse, analizarse y volverse a pintar en la página actual
• Uso razonable de la animación requestAnimationFrame en lugar de setTimeout
• Las propiedades en CSS (transiciones CSS3, transformaciones 3D CSS3, opacidad, webGL, video) activarán el renderizado GUP, que consume energía.

8. Estrategia de protocolo de enlace de tres y cuatro vías para la transmisión TCP

• Apretón de manos de tres vías:

  Para entregar datos con precisión al objetivo, el protocolo TCP utiliza una estrategia de protocolo de enlace de tres vías. Después de usar el protocolo TCP para enviar el paquete de datos, TCP no ignorará la situación después de la transmisión, definitivamente confirmará a la otra parte si se ha entregado y usará el indicador TCP durante el proceso de protocolo de enlace: SYN y ACK.

  • El remitente primero envía un paquete de datos con el indicador SYN a la otra parte.
  • Después de que el extremo receptor lo recibe, devuelve un paquete de datos con el indicador SYN/ACK para mostrar la información de confirmación.
  • Finalmente, el remitente devuelve un paquete de datos con un indicador ACK, lo que significa que el "apretón de manos" ha terminado.

• Si hay una cierta interrupción durante el proceso de protocolo de enlace, el protocolo TCP enviará los mismos paquetes de datos en el mismo orden nuevamente.

---

• Desconectar una conexión TCP requiere "cuatro ondas"
  • La primera ola: el cierre activo envía un FIN para prestar atención a la transmisión de datos del cierre activo al cierre pasivo, es decir, el cierre activo advierte al cierre pasivo: No le enviaré más datos ( en el paquete FIN Para los datos enviados antes, si no se recibe el mensaje de confirmación ACK correspondiente, la parte de cierre activa aún reenviará los datos). Sin embargo, en este momento, la parte cerrada activamente todavía puede aceptar datos.
  • La segunda ola: después de que la parte de cierre pasiva recibe el paquete FIN, envía un ACK a la otra parte, confirmando que el número de serie ha recibido el número de serie + 1 (igual que SYN, un FIN ocupa un número de serie)
  • Tercera ola: el cierre pasivo envía un FIN. Se utiliza para cerrar la transmisión de datos del cierre pasivo al cierre activo, es decir para decirle al cierre activo que mis datos han sido enviados y no le enviaré datos.
  • La cuarta ola: después de que la parte de cierre activa recibe el FIN, envía un ACK a la parte de cierre pasiva, confirmando que el número de serie es el número de serie recibido + 1, hasta ahora, se han completado cuatro movimientos de manos.

9. HTTP y HTTPS, ¿por qué HTTPS es seguro?

• El protocolo HTTP generalmente se superpone al protocolo TCP y se agrega una capa de protocolo de seguridad (SSL o TSL) entre HTTP y TCP, que en este momento se convierte en lo que a menudo llamamos HTTPS.
• El número de puerto HTTP predeterminado es 80 y el número de puerto HTTPS es 443.
• Debido a que la solicitud de red debe ser reenviada por muchas rutas de servidor en el medio, los nodos intermedios pueden alterar la información y, si usa HTTPS, la clave está solo con usted y la estación terminal. La razón por la cual https es más seguro que http se debe a que utiliza la transmisión del protocolo ssl/tls. Incluyendo certificados, reenvío de tráfico, equilibrio de carga, adaptación de página, adaptación del navegador, transferencia de referencias, etc., garantizando la seguridad del proceso de transmisión.

10. La diferencia entre axios y fetch

Axios es un cliente HTTP basado en Promise para navegadores y nodejs. Es esencialmente una encapsulación de XHR nativo, pero es una versión de implementación de Promise, que se ajusta a la última especificación ES. Tiene las siguientes características

• Crear XMLHttpRequest desde el navegador
• API de promesa de soporte
• Soporte al cliente para prevenir CSRF
• Proporciona algunas interfaces para solicitudes simultáneas (importante, facilita muchas operaciones)
• Crear solicitud http desde node.js
• Interceptar solicitudes y respuestas
• Transformar datos de solicitudes y respuestas
• cancelar petición
• Convertir automáticamente datos JSON

buscarVentajas:

• La sintaxis es concisa y más semántica.
• Basado en la implementación estándar de Promise, admite async/await
• El isomorfismo es conveniente, use búsqueda isomorfa
• Es de nivel más bajo y proporciona API enriquecidas (solicitud, respuesta)
• Separado de XHR, es una nueva implementación en la especificación ES.

Hay un problema con la recuperación.

• fetch es una API de bajo nivel, puede considerarla como un XHR nativo, por lo que no es tan cómodo de usar y debe encapsularse.
• Fetch solo informa errores para solicitudes de red y trata 400 y 500 como solicitudes exitosas. Cuando el servidor devuelve códigos de error 400 y 500, no los rechazará. Fetch se rechazará solo cuando la solicitud no se pueda completar debido a errores de red.
• fetch no trae cookies de forma predeterminada, es necesario agregar elementos de configuración: fetch(url, {credentials: 'include'})
• Fetch no admite la cancelación ni el control de tiempo de espera. El control de tiempo de espera implementado mediante setTimeout y Promise.reject no puede evitar que el proceso de solicitud continúe ejecutándose en segundo plano, lo que resulta en una pérdida de tráfico.
• Fetch no tiene forma de monitorear el progreso de la solicitud de forma nativa, mientras que XHR puede

---

Nueve preguntas subjetivas

1. ¿En qué proyectos has trabajado? Hable en detalle sobre la tecnología utilizada en un determinado proyecto.

Nota: Busque el proyecto que crea que puede hacer más (el proyecto con mayor complejidad y más tecnología utilizada) y agregue algunos términos técnicos tanto como sea posible al describir el diseño. Usamos html5 + css3 y Usaremos reset Si .css restablece el marco JS de estilo predeterminado del navegador, elegimos jQuery (o tal vez Zepto). Usamos la herramienta de control de versiones git para desarrollar de forma colaborativa.
Desarrollaremos en base al proyecto de automatización front-end creado por gulp ( que contiene la estructura de nuestro proyecto, la biblioteca de terceros a la que necesitamos hacer referencia y otra información, también hemos realizado la automatización de la compilación sass, el prefijo CSS3, etc.) Nuestro proyecto también utiliza el complemento de validación de verificación de formulario, carga diferida de imágenes Complemento de carga diferida

2. ¿Cuál es el problema técnico más difícil que ha encontrado? ¿Cómo lo solucionaste?

3. ¿Cuáles son las bibliotecas de uso común? ¿Herramientas de desarrollo front-end de uso común? ¿Qué aplicaciones o componentes habéis desarrollado?

Bibliotecas de uso común:

• React.js: una biblioteca de JavaScript para crear interfaces de usuario.
• Vue.js: otro marco de JavaScript popular para crear interfaces de usuario interactivas.
• Angular: un marco de JavaScript completo que admite el desarrollo de aplicaciones a gran escala.
• jQuery: una biblioteca de JavaScript que simplifica la manipulación de DOM y el manejo de eventos.
• Lodash: proporciona muchas funciones útiles y funciones de utilidad para simplificar las tareas de desarrollo de JavaScript.

Herramientas comunes de desarrollo front-end:

• Visual Studio Code: un popular editor de código ligero.
• Sublime Text: Sublime Text es un editor de código potente pero liviano. Es rápido, estable y altamente personalizable, admite un rico ecosistema de complementos y puede satisfacer diversas necesidades de desarrollo front-end. Sublime Text tiene características como una interfaz intuitiva, búsqueda y reemplazo potentes, selección de varias líneas, resaltado de sintaxis y autocompletado, lo que hace que el desarrollo front-end sea más eficiente.
• WebStorm：WebStorm是一款由JetBrains开发的集成开发环境（IDE）。它专注于提供全面的JavaScript开发体验，适用于前端和后端开发。WebStorm具有强大的代码编辑功能、智能代码完成、错误检查和修复、调试器、Git集成、自动重载和实时预览等功能，能够提供更高效和便捷的前端开发环境。

组件例如：

• 单页应用（SPA）：构建响应式、高度交互的单页Web应用。
• 表单验证组件：用于验证和处理用户输入的表单组件。
• 图片轮播组件：用于展示多张图片的轮播效果。
• 响应式导航菜单：根据不同设备和屏幕大小自适应的导航菜单。
• 数据可视化组件：用于呈现和展示数据的图表、图形等组件。

4. 除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？

5. 对前端开发工程师这个职位是怎么样理解的？它的前景会怎么样？

前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
1、实现界面交互
2、提升用户体验
3、有了Node.js，前端可以实现服务端的一些事情
前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，
参与项目，快速高质量完成实现效果图，精确到1px；
与团队成员，UI设计，产品经理的沟通；
做好的页面结构，页面重构和用户体验；
处理hack，兼容、写出优美的代码格式；
针对服务器的优化、拥抱最新前端技术。