tengo la aplicación web pos la búsqueda de filtro de matriz en el lado del cliente en el navegador no en el servidor primero descargo todos los productos como matriz y trabajo en él y funciona muy bien con una cantidad de productos de menos de 20k desde hace un tiempo la matriz de los productos obtiene la número de 50k
y mi matriz de resultados es así ...
[ { "id": 1, "name": "Product 1", "number": "1", "available_on_pos": 1, "pos_quick_lunch": 1, "product_category_id": 1, "discount_value": 10, "smallest_unit_id": 1, "smallest_unit_barcode": null, "smallest_unit_selling_price": 10, "smallest_unit_selling_price_above": null, "smallest_unit_selling_price_above_price": null, "tax_value": 16, "get_smallest_unit_id": { "id": 1, "name": "Unit" }, "get_price_list_lines": [] }, { "id": 13, "name": "Product 2", "number": "13", "available_on_pos": 1, "pos_quick_lunch": null, "product_category_id": 1, "discount_value": null, "smallest_unit_id": 1, "smallest_unit_barcode": "9501025172815", "smallest_unit_selling_price": 0.509, "smallest_unit_selling_price_above": null, "smallest_unit_selling_price_above_price": null, "tax_value": 16, "get_smallest_unit_id": { "id": 1, "name": "Unit" }, "get_price_list_lines": [] } ]y este es el metodo de busqueda
var results = this.products.filter(obj => obj.smallest_unit_barcode != null && obj.smallest_unit_barcode.includes(value)); this.pos_quick_lunch = results;como digo, la matriz de productos es de 50k, la búsqueda tiene un retraso cuando presiono la pistola de código de barras en el mismo tiempo de búsqueda de productos y esto es mucho tiempo en pos para esperar... ¿hay alguna manera de que pueda hacer que la búsqueda sea mucho más fácil y rápida?
¿Hay alguna manera de que pueda hacer que la búsqueda sea mucho más fácil y rápida?
var results = this.products.filter(obj => obj.smallest_unit_barcode != null && obj.smallest_unit_barcode.includes(value));Mientras mantengamos el enfoque en esta parte del código y no comencemos discusiones sobre ideas generales de diseño, veo estas opciones...
Podría crear una lista de productos con smalles_unit_barcode != null o undefined y conservarla. Esto debería darte una pequeña mejora.
// do this only when products collection changes const this.cachedProductsWithBarcode = this.products.filter(p => !!p.smallest_unit_barcode); // do this on every request / input const results = this.cachedProductsWithBarcode(p => p.smallest_unit_barcode.includes(value));Si obtiene el número de artículo/gtin completo, no es necesario realizar una búsqueda parcial y, en su lugar, puede utilizar una búsqueda en el diccionario.
// only when products collection changes const dict = this.products.reduce((prev, cur) => (prev[cur.smalles_unit_barcode] = cur, prev), {}); // for each request return dict[value];(Si obtiene el código de barras completo la mayor parte del tiempo, pero algunas veces solo una parte, podría pensar en hacer una búsqueda primero y continuar con la búsqueda si no encuentra ninguna coincidencia).
Si la aguja de búsqueda proviene de una entrada del usuario, donde los usuarios pueden escribir el código de barras y realiza esta búsqueda en cada pulsación de tecla, esta búsqueda bloqueará la interfaz de usuario haciendo que la aplicación quede inutilizable. Retrasar la entrada del usuario (= realizar la búsqueda solo si no obtenemos más pulsaciones de teclas durante, por ejemplo, 500 ms) podría mejorar la experiencia del usuario.
Además, puede almacenar en caché los resultados
// User input "123" // const firstResult = products.find(...) // User input "1234" // ... must be in firstResult, so let' search there return firstResult.find(...)(Esto solo tiene sentido si es 'buscar mientras se escribe' y necesita invalidar el caché si la aguja permite más resultados que la lista de resultados en caché).
startsWith() en lugar de "include( includes() (espere una mejora del 10 %); si no puede, utilice ==find() en su lugar. Nunca debería necesitar más de ~10 resultados, así que deje de filtrar cuando se alcance.No está claro si está hablando de un cliente js o de un servidor node.js.
si está hablando de js ejecutado en su navegador, creo que un enfoque mucho mejor es hacer que el back-end haga el filtrado. No creo que un cliente deba obtener tal cantidad de datos.
si se trata de un servidor node.js, debe considerar mejorar la consulta de su base de datos y dejar que haga el filtrado y no consultar todos los datos.
La búsqueda del catálogo de productos generalmente se realiza desde el lado del servidor back-end (especialmente porque su conjunto de datos de productos es muy grande y no solo unos pocos). Debería implementar un campo de búsqueda y un botón que llame a una API. Además, los resultados deben estar paginados, lo que significa que no desea cargar todos los productos de 50k en la memoria del navegador o fácilmente tendrá problemas (especialmente en dispositivos móviles) con el caché de la aplicación.