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
A brief analysis of Docker private image library and Alibaba Cloud object storage OSS
Docker private image library Docker private image...
Mysql transaction isolation level principle example analysis
introduction You must have encountered this in an...
In-depth analysis of MySQL database transactions and locks
Table of contents 1. Basic Concepts ACID 3.AutoCo...
WeChat applet realizes the function of uploading pictures
This article example shares the specific code for...
Detailed explanation of how to use Vue self-nested tree components
This article shares with you how to use the Vue s...
Implementation steps for building a local web server on Centos8
1 Overview System centos8, use httpd to build a l...
WeChat applet scroll-view realizes left-right linkage effect
WeChat applet uses scroll-view to achieve left-ri...
SSH port forwarding to achieve intranet penetration
The machines in our LAN can access the external n...
MySQL cross-database transaction XA operation example
This article uses an example to describe the MySQ...
Apache Bench stress testing tool implementation principle and usage analysis
1: Throughput (Requests per second) A quantitativ...
A complete tutorial on installing Ubuntu 20.04 using VMware virtual machine
Ubuntu is a relatively popular Linux desktop syst...
MySQL 5.7.17 winx64 free installation version configuration method graphic tutorial
Recent experience in installing mysql5.7.17 free ...
Example code for setting hot links and coordinate values for web images
Sometimes you need to set several areas on a pict...
Web interview Vue custom components and calling methods
Import: Due to project requirements, we will enca...