Partager des exemples de techniques d'optimisation des performances JS-js tutoriel-php.cn

Partager des exemples de techniques d'optimisation des performances JS

小云云

Libérer： 2018-03-13 15:58:19

original

1327 Les gens l'ont consulté

Le script doit être placé après le code de l'élément de page

Peu importe si le code JavaScript actuel est intégré ou dans un fichier de lien externe, le téléchargement et le rendu du La page doit s'arrêter et attendre la fin de l'exécution du script. Plus le processus d'exécution de JavaScript est long, plus le navigateur attend pour répondre aux entrées de l'utilisateur. La raison pour laquelle les navigateurs bloquent lors du téléchargement et de l'exécution de scripts est que le script peut modifier l'espace de noms de la page ou JavaScript, ce qui affectera le contenu des pages suivantes.

Éviter la recherche globale

    function search() {
        //当我要使用当前页面地址和主机域名
        alert(window.location.href + window.location.host);
    }
    //最好的方式是如下这样  先用一个简单变量保存起来
    function search() {
        var location = window.location;
        alert(location.href + location.host);
    }

Copier après la connexion

Conversion de type

般最好用”" + 1来将数字转换成字符串，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：

Copier après la connexion

("" +) > String() > .toString() > new String() "

"
    var myVar = "3.14159",
    str = "" + myVar, //  to string  
    num=+myVar,       // to number
    i_int = ~ ~myVar,  //  to integer  
    f_float = 1 * myVar,  //  to float  
    b_bool = !!myVar,  /*  to boolean - any string with length 
                            and any number except 0 are true */
    array = [myVar];  //  to array
"

Copier après la connexion

Déclarations de types multiples
en JavaScript Tous les variables in peuvent être déclarées à l'aide d'une seule instruction var, qui est un groupe d'instructions permettant de réduire le temps d'exécution de l'ensemble du script. Tout comme le code ci-dessus, le format de code ci-dessus est également assez standardisé, ce qui le rend clair en un coup d'œil. 🎜 >
Clonez l'élément de modèle au lieu de createElement
Beaucoup de gens aiment utiliser document.write en JavaScript pour générer du contenu pour la page. En fait, c'est moins efficace. vous en avez besoin directement. Pour insérer du HTML, vous pouvez trouver un élément conteneur, tel que spécifier un p ou un span, et définir son innerHTML pour insérer votre propre code HTML dans la page. Habituellement, nous pouvons utiliser des chaînes pour écrire du HTML directement afin de créer des nœuds. En fait, de cette façon, 1 : La validité du code ne peut pas être garantie. 2 : L'efficacité de l'opération de chaîne est faible, donc la méthode document.createElement() doit être utilisée S'il y a des nœuds de modèle prêts à l'emploi dans le document, la méthode cloneNode() doit être utilisée, car la méthode createElement() ), vous devez définir les attributs de l'élément plusieurs fois. L'utilisation de cloneNode() peut réduire le nombre de paramètres d'attribut. De même, si vous devez créer de nombreux éléments, vous devez d'abord préparer un nœud de modèle. 🎜>
Soyez prudent avec les fermetures
```
    var frag = document.createDocumentFragment();
    for (var i = 0; i < 1000; i++) {
        var el = document.createElement(&#39;p&#39;);
        el.innerHTML = i;
        frag.appendChild(el);
    }
    document.body.appendChild(frag);
    //替换为：
    var frag = document.createDocumentFragment();
    var pEl = document.getElementsByTagName(&#39;p&#39;)[0];
    for (var i = 0; i < 1000; i++) {
        var el = pEl.cloneNode(false);
        el.innerHTML = i;
        frag.appendChild(el);
    }
    document.body.appendChild(frag);
```
Copier après la connexion
Cas de fermetures
Combinez les conditions de contrôle et les variables de contrôle lors de la boucle
```
document.getElementById(&#39;foo&#39;).onclick = function(ev) { };
```
Copier après la connexion
Amélioration
```
for ( var x = 0; x < 10; x++ ) {};
```
Copier après la connexion
Éviter la comparaison avec null
```
var x = 9;
do { } while( x-- );
```
Copier après la connexion
Étant donné que JavaScript est faiblement typé, il ne fera aucune saisie automatique Vérifiez, donc si vous voyez du code qui se compare à null, essayez de le remplacer par la technique suivante :
1. Si la valeur doit être un type référence, utilisez l'opérateur instanceof pour vérifier son constructeur 2. Si la valeur doit être un type Basic, utilisez typeof pour vérifier son type 3. Si vous souhaitez que l'objet contienne un nom de méthode spécifique, utilisez l'opérateur typeof pour vous assurer que la méthode avec le nom spécifié existe sur l'objet
Respectez la propriété de l'objet
Parce que JavaScript peut modifier n'importe quel objet à tout moment, remplaçant ainsi le comportement par défaut de manière imprévisible, donc si vous n'êtes pas responsable de la maintenance d'un objet, de ses objets ou de ses méthodes , Alors vous ne devez pas le modifier. Plus précisément :
1. Ne pas ajouter d'attributs aux instances ou aux prototypes 2. Ne pas ajouter de méthodes aux instances ou aux prototypes 3. Ne pas redéfinir les méthodes existantes. Répétez la définition des méthodes que d'autres membres de l'équipe ont implémentées. Ne modifiez jamais les objets qui ne vous appartiennent pas. Vous pouvez créer de nouvelles fonctions pour les objets des manières suivantes : 1. Créez un nouvel objet contenant les fonctions requises et utilisez-le pour interagir. avec des objets associés 2. Créez un type personnalisé, héritez du type qui doit être modifié, puis ajoutez des fonctions supplémentaires au type personnalisé
Utiliser des quantités directes

Raccourcir la détection négative

    var aTest = new Array(); //替换为
    var aTest = [];
    var aTest = new Object; //替换为
    var aTest = {};
    var reg = new RegExp(); //替换为
    var reg = /../;
    //如果要创建具有一些特性的一般对象，也可以使用字面量，如下：
    var oFruit = new O;
    oFruit.color = "red";
    oFruit.name = "apple";
    //前面的代码可用对象字面量来改写成这样：
    var oFruit = { color: "red", name: "apple" };

Copier après la connexion

Lâcher l'objet javascript
随着实例化对象数量的增加，内存消耗会越来越大。所以应当及时释放对对象的引用，让GC能够回收这些内存控件。对象：obj = null 对象属性：delete obj.myproperty 数组item：使用数组的splice方法释放数组中不用的item

巧用||和&&布尔运算符

    function eventHandler(e) {
        if (!e) e = window.event;
    }
    //可以替换为：
    function eventHandler(e) {
        e = e || window.event;
    }
    
    
    
    if (myobj) {
        doSomething(myobj);
    }
    //可以替换为：
    myobj && doSomething(myobj);

Copier après la connexion