[Примечания к чтению] "Высокопроизводительный JavaScript"

дефект

Эта книга была опубликована в 2010 году. В этой книге своевременно рассказывается о производительности. Сейчас на дворе 2018 год. В последние годы разработка интерфейса была быстрой. В книге также есть некоторые материалы, посвященные IE6, 7 и 8. Как всем известно, сейчас они уже не рассматриваются, поэтому неизбежно, что некоторые знания устарели. Некоторые решения сейчас не самые лучшие, например, глава с инструментами.

предисловие

В общем, предложения по оптимизации производительности, данные в этой книге в целом, а также терпеливая практика автора, по-прежнему являются большим источником вдохновения и помогают нам в разработке и оптимизации., потому что многие знания в ней подведены автором через практику, и это накопление опыта, которому нельзя научиться в обычных учебниках. Специально для тех, у кого относительно слабая база js, в ней много очков знаний, хотя она и сейчас очень нужна.

Ниже я обобщу некоторые важные моменты каждой главы и постараюсь извлечь все необходимое..

Эта статья была впервые опубликована в моем личном блоге:obkoro1.com

текст

Глава 1 - Загрузка и выполнение

Функция блокировки js:

Когда браузер выполняет код js, он не может одновременно делать другие вещи. (Поток пользовательского интерфейса и поток js используют один и тот же процесс, поэтому чем дольше выполняется js, тем дольше время отклика веб-страницы.)

местонахождение скрипта

Если сценарий<script>помещать<head>, страница будет ждать, пока все файлы js будут загружены и выполнены, прежде чем начать рендеринг, в процессе загрузки и выполнения этих файлов: будет значительная задержка при доступе к веб-сайту, которая проявляется как: страница пуста.

Улучшения производительности:Рекомендуется, чтобы все<script>Маркируйте как можно больше<body>нижняя часть этикетки, что предпочтительнее отображает страницу и сокращает пустое время страницы.

скрипт компонента.

каждый<script>Первоначальная загрузка тега блокирует отображение страницы. Метод повышения производительности:Уменьшить встроенные скрипты: уменьшить встроенные скрипты<script>Этикетка, напишите код в теге.

Слияние внешних файлов js: HTTP-запросы принесут дополнительную нагрузку на производительность, каштан: загрузка js-файла размером 100 КБ выполняется быстрее, чем загрузка четырех js-файлов по 25 КБ. Найдите сами конкретный метод работы.

Неблокирующий скриптовый подход

атрибут aync тега скрипта:

Атрибут async указывает, что как только скрипт станет доступен, он будет выполняться асинхронно. Атрибут async доступен только для внешних скриптов (только при использовании атрибута src). Если async="async": скрипт выполняется асинхронно относительно остальной части страницы (скрипт будет выполняться по мере продолжения анализа страницы)

атрибут defer тега script:

Файл js загружается при парсинге страницы до тега script, но он не будет выполнен, а DOM будет загружен и выполнен.Разница между этими двумя свойствами заключается во времени выполнения..

Динамический элемент скрипта.

js операция создания дома<script>Тег, настроить тип и атрибуты src сгенерированного тега. Файл начнет загружаться, когда элемент будет добавлен на страницу. ps: Если важен порядок файлов, лучше синтезировать файл по порядку. Затем добавьте его на страницу. Таким образом: всякий раз, когда начинается загрузка. Процесс загрузки и выполнения файла не блокирует другие процессы страницы.

3. Внедрение ajax-скрипта XHR,

Используйте get, чтобы запросить файл, и запрос удался. Затем создайте динамический скрипт и, наконец, добавьте его. Дефект: файл должен снова запросить тот же домен страницы. не могу скачать с cdn

Глава 1. Сводка по загрузке и выполнению:

Поместите файл в подпись тега body,
Комбинируйте сценарии, уменьшайте<script>Этикетка.
Примите неблокирующую загрузку js. Используйте атрибуты defer и async скрипта для асинхронной загрузки. Динамически создавайте теги сценариев и выполняйте код.

Глава 2. Доступ к данным

