Home Web Front-end JS Tutorial Use JS to delay loading Baidu shared code and improve web page speed_javascript skills

Use JS to delay loading Baidu shared code and improve web page speed_javascript skills

May 16, 2016 pm 05:30 PM
js Lazy loading

I found that when many websites place Baidu sharing code, they simply place the sharing code at a fixed web page location and that's it. This is a very fatal method. Because, when I often open a web page, I find that when the web page loads the sharing code, it sometimes takes a few seconds to request Baidu's server and finally display the sharing button.

Actually, functions like this are not very important for web pages. We can use JS to delay loading, thereby improving the fast loading and display of the main content of the web page.
Here I will share my placement method.
1. Copy the code shared by Baidu, as follows:

Copy the code The code is as follows:






< ;a class="bds_renren">









2. Place the code
Carefully analyze the shared code above , we can find that there are three js script tags, which may affect the rendering speed of the web page. Finally, we found that in fact, only the last <script> tag is used to request the Baidu server to display shared images and links. Then, we can load this JS last. <br><strong>The following is a demo I made: <br></strong><div class="codetitle"> <span><a style="CURSOR: pointer" data="25629" class="copybut" id="copybut25629" onclick="doCopy('code25629')"><u>Copy the code</u></a></span> The code is as follows:</div> <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延迟加载百度分享代码,提高网页速度</title> <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>        </style> <br>    </head> <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"></a> <br>            <a class="bds_qzone"></a> <br>            <a class="bds_tqq"></a> <br>            <a class="bds_renren"></a> <br>            <a class="bds_douban"></a> <br>            <span class="bds_more"></span> <br>            <a class="shareCount"></a> <br>            </div> <br>            <script type="text/javascript" id="bdshare_js" data="type=tools&uid=0" ></script>
           
           
       

       

       
   


分析:通过上面的demo,可以发现我只是单纯的将最后一个有src属性的script标签,放到最后动态加载的,并且是在window.onload之后加载。之前加载的都是纯html标签代码,并不会有多影响网页速度。
百度分享代码通过这样调整后就算百度的服务器挂了,也不会影响自己的网页正常显示。

其实,这样的技巧还有很多地方都可以用。想网站统计代码、百度谷歌搜索代码、第三方广告代码等,我们都可以放到网页底部最后来加载,这样即使第三方的服务器宕机,我们自己的机器也不会受到多少影响。
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Recommended: Excellent JS open source face detection and recognition project Recommended: Excellent JS open source face detection and recognition project Apr 03, 2024 am 11:55 AM

Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages ​​and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side

What is the architecture and working principle of Spring Data JPA? What is the architecture and working principle of Spring Data JPA? Apr 17, 2024 pm 02:48 PM

SpringDataJPA is based on the JPA architecture and interacts with the database through mapping, ORM and transaction management. Its repository provides CRUD operations, and derived queries simplify database access. Additionally, it uses lazy loading to only retrieve data when necessary, thus improving performance.

What is the original meaning of dynamic linking and static linking in Linux? What is the original meaning of dynamic linking and static linking in Linux? Feb 05, 2024 pm 05:45 PM

As usual, let’s ask a few questions: Why dynamic linking? How to do dynamic linking? What is address-independent code technology? What is delayed binding technology? How to do explicit linking while the program is running? Why dynamic linking? The emergence of dynamic linking is to solve some shortcomings of static linking: saving memory and disk space: As shown in the figure below, Program1 and Program2 contain two modules, Program1.o and Program2.o respectively, and they both require the Lib.o module. In the case of static linking, both target files use the Lib.o module, so they have copies in the executable files Program1 and program2 output by the link and run at the same time.

What to do if the html image is too large What to do if the html image is too large Apr 05, 2024 pm 12:24 PM

Here are some ways to optimize HTML images that are too large: Optimize image file size: Use a compression tool or image editing software. Use media queries: Dynamically resize images based on device. Implement lazy loading: only load the image when it enters the visible area. Use a CDN: Distribute images to multiple servers. Use image placeholder: Display a placeholder image while the image is loading. Use thumbnails: Displays a smaller version of the image and loads the full-size image on click.

Java JPA performance optimization tips: make your application fly Java JPA performance optimization tips: make your application fly Feb 19, 2024 pm 09:03 PM

Article keywords: JavaJPA performance optimization ORM entity management JavaJPA (JavaPersistance API) is an object-relational mapping (ORM) framework that allows you to use Java objects to operate data in the database. JPA provides a unified API for interacting with databases, allowing you to use the same code to access different databases. In addition, JPA also supports features such as lazy loading, caching, and dirty data detection, which can improve application performance. However, if used incorrectly, JPA performance can become a bottleneck for your application. The following are some common performance problems: N+1 query problem: When you use JPQL queries in your application, you may encounter N+1 query problems. In this kind of

Decoding Laravel performance bottlenecks: Optimization techniques fully revealed! Decoding Laravel performance bottlenecks: Optimization techniques fully revealed! Mar 06, 2024 pm 02:33 PM

Decoding Laravel performance bottlenecks: Optimization techniques fully revealed! Laravel, as a popular PHP framework, provides developers with rich functions and a convenient development experience. However, as the size of the project increases and the number of visits increases, we may face the challenge of performance bottlenecks. This article will delve into Laravel performance optimization techniques to help developers discover and solve potential performance problems. 1. Database query optimization using Eloquent delayed loading When using Eloquent to query the database, avoid

How does Hibernate optimize database query performance? How does Hibernate optimize database query performance? Apr 17, 2024 pm 03:00 PM

Tips for optimizing Hibernate query performance include: using lazy loading to defer loading of collections and associated objects; using batch processing to combine update, delete, or insert operations; using second-level cache to store frequently queried objects in memory; using HQL outer connections , retrieve entities and their related entities; optimize query parameters to avoid SELECTN+1 query mode; use cursors to retrieve massive data in blocks; use indexes to improve the performance of specific queries.

How to prevent iframe loading event How to prevent iframe loading event Feb 19, 2024 am 08:02 AM

How to prevent iframe loading events In web development, we often use iframe tags to embed other web pages or content. By default, when the browser loads an iframe, the loading event is triggered. However, in some cases we may want to delay the loading of an iframe, or prevent the loading event entirely. In this article, we'll explore how to achieve this through code examples. 1. Delay loading of iframe If you want to delay loading of iframe, we can use

See all articles