Solution to the impact of empty paths on page performance
|
A few days ago, I saw a post shared by Yu Bo on Google Reader - the impact of empty paths on page performance. Indeed, when writing CSS, using background:url(#) will still make an extra request to the page.
However, because we write a lot of CSS, we usually need to use an empty background to solve bugs. The test results show that using background:url(about:blank) is what we want: solving bugs without affecting performance. That's simple, isn't there a solution? Wait, let's do a test. Copy code The code is as follows:<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8" /> <title>empty src</title> <style>body{font-family:courier, 'courier new';}code{background:#f7f7f7;border:1px solid #ddd;padding:0 3px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-size:12px;color:#080;}p{font-size:12px;color:#999;}cite{font-size:14px;color:#c30;}</style> </head> <body> <h3>1. Send a request:</h3> <p>Browser: <code>All</code>, some browsers like <code>Chrome</code>, <code>hash(#)</code> and empty will only request this path</p> <ol> <li><img src="" alt="empty image src"/></li> <li><div style="background:url(#background)">Background images use <code>background:url(#)</code> and also send a request</div></li> <li><img src="#image" alt="image src using hash(#)"></li> <li><img src="http://www.apple.com/favicon.ico" /></li> </ol> <h3>2. Partial sending request:</h3> <p>Browser (very small delay): <code>Safari</code>, <code>Chrome (multiple about:blank will send multiple requests)</code></p> <cite>Use <code>about:blank</code></cite> <ol> <li><img src="about:blank" alt="empty image src"/></li> <li><div style="background:url(about:blank)">hello world</div></li> <li><code><iframe /></code><iframe src="javascript:''" frameborder="0" height="15"></iframe></li> </ol> <h3>2. Do not send a request:</h3> <p>Browser: <code>all</code>, <code>chrome (delay is invalid, equivalent to not sending a request)</code></p> <cite>Use <code>javascript:''</code></cite> <ol> <li><img src="javascript:''" alt="empty image src"/></li> <li><code><script /></code> <script type="text/javascript" src="javascript:''"></script></li> <li><code><iframe /></code><iframe src="javascript:''" frameborder="0" height="15"></iframe></li> </ol> </body> </html> I'm too lazy to take screenshots, so just try it yourself. The browsing results are roughly written on the test page. The final solution was: Feel free to use about:blank instead of empty space or '#', especially in background-image. In img/script/iframe, it is recommended to use javascript:" to solve the problem. Any other better way? Is there any problem with this test result? Feel free to provide and correct it. Thank you. |
<<: MySQL Series 14 MySQL High Availability Implementation
>>: Nginx solves cross-domain issues and embeds third-party pages
Recommend
How to display and format json data on html page
JSON data is displayed and formatted on the HTML ...
Vue ElementUI implements asynchronous loading tree
This article example shares the specific code of ...
Vue integrates Tencent TIM instant messaging
This article mainly introduces how to integrate T...
Apache ab concurrent load stress test implementation method
ab command principle Apache's ab command simu...
Summary of the differences between get and post requests in Vue
The operating environment of this tutorial: Windo...
mysql workbench installation and configuration tutorial under centOS
This article shares the MySQL Workbench installat...
Solution to 1067 when Mysql starts in Windows
I just started working a few days ago and install...
Summary of clipboard.js usage
Table of contents (1) Introduction: (2) The ways ...
Understanding and using React useEffect
Table of contents Avoid repetitive rendering loop...
Analyze Mysql transactions and data consistency processing issues
This article analyzes the consistency processing ...
VPS builds offline download server (post-network disk era)
motivation Due to learning needs, I purchased a v...
Example of asynchronous file upload in html
Copy code The code is as follows: <form action...
Detailed explanation on how to deploy H5 games to nginx server
On the road to self-learning game development, th...
An article to understand Linux disks and disk partitions
Preface All hardware devices in the Linux system ...
MySQL community server 8.0.16 installation and configuration method graphic tutorial under Windows
I have seen a lot of MySQL-related syntax recentl...