js четыре основных места доступа к данным. 1. Литералы: строки, числа, логические значения, объекты, массивы, функции, регулярные значения, null, undefined, литералы представляют только себя и не имеют места хранения. 2. Локальные переменные. переменные, объявленные с помощью let var. 3. Элементы массива. 4. Члены объекта.

представление:Доступ к литералам и локальным переменным является самым быстрым, доступ к элементам массива и объектам относительно медленный.

Процесс разрешения идентификатора переменной:

Найдите в цепочке областей действия среды выполнения идентификаторы с тем же именем. Процесс поиска начинается в начале цепочки областей видимости, которая является активным объектом выполняемой в данный момент функции. Если найдено, использовать этот идентификатор, соответствующую переменную, если не найдено, продолжить поиск следующего объекта. Процесс поиска продолжается до тех пор, пока не будет найден идентификатор, и если соответствующий объект не найден, идентификатор считается неопределенным,

Проблемы с производительностью: чем глубже расположен идентификатор, тем медленнее он читается и записывается. Поэтому функции локальных переменных всегда являются самыми быстрыми для чтения и записи, а для чтения и записи глобальных переменных, как правило, самыми медленными.

Рекомендация: храните глобальные переменные в локальных переменных, чтобы ускорить чтение и запись.

Замыкания, прототипы, вложенные объекты.

Предложение по оптимизации: храните часто используемые переменные кросс-области в локальных переменных, а затем обращайтесь к локальным переменным напрямую.. Причина та же, что и выше, процесс разрешения переменных идентификаторов.

Глава 2. Резюме доступа к данным:

Доступ к литералам и локальным переменным является самым быстрым, и наоборот, доступ к элементам массива и членам объекта относительно медленный.
Поскольку локальные переменные существуют в начале цепочки областей видимости, т.Доступ к локальным переменным выполняется быстрее, чем доступ к переменным в разных областях. Тот же принцип применяется к массивам, объектам и перекрестным переменным..
Сохранение часто используемых объектов, массивов и междоменных переменных в локальных переменных может повысить производительность js и ускорить доступ к локальным переменным.

Глава 3. Краткое изложение программирования DOM:

Операции DOM по своей природе медленные, постарайтесь свести к минимуму операции DOM, уменьшить количество визитов в дом.
Используйте document.querySelect для создания селекторов, что быстрее, чем другие методы.
Вам нужно посетить узел dom несколько раз и использовать локальное хранилище переменных.
html, кэшируйте длину коллекции в переменной, а затем просматривайте и используйте эту переменную.Если вы часто манипулируете коллекцией, рекомендуется скопировать ее в массив.
Помните о перерисовке и перекомпоновке браузера; при массовом изменении стилей управляйте деревом DOM «в автономном режиме», используйте кэши и сократите количество обращений к информации о макете. Перерисовка и перекомпоновка — довольно важная концепция оптимизации программирования DOM:Перерисовка и перекомпоновка.
Используйте абсолютные определения в анимации и используйте перетаскивание.
Используйте делегирование событий, чтобы уменьшить количество обработчиков событий.

Глава 4. Алгоритмы и управление процессом. Резюме:

циклы for, while и do-while работают примерно одинаково,скорость цикла for-in составляет всего 1/7 от предыдущих типов, поэтому старайтесь избегать циклов for-in, если только вам не нужно перебирать объект с неизвестным количеством свойств.

forEach медленнее, чем for, и не рекомендуется, если скорость выполнения является строгой.
Лучший способ улучшить производительность циклаУменьшите объем работы на итерацию и сократите количество итераций цикла.

Уменьшите итеративную рабочую нагрузку: уменьшите циклы поиска атрибутов и обратного порядка.Чем больше циклов, тем очевиднее оптимизация производительности.

    for(var i=0;i<items.length;i++){代码}//正序循环
    for(var i=items.length;i--){代码}//倒序循环
    //减少属性查找：查找一次属性，把值存在局部变量，在控制条件里面使用这个变量
    
    倒序循环在i>0的时候会自动转换为true，等于0的时候为false。
    //倒序循环：控制条件从（迭代数少于总数吗？它是否为true？）变为（它是否为true）

