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
Calling Baidu Map to obtain longitude and latitude in Vue
In the project, it is necessary to obtain the lat...
Tutorial on setting up scheduled tasks to backup the Oracle database under Linux
1. Check the character set of the database The ch...
Solution to uninstalling Python and yum in CentOs system
Background of the accident: A few days ago, due t...
About Tomcat combined with Atomikos to implement JTA
Recently, the project switched the environment an...
Introduction to JavaScript array deduplication and flattening functions
Table of contents 1. Array flattening (also known...
CSS Reset style reset implementation example
Introduction: All browsers come with default styl...
Specific operations of MYSQL scheduled clearing of backup data
1|0 Background Due to project requirements, each ...
Use of js optional chaining operator
Preface The optional chaining operator (?.) allow...
vmware installation error VMware Workstation failed to start VMware Authorization Service
Background: I want to install a SAP ECC server an...
Velocity.js implements page scrolling switching effect
Today I will introduce a small Javascript animati...
Implementing a simple timer in JavaScript
This article example shares the specific code of ...
Detailed explanation of the solution to duplicate insertion of MySQL primary key and unique key
Table of contents Solution: 1. IGNORE 2. REPLACE ...
Detailed explanation of how Vue components transfer values to each other
Table of contents Overview 1. Parent component pa...
Management of xinetd-based services installed with RPM packages in Linux
Table of contents Preface 1. Startup management b...
Nginx reverse proxy configuration to remove prefix case tutorial
When using nginx as a reverse proxy, you can simp...