Предисловие, почему оптимизация производительности так важна для инженеров фронт.
В отрасли есть поговорка, о которой я не знаю, если вы слышали, «люди, которые знают оптимизацию производительности и изучали исходный код jQuery, и код, написанный без оптимизации производительности, будут иметь разницу в повышении производительности сотни или даже тысячи раз». Сегодняшний JavaScript - это переходный процесс от ECMASCRICT3 до ECMASCRICT5 и ECMASCRICT6. Когда JavaScript не очень хорошо написан, метод кода не написан должным образом, и вызванные проблемы нельзя игнорировать.
Оптимизация производительности
Ниже я поделюсь с вами некоторыми из своих пониманий об оптимизации производительности;
1. Эльф -картинка
Самое основное, что можно сделать как можно больше фоновых изображений в эльфах, чтобы уменьшить запросы на картинки, поэтому еще один базовый инстинкт для общих веб -инженеров - это создание эльфов.
2. Оптимизация селектора CSS
В CSS попробуйте использовать детский селектор>, использовать меньший селектор потомков. При использовании селектора потомков поисковая система будет искать все элементы потомков. Если мы используем детский селектор, мы можем сузить диапазон поиска, тем самым уменьшая потребление производительности поисковой системы.
3.JS Измените стиль и напрямую управляйте названием класса
При использовании стилей элементов JS не используйте стиль, чтобы напрямую добавлять стили. Как правило, будет меньше атрибутов, и производительность не будет затронута. На самом деле, это не так. Каждый раз, когда будет добавлен стиль, страница будет перерисована один раз. На перекрашение необходимо для обращения внимания. При эксплуатации стилей непосредственно манипулирование именем класса вызовет перераспределение только один раз. Добавление стиля напрямую со стилем вызовет многократные перерывы.
4.JS непосредственно управляет узлами DOM
При эксплуатации узлов постарайтесь добавить узлы за элементом. Если вставлен перед узлом, все узлы после вставленного узла будут вызывать отрабатывание. При вставке сзади, только вставленный узел должен быть обработан один раз.
Некоторые люди могут не понимать концепцию перерисования и рефоу
5. Регулярный селектор матчей
В CSS3 и jQuery некоторые из этих селекторов совпадают с использованием обычных методов и стараются не использовать их. Конечно, если оптимизация производительности не учитывается, эти методы относительно просты в использовании. Регулярные подходящие селекторы заставляют поисковые системы поиск всех тегов, что значительно влияет на производительность
6.JS Получите оптимизацию элементов
При получении элементов в JS нормально использовать Document.GetElementsByID. Поисковая система будет искать в нижней части дерева DOM до тех пор, пока она не будет искать документ в окне, а затем снова искать. Следовательно, лучше всего хранить документ. Тело при получении элементов. При их использовании снова, просто выньте эту переменную для использования, что может сохранить производительность поисковой системы
7. Переполнение памяти
Как правило, при запуске переполнения памяти произойдет переполнение памяти, что приведет к значительному снижению производительности при запуске. После запуска память будет переработана система. Следовательно, при запуске рекурсивного необходимо сохранить значение с помощью объекта, обнаруживать его каждый раз, когда рекурсивная работа, возвращайте его напрямую и добавлять его, если его не существует. Это может решить отличную производительность рекурсивного.
8. Используйте запросы GET для AJAX
Запрос публикации достигается путем сначала отправки заголовков HTTP -запроса, а затем отправки данных. GET не имеет заголовка запроса, но следует отметить , что ограничение по размеру GET составляет около 4K, в то время как POST не имеет предела.
9. Задержка загрузки изображений
Когда страница инициирует запрос, количество запросов слишком велико, поэтому изображение может быть лень загружать. Когда страница прокручивается в местоположение изображения, изображение будет загружено.
Вот плагин для ленивой загрузки изображений
jquery.lazyload.js
10. Избегайте пустого атрибута изображения SRC
Изображения с атрибутами SRC , которые являются пустыми строками, являются обычными, в основном появляются в двух формах:
<img src = ”">
var img = new image (); img.src = "";
Обе формы вызывают одну и ту же проблему: браузер отправляет другой запрос на сервер.
Навык
1. Эксклюзивная мысль
Сначала исключите все текущие, а затем выполните следующую операцию; Обычно при выполнении анимации, добавлении стилей и т. Д. Сначала проясните предыдущие стили во время вторичной работы, а затем добавляйте новые стили, чтобы одновременно избегать конфликтов в анимации.
2. Работа короткого замыкания (||)
Как правило, когда необходимо судить о ценности, существует ли оно, старайтесь не использовать, если операторы. Вы можете использовать операторы короткого замыкания для сохранения памяти, занятой кодом. например:
a = a || b;
Если существует, используйте; Если A не существует, используйте b.
3. Операция (&&)
Его можно использовать при совпадении, чтобы сделать ненужный запрос условий, например, при определении того, является ли объект массивом,
a && a.length && a.length> = 0
4. псевдо-арап и массив
Когда вам нужно инкапсулировать элемент без ареста и превратить его в массив, самый простой способ-добавить к нему []. Если это должно быть псевдо-арайром, вы можете установить атрибут длины.
5. Дроссельный клапан
Обычно используется в анимации, установите значение, установите его на True в начале, определите его значение, назначьте это значение false при входе в анимацию и используйте функцию обратного вызова, чтобы переназначить его в True в конце анимации.
6. Разблокируйте статус пассивного выбора текста (чистые сухие товары)
При нажатии на некоторые кнопки иногда выбирается текст, что заставляет клиента видеть его как ошибку. Ниже приведен код для удаления этого состояния и просто вставьте его.
if (document.all) {document.OnselectStart = function () {return false}; // для IE} else {document.onmouseDown = function () {return false}; document.onmouseup = function () {return true}; } document.OnselectStart = new Function ('event.returnValue = false');7. умно использовать тройной оператор
Когда необходимо определить, существует ли значение, вы также можете использовать тройной оператор, чтобы сделать код более оптимизированным. например
obj = obj === не определен? Объект: OBJ;
Пополнить:
Выше приведено оптимизация фронта и некоторые советы, которые я суммировал на работе. Если у вас есть какие -либо хорошие оптимизации и методы, я надеюсь, что вы сможете прокомментировать больше. Я лично думаю, что технология требует большего общения, чтобы добиться большего прогресса.