Сложность: легко
предисловие
Нам часто нужно оптимизировать производительность при разработке интерфейсных веб-страниц.Обычные решения по оптимизации в основном сосредоточены на сетевом уровне, например, добавление кэша CDN, объединение сетевых запросов, сжатие кода, предварительная выборка и предварительная загрузка ресурсов и т. д. быть немного бессильным, особенно когда преобладает фреймворк виртуального дома, пакет фреймворка реакции достигает 100+ КБ, не говоря уже о сложном и длинном бизнес-коде! Но открыть веб-страницу за считанные секунды — это конечная цель каждого фронтендера.Когда все оптимизации на уровне сети и на уровне структуры почти сделаны, остальное — оптимизация кода! И это бой лицом к лицу! Это требует много усилий!
Сегодня я хочу кратко сравнить размер вывода кода между ES5 и ES6 на уровне языка программирования!
ES5 vs ES6
функциональное наследование
Наследование функций написано в синтаксисе ES6 с меньшим соглашением, чем ES5.75%Конечно, если метод наследования абстрагировать и использовать повторно, ES5 будет иметь на десятки строк больше, чем ES6 по абсолютной величине.В реальном программировании эта часть будет обрабатываться фреймворком или Babel, но нам нужно понимать.
слияние объектов
Слияние объектов сокращает количество строк кода примерно на50%!
эта привязка
В JS определить эту привязку непросто. Мы пережили эру замыканий, эру привязки (собственно замыканий) и эру стрелочных функций. В последнем синтаксисе, хотя он и очень абстрактный, мой Это понял, что стрелочная функция по сути является синтаксическим упрощением метода привязки, но это не является предметом этой статьи.Мы знаем, что вызовы функций очень часты в js, хотя из приведенного выше примера уменьшено всего несколько байтов, но в наш бизнес-код, сокращение объема кода, вызванное этим упрощением, будет очень значительным.
асинхронная функция
В ES6 появление async/await значительно упрощает объем кода в нашем асинхронном программировании, здесь он только преобразуется в написание промисов, а при реальном использовании (развертывании в среду ES5) промисы нужно загружать.polyfill, количество сохраненных байтов составляет не менее 4 КБ.
Есть еще много сравнений кода ES6 и ES5, здесь перечислены только некоторые из них.Приведенный выше пример кода см.Github.
По сути, важной движущей силой развития языка JS является то, что код нужно писать все более и более упорядоченным, потому что он по своей сути зависит от передачи по сети, а в мире Интернета каждый байт — это деньги!
дальше
ES6 обеспечивает большое удобство для программирования интерфейсных программистов, но запуск ES6 на пользовательском терминале — это окончательная победа.Вот экспериментальный обзор двух блоггеров по развертыванию ES6, который очень хорошо написан и заслуживает изучения:
Рекомендуемая статья относительно длинная, я буду использовать экспериментальные данные в ней, чтобы показать ES6.威力, чтобы у вас было интуитивное ощущение, ниже приведено сравнение размера файла js и времени выполнения для одного и того же сайта:
| Версия | размер файла | время исполнения | ||
|---|---|---|---|---|
| компилировать | компрессия | Gzip-сжатие | Измерения | Средняя стоимость |
| ES2015+ | 80K | 21K | 184 мс, 164 мс, 166 мс | 172ms |
| ES5 | 175K | 43K | 389 мс, 351 мс, 360 мс | 367ms |
Из приведенного сравнения нетрудно увидеть, чтоES6无论在代码传输大小以及执行时间都明显优于ES5.
Суммировать
ES6 — это не только синтаксический сахар ES5, но и идеальное решение для оптимизации производительности интерфейса.Экономия места в коде может ускорить работу программы, а программисты/женщины могут сэкономить время и поговорить о жизни и идеалах!
ES6 стоит иметь!
Ссылаться на
Смотреть Kaxiu.GitHub.IO/com pat-Он изначально был…