问题
Context
I have a Vue app, in which I want to display lengthy strings - e.g. contents of large jsons.
When testing it with one of such files my Chrome tab started crashing.
After further investigation I discovered:
- problem occurs only in Chrome - Firefox works fine
- problem occurs only when text is embedded within a Vuetify grid
- problem occurs only when a specific short string is part of the json
Code
Please have a look at https://codesandbox.io/s/damp-frog-70sxh.
In this example app if you choose a file from a hard drive, its raw text will be stored in App's data variable jsonText.
Once you click on "show string", jsonText will be used as a prop for one of the output components: VuetifyTemplate or BasicTemplate. The first one uses Vuetify's grid, the other is just pure HTML. It is possible to select the one to use by commenting/uncommenting certain portion of App.vue's template section.
Then it's just passed to the OutputField component containing a simple div to display the text.
In the /examples folder there are two json files. One contains "text": "IT System Elektroniker " in its first and last objects, the other does not.
In the first file the problematic string is used in the first object only to make it easier to inspect it in dev tools. Only the one at the end of the json has real impact on performance.
Outputs
Under Chrome when VuetifyTemplate is used and json-with-strange-string.json is submitted, after clicking on "Show string" it takes several seconds for the text to render. Once it is rendered, when inspected the string "IT System Elektroniker " contains ­ characters not present in the .json file.
Under Chrome when either BasicTemplate is used or json-without-strange-string.json is used, the text is displayed instantaneously.
Under Firefox, even if VuetifyTemplate and json-with-strange-string.json are used, the text is displayed without delay. Also under inspection text does not contain the ­ characters.
Questions
In the example above the problem manifests itself only by a small delay, but when trying out the original, over 3 mb, .json it completely crashed the Chrome tab.
My hypothesis is that the ­ characters are somehow hidden within that portion of the string and then make Vuetify compontents crash on Chrome due to some bugs in either one's implementation.
I would be very thankful for answers to following questions:
- Is that hypothesis correct
- What can I do to clean any input string (assuming I have no direct control over the files that will be used) so that it doesn't cause problems with Chrome?
来源：https://stackoverflow.com/questions/60362535/shy-inserted-into-string-in-vuetify-crashing-chrome-tab