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
Teach you how to quickly install Nginx in CentOS7
Table of contents 1. Overview 2. Download the Ngi...
Introduction to the use of MySQL performance stress benchmark tool sysbench
Table of contents 1. Introduction to sysbench #Pr...
How to use module fs file system in Nodejs
Table of contents Overview File Descriptors Synch...
Implementation of mysql8.0.11 data directory migration
The default storage directory of mysql is /var/li...
Comprehensive understanding of line-height and vertical-align
Previous words Line-height, font-size, and vertica...
How to get the contents of .txt file through FileReader in JS
Table of contents JS obtains the .txt file conten...
Comparison of CSS shadow effects: drop-Shadow and box-Shadow
Drop-shadow and box-shadow are both CSS propertie...
Detailed description of ffmpeg Chinese parameters
FFMPEG 3.4.1 version parameter details Usage: ffm...
In-depth analysis of Vue's responsive principle and bidirectional data
Understanding object.defineProperty to achieve re...
How to install mysql via yum on centos7
1. Check whether MySQL is installed yum list inst...
Management of xinetd-based services installed with RPM packages in Linux
Table of contents Preface 1. Startup management b...
The most common mistakes in HTML tag writing
We better start paying attention, because HTML Po...
How to modify the root user password in mysql 8.0.16 winx64 and Linux
Please handle basic operations such as connecting...
Detailed explanation of the differences between js array find, some, filter, and reduce
Distinguish the differences between the filter, f...
HTML Learning Notes--Detailed Explanation of HTML Syntax (Must Read)
1. What is HTML markup language? HTML is a markup...