perf: batch signals

This commit is contained in:
kunish 2023-09-17 03:09:56 +08:00
parent d3ae853aa9
commit e04ec712ea
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
2 changed files with 18 additions and 12 deletions

View File

@ -131,7 +131,7 @@ export default () => {
}) })
return ( return (
<div class="mx-auto flex max-w-screen-md flex-col items-center gap-4 py-10"> <div class="mx-auto flex max-w-screen-sm flex-col items-center gap-4 py-10">
<form class="contents" use:form={form}> <form class="contents" use:form={form}>
<div class="flex w-full flex-col gap-4"> <div class="flex w-full flex-col gap-4">
<div class="flex-1"> <div class="flex-1">
@ -165,20 +165,20 @@ export default () => {
/> />
</div> </div>
<Button type="submit" class="btn-primary join-item uppercase"> <Button type="submit" class="btn-primary uppercase">
{t('add')} {t('add')}
</Button> </Button>
</div> </div>
</form> </form>
<div class="flex w-full flex-col gap-4"> <div class="grid w-full grid-cols-2 gap-4">
<For each={endpointList()}> <For each={endpointList()}>
{({ id, url }) => ( {({ id, url }) => (
<div <div
class="badge badge-info flex w-full cursor-pointer items-center gap-4 py-4" class="badge badge-info flex w-full cursor-pointer items-center justify-between gap-4 py-4"
onClick={() => onEndpointSelect(id)} onClick={() => onEndpointSelect(id)}
> >
{url} <span class="truncate">{url}</span>
<Button <Button
class="btn-circle btn-ghost btn-xs text-white" class="btn-circle btn-ghost btn-xs text-white"

View File

@ -1,4 +1,4 @@
import { createSignal, untrack } from 'solid-js' import { batch, createSignal, untrack } from 'solid-js'
import { import {
closeSingleConnectionAPI, closeSingleConnectionAPI,
fetchProxiesAPI, fetchProxiesAPI,
@ -10,6 +10,7 @@ import {
} from '~/apis' } from '~/apis'
import { import {
autoCloseConns, autoCloseConns,
latencyQualityMap,
latencyTestTimeoutDuration, latencyTestTimeoutDuration,
latestConnectionMsg, latestConnectionMsg,
mergeAllConnections, mergeAllConnections,
@ -40,7 +41,8 @@ const setProxiesInfo = (proxies: (Proxy | ProxyNode)[]) => {
const newLatencyMap = { ...latencyMap() } const newLatencyMap = { ...latencyMap() }
proxies.forEach((proxy) => { proxies.forEach((proxy) => {
const latency = proxy.history.at(-1)?.delay || -1 const latency =
proxy.history.at(-1)?.delay || latencyQualityMap().NOT_CONNECTED
newProxyNodeMap[proxy.name] = { newProxyNodeMap[proxy.name] = {
udp: proxy.udp, udp: proxy.udp,
@ -52,8 +54,10 @@ const setProxiesInfo = (proxies: (Proxy | ProxyNode)[]) => {
newLatencyMap[proxy.name] = latency newLatencyMap[proxy.name] = latency
}) })
batch(() => {
setProxyNodeMap(newProxyNodeMap) setProxyNodeMap(newProxyNodeMap)
setLatencyMap(newLatencyMap) setLatencyMap(newLatencyMap)
})
} }
export const useProxies = () => { export const useProxies = () => {
@ -79,9 +83,11 @@ export const useProxies = () => {
...sortedProviders.flatMap((provider) => provider.proxies), ...sortedProviders.flatMap((provider) => provider.proxies),
] ]
batch(() => {
setProxies(sortedProxies) setProxies(sortedProxies)
setProxyProviders(sortedProviders) setProxyProviders(sortedProviders)
setProxiesInfo(allProxies) setProxiesInfo(allProxies)
})
} }
const setProxyGroupByProxyName = async (proxy: Proxy, proxyName: string) => { const setProxyGroupByProxyName = async (proxy: Proxy, proxyName: string) => {