Контекст
У меня есть приложение Vue, в котором я хочу отображать длинные строки - например, содержимое больших jsons.
При тестировании с одним таких файлов моя вкладка Chrome начала падать.
После дальнейшего изучения я обнаружил:
- проблема возникает только в Chrome - Firefox отлично работает
- проблема возникает только тогда, когда текст внедрен в сетку Vuetify
- проблема возникает только тогда, когда указанная короткая строка c является частью json
Код
Пожалуйста, посмотрите на https://codesandbox.io/s/damp-frog-70sxh.
В этом примере приложения, если вы выбираете файл из жесткий диск, его необработанный текст будет сохранен в переменной данных приложения jsonText.
После того, как вы нажмете «Показать строку», jsonText будет использоваться в качестве опоры для одного из компонентов вывода: VuetifyTemplate или BasicTemplate. Первый использует сетку Vuetify, другой просто HTML. Можно выбрать тот, который будет использоваться, комментируя / раскомментируя определенную часть раздела шаблона приложения. vue.
Затем он просто передается компоненту OutputField, содержащему простой div для отображения текста.
В папке / examples есть два json файла. Один содержит "text": "IT System Elektroniker " в своем первом и последнем объектах, другой нет.
В первом файле строка проблематики c используется в первом объекте только для облегчения проверки его в инструментах разработки. Только тот, что в конце json имеет реальное влияние на производительность.
Выходы
Под Chrome, когда используется VuetifyTemplate и отправлено json-with-strange-string.json, после нажатия на «Показать строку» текст занимает несколько секунд оказывать. После проверки при проверке строка «IT System Elektroniker» содержит ­ символов, которых нет в файле. json.
Под Chrome когда используется BasicTemplate или json-without-strange-string.json, текст отображается мгновенно.
Под Firefox, даже если используются VuetifyTemplate и json-with-strange-string.json, текст отображается без задержки , Также при проверке текст не содержит символов ­.
Вопросы
В приведенном выше примере проблема проявляется только с небольшой задержкой, но при попытке опробовать оригинал, более 3 Мб, json полностью разбился вкладка Chrome.
Моя гипотеза состоит в том, что символы ­ каким-то образом скрыты в этой части строки, а затем делают компоненты Vuetify cra sh на Chrome из-за некоторых ошибок в реализации любого из них.
Я был бы очень благодарен за ответы на следующие вопросы:
- Верна ли эта гипотеза
- Что я могу сделать, чтобы очистить любую входную строку (при условии, что у меня нет прямого контроля над файлы, которые будут использоваться), чтобы не вызывать проблем с Chrome?