Уменьшите количество итераций: метод развертывания тела цикла "Устройство Даффа", если вам интересно, можете посмотреть. Он применим, когда итерационная рабочая нагрузка превышает 1000.

if-else и switch: чем больше количество условий, тем более склонны использовать switch.

Оптимизировать если-иначе:
```
 1、把最可能出现的条件放在首位。2、使用二分法把值域分成一系列的区间。
```
Размер стека вызовов браузера ограничивает применение рекурсивных алгоритмов в js; ошибки переполнения стека могут привести к остановке выполнения другого кода.
```
 小心使用递归，现在es6递归可以尾递归，在es6中只要使用尾递归就不会发生栈溢出，相对节省性能。
```

Глава 5 Строки и регулярные выражения Резюме:

Используйте простые операторы «+» и «+=» при объединении строк.

str+='abc'+'efg;//2个以上的字符串拼接，会产生临时字符串
str=str+'abc'+'efg';//推荐，提速10%~40%

в книгеПринцип регулярности и принцип возврата, это очень важно, найти статьюблог: Это похоже на то, что написано в книге, но я все же рекомендую вам перейти к PDF-файлу и внимательно изучить раздел, посвященный регулярным выражениям.

Способы повышения эффективности регулярных выражений:

 1、最重要的是：具体化正则表达式！具体化正则表达式！具体化正则表达式！
 2、关注如何让匹配更快失败，找出一些必需，特殊的字符
 3、正则表达式以简单的、必需的字元开始。
 4、使用量词模式，使它们后面的字元互斥。
 5、较少分支数量，缩小分支范围
 6、使用合适的量词
 7、把正则表达式赋值给变量并重用
 8、将复杂的正则拆分为简单的片段
 //事实上，书里面讲的方法不止这么几个，而且每一个都有详细的解析 大佬们 还是去看看这一章节吧

Регулярные выражения не всегда являются лучшим решением, когда вы просто ищете литеральные строки или заранее знаете, какая часть строки будет искаться:
```
 使用indexOf()和lastIndexOf()更适合查找特定字符串的位置或者判断它们是否存在
 //例如：判断当前浏览器之类。
```

Глава 6. Быстрый и отзывчивый пользовательский интерфейс. Резюме:

js и обновления пользовательского интерфейса выполняются в одном и том же процессе, поэтому одновременно можно выполнять только одну операцию. Эффективное управление потоками пользовательского интерфейса должно гарантировать, что js не может работать слишком долго, чтобы не влиять на работу пользователя.

Браузеры ограничивают время выполнения js-задач, и это ограничение необходимо для того, чтобы некоторый вредоносный код не смог заблокировать браузер пользователя посредством интенсивных операций, которые никогда не останавливаются. Существует два типа этого ограничения: размер стека вызовов и долго выполняющиеся скрипты.
Ни одна задача js не должна выполняться более 100 мс. Чрезмерное время выполнения может привести к значительным задержкам обновлений пользовательского интерфейса, что отрицательно скажется на удобстве работы пользователей.
Таймеры можно использовать для планирования отложенного выполнения кода, что позволяет разбивать длительные сценарии на ряд более мелких задач.

Глава 7. Резюме AJAX

Эта глава кажется немного старше. .

post лучше для отправки больших объемов данных на сервер.
Запрос на получение может кэшироваться браузером, а информация заголовка Expires определяет, как долго браузер кэширует запрос. Может использоваться для изображений, которые никогда не меняются, или других статических наборов данных (js, css и т. д.)
JSON — это легкий и простой для анализа формат данных, написанный с использованием объектов js и литералов массива, который не только передает небольшой размер, но и быстро анализирует. JSON — это основа высокопроизводительного AJAX, особенно при использовании динамического внедрения скриптов.

json следует использовать в последние годы. . .

Сократите количество запросов, объединив файлы js и css.
Сократите время загрузки страницы.После загрузки основного содержимого страницы используйте AJAX для получения дополнительных файлов.

Глава 8. Краткий обзор практики программирования

