利用JS延迟加载百度分享代码,提高网页速度_javascript技巧
发现很多网站在放置百度分享代码的时候，简单的将分享代码放置到固定的网页位置就完事了，这是非常致命的方式。因为，我经常打开一个网页的时候，发现在网页加载到分享代码的时候，有时候花上几秒的时候来请求百度的服务器，最后展示分享按钮。
其实，像这样对网页来说不是非常重要的功能，我们大可以用JS来延迟加载，从而提高网页主要内容的快速加载显示。
这里分享下我的放置方式。
一、copy百度分享代码，如下：
二、放置代码
认真分析上面的分享代码，我们可以发现，其中有3个js脚本标签，这些都是有可能影响网页呈现速度的，最后发现，其实，只有最后一个<script>标签的作用是请求百度服务器，展示分享图片和链接。那么，这条JS我们大可放到最后加载。<BR><STRONG>下面是我做的一个demo：<BR><div class="codetitle"><span><a style="CURSOR: pointer" data="25629" class="copybut" id="copybut25629" onclick="doCopy('code25629')"><U>复制代码 代码如下:<div class="codebody" id="code25629"><BR><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <BR><html> <BR> <head> <BR> <title>JS延迟加载百度分享代码，提高网页速度 <BR> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <BR> <style type="text/css"> <BR> body{margin:0px;padding:0px;font-size:12px;} <BR> #copyright{clear:both;} <BR> <BR> <br><br> <body> <BR> <div id="baidu-share"> <BR> <!-- Baidu Button BEGIN --><BR> <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare"> <BR> <a class="bds_tsina"> <BR> <a class="bds_qzone"> <BR> <a class="bds_tqq"> <BR> <a class="bds_renren"> <BR> <a class="bds_douban"> <BR> <span class="bds_more"> <BR> <a class="shareCount"> <BR> <BR> <script type="text/javascript" id="bdshare_js" data="type=tools&uid=0" ></script>
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS
Apr 03, 2024 am 11:55 AM
La technologie de détection et de reconnaissance des visages est déjà une technologie relativement mature et largement utilisée. Actuellement, le langage d'application Internet le plus utilisé est JS. La mise en œuvre de la détection et de la reconnaissance faciale sur le front-end Web présente des avantages et des inconvénients par rapport à la reconnaissance faciale back-end. Les avantages incluent la réduction de l'interaction réseau et de la reconnaissance en temps réel, ce qui réduit considérablement le temps d'attente des utilisateurs et améliore l'expérience utilisateur. Les inconvénients sont les suivants : il est limité par la taille du modèle et la précision est également limitée ; Comment utiliser js pour implémenter la détection de visage sur le web ? Afin de mettre en œuvre la reconnaissance faciale sur le Web, vous devez être familier avec les langages et technologies de programmation associés, tels que JavaScript, HTML, CSS, WebRTC, etc. Dans le même temps, vous devez également maîtriser les technologies pertinentes de vision par ordinateur et d’intelligence artificielle. Il convient de noter qu'en raison de la conception du côté Web
Quelle est l'architecture et le principe de fonctionnement de Spring Data JPA ?
Apr 17, 2024 pm 02:48 PM
SpringDataJPA est basé sur l'architecture JPA et interagit avec la base de données via le mappage, l'ORM et la gestion des transactions. Son référentiel fournit des opérations CRUD et les requêtes dérivées simplifient l'accès à la base de données. De plus, il utilise le chargement paresseux pour récupérer les données uniquement lorsque cela est nécessaire, améliorant ainsi les performances.
Quelle est la signification originale des liens dynamiques et des liens statiques sous Linux ?
Feb 05, 2024 pm 05:45 PM
Comme d'habitude, posons quelques questions : Pourquoi les liens dynamiques ? Comment faire des liens dynamiques ? Qu’est-ce que la technologie de code indépendante de l’adresse ? Qu’est-ce que la technologie de liaison retardée ? Comment créer des liens explicites pendant l'exécution du programme ? Pourquoi des liens dynamiques ? L'émergence des liens dynamiques vise à résoudre certains défauts des liens statiques : économie de mémoire et d'espace disque : comme le montre la figure ci-dessous, Program1 et Program2 contiennent deux modules, Program1.o et Program2.o respectivement, et ils nécessitent tous deux la bibliothèque Lib. o module. Dans le cas d'une liaison statique, les deux fichiers cibles utilisent le module Lib.o, ils ont donc des copies dans les fichiers exécutables Program1 et program2 générés par le lien et exécutés en même temps.
Que faire si l'image HTML est trop grande
Apr 05, 2024 pm 12:24 PM
Voici quelques façons d'optimiser les images HTML trop volumineuses : Optimiser la taille du fichier image : Utilisez un outil de compression ou un logiciel de retouche d'image. Utilisez des requêtes multimédias : redimensionnez dynamiquement les images en fonction de l'appareil. Implémentez le chargement différé : chargez l'image uniquement lorsqu'elle entre dans la zone visible. Utilisez un CDN : distribuez des images sur plusieurs serveurs. Utiliser un espace réservé pour l’image : affichez une image d’espace réservé pendant le chargement de l’image. Utiliser des vignettes : affiche une version plus petite de l'image et charge l'image en taille réelle en un clic.
Décoder les goulots d'étranglement des performances de Laravel : les techniques d'optimisation entièrement révélées !
Mar 06, 2024 pm 02:33 PM
Décoder les goulots d'étranglement des performances de Laravel : les techniques d'optimisation entièrement révélées ! Laravel, en tant que framework PHP populaire, offre aux développeurs des fonctions riches et une expérience de développement pratique. Cependant, à mesure que la taille du projet augmente et que le nombre de visites augmente, nous pouvons être confrontés au défi des goulots d'étranglement en matière de performances. Cet article approfondira les techniques d'optimisation des performances de Laravel pour aider les développeurs à découvrir et à résoudre les problèmes de performances potentiels. 1. Optimisation des requêtes de base de données à l'aide du chargement différé d'Eloquent Lorsque vous utilisez Eloquent pour interroger la base de données, évitez
Conseils d'optimisation des performances Java JPA : faites voler votre application
Feb 19, 2024 pm 09:03 PM
Mots-clés de l'article : Optimisation des performances JavaJPA Gestion des entités ORM JavaJPA (JavaPersistance API) est un framework de mappage objet-relationnel (ORM) qui vous permet d'utiliser des objets Java pour exploiter les données dans la base de données. JPA fournit une API unifiée pour interagir avec les bases de données, vous permettant d'utiliser le même code pour accéder à différentes bases de données. De plus, JPA prend également en charge des fonctionnalités telles que le chargement paresseux, la mise en cache et la détection des données sales, qui peuvent améliorer les performances des applications. Cependant, si elles sont mal utilisées, les performances JPA peuvent devenir un goulot d'étranglement pour votre application. Voici quelques problèmes de performances courants : Problème de requête N+1 : lorsque vous utilisez des requêtes JPQL dans votre application, vous pouvez rencontrer des problèmes de requête N+1. Dans ce genre de
Comment Hibernate optimise-t-il les performances des requêtes de base de données ?
Apr 17, 2024 pm 03:00 PM
Les conseils pour optimiser les performances des requêtes Hibernate incluent : l'utilisation du chargement différé pour différer le chargement des collections et des objets associés ; l'utilisation du traitement par lots pour combiner les opérations de mise à jour, de suppression ou d'insertion ; l'utilisation du cache de deuxième niveau pour stocker les objets fréquemment interrogés en mémoire à l'aide de connexions externes HQL ; , récupérer les entités et leurs entités associées ; optimiser les paramètres de requête pour éviter le mode de requête SELECTN+1 ; utiliser des curseurs pour récupérer des données massives en blocs ; utiliser des index pour améliorer les performances de requêtes spécifiques.
Comment empêcher l'événement de chargement d'iframe
Feb 19, 2024 am 08:02 AM
Comment empêcher les événements de chargement d'iframe Dans le développement Web, nous utilisons souvent des balises iframe pour intégrer d'autres pages ou contenus Web. Par défaut, lorsque le navigateur charge une iframe, l'événement de chargement est déclenché. Cependant, dans certains cas, nous pouvons souhaiter retarder le chargement d'une iframe, ou empêcher complètement l'événement de chargement. Dans cet article, nous explorerons comment y parvenir à travers des exemples de code. 1. Retarder le chargement de l'iframe Si vous souhaitez retarder le chargement de l'iframe, nous pouvons utiliser
