I'm working on a Vue/Vuex project and have encountered some horrible performance issues with my store's actions/mutations. All of my actions are taking over 100 ms to complete regardless of what they are doing. It doesn't matter what the action/mutation is doing; even empty mutations take over 100 ms to complete.
I have debugged this quite extensively, and don't know where to go from here. My one hunch is that I am storing a very large object in my store. If I strip out data and make this object smaller, my app's performance is tolerable, but when it is large, the app's performance is unbearably slow. The size of this object seems to affect the runtime of my mutations, even if the mutations have nothing to do with the object in question.
This is an example of the data that I am storing. I have replaced all properties and values with random characters, but the structure of the object is identical to what I'm storing in my vuex store:
JSFiddle for full object structure, if you would like to see (StackOverflow only allows question bodies of < 30000 characters and my object was 357134 by itself): https://jsfiddle.net/a2kyLq1h/
Object exerpt:
{
"19": {
"Bg": "lP",
"h0": "ci"
},
"67": "wq",
"NY": "w9",
"sC": "Zj",
"7y": "m4",
"CV": {},
"Y7": {},
"Vu": "5B",
"rO": {},
"2c": {},
"Z2": "Et",
"nd": "OB",
"h8": "cc",
"UK": {},
"0t": "Ol",
"VZ": {},
"ZU": {},
"fh": {},
"Ln": {},
"xf": "Y5",
"Um": "Xu",
"DR": {
"t1": "op",
"Zs": {
"Gp": "og",
"ma": false,
"Lz": {
"tP": {
"1b": "hy",
"2D": "vf",
"1n": "Aa",
"mm": {
"TJ": "bC",
"dz": "Op",
"Ge": "jW",
"QR": [],
"q9": {}
},
"gq": {
"48": [],
"Kp": "wS",
"Kk": "jX",
"Uj": "DU",
"Hb": {
"w4": "8S",
"MP": {
"3v": "ao",
"V5": "7m",
"EE": "Vj",
"V9": [],
"rY": {}
},
"w7": {
"EF": "sY",
"8g": "eW",
"ZD": "dW",
"EY": [],
"q0": {}
},
"Cu": {
"Nx": "Id",
"4B": "wD",
"en": "Z5",
"HR": [],
"Pn": {}
},
"dI": {
"1w": "Oz",
"XJ": "rU",
"hj": "Uk",
"0m": [],
"kZ": {}
},
"UI": {
"7H": "99",
"eB": "pc",
"qZ": "5R",
"5Q": [],
"6C": {}
}
}
},
"S1": {
"KQ": "fH",
"VH": "1o",
"J0": "cg",
"tk": [
{
"YJ": "i1",
"qG": "bh",
"hL": "5r",
"Ll": "HE",
"8t": {}
},
{
"18": "cR",
"kU": "uZ",
"Gl": "xf",
"t9": "Tb",
"zJ": {}
}
],
"0g": {
"4A": "VC",
"WJ": {
"Hb": "rK",
"rO": "oD",
"Zg": "EP",
"QG": [],
"DK": {}
},
"LK": {
"Yk": "DF",
"XA": "6E",
"W0": "Ls",
"mW": [
{
"zw": "Lq",
"Nm": "aA",
"tQ": "QL",
"DT": "us",
"1s": {}
}
],
"KD": {}
},
"6w": {
"Bz": "FL",
"ht": "qr",
"Ct": "4d",
"Tj": [],
"6d": {}
},
"uM": {
"vv": "Jj",
"e6": "gO",
"8Z": "T6",
"07": [
{
"mG": "vp",
"Se": "0o",
"O9": "pK",
"Fu": "VD",
"N6": {}
}
],
"NL": {}
},
"b3": {
"h5": "Bh",
"K8": "eQ",
"sl": "eJ",
"dK": [],
"IN": {}
},
"Xp": {
"EV": "mC",
"ou": "Dk",
"nr": "K2",
"tf": [],
"Au": {}
},
"NC": {
"73": {},
"TY": "WI",
"bR": "qF",
"04": "QT",
"FI": []
},
"sw": {
"ju": "kg",
"Ez": "q5",
"R8": "dm",
"4a": [],
"Fm": {}
}
}
},
"7W": {
"Zh": "1w",
"NQ": "a5",
"Si": "5U",
"xt": [
{
"e3": "oU",
"X8": "HC",
"PU": "Ix",
"fM": "E6",
"Mt": {}
},
{
"KC": "q9",
"N3": "RA",
"HU": "RI",
"up": "eC",
"Ff": {}
}
],
"I8": {
"F7": "r3",
"Pb": {
"jq": "ts",
"bZ": "v1",
"Rl": "Aa",
"F6": [],
"jU": {}
},
"Ov": {
"yb": "G4",
"A6": "NJ",
"2d": "JK",
"KN": [
{
"2c": "98",
"ch": "o9",
"v3": "eT",
"I0": "4x",
"MI": {}
}
],
"Hk": {}
},
"D8": {
"Y5": "Gq",
"6Q": "jB",
"EI": "Yi",
"q8": [
{
"JY": "5P",
"V0": "Aj",
"TT": "QB",
"cP": "sH",
"UW": {}
}
],
"1T": {}
}
}
},
"Cy": {
"MH": "7X",
"Jd": "PD",
"Hr": "SO",
"jI": [
{
"52": "J5",
"tk": "Q3",
"yD": "td",
"Z4": {},
"Cq": {
"4i": "SN",
"mV": "BP"
}
},
{
"2A": "QG",
"GI": "k8",
"yw": "zp",
"I9": {},
"iQ": {
"Rp": "QB",
"Hk": "Le"
}
},
{
"PV": "Np",
"5p": "Hb",
"CC": "SG",
"Bp": {},
"c2": {
"cb": "hK",
"Hr": "zy"
}
},
{
"3x": "Tl",
"BN": "n7",
"iy": "np",
"BZ": {},
"yA": {
"Ew": "2n",
"cm": "8B"
}
},
{
"zH": "es",
"G2": "wO",
"ti": "he",
"pK": {},
"q6": {
"HM": "eT",
"eY": "0S"
}
},
{
"Xe": "is",
"k8": "JF",
"je": "o9",
"VX": {},
"tE": {
"g5": "jA",
"Vt": "Bn"
}
},
{
"iE": "o2",
"2D": "tk",
"BU": "Tz",
"Z5": {},
"tq": {
"ec": "kW",
"ii": "OC"
}
},
{
"4Z": "Bh",
"eD": "jR",
"oS": "IW",
"N9": {},
"La": {
"MH": "jB",
"Pc": "cQ"
}
},
{
"E4": "Eq",
"Yj": "ER",
"Se": "yk",
"Gy": "M3",
"FY": {
"RI": "nG",
"Dh": "9g"
}
},
{
"Az": "pQ",
"id": "c3",
"ks": "rY",
"h8": {},
"gq": {
"Xw": "BZ",
"wt": "e4"
}
},
{
"jg": "1x",
"h5": "J8",
"7g": "9y",
"8p": {},
"QP": {
"gr": "Io",
"Iz": "u8"
}
},
{
"9m": "Ja",
"yD": "OL",
"FP": "o3",
"8V": {},
"BH": {
"GB": "AY",
"Gf": "7M"
}
}
],
"ws": {
"rx": "D3",
"4l": {
"L1": "17",
"HY": "fq",
"0I": "sn",
"bs": [],
"1i": {}
},
"bh": {
"hq": "23",
"Gw": "zp",
"on": "aI",
"ox": [
{
"Gk": "nv",
"kT": "IG",
"CV": "JK",
"Yw": {},
"h4": {
"hi": "jU",
"5A": "so"
}
}
],
"bD": {}
},
"wT": {
"75": [
{
"uB": "gd",
"zT": "xq",
"cx": "SG",
"Rg": {},
"tK": {
"wI": "gE",
"rc": "Nz"
}
},
{
"pG": "c4",
"tt": "hm",
"yG": "aD",
"z5": {},
"gT": {
"3Y": "5z",
"A3": "c4"
}
},
{
"9c": "UL",
"lk": "Ba",
"cA": "H7",
"p4": {},
"tp": {
"sc": "Uu",
"Vl": "wJ"
}
},
{
"0g": "hL",
"sL": "82",
"s2": "0i",
"Pi": {},
"bA": {
"D9": "zH",
"M7": "0l"
}
},
{
"xJ": "BU",
"2l": "uy",
"pk": "aB",
"zD": {},
"zc": {
"Qs": "tv",
"2B": "Su"
}
},
{
"rt": "b0",
"h0": "eF",
"ka": "oL",
"SW": {},
"BD": {
"pB": "mc",
"C3": "KU"
}
},
{
"qV": "HJ",
"DX": "Aw",
"mY": "F9",
"d5": {},
"lq": {
"86": "o7",
"M6": "tQ"
}
}
],
"AW": "mE",
"e1": "3C",
"hM": "7O",
"3P": {}
},
"GQ": {
"Nk": "L8",
"ly": "9E",
"xI": "2f",
"rm": [],
"mi": {}
},
"io": {
"t5": "iK",
"Ms": "sc",
"KA": "WX",
"Sm": [],
"5F": {}
},
"iY": {
"M1": "TQ",
"ut": "Uk",
"Bk": "1j",
"8R": [
{
"JF": "oM",
"hl": "vc",
"MO": "tq",
"tk": "pY",
"vM": {
"qQ": "iR",
"wO": "ma"
}
}
],
"hR": {}
},
"kh": {
"1Y": "PF",
"uj": "td",
"jI": "4Q",
"Aj": [
{
"4D": "Wp",
"gE": "33",
"wW": "UW",
"aL": {},
"aG": {
"Ry": "TZ",
"7w": "q2"
}
}
],
"SM": {}
},
"Fj": {
"5y": "WO",
"KZ": "zo",
"Vs": "36",
"PB": [],
"sR": {}
},
"oo": {
"dr": "T0",
"NN": "LN",
"oW": "V4",
"Wh": [
{
"Q0": "g7",
"GK": "ws",
"6s": "g9",
"sd": {},
"8u": {
"h7": "3p",
"TP": "E1"
}
}
],
"ox": {}
},
"QE": {
"98": {},
"WA": "6B",
"Qm": "i1",
"IR": "HY",
"QE": [
{
"S3": "5X",
"ie": "1J",
"5A": "vB",
"sx": {},
"Vb": {
"5e": "Bu",
"f7": "Y5"
}
}
]
}
}
},
"k7": {
"OL": "ev",
"Jo": "Du",
"rx": "vX",
"6Q": [
{
"yG": "3k",
"6K": "Ly",
"oT": "z5",
"B2": {},
"Lk": {
"cI": "xt",
"TS": "nS"
}
},
{
"Ut": "Vv",
"eB": "Vr",
"Bw": "jh",
"lP": {},
"WE": {
"dw": "t2",
"iI": "qX"
}
},
{
"14": "l9",
"1b": "xI",
...
}
Will storing a large object like this in my store impact performance of Vuex itself, regardless of which actions are being dispatched? I thought I might have an expensive operation that was being performed on this large object, which would be causing the slowdown, but that wouldn't explain why empty mutations take so long to complete.
Some things I have tried to address this issue, with no luck:
- Deep Freezing the object before storing it
- Setting strict to false in my store
- Commenting out mutation function bodies to make sure the code inside the mutations is not the problem.
The store performance might be a red herring, and my performance issues might be stemming from something else, unrelated to Vue or Vuex, but I do know that the size of the object directly correlates to the slowness of my app in general. As a related note, my entire app's performance suffers when this object is large; even click handlers take very long periods of time to register. So Vuex might simply be suffering from some outside issue rather than being the root cause.
Do you have any idea what might be causing this slowdown? I feel like it's definitely related to the large object that I'm storing, but need some ideas for where to turn next in my search.
Edit:
After some further digging, I'm seeing the bulk of my performance issues coming from a mouseover event. This recording comes from the Chrome profiler. I started recording, hit a discard button in my UI, and then stopped the recording once my form changes were discarded. I see that the actual function calls that reset my form took around 1 second, but the mouseover event took 8! I don't know how to dig down any further to find out why a mouseover event would take so long.
