Une introduction à quelques détails qui peuvent être optimisés en HTML5

Ce que cet article vous apporte est une introduction à certains détails qui peuvent être optimisés en HTML5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Présentation de quelques détails d'optimisation récemment organisés. Je ne parlerai pas de compression d’image, c’est ce que doit faire l’optimisation. Aujourd'hui, je vais parler des détails de l'optimisation que tout le monde peut cultiver lors de l'écriture de code.

• N'abusez pas du flotteur. N'abusez pas des polices Web.

Float nécessite une grande quantité de calculs lors du rendu, et va sortir du standard et s'effondrer. Nous pouvons utiliser une mise en page flexible à la place. L’introduction des polices Web demande beaucoup d’efforts, il est donc préférable d’en parler au concepteur et pas trop.

• Évitez les paramètres de style redondants en CSS.

La couleur, la police, la hauteur de ligne, etc. peuvent toutes être héritées, donc leurs éléments enfants doivent être écrits à plusieurs reprises s'ils ont les mêmes attributs, en particulier font-family.

• Une méthode complexe qui peut mettre en cache la valeur de retour d'une fonction.

function cached (fn) {
    var cache = Object.create(null);
    return (function cachedFn (str) {
        var hit = cache[str];
        return hit || (cache[str] = fn(str))
    })
};
var fk = function (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
}
var cacheFk = cached(fk)
// 1 step
cacheFk('ui') 
//2 step
cacheFk('ui')

C'est un morceau de code que j'ai trouvé en regardant le code source de vue. Sa fonction est de mettre en cache la valeur d'une fonction complexe et d'éviter les calculs répétés si la. les paramètres sont les mêmes. Mais ce qu'il faut noter ici, c'est que cette fonction de mise en cache s'effectue via des fermetures, il y a donc quelques compromis à faire.

• Réduisez la mise en page autant que possible.

// 触发两次 layout
var newWidth = p.offsetWidth + 50;
p.style.width = newWidth + 'px';
var newHeight = p.offsetHeight + 50;
p.style.height = newHeight + 'px';

// 只触发一次 layout
var newWidth = p.offsetWidth + 50;
var newHeight = p.offsetHeight + 50;
p.style.width = newWidth + 'px';
p.style.height = newHeight + 'px';

Toutes les opérations pouvant déclencher la mise en page seront temporairement mises dans la file d'attente de mise en page. Lorsqu'elle devra être mise à jour, les résultats de toutes les opérations dans toute la file d'attente seront calculés. De cette façon, la mise en page ne peut être effectuée qu'une seule fois pour améliorer les performances.

Les éléments d'animation sont préférables hors AMM et n'affectent pas les autres modules. Ceci est également fait afin de ne pas affecter d'autres éléments.

• la transformation remplace la position.

Pour réaliser certains effets de déplacement CSS, il est préférable d'utiliser la transformation au lieu du positionnement. Quand j'ai commencé, j'ai utilisé position pour créer des cartes d'animation ~~~

• Sélectionnez l'élément dom et utilisez l'identifiant, mais ne définissez pas l'identifiant pour définir le CSS.

Si vous utilisez le sélecteur d'identifiant, n'ajoutez pas d'autres contraintes de classe. Définir trop d'identifiants réduira la réutilisabilité et rendra la maintenance plus difficile, il n'est donc pas recommandé d'utiliser plusieurs identifiants en CSS.

• Lorsque vous utilisez la longueur plusieurs fois, utilisez une variable pour la sauvegarder.

var len = dom.length;
for(var i = 0;i < len;i++){}；

L'avantage est que vous n'avez pas besoin de calculer la longueur du dom à chaque fois que vous faites une boucle.

• requestAnimationFrame remplace setTimeout

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);
//window.requestAnimationFrame(callback);
返回值是一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

requestAnimationFrame est une minuterie qui n'a pas besoin de régler l'heure. Elle s'exécute toutes les 1/60 s. Ceci est basé sur la navigation déterminée par le nombre d'images rafraîchies par le processeur. Mais la compatibilité est un problème si vous l'utilisez, vous devez bien l'écrire.

• Si possible, essayez d'éviter les recherches globales.

//dom = document.querySelector("#id");
function test() {
    dom = document.querySelector("#id");
}

Par exemple, si vous utilisez uniquement dom dans le test, ne le définissez pas globalement, car il sera recherché dans le périmètre interne de la fonction de test lors de l'exécution, ce qui sera plus rapide.

• Ne pas utiliser for in sauf si vous ne connaissez pas la longueur du parcours ou l'objet de parcours Array, temps d'exécution résultant (voir code). Il est donc préférable de ne pas l'utiliser, généralement le déplacement d'objets ne sera pas utilisé en pratique. S'il y a des circonstances particulières lors du déplacement d'objets, vous devez également y prêter attention ! ! ! Les choses traversées ne sont pas elles-mêmes. Je pensais que cela traverserait sa chaîne de prototypes.

    function t1(){        //20ms
        var i = 0;
       for(item in anObj) {
           i++
       }
       if( i === 100000){
           console.log('for in ok')
       }
    }
    function t2(){     //4ms
        var len = anObj.length;
        var i = 0;
        for(var i = 0 ;i < len;i++){
            i++
        }
        if( i === 100000){
            console.log(&#39;for ok&#39;)
        }
    }

Écran squelette

• Il s'agit d'améliorer l'expérience utilisateur, similaire à la version améliorée du chargement. Il existe des solutions de génération automatisée. Vous pouvez y jeter un oeil si vous êtes intéressé.

ios interdit à la page d'identifier les numéros de téléphone mobile. Android interdit la reconnaissance des adresses email.

Tête css bottom js.

<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />

• Tout le monde sait que js bloquera l'analyse de dom et augmentera le temps d'écran blanc. Assurez-vous donc d'être attentif.
  En fait, il existe de nombreux détails d'optimisation, vous devez donc cultiver vos habitudes de codage, accumuler un peu et accumuler lentement, la qualité du code sera certainement différente.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!