Maison interface Web js tutoriel JS代码优化技巧之通俗版(减少js体积)_javascript技巧

JS代码优化技巧之通俗版(减少js体积)_javascript技巧

May 16, 2016 pm 05:57 PM
代码优化

细读完这篇文章,够你优化大半天的了,关于JS优化方法大都脱离不了这三种方法。

JS代码优化技巧之通俗版

(网页总大小为155.k,而JS就占了100.3K)

是时候优化下JS了

关于JS优化的文章已经很多了,大多技术性很强,像什么变量、字符串、类型,就不做介绍了,也不需要介绍,我也不懂,你知道了也没用。大多数站长都是“拿来主义”,我只需要告诉JS怎么放,删那里就可以了。

现在的网站都加的有统计代码、分享工具、评论列表、相关文章插件等工具,而要实现强大的功能,必须使用JS文件,正是这些JS插件,再增强了网站功能的同时,也给影响了网站速度。

最常用的JS优化办法

通过博客调用JS来看,目前最影响速度的为无觅插件(952ms),拿福能广告(434ms)。如果确实要用可以保留,适当的根据官方教材做做优化,下面卢松松介绍几个最常用的JS优化方法。

方法一:把不重要的JS放在页面最底部

这是最简单,也是效果最好的优化方法,把不重要的JS通通放到页面的最下面body的上面,实现异步加载,也就是等网页都加载完了,最后在加载这些不重要的JS,这样就不影响网页速度了。

如低调与华丽模板中公共的util.js公共文件,默认效果为,浏览网页时会在网页中出现“回顶部、写评论”特效。现在把wumii(无觅插件JS)和jiathis(分享工具JS)统一整合到util.js文件中了。

JS代码优化技巧之通俗版

(不重要的JS都放到页面最底部了)

当然,其他网站也需要这样做:把不重要的JS通通放到页面最底部。

方法二:合并JS文件

合并JS,也就是减少HTTP请求,少给服务器请求一次就加快一点速度,而合并两个原本独立的JS就需要点技术了,但这难不倒我们,告诉大家一个最简单的方法:

不管三七二十一,先把A文件直接粘贴到B文件中,合并后删除网页中的A文件,如果网页运行正常,就OK;如果一些特效失效,那就还原,换C文件合并。总会有两个不冲突的JS文件的。

例如我博客上的百度广告管家,有6个广告位,默认情况是要进行6次HTTP请求的,因为是第三方JS,一次请求最快要花234ms,而6次请求就就需要花2秒,也就是说因为这个广告管家打开网页就要额外增加2秒。

JS代码优化技巧之通俗版

(第二段JS就是把6个请求变成了1个)

按照官方教程把JS合并后,6个广告位的广告请求合并为1次请求,大幅降低js请求次数,有效减少页面渲染被阻塞的情况,提升广告加载速度。

方法三:给JS文件减肥

咱不讨论什么三目运算符、减少对象查找、如何让JS简洁,咱就用“JS减肥工具”。通常这类工具会把JS文件中几百行的代码压缩成一行,使体积变小。推荐工具:http://javascriptcompressor.com/软件版本(容错效果好)

因为空行等问题,有时候使用这类工具会使JS功能失效,而最简单的办法是用Dreamweaver,把压缩后的JS放入DW中,DW会自动提示你那里有误,把错误的地方另起一行,或还原回去即可。

最后再给个网友的现身说法吧:

JS代码优化技巧之通俗版

当你的站点随着时间的推移慢慢地做大的时候,你就会发现很多问题出来的,其中一个就是越来越臃肿庞大,因此运行的速度也就会慢了下来。优化,尽力去优化站点,就变得非常重要了。

这些方法都通俗易懂,希望对大家有用!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
4 Il y a quelques semaines By DDD
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment bien refactoriser le code Java Comment bien refactoriser le code Java Jun 15, 2023 pm 09:17 PM

En tant que l’un des langages de programmation les plus populaires au monde, Java est devenu le langage de choix de nombreuses entreprises et développeurs. Cependant, la refactorisation du code est cruciale pour maintenir la qualité du code et l’efficacité du développement. Le code Java peut devenir de plus en plus difficile à maintenir au fil du temps en raison de sa complexité. Cet article explique comment refactoriser le code Java pour améliorer la qualité et la maintenabilité du code. Comprendre les principes du refactoring Le but du refactoring du code Java est d'améliorer la structure, la lisibilité et la maintenabilité du code, plutôt que de simplement « changer le code ». parce que

Techniques d'optimisation de code dans le traitement PHP à haute concurrence Techniques d'optimisation de code dans le traitement PHP à haute concurrence Aug 11, 2023 pm 12:57 PM

Techniques d'optimisation de code dans le traitement à haute concurrence PHP Avec le développement rapide d'Internet, le traitement à haute concurrence est devenu un problème important dans le développement d'applications Web. Dans le développement PHP, comment optimiser le code pour faire face à un nombre élevé de requêtes simultanées est devenu un problème difficile que les programmeurs doivent résoudre. Cet article présentera quelques techniques d'optimisation de code dans le traitement PHP à haute concurrence et ajoutera des exemples de code pour illustrer. Utilisation raisonnable du cache Pour les situations de concurrence élevée, un accès fréquent à la base de données entraînera une charge système excessive et un accès relativement lent à la base de données. Par conséquent, nous pouvons

