Я полагаю, что все знают, что JavaScript-это язык разработки с полным стеком, а JS можно увидеть в браузере, мобильном телефоне и на стороне сервера. Эта статья поделится некоторыми эффективными лучшими практиками JavaScript, чтобы улучшить ваше понимание основных принципов JS и реализации.
Хранилище данных
В компьютерной дисциплине существует классическая проблема, которая достигает оптимальной производительности чтения и записи, изменяя местоположение хранилища данных. В JavaScript местоположение хранилища данных может оказать существенное влияние на производительность кода. Если вы можете создавать объекты с {}, не используйте новый объект. Если вы можете создавать массивы с [], не используйте новый массив. Скорость доступа литералов в JS выше, чем у объектов. Чем глубже переменная находится в цепочке областей, тем дольше практика, необходимая для доступа. Для таких переменных локальные переменные могут быть сохранены с помощью кэша, уменьшая количество доступа к цепочкам объемов, между точечной нотацией (Object.Name) и оператором (объект [имя]) не существует большой разницы. Только сафари будет иметь разницу, и точки всегда быстрее
цикл
В JS есть несколько общих петель:
for (var i = 0; i <10; i ++) {// что-то что-то} для (var prop in objИзлишне сомневаться в том, что первый метод является родным, с самым низким потреблением производительности и самой быстрой скоростью. Второй метод для ин-ин генерирует больше накладных расходов (локальные переменные) каждую итерацию, а его скорость составляет всего 1/7 от первого типа. Третий метод, очевидно, обеспечивает более удобный метод цикла, но его скорость составляет всего 1/8 от обычного цикла. Поэтому вы можете выбрать соответствующий метод цикла в соответствии с ситуацией с проектом.
Делегация мероприятия
Представьте себе, что добавите событие в каждую бирку на странице. Будем ли мы добавить onclick в каждый тег? Эта ситуация может повлиять на производительность, когда на странице есть большое количество элементов, которые должны быть связаны с той же обработкой событий. Каждое обязательное событие увеличивает бремя на странице или во время пробега. Для богатого фронтального применения слишком много привязки будут занимать слишком много памяти на странице с тяжелыми взаимодействиями. Простым и элегантным способом является делегация событий. Это рабочий процесс на основе событий: улавливайте слой за слоем, достичь цели, пузырьком слоя за слоем. Поскольку существует пузырьковый механизм событий, мы можем обрабатывать события, начиная с всех детей, путем связывания событий с внешним слоем.
document.getElementById ('content'). OnClick = function (e) {e = e || window.event; var target = e.target || E.srcelement; // Если это не тег A, я выйду на if (target.nodenmae! === 'a') {return} // Распечатать адрес ссылки a console.log (target.href)}Перекрасить и перестраивать
После того, как браузер загружается HTML, CSS и JS, будут сгенерированы два дерева: дерево DOM и дерево рендеринга. Когда геометрические свойства DOM изменяются, такие как ширина и высота DOM, или цвет, позиция, браузер должен пересчитывать геометрические свойства элемента и восстановить дерево рендеринга. Этот процесс называется перераспределением и перестройкой.
BodyStyle = Document.Body.Syle; Bodystyle.color = красный; BodyStyle.Height = 1000px; Bodystyke.width = 100%;
Изменение трех свойств в приведенном выше методе, браузер будет повторно окрасить три раза. В некоторых случаях сокращение этого повторного прибора может улучшить производительность рендеринга браузера. Рекомендуемый метод заключается в следующем: выполняется только одна операция и выполнены три шага:
BodyStyle = Document.Body.Syle; Bodystyle.csstext 'Цвет: красный; высота: 1000px; ширина: 100%';
Загрузка JavaScript
IE8, Firefox3.5 и Chrome2 позволяют загружать необходимую загрузку файлов JavaScript. Итак, <Script> не блокирует другие загрузки тегов. К сожалению, процесс загрузки JS все равно будет блокировать загрузку других ресурсов, таких как изображения. Хотя последние браузеры улучшают производительность, позволяя параллельно загружать, блокировка сценариев по -прежнему является проблемой. Следовательно, рекомендуется разместить все теги <script> в нижней части тегов <body>, чтобы минимизировать влияние на рендеринг всей страницы и избежать пользователей от пустого пространства
Высокопроизводительное развертывание файлов JS
Поскольку вы уже знаете, что несколько тегов <Script> повлияют на скорость рендеринга страницы, нетрудно понять, что «уменьшение HTTP, необходимое для рендеринга страницы», является классическим правилом для ускорения веб -сайта. Следовательно, объединение всех файлов JS в среде продукта уменьшит количество запросов, тем самым ускоряя рендеринг страницы. В дополнение к объединению файлов JS, мы также можем сжать файлы JS. Сжатие относится к разделению частей файла, которые не связаны с пробежкой. Урезанный контент включает в себя персонажи пробелов и комментарии. Процесс модификации обычно может уменьшить размер файла наполовину. Существуют также некоторые инструменты сжатия, которые уменьшают длину локальных переменных, такие как:
var myname = "foo" + "bar"; // после сжатия он становится var a = "foobar";
Кэш JS -файлы
Кэширование компонентов HTTP может значительно улучшить пользовательский опыт возврата веб -сайта. Веб -сервер использует «Срок действия заголовка ответа http», чтобы сообщить клиенту, как долго следует кэшировать ресурс. Конечно, в Cache также есть свои собственные недостатки: когда приложение обновлено, вам необходимо убедиться, что пользователь загружает последний статический контент. Эта проблема может быть решена путем изменения имени файла статического ресурса. Вы можете увидеть ссылку на браузер Jsapplication-20151123201212.js в среде продукта. Это сохранение нового файла JS в временной метке, тем самым решая проблему не обновления кэша.
Суммировать
Конечно, эффективный JS - это не только эти вещи, которые можно улучшить. Если некоторые потери производительности могут быть уменьшены, мы можем использовать JavaScript для более эффективного развития.