Избегайте двойного вычисления: избегайте использования конструкторов eval() и function(), чтобы избежать снижения производительности из-за двойного вычисления.Также вместо строк передавайте функции в качестве аргументов в setTimeout() и setInterval().
```
 //双重求值：就是在js代码中执行另一段js代码，不建议使用下面这些方式
 eval('代码') 
 function构造函数--new function('代码')
 setTimeout(‘代码’,100)和setInterval(‘代码’,100) 
```
По возможности создавайте объекты и массивы, используя литералы. Как создание, так и инициализация литералов быстрее, чем косвенная форма.
Избегайте повторяющейся работы и сохраняйте шаги, которые вы можете сохранить.
js собственные методы всегда будут быстрее, чем любой код, который вы пишете.

Глава 9. Создание и развертывание высокопроизводительных JS-приложений. Резюме

Процесс создания и развертывания оказывает огромное влияние на производительность веб-приложений на основе js. Наиболее важными этапами в этом процессе являются:

Слияние и сжатие файлов JS.Можно использовать сжатие Gzip, что позволяет уменьшить объем примерно на 70%.!

Вся эта работа выполняется в процессе сборки, не ждите, пока среда выполнения сделает это, веб-пакет также является работой, выполняемой в процессе сборки. 2. Кэшируйте файлы js, правильно устанавливая заголовки ответов HTTP, и избегайте проблем с кэшированием, добавляя метки времени к именам файлов. 3. Используйте CDN для предоставления файлов js; CDN не только повышает производительность, но также управляет сжатием и кэшированием файлов.

Обзор инструментов главы 10:

Анализ загруженных из сети ресурсов и анализ производительности скрипта и анализ производительности скрипта позволяет сосредоточиться на тех областях, которые больше всего нуждаются в оптимизации, когда веб-страница тормозит.

Используйте инструменты сетевого анализа, чтобы определить узкие места в загрузке скриптов и других ресурсов на странице, что поможет вам решить, какие скрипты нужно загружать отложенно или какие нуждаются в дополнительном анализе.
```
 检查图片、样式表和脚本的加载过程，以及它们对页面整体加载和渲染的影响。从而针对性的做出优化
```
Загрузка скриптов как можно позже может ускорить отрисовку страницы и повысить удобство работы пользователей.

Убедитесь, что процесс загрузки скриптов и других файлов ресурсов оптимизирован.

 这里主要是说文件从服务器的下载速度，比如服务器那边的配置问题之类的。
 栗子：我就被后端坑过。一个js文件就200k ，下载下来需要50秒钟！
 后面发现原来是后端那边nginx没有开启加速配置什么的，导致出现的问题，找问题找半天。

Чтобы проверить время выполнения сценария, вычтите другой экземпляр Date из одного экземпляра Date, и полученная разница во времени будет временем, затраченным на выполнение сценария.
```
 let start=new Date();
 //你的代码
 let time=newDate()-start;
```
Панели управления основных браузеров, таких как Chrome и Firefox, могут отражать многие проблемы с производительностью.. Тщательный анализ может выявить множество проблем. Например: загрузка ресурсов, точки останова и т. д.

позже

Фактически,Я думаю, что самое ценное в этой книге — это некоторые из упомянутых деталей.,Например:

1. Используйте простые операторы «+» и «+=» при объединении строк.

    str+='abc'+'efg;//2个以上的字符串拼接，会产生临时字符串
    str=str+'abc'+'efg';//推荐，提速10%~40%

2. Избегайте двойного вычисления: избегайте использования конструкторов eval() и function(), чтобы избежать снижения производительности из-за двойного вычисления Аналогично, передавайте функции вместо строк в качестве параметров функциям setTimeout() и setInterval().

    //双重求值：就是在js代码中执行另一段js代码，不建议使用下面这些方式
    eval('代码') 
    function构造函数--new function('代码')
    setTimeout(‘代码’,100)和setInterval(‘代码’,100)

Эти вещи могут дать нам понять, что является лучшей практикой, какой код может работать быстрее, и позволяют нам выработать лучшие привычки разработки.

Книга не слишком толстая, если интересно содержание, то рекомендую купить экземпляр и посмотреть дома.

Выше 2018.1.9