Optimisation des performances de Java Spring Boot Security : faites voler votre système Optimisation des performances de Java Spring Boot Security : faites voler votre système Feb 19, 2024 pm 05:27 PM

1. Optimisation du code pour éviter d'utiliser trop d'annotations de sécurité : Dans Controller et Service, essayez de réduire l'utilisation de @PreAuthorize et @PostAuthorize et d'autres annotations. Ces annotations augmenteront le temps d'exécution du code. Optimiser les instructions de requête : lors de l'utilisation de springDataJPA, l'optimisation des instructions de requête peut réduire le temps d'interrogation de la base de données, améliorant ainsi les performances du système. Mise en cache des informations de sécurité : la mise en cache de certaines informations de sécurité couramment utilisées peut réduire le nombre d'accès à la base de données et améliorer la vitesse de réponse du système. 2. Utilisez des index pour l'optimisation de la base de données : la création d'index sur des tables fréquemment interrogées peut améliorer considérablement la vitesse de requête de la base de données. Nettoyer régulièrement les journaux et les tables temporaires : nettoyer régulièrement les journaux et les tables temporaires

Quelles sont les méthodes courantes d'optimisation des performances des programmes ? Quelles sont les méthodes courantes d'optimisation des performances des programmes ? May 09, 2024 am 09:57 AM

Les méthodes d'optimisation des performances du programme comprennent : Optimisation de l'algorithme : choisissez un algorithme avec une complexité temporelle moindre et réduisez les boucles et les instructions conditionnelles. Sélection de structure de données : sélectionnez les structures de données appropriées en fonction des modèles d'accès aux données, telles que les arbres de recherche et les tables de hachage. Optimisation de la mémoire : évitez de créer des objets inutiles, libérez la mémoire qui n'est plus utilisée et utilisez la technologie des pools de mémoire. Optimisation des threads : identifiez les tâches pouvant être parallélisées et optimisez le mécanisme de synchronisation des threads. Optimisation de la base de données : créez des index pour accélérer la récupération des données, optimisez les instructions de requête et utilisez des bases de données en cache ou NoSQL pour améliorer les performances.

Comment refactoriser le code en langage Go Comment refactoriser le code en langage Go Jun 02, 2023 am 08:31 AM

Avec l'approfondissement continu du développement logiciel et l'accumulation continue de code, la refactorisation du code est devenue une partie inévitable du processus de développement logiciel moderne. Il s'agit d'un processus de modification du code établi d'un système pour améliorer sa structure, ses performances, sa lisibilité ou d'autres aspects connexes. Dans cet article, nous explorerons comment effectuer une refactorisation de code en langage Go. Définir les objectifs de refactoring Avant de commencer la refactorisation du code, nous devons définir un objectif de refactoring clair. Nous devons nous poser quelques questions, telles que : quels sont les problèmes avec ce code ? Nous devons reconstruire

Comment refactoriser le code C++ ? Comment refactoriser le code C++ ? Nov 04, 2023 pm 04:40 PM

C++ est un langage de programmation très puissant, flexible et largement utilisé. Cependant, avec le développement continu des projets et la réutilisation relative continue du code, des problèmes tels qu'une diminution de la qualité et de la lisibilité du code se poseront. À l’heure actuelle, le code doit être refactorisé pour obtenir une meilleure qualité de code et une meilleure maintenabilité. Cet article explique comment refactoriser le code C++. Définissez vos objectifs Avant de commencer à refactoriser votre code, vous devez définir ce que vous souhaitez accomplir. Par exemple, vous souhaiterez peut-être améliorer la lisibilité du code, réduire la duplication de code, améliorer les performances du code, etc. aucun

Compétences clés en optimisation de code dans l'optimisation des performances du framework Java Compétences clés en optimisation de code dans l'optimisation des performances du framework Java Jun 03, 2024 pm 01:16 PM

Dans l'optimisation des performances du framework Java, l'optimisation du code est cruciale, notamment : 1. Réduire la création d'objets ; 2. Utiliser des structures de données appropriées ; 3. Éviter de bloquer les E/S ; 4. Optimiser les opérations de chaîne ; En suivant ces conseils, vous pouvez améliorer les performances du framework, par exemple en optimisant les requêtes Hibernate pour réduire le nombre d'appels à la base de données.

Pratique d'optimisation des performances Python : des bases à l'avancée Pratique d'optimisation des performances Python : des bases à l'avancée Feb 20, 2024 pm 12:00 PM

Optimisations de base Utilisez la bonne version de Python : les versions plus récentes de Python sont généralement plus performantes, offrent une meilleure gestion de la mémoire et des optimisations intégrées. Choisissez la bonne bibliothèque : vous pouvez gagner du temps et améliorer les performances en utilisant des bibliothèques spécialement conçues au lieu d'écrire du code à partir de zéro. Réduisez le nombre de boucles : si possible, évitez d’utiliser des boucles imbriquées. L'utilisation de compréhensions de listes et d'expressions génératrices est une alternative plus efficace. L'optimisation de la structure des données choisit le bon conteneur : les listes conviennent à un accès aléatoire, les dictionnaires conviennent aux recherches rapides de valeurs-clés et les tuples conviennent aux données immuables. Utiliser la mémoire pré-alloué : en pré-alloué la taille d'un tableau ou d'une liste, vous pouvez réduire la surcharge liée à l'allocation de mémoire et à la défragmentation. Tirer parti de Numpy et Pandas : pour le calcul scientifique et l'analyse de données, Num

See all articles