javascrip{filter}t performance optimization

fanxiaolin84 · Опубліковано 04.12.2017 20:23:14

1. Поважати право власності на об'єкт
 Не додавати атрибути до екземплярів або прототипів;
 Не додавати методи до екземплярів або прототипів;
 Не переосмислюйте методи, які вже існують.
Найкращий спосіб зробити це — ніколи не змінювати об'єкти, які не належать вам. Володіння об'єктом означає, що ви його створили, наприклад, власний тип або об'єктний літерал, який ви створили самі. Масиви та документи очевидно не ваші, вони існують до виконання вашого коду.
2. Уникати глобальних змінних
Створіть максимум глобальну змінну, дозволяючи іншим об'єктам і функціям існувати в ній. Подивіться на наступні приклади:
//两个全局量——避免！！
var name = «Nicholas»;
function sayName(){
alert(name);
}
Цей код містить дві глобальні величини: ім'я змінної та функцію sayName(). Насправді ви можете створити об'єкт, який містить обидва ці елементи, як показано в наступному прикладі:
//一个全局量——推荐
var MyApplication = {
name: “Nicholas”,
sayName: function(){
alert(this.name);
}
};
3. Уникайте порівняння з null
 Якщо значення має бути типом посилання, використовуйте екземпляр оператора для перевірки його конструктора;
 Якщо значення має бути базовим типом, використовуйте typeof для перевірки його типу;
 Якщо ви хочете, щоб об'єкт містив конкретне ім'я методу, використовуйте оператор typeof, щоб переконатися, що метод із зазначеною назвою існує на об'єкті.
(Тут я рекомендую свою групу з навчання та обміну веб-фронтендом: 675498134, незалежно від того, чи ви новачок, чи бог, я запрошую вас приходити, навчатися, спілкуватися і час від часу ділитися сухими товарами, включно з найновішими фронтенд-матеріалами та туторіалами, які я сам підготував, щоб надати вам, а також є технічні експерти, які щодня пояснюють знання фронтенду наживо. Початківці та просунуті друзі можуть навчатися, спілкуватися разом і досягати спільного прогресу. ）
4. Використовуйте константи
Хоча Javascrip{filter}t не має формального поняття констант, він корисний. Ця ідея відокремлення даних від логіки застосунків може змінювати дані без ризику виникнення помилок. Подивіться на наступні приклади:
var Константи = {
INVALID_VALUE_MSG: «Недійсне значення!»,
INVALID_VALUE_URL: "/errors/invalid.php"
};
function validate(value){
if (!значення){
alert(Constants.INVALID_VALUE_MSG);
locatio{filter}n.href = Constants.INVALID_VALUE_URL;
}
}
5. Уникати глобального пошуку
Мабуть, найважливіше для оптимізації продуктивності скриптів — це звертати увагу на глобальні пошуки. Використання глобальних змінних і функцій безумовно дорожче, ніж локальне, оскільки вимагає пошуку в ланцюжку області видимості. Ознайомтеся з наступною функцією:
оновлення функціїUI(){
var imgs = document.getElementsByTagName("img");
для (var i=0, len=imgs.довжина; Я < Лен; i++){
imgs[i].title = document.title + "зображення" + i;
}
var msg = document.getElementById("msg");
msg.innerHTML = "Оновлення завершено.";
}
Функція може виглядати цілком нормально, але містить три посилання на глобальний об'єкт документа. Якщо на сторінці кілька зображень, посилання на документ у фазі для виконуватиметься кілька разів або навіть сотні разів, кожного разу буде виконано пошук ланцюжка обсягу. Створивши локальну змінну, що вказує на об'єкт документа, можна покращити продуктивність цієї функції, обмеживши глобальний пошук один раз:
оновлення функціїUI(){
var doc = документ;
var imgs = doc.getElementsByTagName("img");
для (var i=0, len=imgs.довжина; Я < Лен; i++){
imgs[i].title = doc.title + «зображення» + i;
}
var msg = doc.getElementById("msg");
msg.innerHTML = "Оновлення завершено.";
Тут спочатку помістіть об'єкт документа у локальну змінну doc; Потім замініть оригінальний документ на решту коду. Порівняно з оригінальною версією, поточна функція має лише один глобальний пошук, що однозначно швидше.
6. Інші заходи безпеки для продуктивності
 Рідні методи швидші — Якщо можливо, використовуйте нативний метод замість того, щоб самостійно переписувати його з Javascrip{filter}t. Рідний метод написаний компільованою мовою, такою як C/C++, тому він значно швидший за Javascrip{filter}t. Найбільш забутим у Javascrip{filter}t є складна математика, яку можна знайти в об'єктах Math; Ці методи значно швидші за будь-які інші, написані на Javascrip{filter}t, такі як синус і косинус.
 Оператори Switch швидші — якщо у вас є серія складних if-else операторів, ви можете отримати швидший код, конвертувавши їх у один оператор switch. Ви також можете додатково уточнити оператор switch, організувавши кейс у порядку від найбільш ймовірного до найменш ймовірного.
 Бітові оператори швидші — При виконанні математичних операцій бітові операції швидші за будь-які булеві або арифметичні операції. Вибіркова заміна арифметичних операцій бітовими операціями може значно покращити продуктивність складних обчислень. Логіку, таку як модуль, логіка та логіка суми, можна вважати заміненою бітовими операціями.

QWERTYU · Опубліковано 05.12.2017 09:33:13

Навчився

[JavaScript] javascrip{filter}t performance optimization

Забити

Переглянуті розділи